倡萌之前分享過《正確加載 Javascript 和 CSS 到 WordPress》，今天分享一篇詳細(xì)解說正確加載 CSS 的文章。
- 原文：http://code.tutsplus.com/tutorials/loading-css-into-wordpress-the-right-way–cms-20402
- 編譯：倡萌@WordPress大學(xué)
沒有CSS，你只能很有限地風(fēng)格化你的網(wǎng)頁。而如果沒有在WordPress包含適當(dāng)?shù)?CSS，將讓你的主題用戶很難自定義主題的樣式。
在本教程中，我們將看看以正確的方式來排隊(duì)加載 CSS 到 WordPress。
WordPress 是目前世界上最流行的內(nèi)容管理系統(tǒng)，它有上千萬的用戶。這就是為什么，為了制作一個(gè)成功的主題，我們需要思考每一個(gè)WordPress用戶，并嘗試通過本教程來正確地加載CSS文件到我們的主題中。
在 WordPress 中加載 CSS 的錯(cuò)誤方式
多年來，WordPress 已經(jīng)發(fā)展了其代碼，以便使它越來越靈活，排隊(duì)加載 CSS和JavaScript 就是在朝這個(gè)方向移動(dòng)。我們的壞習(xí)慣已經(jīng)保持一段時(shí)間了，盡管我們知道 WordPress 介紹了排隊(duì)加載 CSS 和 JavaScript 的方法，我們還是繼續(xù)添加這類代碼到主題的 header.php 文件：
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
或者我們添加下面的代碼到主題的 functions.php ，而且認(rèn)為這個(gè)方法更好些：
<?php
function add_stylesheet_to_head() {
echo "<link rel='stylesheet' type='text/css'>";
}
add_action( 'wp_head', 'add_stylesheet_to_head' );
?>
在上面的情況下，WordPress 不能確定是否在在頁面加載了 CSS文件。這可能是一個(gè)可怕的錯(cuò)誤！
如果另一個(gè)插件使用相同的CSS文件，就無法檢查CSS文件是否已經(jīng)被包含在頁面中。然后插件第二次加載同一個(gè)文件，造成重復(fù)的代碼。
幸運(yùn)的是，WordPress有一個(gè)非常簡(jiǎn)單的解決方案：注冊(cè)和排隊(duì)樣式表。
在 WordPress 中加載 CSS 的正確方式
正如我們前面所說，WordPress已經(jīng)成長(zhǎng)了很多，多年來，我們不得不思考在世界上每一個(gè)WordPress用戶。
除了這些，我們還必須考慮成千上萬的WordPress插件。但是，不要讓這些大的數(shù)字嚇到你：WordPress 有非常有用的函數(shù)，來為我們正確地加載CSS樣式到WordPress。
讓我們一起來看看。
注冊(cè) CSS 文件
如果你要加載CSS樣式表，你首先應(yīng)該使用 wp_register_style() 函數(shù)進(jìn)行注冊(cè)：
<?php
wp_register_style( $handle, $src, $deps, $ver, $media );
?>
$handle（字符串，必需）是你的樣式表唯一名稱。其他函數(shù)將使用這個(gè)“handle”來排隊(duì)并打印樣式表。$src（字符串，必需）指的是樣式表的URL。您可以使用函數(shù)，如get_template_directory_uri()來獲取主題目錄中的樣式文件。永遠(yuǎn)不要去想硬編碼了！$deps（數(shù)組，可選）處理相關(guān)樣式的名稱。如果丟失某些其他樣式文件將導(dǎo)致你的樣式表將無法正常工作，你可以使用該參數(shù)設(shè)置“依賴關(guān)系”。$ver（字符串或布爾型，可選）版本號(hào)。你可以使用你的主題的版本號(hào)或任何一個(gè)你想要的。如果您不希望使用一個(gè)版本號(hào)，將其設(shè)置為null。默認(rèn)為false，這使得WordPress的添加自己的版本號(hào)。$media（字符串，可選）是指CSS的媒體類型，比如“screen”或“handheld”或“print”。如果你不知道是否需要使用這個(gè)，那就不使用它。默認(rèn)為“all”。
以下是 wp_register_style() 函數(shù)的一個(gè)例子：
<?php
// wp_register_style() 示例
wp_register_style(
'my-bootstrap-extension', // 名稱
get_template_directory_uri() . '/css/my-bootstrap-extension.css', // 樣式表的路徑
array( 'bootstrap-main' ), // 依存的其他樣式表
'1.2', // 版本號(hào)
'screen', // CSS 媒體類型
);
?>
在WordPress中，注冊(cè)樣式是“可選的”。如果你的樣式不會(huì)被其他插件使用，或者你不打算使用任何代碼來再次加載它，你可以自由地排隊(duì)樣式而不需要注冊(cè)它。繼續(xù)看看它是如何實(shí)現(xiàn)的。
排隊(duì) CSS 文件
注冊(cè)我們的風(fēng)格文件后，我們需要“排隊(duì)”它，使其準(zhǔn)備好在我們主題的<head>部分加載。
我們使用 wp_enqueue_style() 函數(shù)來實(shí)現(xiàn)：
<?php
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
?>
該函數(shù)的參數(shù)和上面的 wp_register_style() 函數(shù)是一樣的，就不再重復(fù)。
但是，正如我們所說的， wp_register_style() 函數(shù)是不強(qiáng)制使用的，我要告訴你，你可以用兩種不同的方式使用 wp_enqueue_style()：
<?php
// 如果我們之前已經(jīng)注冊(cè)過樣式
wp_enqueue_style( 'my-bootstrap-extension' );
// 如果我們之前沒有注冊(cè)，我們不得不設(shè)置 $src 參數(shù)！
wp_enqueue_style(
'my-bootstrap-extension',
get_template_directory_uri() . '/css/my-bootstrap-extension.css',
array( 'bootstrap-main' ),
null, // 舉例不適用版本號(hào)
// ...并且沒有指定CSS媒體類型
);
?>
請(qǐng)記住，如果一個(gè)插件將要用到你的樣式表，或者你打算將在你的主題的不同地方進(jìn)行加載，你絕對(duì)應(yīng)該先注冊(cè)。
加載樣式到我們的網(wǎng)站
我們不能在主題中隨便找個(gè)地方使用 wp_enqueue_style() 函數(shù) – 我們需要使用“動(dòng)作”鉤子。還有我們可以使用各種用途的三個(gè)動(dòng)作鉤子：
wp_enqueue_scripts用來在網(wǎng)站前臺(tái)加載腳本和CSSadmin_enqueue_scripts用來在后臺(tái)加載腳本和CSSlogin_enqueue_scripts用來在WP登錄頁面加載腳本和CSS
以下是這些鉤子的示例：
<?php
// 在網(wǎng)站前臺(tái)加載css
function mytheme_enqueue_style() {
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );
// 在后臺(tái)加載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' );
?>
WordPress 有一個(gè)重要的公告：“使用 wp_enqueue_scripts() ，不要用 wp_print_styles() ”，它會(huì)告訴你一個(gè)與 WordPress3.3版本可能的不兼容錯(cuò)誤。
一些額外的函數(shù)
WordPress 有一些關(guān)于 CSS 非常有用的函數(shù)：他們?cè)试S我們打印內(nèi)嵌樣式，查看樣式文件的排隊(duì)狀態(tài)，添加元數(shù)據(jù)以及注銷樣式。
讓我們一起來看看。
添加動(dòng)態(tài)內(nèi)聯(lián)樣式：wp_add_inline_style()
如果你的主題有選項(xiàng)可自定義主題的樣式，你可以使用 wp_add_inline_style() 函數(shù)來打印內(nèi)置的樣式：
<?php
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' );
?>
方便快捷。但請(qǐng)記住：你必須使用與后面要添加的內(nèi)聯(lián)樣式樣式表相同的hadle名稱。
檢查樣式表的排隊(duì)狀態(tài)：wp_style_is()
在某些情況下，我們可能需要一個(gè)風(fēng)格的狀態(tài)信息：是否注冊(cè)，是否入列，它是打印或等待打印？您可以使用 wp_style_is() 函數(shù)來確定它：
<?php
/*
* wp_style_is( $handle, $state );
* $handle - name of the stylesheet
* $state - state of the stylesheet: 'registered', 'enqueued', 'done' or 'to_do'. default: 'enqueued'
*/
// wp_style_is() 示例
function bootstrap_styles() {
if( wp_style_is( 'bootstrap-main' ) {
// 排隊(duì) my-custom-bootstrap-theme 如果 bootstrap-main 已經(jīng)排隊(duì)
wp_enqueue_style( 'my-custom-bootstrap-theme', 'http://url.of/the/custom-theme.css' );
}
}
add_action( 'wp_enqueue_scripts', 'bootstrap_styles' );
?>
添加元數(shù)據(jù)到樣式表：wp_style_add_data()
wp_style_add_data() 是一個(gè)非常棒的函數(shù)，它可以讓你添加元數(shù)據(jù)到你的樣式中，包括條件注釋、RTL的支持和更多！
來看看吧：
<?php
/*
* wp_style_add_data( $handle, $key, $value );
* Possible values for $key and $value:
* 'conditional' string Comments for IE 6, lte IE 7 etc.
* 'rtl' bool|string To declare an RTL stylesheet.
* 'suffix' string Optional suffix, used in combination with RTL.
* 'alt' bool For rel="alternate stylesheet".
* 'title' string For preferred/alternate stylesheets.
*/
// 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' );
?>
真棒，不是嗎？
注銷樣式文件：wp_deregister_style()
如果你需要“注銷”樣式表（為了使用修改后的版本，例如重新注冊(cè)），你可以用 wp_deregister_style() 實(shí)現(xiàn)。
讓我們看一個(gè)例子：
<?php
function mytheme_load_modified_bootstrap() {
// 如果 bootstrap-main 之前已注冊(cè)...
if( wp_script_is( 'bootstrap-main', 'registered' ) ) {
// ...取消注冊(cè)...
wp_deregister_style( 'bootstrap-main' );
// ...取而代之，注冊(cè)我們自定義的 modified bootstrap-main.css...
wp_register_style( 'bootstrap-main', get_template_directory_uri() . '/css/bootstrap-main-modified.css' );
// ...然后排隊(duì)它
wp_enqueue_style( 'bootstrap-main' );
}
}
add_action( 'wp_enqueue_scripts', 'mytheme_load_modified_bootstrap' );
?>
雖然它不是必須的，但是通常你注銷了一個(gè)樣式，就應(yīng)該重新注冊(cè)一個(gè)樣式，否則可能會(huì)打亂其他的一些東西。
還有一個(gè)類似的函數(shù)叫做 wp_dequeue_style() ，正如它的名字所暗示的一樣，用來取消已經(jīng)排隊(duì)的樣式表。
結(jié)語
恭喜你，現(xiàn)在你知道一切關(guān)于在 WordPress 正確加載 CSS 的方法！希望你喜歡本教程。
你有你想分享任何方法或經(jīng)驗(yàn)？請(qǐng)?jiān)谙旅嬖u(píng)論，并與我們分享您的知識(shí)！如果你喜歡這篇文章，不要忘記與你的朋友分享！
感覺主要加載越來越網(wǎng)站的速度提升，學(xué)到了。
https://www.npc.ink/4607.html
你好，我能請(qǐng)教個(gè)問題嗎？
我想讓插件只在特定頁面加載，css用 wp_dequeue_style() 自己搞定了。script 知道用wp_dequeue_script（）
但找不到handle（句柄），能教我怎么找到插件的句柄嗎？
自己看下 http://www.ydqwiac.cn/conditional-tags.html
這個(gè)我已經(jīng)看過了，我的問題是不知道怎么找到能控制script的handle,比如想控制contact-form-7的script用contact-form-7句柄，比較有名的插件一般都可以在網(wǎng)上搜得到，一般的插件還得自己會(huì)找，我就是不會(huì)找。。。
注冊(cè)應(yīng)該在哪注冊(cè)啊 或者說 這段代碼應(yīng)該放在哪？ 博主
一般WordPress的函數(shù)都可以添加到主題的 functions.php
硬是沒有看懂。
用此正確的方式加載 css 到login畫面后， css 沒有在<head>中而是在頁腳部位。這是為什么？
請(qǐng)?jiān)徫蚁旅鎲栐挼臒o知：
wp_head()函數(shù)不是自動(dòng)調(diào)用了css嗎？為什么還要這么費(fèi)勁呢？
用不用這么復(fù)雜啊~~~
我是部分這么加載，部分還是傳統(tǒng)的加載方法。。