WordPress引入CSS與JavaScript

WordPress引入css/js 是咱們製做主題時首先面對的一個難點，任何一款主題都要加載本身的css,js,甚至頗有可能還須要加載Jquery文件,網上方法特多，說法不一，咱們今天借鑑wordpress官方最新的twentysixteen主題來學習總結一下WordPress引入css/js各類經常使用方法，以及最優化的加載方法。

其實網上的N種方法總結起來就兩種

1、模板文件header.php中直接引入文件

2、在主題的functions.php中經過WP自帶的函數wp_enqueue_scripts來加載JS文件，經過wp_enqueue_style來加載Css樣式。

1、模板文件header.php中直接引入文件

一、最好懂，最直白，最很差的方法在模板文件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中，表面感受好了點......

<?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文件是否已經被包含在頁面中。而後插件第二次加載同一個文件，形成重複的代碼，響應速度變慢。

2、引入WordPress優化解決方案：註冊和排隊

一、註冊

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中，註冊樣式是「可選的」。若是你的樣式不會被其餘插件使用，或者你不打算使用任何代碼來再次加載它，你能夠自由地排隊樣式而不須要註冊它。繼續看看它是如何實現的。

二、排隊

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媒體類型
);
?>

切記：若是一個插件將要用到你的樣式表，或者你打算將在你的主題的不一樣地方進行加載，你絕對應該先註冊。

三、加載樣式到咱們的網站

咱們不能在主題中隨便找個地方使用 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' );
 ?>

四、另一個函數：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() 中處理的時候也會先檢查前面是否是已經有了，若是有了就不會再從新加載一次。

五、一些額外的函數

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' );

?>

WordPress正確加載CSS文件與JavaScript文件的方式

咱們在製做wordpress主題猴子wordpress插件過程當中，常常須要添加樣式文件或者js腳本文件，因爲大多數用戶運行在他們的網站上多個插件，可能會加載各式各樣的文件，容易引發衝突，因此wordpress系統爲開發者提供了一個很好的腳本及樣式文件的排隊系統，這有助於防止插件之間的腳本衝突問題。這篇文章中，主要爲你們介紹wordpress中添加Javascript文件與css文件的方法，對那些剛開始學習WordPress主題和插件的開發是特別有用的。

錯誤方式

wordpress中提供了wp_head鉤子來幫助咱們在頁面的頭部添加指定的頭部消息，好比常見的關鍵詞與描述，不少人也一樣會使用這種方式來添加站點的外部樣式文件與腳本文件，添加代碼以下：

add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo '
'; //添加js文件
}
?>

這種方式雖然使用簡單，可是很是不推薦使用，這種加載方式容易形成wordpress腳本的衝突。

WordPress腳本排隊系統

一、介紹

wordpress在全球擁有強大的開發社羣，不少人都很是積極的參與到wordpress的主題與插件的開發當中，而且能夠無償使用，爲了防止各個開發者開發的插件在使用過程總出現腳本衝突的問題，wordpress提供了一個很是強大的腳本加載函數wp_enqueue_script，經過這個函數，咱們能夠告訴wordpress在哪加載腳本，腳本依賴哪些框架，並且該函數在利用內置的Javascript庫時，能夠避免屢次加載同一個腳本。這有助於減小頁面加載時間，以及避免與其餘主題和插件衝突。

###二、使用實例

wordpress正確加載腳本的使用很簡單，代碼以下：

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>

你能夠將以上代碼放入你的插件文件中或者你主題的functions.php文件。

說明：

實例中咱們首先經過函數wp_register_script(),這個函數接收5個參數：

$handle
(string) (必須) 腳本名稱. 名稱必須惟一在以後函數 wp_enqueue_script() 會使用到該名稱.
Default: None
$src
(string) (必須) 腳本路徑，可使用絕對路徑。
Default: None
$deps
(array) (可選) 腳本依賴包，依賴包會在腳本加載以前預先加載。
Default: array()
$ver
(string) (可選)腳本版本控制。
Default: false
$in_footer
(boolean) (可選) 定義腳本的位置，若是爲true腳本會在頁面底部加載，默認在head頭部加載。
Default: false

當咱們使用wp_register_script()函數註冊腳本文件後，就可使用函數wp_enqueue_script()函數來加載該註冊的腳本文件。

也許有人會問咱們爲何不直接加載腳本文件，而是先註冊後加載，這不是畫蛇添足嗎。其實這主要是爲了站點其餘開發者在其餘插件或者主題總方便引用你的核心腳本文件。

WordPress如何加載CSS樣式文件

wordpress css樣式文件的加載與以上介紹的腳本文件加載方式是同樣的，以下實例：

function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>

以上實例總咱們一樣了用了wp_register_script鉤子來加載樣式文件。

實例中咱們使用了plugins_url()來獲取樣式文件的路徑，這個通常在插件開發過程當中使用的居多，若是咱們是主題中開發使用到wp_register_script()函數則可使用get_template_directory_uri()來獲取樣式文件路徑，若是是子主題中使用，則可使用函數get_stylesheet_directory_uri()來獲取路徑，實例以下：

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>

經過以上的分析，但願對你們對wordpress添加Javascript文件與css文件有新的認知。

部份內容參考自：

http://www.511yj.com/wordpress-css-js.html

http://m.php.cn/article/340670.html