WordPress引入css和js檔案防止重複載入和按需載入配置

WordPress引入css/js方法很多，條件很多,如何全域載入，或僅在某些頁面精準載入，什麼時候需要先註冊指令碼再載入,我們都有必要搞清楚一下.

在前台載入css/js

用wp_enqueue_script()函數載入js，用wp_enqueue_style()載入css，載入資源的位置（action）只有一個——wp_enqueue_scripts。

用wp_enqueue_系列函數可以更好的處理指令碼樣式表的依賴關係，防止重複載入，以twentyfifteen主題為例.

function twentyfifteen_scripts() {
    //全域載入一般的樣式表  form www.111cn.net
    wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.2' );
    //全域載入主樣式表
    wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );
    //全域載入僅用於IE的樣式表
    wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' );
    wp_style_add_data( 'twentyfifteen-ie', 'conditional', 'lt IE 9' );
    //全域載入js指令碼
    wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20141212', true );
    //給js指令碼傳遞變數，解決指令碼中不能調用php的問題
    wp_localize_script( 'twentyfifteen-script', 'screenReaderText', array(
        'expand'   => '<span class="screen-reader-text">' . __( 'expand child menu', 'twentyfifteen' ) . '</span>',
        'collapse' => '<span class="screen-reader-text">' . __( 'collapse child menu', 'twentyfifteen' ) . '</span>',
    ) );
}
add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );

什麼時需要先註冊css/js

即何時需要使用wp_register_script()和wp_register_style()函數.

當css/js很多，並且要分情況載入時，使用wp_register_script()可以更好的管理資源，避免重複勞動.下面的範例程式碼中，先在init action上把所有需要用到樣式表都註冊一遍，之後不管想在哪裡引入，都可以簡單的用wp_enqueue_style( $handle )來載入.

// 在init action處註冊指令碼，可以與其它邏輯代碼放在一起 from www.111cn.net
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方法，降低了程式的效率.

在後台全域載入

這種一般有些主題功能較多的時候,是可以用得到的.

將action改為admin_enqueue_scripts

function my_enqueue() {
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'myscript.js' );
}
add_action( 'admin_enqueue_scripts', 'my_enqueue' );

想瞭解更多方法，請閱讀wp-admin/admin-header.php.

在WordPress登入頁面載入

這種情況一般比較少見.

將action替換為login_enqueue_scripts即可，例如

function enqueue_for_login(){
    wp_enqueue_style( 'core', 'style.css', false );
    wp_enqueue_script( 'my-js', 'filename.js', false );
}
add_action( 'login_enqueue_scripts', 'enqueue_for_login' );

如果想瞭解其它方式，可以仔細閱讀wp-login.php這個檔案.

在後台按需載入

僅用於後台某些頁面的資源只在這些頁面載入就好，不要到處使用，可以減少不必要的衝突。

1. $hook_suffix

首先我們可以根據admin_enqueue_scripts這個action傳遞的$hook_suffix參數來判斷所處的頁面，例如僅在edit.php載入，代碼如下:

function my_enqueue( $hook_suffix ) {
    if ( 'edit.php' == $hook_suffix ) {
       wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'myscript.js' );
    }
}
add_action( 'admin_enqueue_scripts', 'my_enqueue' );

edit.php就是post、page或者custom post type的列表頁面，編輯頁面是post.php，建立頁面是post-new.php，可以在不同頁面列印$hook_suffix來瞭解它的使用方法。但由此也可看出它不能區分現在是在哪種post頁面，需要藉助更多的全域變數來判斷。

2. $typenow

全域變數$typenow可以告訴我們當前的post type，例如僅在post的列表頁面載入可以這樣來判斷:

function my_enqueue( $hook_suffix ) {
    global $typenow;
    if ( 'edit.php' == $hook_suffix && $typenow == 'post' ) {
       wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'myscript.js' );
    }
}
add_action( 'admin_enqueue_scripts', 'my_enqueue' );

3. get_current_screen()

上述兩個全域變數可以區分大多數情況，若區分不了，可以試試使用get_current_screen()函數，該函數返回當前頁面的post type、ID、base等資訊，只能在admin_init之後使用，具體可以參考官方文檔.

4. $pagenow

全域變數$pagenow的傳回值與$hook_suffix類似，只是它在前台後台都可以訪問，定義的更早，例如前三者在admin_init處沒有值，但$pagenow卻有.

它定義在wp-includes/vars.php中，該檔案還定義了瀏覽器、伺服器全域變數，例如$is_winIE、$is_apache，wp_is_mobile()函數也在這裡出現。

上述全域變數和函數能區分大多數情況，但依然有無力的時候，這時可以藉助$_REQUEST來判斷。上述變數的值也是從$_REQUEST擷取，但多一層值是否存在的檢查，所以能用它們解決的就不要用$_REQUEST或者$_GET.