wordpress引入css/js 是我們制作主題時首先面對的一個難點，任何一款主題都要加載自己的css,js,甚至很有可能還需要加載jquery檔案,網上方法特多，說法不一，我們今天借鑒wordpress官方最新的twentysixteen主題來學習總結一下wordpress引入css/js各種常用方法，以及最優化的加載方法。
其實網上的n種方法總結起來就兩種：
一、模闆檔案header.php中直接引入檔案
二、在主題的functions.php中通過wp自帶的函數<code>wp_enqueue_scripts</code>來加載js檔案，通過<code>wp_enqueue_style</code>來加載css樣式。
1、最好懂，最直白，最不好的方法在模闆檔案header.php中直接引入檔案
<script type='text/javascript' src='http://www.jquery.com/js/jquery/1.10.2/jquery-1.10.2.min.js'></script>
<script type='text/javascript' src='http://www.511yj.com/css/bootstrapwp.js'></script>
<link rel="stylesheet" href="http://www.511yj.com/css/bootstrapwp.css">
你覺得這樣很無聊的話，還可以這樣
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
<script src="<?php echo get_template_directory_uri(); ?>/bootstrap/js/bootstrap.js"></script>
通過函數<code>get_template_directory_uri()</code>獲得主題目錄 通過<code>echo</code>輸出。
<code>注意啦</code>以下方法雖然放在了functions.php中，表面感覺好了點......
<?php
function add_stylesheet_to_head() {
echo "<link href='http://fonts.useso.com/css?family=open+sans:300,400,600&subset=latin,latin-ext' rel='stylesheet'>";
}
add_action( 'wp_head', 'add_stylesheet_to_head' );
?>
但是wordpress 不能确定是否在在頁面加載了js，css檔案，如果另一個插件使用相同的js，css檔案，就無法檢查js，css檔案是否已經被包含在頁面中。然後插件第二次加載同一個檔案，造成重複的代碼，響應速度變慢。
二、引入wordpress優化解決方案：注冊和排隊
1、注冊
wp_register_style() 函數進行注冊：
<?php wp_register_style( $handle, $src, $deps, $ver, $media ); ?>
參數：
<code>$handle</code>（字元串，必需）是你的樣式表唯一名稱。其他函數将使用這個“handle”來排隊并列印樣式表。
<code>$src</code>（字元串，必需）指的是樣式表的url。您可以使用函數，如 get_template_directory_uri() 來擷取主題目錄中的樣式檔案。永遠不要去想寫死了！
<code>$deps </code>（數組，可選）處理相關樣式的名稱。如果丢失某些其他樣式檔案将導緻你的樣式表将無法正常工作，你可以使用該參數設定“依賴關系”。
<code>$ver </code>（字元串或布爾型，可選）版本号。你可以使用你的主題的版本号或任何一個你想要的。如果您不希望使用一個版本号，将其設定為null。預設為false，這使得wordpress的添加自己的版本号。
<code>$media </code>（字元串，可選）是指css的媒體類型，比如“screen”或“handheld”或“print”。如果你不知道是否需要使用這個，那就不使用它。預設為“all”。
例子：
wp_register_style(
'my-bootstrap-extension', // 名稱
get_template_directory_uri() . '/css/my-bootstrap-extension.css', // 樣式表的路徑
array( 'bootstrap-main' ), // 依存的其他樣式表
'1.2', // 版本号
'screen', // css 媒體類型
);
<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
參數
<code>$handle</code>（字元串）（必需）腳本名稱。小寫字元串。預設值：none
<code>$src</code>（字元串）（可選）wordpress根目錄下的腳本路徑示例："/wp-includes/js/scriptaculous/scriptaculous.js"。該參數隻在wordpress不了解腳本情況時使用。預設值：none
<code>$deps</code>（數組）（可選）腳本所依靠的句柄組成的數組；加載該腳本前需要加載的其它腳本。若沒有依賴關系，傳回false。該參數隻在wordpress不了解腳本情況時使用。預設值：array()
<code>$ver</code>（字元串）（可選）指明腳本版本号的字元串（若存在版本号）。預設為false。該參數可確定即使在啟用緩存的狀态下，發送給用戶端的仍然是正确版本，是以如果版本号可用且對腳本有意義，包含該版本号。預設值：false
<code>$in_footer</code>（布爾型）（可選）通常情況下腳本會被放置在區塊中。如果該函數為true，腳本則會出現在區塊的最下方。要求主題在适當的位置中包含有wp_footer()鈎子。（wordpress新功能）預設值：false
function my_enqueue_scripts() {
if( !is_admin ) { // 前台加載的腳本與樣式表
// 去除已注冊的 jquery 腳本
wp_deregister_script( 'jquery' );
// 注冊 jquery 腳本
wp_register_script( 'jquery', get_template_directory_uri() . '/js/jquery.js', false, '1.0', false );
// 送出加載 jquery 腳本
wp_enqueue_script( 'jquery' );
// 添加回調函數到 init 動作上
add_action( 'init', 'my_enqueue_scripts' );
當css/js很多，并且要分情況加載時，需要使用<code>wp_register_script()</code>和<code>wp_register_style()</code>函數，可以更好的管理資源，避免重複勞動。下面的示例代碼中，先在init action上把所有需要用到樣式表都注冊一遍，之後不管想在哪裡引入，都可以簡單的用wp_enqueue_style( $handle )來加載。
// 在init action處注冊腳本，可以與其它邏輯代碼放在一起
function my_init(){
$url = get_template_directory_uri();
// 注冊樣式表
$styles = array(
'style1' => $url . '/css/style1.css',
'style2' => $url . '/css/style2.css',
'style3' => $url . '/css/style3.css'
foreach( $styles as $k => $v ){
wp_register_style( $k, $v, false );
// 注冊腳本
// 其它需要在init action處運作的腳本
add_action( 'init', 'my_init' );
注冊腳本時需要運作<code>$wp_scripts->add( $handle, $src, $deps, $ver );</code>，若腳本沒有注冊直接使用<code>wp_enqueue_script</code>，需要先調用add方法，也就是說重複enqueue一個腳本就會運作多次add方法，降低了程式的效率。
在wordpress中，注冊樣式是“可選的”。如果你的樣式不會被其他插件使用，或者你不打算使用任何代碼來再次加載它，你可以自由地排隊樣式而不需要注冊它。繼續看看它是如何實作的。
2、排隊
<code>wp_register_style()</code> 函數是不強制使用的，我要告訴你，你可以用兩種不同的方式使用 <code>wp_enqueue_style()：</code>
// 如果我們之前已經注冊過樣式
wp_enqueue_style( 'my-bootstrap-extension' );
// 如果我們之前沒有注冊，我們不得不設定 $src 參數！
wp_enqueue_style(
'my-bootstrap-extension',
get_template_directory_uri() . '/css/my-bootstrap-extension.css',
array( 'bootstrap-main' ),
null, // 舉例不适用版本号
// ...并且沒有指定css媒體類型
切記：如果一個插件将要用到你的樣式表，或者你打算将在你的主題的不同地方進行加載，你絕對應該先注冊。
3、加載樣式到我們的網站
我們不能在主題中随便找個地方使用 wp_enqueue_style() 函數 - 我們需要使用“動作”鈎子。還有我們可以使用各種用途的三個動作鈎子：
<code>wp_enqueue_scripts</code> 用來在網站前台加載腳本和css
<code>admin_enqueue_scripts</code> 用來在背景加載腳本和css
<code>login_enqueue_scripts</code> 用來在wp登入頁面加載腳本和css
以下是這些鈎子的示例：
// 在網站前台加載css
function mytheme_enqueue_style() {
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );
// 在背景加載css
function mytheme_enqueue_options_style() {
wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/admin.css' );
add_action( 'admin_enqueue_scripts', 'mytheme_enqueue_options_style' );
// 在登入頁面加載css
function mytheme_enqueue_login_style() {
wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/login.css' );
add_action( 'login_enqueue_scripts', 'mytheme_enqueue_login_style' );
4、另外一個函數：<code>wp_print_scripts()</code>
雖然将 javascript 檔案都放到頁面末尾加載對于頁面加載速度很有幫助，但是請注意，所謂頁面末尾指的是在 wordpress 的 <code>wp_footer()</code> 函數中調用，這個函數通常剛好位于頁面的 标簽前面（當然是末尾了）。
有時候我們可能會在 wp_footer 函數出現之前就需要用到某些 javascript，比如 jquery.js 檔案。
這樣的情況也是很常見的。比如我單獨建立了一個連結頁面，在這個頁面中我使用了 jquery 方法來擷取連結網站的 favicon。很顯然，我隻需要在這唯一一個頁面使用這部分代碼，是以将這段代碼直接放在這個頁面模闆中是最好的做法。
問題來了：這部分内容顯然是在 wp_footer 之前出現的，那麼這段代碼就在 jquery.js 檔案之前出現了，導緻該代碼段實際上無法工作，因為調用 jquery 方法的代碼段必須比 jquery.js 檔案後加載。
那麼如何處理這種特殊情況呢？其實也很簡單。以上面的情景為例，既然我們需要先調用 jquery.js 檔案，那我們就在該代碼段之前直接輸出需要的 jquery.js 檔案，不使用 <code>wp_enqueue_script()</code> 函數，而改用<code>wp_print_scripts() </code>函數。
<code>wp_enqueue_script()</code> 與<code> wp_print_scripts()</code> 的差別是：<code>wp_enqueue_script()</code> 是告訴 wordpress “我在這個頁面上需要用到某個 javascript 檔案，你可要記得加載啊”。wordpress 預設在 wp_head() 中處理，而我們改為在 wp_footer() 中處理。<code>wp_print_scripts() </code>則直接在你使用此方法的位置輸出需要的 javascript 檔案，而不是加入到 wordpress 的處理任務中。
如果我們在頁面的中間使用，
<?php wp_print_scripts('jquery'); ?>
直接輸出了 jquery.js 檔案（通常是其壓縮版本 jquery.min.js），那麼即使其它的插件或者什麼東西使用，
<?php wp_enqueue_script('jquery'); ?>
告訴 wordpress 需要加載 jquery.js，wordpress 在 wp_footer() 中處理的時候也會先檢查前面是不是已經有了，如果有了就不會再重新加載一次。
5、一些額外的函數
wordpress 有一些關于 css 非常有用的函數：他們允許我們列印内嵌樣式，檢視樣式檔案的排隊狀态，添加中繼資料以及登出樣式。
添加動态内聯樣式：<code>wp_add_inline_style()</code>
如果你的主題有選項可自定義主題的樣式，你可以使用 wp_add_inline_style() 函數來列印内置的樣式：
function mytheme_custom_styles() {
wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css' );
$bold_headlines = get_theme_mod( 'headline-font-weight' ); // 比方說，它的值是粗體“bold”
$custom_inline_style = '.headline { font-weight: ' . $bold_headlines . '; }';
wp_add_inline_style( 'custom-style', $custom_inline_style );
add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' );
友善快捷。但請記住：你必須使用與後面要添加的内聯樣式樣式表相同的hadle名稱。
添加中繼資料到樣式表：<code>wp_style_add_data()</code>
<code>wp_style_add_data()</code> 是一個非常棒的函數，它可以讓你添加中繼資料到你的樣式中，包括條件注釋、rtl的支援和更多！
// wp_style_add_data() 示例
function mytheme_extra_styles() {
wp_enqueue_style( 'mytheme-ie', get_template_directory_uri() . '/css/ie.css' );
wp_style_add_data( 'mytheme-ie', 'conditional', 'lt ie 9' );
/*
* alternate usage:
* $globals['wp_styles']->add_data( 'mytheme-ie', 'conditional', 'lte ie 9' );
* wp_style_add_data() is cleaner, though.
*/
add_action( 'wp_enqueue_scripts', 'mytheme_ie_style' );
![php寫一個簡潔的登入頁面[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)