創建主題時，您可能需要創建其他樣式表或JavaScript文件。 但是，請記住，WordPress網站不會僅僅使您的主題成為活動，它也將使用許多不同的插件。 所以一切工作和諧，重要的是主題和插件使用標準的WordPress方法加載腳本和樣式表。 這將確保網站保持高效，并且沒有不兼容的問題。 向WordPress添加腳本和樣式是一個相當簡單的過程。 本質上，您將創建一個將排列所有腳本和樣式的函數。 當插入腳本或樣式表時，WordPress會創建一個句柄和路徑來查找您的文件及其可能具有的任何依賴關系（如jQuery），然后您將使用一個將插入腳本和樣式表的鉤子。 ## 啟動腳本和樣式 為主題添加腳本和樣式的正確方法是將它們排入functions.php文件。 所有主題都需要style.css文件，但可能需要添加其他文件來擴展主題的功能。 >[warning] 提示：WordPress包含許多JavaScript文件作為軟件包的一部分，包括常用的庫，如jQuery。 在添加您自己的JavaScript之前，請檢查是否可以使用附帶的庫。 基本情況是： 使用wp_enqueue_script()或wp_enqueue_style()來排隊腳本或樣式 ## 樣式 您的CSS樣式表用于自定義您的主題的演示文稿。 樣式表也是存儲有關您的主題信息的文件。 因此，每個主題都需要style.css文件。 而是將樣式表加載到header.php文件中，您應該使用wp_enqueue_style加載樣式表。 為了加載主體樣式表，可以在functions.php中排隊 排入style.css ``` wp_enqueue_style( 'style', get_stylesheet_uri() ); ``` 這將查找名為“style”的樣式表并加載它。 排列風格的基本功能是： ``` wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ``` 您可以包括以下參數： - $handle只是樣式表的名稱。 - $src是它所在的位置。 其余的參數是可選的。 - $deps是指這個樣式表是否依賴于另一個樣式表。 如果設置了此樣式表，則不會加載此樣式表，除非首先加載其依賴樣式表。 - $ver設置版本號。 - $media可以指定加載此樣式表的媒體類型，例如“全部”，“屏幕”，“打印”或“掌上電腦”。 因此，如果要在主題根目錄中的名為“CSS”的文件夾中加載名為“slider.css”的樣式表，你會使用： ``` wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all'); ``` ## 腳本 應該使用wp_enqueue_script加載主題所需的任何其他JavaScript文件。 這樣可確保適當的加載和緩存，并允許使用條件標簽來定位特定的頁面。 這些是可選的。 wp_enqueue_script使用與wp_enqueue_style類似的語法。 排列你的腳本： ``` wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer); ``` - $handle是腳本的名稱。 - $src定義腳本所在的位置。 - $deps是一個數組，可以處理您的新腳本依賴的任何腳本，如jQuery。 - $ver可以列出版本號。 - $in_footer是一個布爾參數（true / false），允許您將腳本放置在HTML文檔的頁腳中，而不是標題中，以免延遲加載DOM樹。 您的排隊功能可能如下所示： ``` wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true); ``` ## 評論回復腳本 WordPress的評論在他們的開箱即用功能，包括線程評論和增強的注釋表單。 為了使注釋正常工作，它們需要一些JavaScript。 但是，由于需要在此JavaScript中定義某些選項，所以應將注釋回復腳本添加到使用注釋的每個主題上。 包含評論回復的正確方法是使用條件標簽來檢查某些條件是否存在，以便腳本不會被不必要地加載。 例如，您只能使用is_singular在單個帖子頁面上加載腳本，并檢查以確保用戶選擇“啟用線程注釋”。 所以你可以設置一個函數，如： ``` if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } ``` 如果用戶啟用了注釋，并且我們在一個帖子頁面上，則會加載評論回復腳本。 否則，不會。 ## 組合入隊函數 最好將所有入隊的腳本和樣式組合成一個單一的函數，然后使用wp_enqueue_scripts操作調用它們。 該功能和操作應位于初始設置下方（執行上述）。 ``` function add_theme_scripts() { wp_enqueue_style( 'style', get_stylesheet_uri() ); wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all'); wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true); if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } } add_action( 'wp_enqueue_scripts', 'add_theme_scripts' ); ``` ## WordPress包含并注冊的默認腳本 默認情況下，WordPress包括Web開發人員通常使用的許多流行腳本，以及WordPress本身使用的腳本。 其中一些列在下表中： |腳本名稱|處理|需要依賴*| |---|---|---| |Image Cropper| Image cropper (not used in core, see jcrop)|| |Jcrop |jcrop|| |SWFObject| swfobject|| |SWFUpload| swfupload|| |SWFUpload Degrade |swfupload-degrade|| |SWFUpload Queue |swfupload-queue|| |SWFUpload Handlers |swfupload-handlers|| |jQuery |jquery |json2 (for AJAX calls)| |jQuery Form| jquery-form |jquery| |jQuery Color |jquery-color |jquery| |jQuery Masonry| jquery-masonry |jquery| |jQuery UI Core |jquery-ui-core |jquery| |jQuery UI Widget |jquery-ui-widget |jquery| |jQuery UI Mouse |jquery-ui-mouse| jquery| |jQuery UI Accordion |jquery-ui-accordion |jquery| |jQuery UI Autocomplete |jquery-ui-autocomplete |jquery| |jQuery UI Slider |jquery-ui-slider |jquery| |jQuery UI Progressbar| jquery-ui-progressbar |jquery| |jQuery UI Tabs |jquery-ui-tabs |jquery| |jQuery UI Sortable |jquery-ui-sortable |jquery| |jQuery UI Draggable |jquery-ui-draggable| jquery| |jQuery UI Droppable |jquery-ui-droppable| jquery| |jQuery UI Selectable |jquery-ui-selectable |jquery| |jQuery UI Position |jquery-ui-position |jquery| |jQuery UI Datepicker |jquery-ui-datepicker| jquery| |jQuery UI Tooltips| jquery-ui-tooltip |jquery| |jQuery UI Resizable |jquery-ui-resizable |jquery| |jQuery UI Dialog |jquery-ui-dialog |jquery| |jQuery UI Button |jquery-ui-button |jquery| |jQuery UI Effects |jquery-effects-core| jquery| |jQuery UI Effects – Blind |jquery-effects-blind| jquery-effects-core| |jQuery UI Effects – Bounce |jquery-effects-bounce |jquery-effects-core| |jQuery UI Effects – Clip |jquery-effects-clip |jquery-effects-core| |jQuery UI Effects – Drop |jquery-effects-drop |jquery-effects-core| |jQuery UI Effects – Explode |jquery-effects-explode |jquery-effects-core| |jQuery UI Effects – Fade |jquery-effects-fade| jquery-effects-core| |jQuery UI Effects – Fold |jquery-effects-fold |jquery-effects-core| |jQuery UI Effects – Highlight |jquery-effects-highlight |jquery-effects-core| |jQuery UI Effects – Pulsate |jquery-effects-pulsate |jquery-effects-core| |jQuery UI Effects – Scale |jquery-effects-scale |jquery-effects-core| |jQuery UI Effects – Shake |jquery-effects-shake |jquery-effects-core| |jQuery UI Effects – Slide |jquery-effects-slide |jquery-effects-core| |jQuery UI Effects – Transfer |jquery-effects-transfer| jquery-effects-core| |MediaElement.js (WP 3.6+) |wp-mediaelement |jquery| |jQuery Schedule |schedule |jquery| |jQuery Suggest |suggest|jquery| |ThickBox |thickbox|| |jQuery HoverIntent |hoverIntent| jquery| |jQuery Hotkeys| jquery-hotkeys |jquery| |Simple AJAX Code-Kit |sack|| |QuickTags| quicktags|| |Iris (Colour picker) |iris |jquery| |Farbtastic (deprecated) |farbtastic| jquery| |ColorPicker (deprecated) |colorpicker |jquery| |Tiny MCE| tiny_mce|| |Autosave |autosave|| |WordPress AJAX Response |wp-ajax-response|| |List Manipulation |wp-lists|| |WP Common |common|| |WP Editor |editorremov|| |WP Editor Functions |editor-functions|| |AJAX Cat |ajaxcat|| |Admin Categories |admin-categories|| |Admin Tags |admin-tags|| |Admin custom fields |admin-custom-fields|| |Password Strength Meter |password-strength-meter|| |Admin Comments |admin-comments|| |Admin Users |admin-users|| |Admin Forms |admin-forms|| |XFN |xfn|| |Upload |upload|| |PostBox |postbox|| |Slug |slug|| |Post |post|| |Page |page|| |Link |link|| |Comment |comment|| |Threaded Comments |comment-reply|| |Admin Gallery |admin-gallery|| |Media Upload |media-upload|| |Admin widgets |admin-widgets|| |Word Count |word-count|| |Theme Preview |theme-preview|| |JSON for JS |json2|| |Plupload Core |plupload|| |Plupload All Runtimes |plupload-all|| |Plupload HTML4 |plupload-html4|| |Plupload HTML5| plupload-html5|| |Plupload Flash |plupload-flash|| |Plupload Silverlight |plupload-silverlight|| |Underscore js |underscore|| |Backbone js |backbone|| ### 從核心移除 |腳本名稱|句柄|已刪除版本|替換為| |---|---|---|---| |Scriptaculous Root| scriptaculous-root| WP 3.5| Google Version| |Scriptaculous Builder| scriptaculous-builder| WP 3.5| Google Version| |Scriptaculous Drag & Drop| scriptaculous-dragdrop| WP 3.5| Google Version| |Scriptaculous Effects| scriptaculous-effects| WP 3.5| Google Version| |Scriptaculous Slider| scriptaculous-slider| WP 3.5| Google Version| |Scriptaculous Sound |scriptaculous-sound| WP 3.5| Google Version| |Scriptaculous Controls |scriptaculous-controls |WP 3.5 |Google Version| |Scriptaculous |scriptaculous| WP 3.5| Google Version| |Prototype Framework |prototype| WP 3.5 |Google Version| 名單還遠遠沒有完成。 您可以在wp-includes/script-loader.php中找到包含文件的完整列表。