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遇見強烈推薦