在WordPress中加載樣式和腳本的條件標籤
核心要點
- WordPress 支持條件加載樣式表和腳本，確保這些文件僅在需要時加載，從而加快網站加載速度，並減少用戶不必要的數據下載量。
- 樣式和腳本應遵循 WordPress.org 編碼標準中推薦的最佳實踐進行加載，使用標準的 WordPress 方法可避免不兼容問題，並確保網站保持高效。
- WordPress 提供
wp_enqueue_style和wp_enqueue_script函數，分別用於包含自定義樣式表和 JavaScript 文件。這些函數確保 WordPress 找到所有必需的樣式表和腳本，並按正確的順序下載它們。 - WordPress 提供條件標籤，可與
if...else語句結合使用，以確定在特定條件下應用哪些代碼。這些標籤可用於確保僅在訪問者訪問網站的特定頁面時才下載特定的樣式表和腳本。
此文章是與 SiteGround 合作創建的系列文章的一部分。感謝您支持使 SitePoint 成為可能的合作夥伴。
如果您的 WordPress 網站只需要在特定頁面或僅在有限的條件下使用特定的樣式表或 JavaScript 文件，則無需在網站的每個地方都加載這些文件。
本文將指導您學習如何僅在網站需要時加載 CSS 樣式和腳本。通過這種方式，您的網站將加載更快，並且不會訪問包含額外文件的頁面的用戶無需在瀏覽器中下載不必要的數據。
為什麼應該以 WordPress 的方式添加樣式和腳本？
如果 WordPress 開發中存在反模式，那就是在 HTML 文檔的 部分添加 <link> 和 <script></script> 標籤來分別加載樣式表和 JavaScript 文件，然後就完事了。
運行 WordPress 網站涉及使用來自軟件本身、許多插件和活動主題的樣式表和 JavaScript 代碼。
這意味著主題或插件作者事先不知道特定安裝將運行哪些樣式和腳本，或者需要這些資源的順序。例如，讓我們以 jQuery 庫為例。 WordPress 本身可以使用此庫來處理 Ajax 請求和其他任務，多個插件和活動主題也可以使用它。
如果插件和主題作者通過直接在 HTML 文檔中添加相應的標籤來包含他們需要的樣式表和腳本，這可能會導致衝突、資源被多次加載和/或加載順序錯誤的可能性。
這就是為什麼您應該始終按照 WordPress.org 編碼標準中推薦的最佳實踐來加載樣式和腳本：
為了使一切和諧地工作，主題和插件使用標準的 WordPress 方法加載腳本和样式表非常重要。這將確保網站保持高效，並且不會出現不兼容問題。
包含 CSS 和 JavaScript — 主題手冊
如何使用 wp_enqueue_style 和 wp_enqueue_script
將自定義樣式表包含到主題中的基本函數如下所示：
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
只有前兩個參數是必需的，其他參數是可選的。
$handle參數是樣式表的名稱。您可以根據文件用途將其命名為 main、portfolio 等。如果您包含來自 JavaScript 插件的樣式表，只需使用插件的名稱即可。$src代表樣式表所在 URL。$deps參數指定此樣式表是否依賴於另一個樣式表才能正常工作。$ver確定樣式表的版本號。$media代表樣式表適用的媒體類型，例如 all、screen、print 等。
例如，將名為 portfolio.css 的樣式表添加到您的 WordPress 網站的代碼可能如下所示：
wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');
要包含 JavaScript 文件，您應該使用：
wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)
這些參數與 wp_enqueue_style 中的參數類似，除了最後一個參數，它根據您是否要將 <script> 標籤放在文檔的 <head> 或 <body> 部分設置 true 或 false 值。
假設您想將 portfolio.js 添加到您的網站，代碼如下所示：
wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);
此代碼告訴 WordPress：
- 您要使用 portfolio 文件，該文件位於活動主題目錄內的 js 子文件夾中。
- WordPress 需要在加載 portfolio.js 之前下載 jQuery，否則後者將無法正常工作（您無需導入 jQuery，因為它默認情況下已與 WordPress 捆綁在一起）。
- WordPress 需要在 HTML 文檔的
<body>部分添加此文件。
您可能需要包含多個樣式表或腳本文件，在這種情況下，將所有對wp_enqueue_style() 和wp_enqueue_script() 的調用包裝在一個函數中，然後將此函數掛接到適當的WordPress 操作掛鉤。
這是一個例子。如果您正在開發 WordPress 主題，您可以將其添加到您的 functions.php 文件中。
function mytheme_styles_scripts() {
// 主样式表，style.css
wp_enqueue_style( 'style', get_stylesheet_uri() );
// 作品集部分的样式表
// (与网站的其余部分不同)
wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');
// 作品集部分的 JS
wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);
}
// 将函数挂接到 wp_enqueue_scripts 操作挂钩
add_action( 'wp_enqueue_scripts', 'mytheme_styles_scripts' );現在您可以放心，WordPress 將找到所有必需的樣式表和腳本，並按正確的順序下載它們。
樣式表和腳本的條件加載
上面的代碼運行良好，並遵循 WordPress 的最佳實踐。但是，WordPress 將在您的網站的每個地方下載 portfolio.css 和 portfolio.js。如果您的訪問者從未訪問過您的作品集頁面，這很不幸，但可能會發生，瀏覽器將加載兩個不必要的文件。
現在，讓我們更進一步，確保 WordPress 僅當訪問者訪問您的作品集部分時才包含 portfolio.css 和 portfolio.js。
WordPress 條件標籤
WordPress 提供條件標籤，這些標籤與常規的 if...else 語句結合使用，可以很容易地選擇在特定條件下應用哪些代碼。
例如，如果您只想在網站的主頁上執行某些代碼，而在其他地方執行其他代碼，那麼您將編寫如下內容：
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
相反，如果您想在網站主頁以外的任何地方執行某些代碼，您將編寫：
wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');
WordPress 提供大量的條件標籤，您可以在主題手冊的條件標籤章節中查看完整的列表。
您可以利用條件標籤來確保 WordPress 僅當訪問者訪問您的網站的作品集頁面時才下載 portfolio.css 和 portfolio.js。
讓我們檢查一下您可以做到這一點的一些方法。
使用頁面 ID
您可以使用條件標籤來檢查用戶是否使用作品集頁面 ID 位於網站的作品集頁面上。
要了解頁面 ID，請執行以下操作：
- 登錄到您的 WordPress 網站的管理面板。
- 點擊頁面以訪問網站上所有頁面的列表。
- 點擊您感興趣的頁面的標題，在編輯器中打開它。
- 現在頁面已在編輯器中打開，請查看瀏覽器地址欄中的 URL。您應該看到類似於 post= 加上一個數字的內容。該數字是頁面 ID：
現在您知道了頁面 ID，您可以使用條件標籤修改先前包含主題樣式表和腳本的代碼，如下所示：
wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)
使用頁面標題
頁面的條件標籤也適用於頁面標題。如果您的作品集頁面的標題為“我的作品集”，則代碼可能如下所示（為了簡潔起見，我只是添加了條件部分）：
wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);
使用頁面別名
您可以將條件標籤與頁面別名一起使用，頁面別名是該頁面的用戶友好 URL。以下是實際應用中的樣子：
function mytheme_styles_scripts() {
// 主样式表，style.css
wp_enqueue_style( 'style', get_stylesheet_uri() );
// 作品集部分的样式表
// (与网站的其余部分不同)
wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');
// 作品集部分的 JS
wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);
}
// 将函数挂接到 wp_enqueue_scripts 操作挂钩
add_action( 'wp_enqueue_scripts', 'mytheme_styles_scripts' );結論
在本文中，我討論瞭如何在 WordPress 網站中以條件方式包含樣式表和腳本文件。在某些情況下，額外的樣式數量很少，因此為它們創建專用樣式表沒有多大意義。這只會生成一個您的網站可能不需要的 HTTP 請求。
但是，在適當的條件下，例如，頁面或主題區域的設計與網站的其餘部分不同，樣式表和腳本的選擇性加載遵循WordPress 的最佳實踐，並確保訪問者的瀏覽器僅下載顯示所需內容所需的數據量。
您如何將自定義腳本和样式包含到您的 WordPress 網站中？點擊下面的評論框分享。
關於 WordPress 中條件標籤和加載樣式和腳本的常見問題解答 (FAQ)
WordPress 中的條件標籤是什麼，它們是如何工作的？
WordPress 中的條件標籤是在主題文件中使用的 PHP 函數，用於根據頁面滿足的條件來更改特定頁面上顯示的內容。它們用於確定是否滿足特定條件，然後再執行特定函數。例如，您可以使用條件標籤來檢查頁面是否是單個帖子，然後再顯示特定的側邊欄。
如何使用條件標籤在 WordPress 中加載樣式和腳本？
要在 WordPress 中使用條件標籤加載樣式和腳本，您需要在主題的 functions.php 文件中添加您的腳本和样式。您可以將 wp_enqueue_script 和 wp_enqueue_style 函數與條件標籤一起使用。例如，如果您只想在主頁上加載腳本，可以使用 is_home() 條件標籤。
WordPress 中的一些常用條件標籤是什麼？
WordPress 中的一些常用條件標籤包括 is_single()、is_page()、is_home()、is_front_page()、is_category()、is_tag()、is_author() 等。每個標籤都檢查特定條件，例如頁面是否是單個帖子、特定頁面、主頁、首頁、類別頁面、標籤頁面或作者頁面。
如何在 WordPress 中創建條件代碼片段？
要在 WordPress 中創建條件代碼片段，您需要在 PHP if 語句中使用條件標籤。只有在滿足條件時，if 語句中的代碼才會執行。例如，要僅在主頁上顯示代碼片段，可以在 if 語句中使用 is_home() 條件標籤。
為什麼我的樣式沒有在 WordPress 中加載？
如果您的樣式沒有在 WordPress 中加載，可能是由於多種原因造成的。最常見的原因是樣式文件沒有在 functions.php 文件中正確註冊。確保您已正確使用 wp_enqueue_style 函數。此外，請檢查文件路徑和依賴項是否正確。如果您使用條件標籤，請確保滿足條件。
如何以正確的方式在 WordPress 中加載條件 CSS？
要在 WordPress 中加載條件 CSS，您需要使用 wp_enqueue_style 函數在主題的 functions.php 文件中註冊 CSS 文件。您可以使用條件標籤來指定應加載 CSS 文件的條件。例如，要僅在主頁上加載 CSS 文件，可以使用 is_home() 條件標籤。
我可以在 WordPress 中使用多個條件標籤嗎？
是的，您可以在 WordPress 中使用多個條件標籤。您可以使用邏輯運算符（如 AND（&&）和 OR（||））將它們組合起來。例如，要檢查頁面是否是單個帖子並且不是主頁，您可以將 is_single() 和 !is_home() 條件標籤一起使用。
如何使用條件標籤為 WordPress 中的不同頁面加載不同的樣式？
要為 WordPress 中的不同頁面加載不同的樣式，您可以在主題的 functions.php 文件中使用條件標籤。對於每種樣式，請使用 wp_enqueue_style 函數以及檢查特定頁面的條件標籤。例如，要為主頁加載特定樣式，為單個帖子加載不同的樣式，可以使用 is_home() 和 is_single() 條件標籤。
WordPress 中 is_home() 和 is_front_page() 條件標籤有什麼區別？
WordPress 中的 is_home() 條件標籤檢查是否正在顯示主頁，而 is_front_page() 條件標籤檢查是否正在顯示首頁。如果您已將首頁設置為顯示您的最新帖子，則這兩個標籤都將返回 true。但是，如果您已將靜態頁面設置為首頁，則 is_front_page() 將為此頁面返回 true，而 is_home() 將為設置為帖子頁面的頁面返回 true。
我可以在 WordPress 中循環之外使用條件標籤嗎？
是的，您可以在 WordPress 中循環之外使用條件標籤。但是，某些條件標籤（如 is_single() 和 is_page()）在循環之前使用時可能無法按預期工作。這是因為 WordPress 只有在循環開始後才知道查詢的細節。因此，通常建議在循環內或循環開始後使用這些條件標籤。
以上是在WordPress中加載樣式和腳本的條件標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何在 WordPress 中獲取登錄用戶信息以獲得個性化結果
Apr 19, 2025 pm 11:57 PM
最近，我們向您展示瞭如何通過允許用戶將自己喜歡的帖子保存在個性化庫中來為用戶創建個性化體驗。您可以通過在某些地方（即歡迎屏幕）使用他們的名字，將個性化結果提升到另一個水平。幸運的是，WordPress使獲取登錄用戶的信息變得非常容易。在本文中，我們將向您展示如何檢索與當前登錄用戶相關的信息。我們將利用get_currentuserinfo(); 功能。這可以在主題中的任何地方使用（頁眉、頁腳、側邊欄、頁面模板等）。為了使其工作，用戶必須登錄。因此我們需要使用
wordpress文章列表怎麼調
Apr 20, 2025 am 10:48 AM
有四種方法可以調整 WordPress 文章列表：使用主題選項、使用插件（如 Post Types Order、WP Post List、Boxy Stuff）、使用代碼（在 functions.php 文件中添加設置）或直接修改 WordPress 數據庫。
如何開始WordPress博客：初學者的分步指南
Apr 17, 2025 am 08:25 AM
博客是人們在網上表達觀點、意見和見解的理想平台。許多新手渴望建立自己的網站，卻因擔心技術障礙或成本問題而猶豫不決。然而，隨著平台不斷發展以滿足初學者的能力和需求，現在開始變得比以往任何時候都更容易。 本文將逐步指導您如何建立一個WordPress博客，從主題選擇到使用插件提升安全性和性能，助您輕鬆創建自己的網站。 選擇博客主題和方向 在購買域名或註冊主機之前，最好先確定您計劃涵蓋的主題。個人網站可以圍繞旅行、烹飪、產品評論、音樂或任何激發您興趣的愛好展開。專注於您真正感興趣的領域可以鼓勵持續寫作
如何在父分類的存檔頁面上顯示子分類
Apr 19, 2025 pm 11:54 PM
您想了解如何在父分類存檔頁面上顯示子分類嗎？在自定義分類存檔頁面時，您可能需要執行此操作，以使其對訪問者更有用。在本文中，我們將向您展示如何在父分類存檔頁面上輕鬆顯示子分類。為什麼在父分類存檔頁面上顯示子分類？通過在父分類存檔頁面上顯示所有子分類，您可以使其不那麼通用，對訪問者更有用。例如，如果您運行一個關於書籍的WordPress博客，並且有一個名為“主題”的分類法，那麼您可以添加“小說”、“非小說”等子分類法，以便您的讀者可以
如何在 WordPress 中按帖子過期日期對帖子進行排序
Apr 19, 2025 pm 11:48 PM
過去，我們分享過如何使用PostExpirator插件使WordPress中的帖子過期。好吧，在創建活動列表網站時，我們發現這個插件非常有用。我們可以輕鬆刪除過期的活動列表。其次，多虧了這個插件，按帖子過期日期對帖子進行排序也非常容易。在本文中，我們將向您展示如何在WordPress中按帖子過期日期對帖子進行排序。更新了代碼以反映插件中更改自定義字段名稱的更改。感謝Tajim在評論中讓我們知道。在我們的特定項目中，我們將事件作為自定義帖子類型。現在
wordpress主機怎麼建站
Apr 20, 2025 am 11:12 AM
要使用 WordPress 主機建站，需要：選擇一個可靠的主機提供商。購買一個域名。設置 WordPress 主機帳戶。選擇一個主題。添加頁面和文章。安裝插件。自定義您的網站。發布您的網站。
如何使用 IFTTT 自動化 WordPress 和社交媒體（及更多）
Apr 18, 2025 am 11:27 AM
您是否正在尋找自動化 WordPress 網站和社交媒體帳戶的方法？ 通過自動化，您將能夠在 Facebook、Twitter、LinkedIn、Instagram 等平台上自動分享您的 WordPress 博客文章或更新。 在本文中，我們將向您展示如何使用 IFTTT、Zapier 和 Uncanny Automator 輕鬆實現 WordPress 和社交媒體的自動化。 為什麼要自動化 WordPress 和社交媒體？ 自動化您的WordPre
如何在 WordPress 中顯示查詢數量和頁面加載時間
Apr 19, 2025 pm 11:51 PM
我們的一位用戶詢問其他網站如何在頁腳中顯示查詢數量和頁面加載時間。您經常會在網站的頁腳中看到這一點，它可能會顯示類似以下內容：“1.248秒內64個查詢”。在本文中，我們將向您展示如何在WordPress中顯示查詢數量和頁面加載時間。只需將以下代碼粘貼到主題文件中您喜歡的任何位置（例如footer.php）。 queriesin
