正確加載 CSS 到 WordPress

wpdaxue.com/loading-css-into-wordpress.html

倡萌之前分享過《正確加載 Javascript 和 CSS 到 WordPress》，今天分享一篇詳細解說正確加載 CSS 的文章。

原文：http://code.tutsplus.com/tutorials/loading-css-into-wordpress-the-right-way--cms-20402
編譯：倡萌@WordPress大學

沒有CSS，你只能很有限地風格化你的網頁。而如果沒有在WordPress包含適當的 CSS，將讓你的主題用戶很難自定義主題的樣式。

在本教程中，我們將看看以正確的方式來排隊加載 CSS 到 WordPress。

WordPress 是目前世界上最流行的內容管理系統，它有上千萬的用戶。這就是爲什麼，爲了製作一個成功的主題，我們需要思考每一個WordPress用戶，並嘗試通過本教程來正確地加載CSS文件到我們的主題中。

在 WordPress 中加載 CSS 的錯誤方式

多年來，WordPress 已經發展了其代碼，以便使它越來越靈活，排隊加載 CSS和JavaScript 就是在朝這個方向移動。我們的壞習慣已經保持一段時間了，儘管我們知道 WordPress 介紹了排隊加載 CSS 和 JavaScript 的方法，我們還是繼續添加這類代碼到主題的 header.php 文件：

1	<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

或者我們添加下面的代碼到主題的 functions.php ，而且認爲這個方法更好些：

<?php
 
function add_stylesheet_to_head() {
    echo "<link href='http://fonts.lug.ustc.edu.cn/css?family=Open+Sans' rel='stylesheet' type='text/css'>";
}
 
add_action( 'wp_head', 'add_stylesheet_to_head' );
 
?>

在上面的情況下，WordPress 不能確定是否在在頁面加載了 CSS文件。這可能是一個可怕的錯誤！

如果另一個插件使用相同的CSS文件，就無法檢查CSS文件是否已經被包含在頁面中。然後插件第二次加載同一個文件，造成重複的代碼。

幸運的是，WordPress有一個非常簡單的解決方案：註冊和排隊樣式表。

在 WordPress 中加載 CSS 的正確方式

正如我們前面所說，WordPress已經成長了很多，多年來，我們不得不思考在世界上每一個WordPress用戶。

除了這些，我們還必須考慮成千上萬的WordPress插件。但是，不要讓這些大的數字嚇到你：WordPress 有非常有用的函數，來爲我們正確地加載CSS樣式到WordPress。

讓我們一起來看看。

註冊 CSS 文件

如果你要加載CSS樣式表，你首先應該使用 wp_register_style() 函數進行註冊：

1
2
3

<?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() 函數的一個例子：

<?php
 
// wp_register_style() 示例
wp_register_style(
    'my-bootstrap-extension', // 名稱
    get_template_directory_uri() . 'https://static.wpdaxue.com/css/my-bootstrap-extension.css', // 樣式表的路徑
    array( 'bootstrap-main' ), // 依存的其他樣式表
    '1.2', // 版本號
    'screen', // CSS 媒體類型
);
 
?>

在WordPress中，註冊樣式是“可選的”。如果你的樣式不會被其他插件使用，或者你不打算使用任何代碼來再次加載它，你可以自由地排隊樣式而不需要註冊它。繼續看看它是如何實現的。

排隊 CSS 文件

註冊我們的風格文件後，我們需要“排隊”它，使其準備好在我們主題的<head>部分加載。

我們使用 wp_enqueue_style() 函數來實現：

1
2
3

<?php
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
?>

該函數的參數和上面的 wp_register_style() 函數是一樣的，就不再重複。

但是，正如我們所說的， wp_register_style() 函數是不強制使用的，我要告訴你，你可以用兩種不同的方式使用 wp_enqueue_style()：

<?php
 
// 如果我們之前已經註冊過樣式
wp_enqueue_style( 'my-bootstrap-extension' );
 
// 如果我們之前沒有註冊，我們不得不設置 $src 參數！
wp_enqueue_style(
    'my-bootstrap-extension',
    get_template_directory_uri() . 'https://static.wpdaxue.com/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() . 'https://static.wpdaxue.com/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() . 'https://static.wpdaxue.com/css/login.css' ); 
}
add_action( 'login_enqueue_scripts', 'mytheme_enqueue_login_style' );
 
?>

WordPress 有一個重要的公告：“使用 wp_enqueue_scripts() ，不要用 wp_print_styles() ”，它會告訴你一個與 WordPress3.3版本可能的不兼容錯誤。

一些額外的函數

WordPress 有一些關於 CSS 非常有用的函數：他們允許我們打印內嵌樣式，查看樣式文件的排隊狀態，添加元數據以及註銷樣式。

讓我們一起來看看。

添加動態內聯樣式：wp_add_inline_style()

如果你的主題有選項可自定義主題的樣式，你可以使用 wp_add_inline_style() 函數來打印內置的樣式：

<?php
 
function mytheme_custom_styles() {
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . 'https://static.wpdaxue.com/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_is()

在某些情況下，我們可能需要一個風格的狀態信息：是否註冊，是否入列，它是打印或等待打印？您可以使用 wp_style_is() 函數來確定它：

<?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' ) {
 
        // 排隊 my-custom-bootstrap-theme 如果 bootstrap-main 已經排隊
        wp_enqueue_style( 'my-custom-bootstrap-theme', 'http://url.of/the/custom-theme.css' );
 
    }
 
}
add_action( 'wp_enqueue_scripts', 'bootstrap_styles' );
 
?>

添加元數據到樣式表：`wp_style_add_data()`

wp_style_add_data() 是一個非常棒的函數，它可以讓你添加元數據到你的樣式中，包括條件註釋、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() . 'https://static.wpdaxue.com/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()

如果你需要“註銷”樣式表（爲了使用修改後的版本，例如重新註冊），你可以用 wp_deregister_style() 實現。

讓我們看一個例子：

<?php
 
function mytheme_load_modified_bootstrap() {
    // 如果 bootstrap-main 之前已註冊...
    if( wp_script_is( 'bootstrap-main', 'registered' ) ) {
        // ...取消註冊...
        wp_deregister_style( 'bootstrap-main' );
        // ...取而代之，註冊我們自定義的 modified bootstrap-main.css...
        wp_register_style( 'bootstrap-main', get_template_directory_uri() . 'https://static.wpdaxue.com/css/bootstrap-main-modified.css' );
        // ...然後排隊它
        wp_enqueue_style( 'bootstrap-main' );
    }
}
 
add_action( 'wp_enqueue_scripts', 'mytheme_load_modified_bootstrap' );
 
?>

雖然它不是必須的，但是通常你註銷了一個樣式，就應該重新註冊一個樣式，否則可能會打亂其他的一些東西。

還有一個類似的函數叫做 wp_dequeue_style() ，正如它的名字所暗示的一樣，用來取消已經排隊的樣式表。

結語

恭喜你，現在你知道一切關於在 WordPress 正確加載 CSS 的方法！希望你喜歡本教程。

你有你想分享任何方法或經驗？請在下面評論，並與我們分享您的知識！如果你喜歡這篇文章，不要忘記與你的朋友分享！

正確加載 CSS 到 WordPress

在 WordPress 中加載 CSS 的錯誤方式

在 WordPress 中加載 CSS 的正確方式

註冊 CSS 文件

排隊 CSS 文件

加載樣式到我們的網站

一些額外的函數

添加動態內聯樣式：wp_add_inline_style()

檢查樣式表的排隊狀態：wp_style_is()

添加元數據到樣式表：`wp_style_add_data()`

註銷樣式文件：wp_deregister_style()

結語

【SQL進階】CASE語句的使用

npm error Cannot read properties of null (reading 'isDescendantOf')

WordPress主題、模板、企業主題服務

Git修改文件名稱

正確加載 CSS 到 WordPress

jQuery插件Slider Revolution實現響應動畫滑動圖片切換效果

在網絡程序中爲什麼經常用16進制不用10進制!!

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

正確加載 CSS 到 WordPress

在 WordPress 中加載 CSS 的錯誤方式

在 WordPress 中加載 CSS 的正確方式

註冊 CSS 文件

排隊 CSS 文件

加載樣式到我們的網站

一些額外的函數

添加動態內聯樣式：wp_add_inline_style()

檢查樣式表的排隊狀態：wp_style_is()

添加元數據到樣式表：wp_style_add_data()

註銷樣式文件：wp_deregister_style()

結語

添加元數據到樣式表：`wp_style_add_data()`