內容簡介
透過 WP Customizer 的核心功能，輕鬆快速地添加您自己的客製化 LESS/CSS/JAVASCRIPT 代碼和外部資源（樣式表和腳本）至您的網站中。如果您使用這個外掛，甚至不需要建立子佈景主題或在您的目前佈景主題中建立任何其他檔案。只需添加您的 javascript、LESS/CSS 代碼即可，一切都會自動儲存在一個已編譯的 CSS 檔案和 JavaScript 檔案中。
影片（如何運作？）
功能
添加客製化 LESS/CSS 至您的網站。
無限制的外部樣式表（彈出視窗）。
客製化 JavaScript 代碼。
無限制的外部腳本（彈出視窗）。
JavaScript 位置（head 或 footer）（能夠選擇放置 JavaScript 自訂代碼和外部 JS 腳本的位置）
在 <head> 標籤中添加客製化 HTML 代碼。
在開啟的 <body> 標籤後立即添加客製化 HTML 代碼。
在結束的 </body> 標籤前添加客製化 HTML 代碼。
專業版功能
最小化 CSS 代碼（您可以從設定中選擇是否在 LESS/CSS 編譯之後有最小化的 CSS 代碼）
最大化編輯器（您可以在最大化的彈出視窗中打開每個代碼編輯器）
LESS 是什麼？
這裡是編寫 LESS/CSS 代碼的範例。
完整的文件和 less 語法在官方網站 lesscss.org
LESS 代碼：
@global_color: #FF0000;
@global_font_size: 14px;
@secondary_color: #CCC;
body {
color: @global_color;
font-size: @global_font_size;
}
.container {
color: @secondary_color;
font-size: @global_font_size * 2;
}
輸出至 CSS 的代碼：
body {
color: #FF0000;
font-size: 14px;
}
.container {
color: #CCC;
font-size: 24px;
}
示範
試用示範
使用者名稱：demo
密碼：demo
外掛標籤
開發者團隊
② 後台搜尋「Easy Custom Code (LESS/CSS/JS) – Live Editing」→ 直接安裝（推薦）
原文外掛簡介
The Easy Custom Code WordPress Plugin easily customize your WordPress website by adding your own LESS, CSS, and JavaScript code directly via the built-in WP Customizer. With this plugin, there’s no need for a child theme or additional files. Simply insert your custom code, and it will be compiled into a minified CSS file for styles and a JavaScript file for scripts.
This lightweight plugin is designed for ease of use, providing a seamless and organized way to manage custom styling and scripts without affecting core theme files.
VIDEO (How it works?)
FEATURES
Easily add custom LESS, CSS, and JavaScript to your site.
Manage unlimited external stylesheets and scripts via a modal window.
Control JavaScript placement (head or footer) for optimized performance.
Insert custom HTML in key areas:
Inside the
tag.Immediately after the opening tag.
Before the closing tag.
PRO FEATURES
Minified CSS Output – Option to enable automatic minification of compiled CSS.
Full-Screen Editor – Maximize the code editor for a distraction-free coding experience.
What is LESS?
LESS is a CSS preprocessor that allows for variables, nested rules, mixins, and more, making your stylesheets more efficient and maintainable.
LESS code:
@global_color: #FF0000;
@global_font_size: 14px;
@secondary_color: #CCC;
body {
color: @global_color;
font-size: @global_font_size;
}
.container {
color: @secondary_color;
font-size: @global_font_size * 2;
}
Outputs the following CSS:
body {
color: #FF0000;
font-size: 14px;
}
.container {
color: #CCC;
font-size: 24px;
}
For full LESS documentation, visit lesscss.org.
Demo
Try Demo
Username: demo
Password: demo
