WordPress引入css/js 是我們製作主題時首先面對的一個難點，任何一款主題都要載入自己的css,js,甚至很有可能還需要載入Jquery檔案,網上方法特多，說法不一，我們今天借鑑wordpress官方最新的twentysixteen主題來學習總結一下WordPress引入css/js各種常用方法，以及最佳化的載入方法。
其實網上的N種方法總結起來就兩種：
一、模板檔案header.php中直接引入檔案
二、在主題的functions.php中通過WP自帶的函數wp_enqueue_scripts來載入JS檔案，通過wp_enqueue_style來載入Css樣式。
一、模板檔案header.php中直接引入檔案
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>通過函數get_template_directory_uri()獲得主題目錄 通過echo輸出。注意啦以下方法雖然放在了functions.php中，表面感覺好了點......
";
}
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 ); ?>引數：$handle（字串，必需）是你的樣式表唯一名稱。其他函數將使用這個「handle」來排隊並列印樣式表。$src（字串，必需）指的是樣式表的URL。您可以使用函數，如 get_template_directory_uri() 來獲取主題目錄中的樣式檔案。永遠不要去想寫死了！$deps （陣列，可選）處理相關樣式的名稱。如果丟失某些其他樣式檔案將導致你的樣式表將無法正常工作，你可以使用該引數設定「依賴關係」。$ver （字串或布林型，可選）版本號。你可以使用你的主題的版本號或任何一個你想要的。如果您不希望使用一個版本號，將其設定為null。預設為false，這使得WordPress的新增自己的版本號。$media （字串，可選）是指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 媒體型別
);wp_register_style() 函數進行註冊：
<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
引數$handle（字串）（必需）指令碼名稱。小寫字串。預設值：None$src（字串）（可選）WordPress根目錄下的指令碼路徑範例："/wp-includes/js/scriptaculous/scriptaculous.js"。該引數只在WordPress不瞭解指令碼情況時使用。預設值：None$deps（陣列）（可選）指令碼所依靠的控制程式碼組成的陣列；載入該指令碼前需要載入的其它指令碼。若沒有依賴關係，返回false。該引數只在WordPress不瞭解指令碼情況時使用。預設值：array()$ver（字串）（可選）指明指令碼版本號的字串（若存在版本號）。預設為false。該引數可確保即使在啟用快取的狀態下，傳送給使用者端的仍然是正確版本，因此如果版本號可用且對指令碼有意義，包含該版本號。預設值：false$in_footer（布林型）（可選）通常情況下指令碼會被放置在區塊中。如果該函數為true，指令碼則會出現在區塊的最下方。要求主題在適當的位置中包含有wp_footer()勾點。（WordPress新功能）預設值：false
例子：
<?php
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很多，並且要分情況載入時，需要使用wp_register_script()和wp_register_style()函數，可以更好的管理資源，避免重複勞動。下面的範例程式碼中，先在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' );註冊指令碼時需要執行$wp_scripts->add( $handle, $src, $deps, $ver );，若指令碼沒有註冊直接使用wp_enqueue_script，需要先呼叫add方法，也就是說重複enqueue一個指令碼就會執行多次add方法，降低了程式的效率。
在WordPress中，註冊樣式是「可選的」。如果你的樣式不會被其他外掛使用，或者你不打算使用任何程式碼來再次載入它，你可以自由地排隊樣式而不需要註冊它。繼續看看它是如何實現的。
2、排隊wp_register_style() 函數是不強制使用的，我要告訴你，你可以用兩種不同的方式使用 wp_enqueue_style()：
<?php
// 如果我們之前已經註冊過樣式
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() 函數 - 我們需要使用「動作」勾點。還有我們可以使用各種用途的三個動作勾點：wp_enqueue_scripts 用來在網站前臺載入指令碼和CSSadmin_enqueue_scripts 用來在後臺載入指令碼和CSSlogin_enqueue_scripts 用來在WP登入頁面載入指令碼和CSS
以下是這些勾點的範例：
<?php
// 在網站前臺載入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、另外一個函數：wp_print_scripts()
雖然將 JavaScript 檔案都放到頁面末尾載入對於頁面載入速度很有幫助，但是請注意，所謂頁面末尾指的是在 WordPress 的 wp_footer() 函數中呼叫，這個函數通常剛好位於頁面的 標籤前面（當然是末尾了）。
有時候我們可能會在 wp_footer 函數出現之前就需要用到某些 JavaScript，比如 jquery.js 檔案。
這樣的情況也是很常見的。比如我單獨建立了一個連結頁面，在這個頁面中我使用了 jQuery 方法來獲取連結網站的 favicon。很顯然，我只需要在這唯一一個頁面使用這部分程式碼，所以將這段程式碼直接放在這個頁面模板中是最好的做法。
問題來了：這部分內容顯然是在 wp_footer 之前出現的，那麼這段程式碼就在 jquery.js 檔案之前出現了，導致該程式碼段實際上無法運作，因為呼叫 jQuery 方法的程式碼段必須比 jquery.js 檔案後載入。
那麼如何處理這種特殊情況呢？其實也很簡單。以上面的情景為例，既然我們需要先呼叫 jquery.js 檔案，那我們就在該程式碼段之前直接輸出需要的 jquery.js 檔案，不使用 wp_enqueue_script() 函數，而改用wp_print_scripts() 函數。wp_enqueue_script() 與 wp_print_scripts() 的區別是：wp_enqueue_script() 是告訴 WordPress 「我在這個頁面上需要用到某個 JavaScript 檔案，你可要記得載入啊」。WordPress 預設在 wp_head() 中處理，而我們改為在 wp_footer() 中處理。wp_print_scripts() 則直接在你使用此方法的位置輸出需要的 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 非常有用的函數：他們允許我們列印內嵌樣式，檢視樣式檔案的排隊狀態，新增後設資料以及登出樣式。
新增動態內聯樣式：wp_add_inline_style()
如果你的主題有選項可自定義主題的樣式，你可以使用 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名稱。
新增後設資料到樣式表：wp_style_add_data()wp_style_add_data() 是一個非常棒的函數，它可以讓你新增後設資料到你的樣式中，包括條件註釋、RTL的支援和更多！
<?php
// 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' );
?>您可能感興趣的文章:
▪ 用Bootstrap選單樣式替換你的Wordpress選單
▪ Wordpress使用Redis快取加速|511遇見強烈推薦