WordPress引入css/js兩種方法-有解無憂

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 用來在網站前臺加載腳本和CSS
admin_enqueue_scripts 用來在后臺加載腳本和CSS
login_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插件匯總推薦

? Wordpress使用Redis快取加速|511遇見強烈推薦

? WordPress資料庫及各表結構功能詳解

? Wordpress單頁以分類形式顯示文章串列

? 給WordPress后臺小工具增加一個隨機文章

? query_posts在你的邊欄顯示指定ID的文章

? wordpress后臺無法登陸出現死回圈解決方案

? Wordpress最棒的后臺框架Redux Framework使用舉例

? wordpress讓你的網頁顯示不同的標

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/82757.html

標籤：其他

上一篇：Vue入門到跑路---vue基礎

下一篇：Day10JavaWeb【Jquery進階】Ajax***