核心要點(diǎn)
- WordPress 支持條件加載樣式表和腳本,確保這些文件僅在需要時(shí)加載,從而加快網(wǎng)站加載速度,并減少用戶不必要的數(shù)據(jù)下載量。
- 樣式和腳本應(yīng)遵循 WordPress.org 編碼標(biāo)準(zhǔn)中推薦的最佳實(shí)踐進(jìn)行加載,使用標(biāo)準(zhǔn)的 WordPress 方法可避免不兼容問(wèn)題,并確保網(wǎng)站保持高效。
- WordPress 提供
wp_enqueue_style
和wp_enqueue_script
函數(shù),分別用于包含自定義樣式表和 JavaScript 文件。這些函數(shù)確保 WordPress 找到所有必需的樣式表和腳本,并按正確的順序下載它們。 - WordPress 提供條件標(biāo)簽,可與
if...else
語(yǔ)句結(jié)合使用,以確定在特定條件下應(yīng)用哪些代碼。這些標(biāo)簽可用于確保僅在訪問(wèn)者訪問(wèn)網(wǎng)站的特定頁(yè)面時(shí)才下載特定的樣式表和腳本。
此文章是與 SiteGround 合作創(chuàng)建的系列文章的一部分。感謝您支持使 SitePoint 成為可能的合作伙伴。
如果您的 WordPress 網(wǎng)站只需要在特定頁(yè)面或僅在有限的條件下使用特定的樣式表或 JavaScript 文件,則無(wú)需在網(wǎng)站的每個(gè)地方都加載這些文件。
本文將指導(dǎo)您學(xué)習(xí)如何僅在網(wǎng)站需要時(shí)加載 CSS 樣式和腳本。通過(guò)這種方式,您的網(wǎng)站將加載更快,并且不會(huì)訪問(wèn)包含額外文件的頁(yè)面的用戶無(wú)需在瀏覽器中下載不必要的數(shù)據(jù)。
為什么應(yīng)該以 WordPress 的方式添加樣式和腳本?
如果 WordPress 開(kāi)發(fā)中存在反模式,那就是在 HTML 文檔的 部分添加
<link>
和 <script></script>
標(biāo)簽來(lái)分別加載樣式表和 JavaScript 文件,然后就完事了。
運(yùn)行 WordPress 網(wǎng)站涉及使用來(lái)自軟件本身、許多插件和活動(dòng)主題的樣式表和 JavaScript 代碼。
這意味著主題或插件作者事先不知道特定安裝將運(yùn)行哪些樣式和腳本,或者需要這些資源的順序。例如,讓我們以 jQuery 庫(kù)為例。WordPress 本身可以使用此庫(kù)來(lái)處理 Ajax 請(qǐng)求和其他任務(wù),多個(gè)插件和活動(dòng)主題也可以使用它。
如果插件和主題作者通過(guò)直接在 HTML 文檔中添加相應(yīng)的標(biāo)簽來(lái)包含他們需要的樣式表和腳本,這可能會(huì)導(dǎo)致沖突、資源被多次加載和/或加載順序錯(cuò)誤的可能性。
這就是為什么您應(yīng)該始終按照 WordPress.org 編碼標(biāo)準(zhǔn)中推薦的最佳實(shí)踐來(lái)加載樣式和腳本:
為了使一切和諧地工作,主題和插件使用標(biāo)準(zhǔn)的 WordPress 方法加載腳本和樣式表非常重要。這將確保網(wǎng)站保持高效,并且不會(huì)出現(xiàn)不兼容問(wèn)題。
包含 CSS 和 JavaScript — 主題手冊(cè)
如何使用 wp_enqueue_style
和 wp_enqueue_script
將自定義樣式表包含到主題中的基本函數(shù)如下所示:
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
只有前兩個(gè)參數(shù)是必需的,其他參數(shù)是可選的。
$handle
參數(shù)是樣式表的名稱。您可以根據(jù)文件用途將其命名為 main、portfolio 等。如果您包含來(lái)自 JavaScript 插件的樣式表,只需使用插件的名稱即可。$src
代表樣式表所在 URL。$deps
參數(shù)指定此樣式表是否依賴于另一個(gè)樣式表才能正常工作。$ver
確定樣式表的版本號(hào)。$media
代表樣式表適用的媒體類型,例如 all、screen、print 等。
例如,將名為 portfolio.css 的樣式表添加到您的 WordPress 網(wǎng)站的代碼可能如下所示:
wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');
要包含 JavaScript 文件,您應(yīng)該使用:
wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)
這些參數(shù)與 wp_enqueue_style
中的參數(shù)類似,除了最后一個(gè)參數(shù),它根據(jù)您是否要將 <script>
標(biāo)簽放在文檔的 <head>
或 <body>
部分設(shè)置 true 或 false 值。
假設(shè)您想將 portfolio.js 添加到您的網(wǎng)站,代碼如下所示:
wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);
此代碼告訴 WordPress:
- 您要使用 portfolio 文件,該文件位于活動(dòng)主題目錄內(nèi)的 js 子文件夾中。
- WordPress 需要在加載 portfolio.js 之前下載 jQuery,否則后者將無(wú)法正常工作(您無(wú)需導(dǎo)入 jQuery,因?yàn)樗J(rèn)情況下已與 WordPress 捆綁在一起)。
- WordPress 需要在 HTML 文檔的
<body>
部分添加此文件。
您可能需要包含多個(gè)樣式表或腳本文件,在這種情況下,將所有對(duì) wp_enqueue_style()
和 wp_enqueue_script()
的調(diào)用包裝在一個(gè)函數(shù)中,然后將此函數(shù)掛接到適當(dāng)?shù)?WordPress 操作掛鉤。
這是一個(gè)例子。如果您正在開(kāi)發(fā) WordPress 主題,您可以將其添加到您的 functions.php 文件中。
function mytheme_styles_scripts() { // 主樣式表,style.css wp_enqueue_style( 'style', get_stylesheet_uri() ); // 作品集部分的樣式表 // (與網(wǎng)站的其余部分不同) 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); } // 將函數(shù)掛接到 wp_enqueue_scripts 操作掛鉤 add_action( 'wp_enqueue_scripts', 'mytheme_styles_scripts' );
現(xiàn)在您可以放心,WordPress 將找到所有必需的樣式表和腳本,并按正確的順序下載它們。
樣式表和腳本的條件加載
上面的代碼運(yùn)行良好,并遵循 WordPress 的最佳實(shí)踐。但是,WordPress 將在您的網(wǎng)站的每個(gè)地方下載 portfolio.css 和 portfolio.js。如果您的訪問(wèn)者從未訪問(wèn)過(guò)您的作品集頁(yè)面,這很不幸,但可能會(huì)發(fā)生,瀏覽器將加載兩個(gè)不必要的文件。
現(xiàn)在,讓我們更進(jìn)一步,確保 WordPress 僅當(dāng)訪問(wèn)者訪問(wèn)您的作品集部分時(shí)才包含 portfolio.css 和 portfolio.js。
WordPress 條件標(biāo)簽
WordPress 提供條件標(biāo)簽,這些標(biāo)簽與常規(guī)的 if...else
語(yǔ)句結(jié)合使用,可以很容易地選擇在特定條件下應(yīng)用哪些代碼。
例如,如果您只想在網(wǎng)站的主頁(yè)上執(zhí)行某些代碼,而在其他地方執(zhí)行其他代碼,那么您將編寫如下內(nèi)容:
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
相反,如果您想在網(wǎng)站主頁(yè)以外的任何地方執(zhí)行某些代碼,您將編寫:
wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');
WordPress 提供大量的條件標(biāo)簽,您可以在主題手冊(cè)的條件標(biāo)簽章節(jié)中查看完整的列表。
您可以利用條件標(biāo)簽來(lái)確保 WordPress 僅當(dāng)訪問(wèn)者訪問(wèn)您的網(wǎng)站的作品集頁(yè)面時(shí)才下載 portfolio.css 和 portfolio.js。
讓我們檢查一下您可以做到這一點(diǎn)的一些方法。
使用頁(yè)面 ID
您可以使用條件標(biāo)簽來(lái)檢查用戶是否使用作品集頁(yè)面 ID 位于網(wǎng)站的作品集頁(yè)面上。
要了解頁(yè)面 ID,請(qǐng)執(zhí)行以下操作:
- 登錄到您的 WordPress 網(wǎng)站的管理面板。
- 點(diǎn)擊頁(yè)面以訪問(wèn)網(wǎng)站上所有頁(yè)面的列表。
- 點(diǎn)擊您感興趣的頁(yè)面的標(biāo)題,在編輯器中打開(kāi)它。
- 現(xiàn)在頁(yè)面已在編輯器中打開(kāi),請(qǐng)查看瀏覽器地址欄中的 URL。您應(yīng)該看到類似于 post= 加上一個(gè)數(shù)字的內(nèi)容。該數(shù)字是頁(yè)面 ID:
現(xiàn)在您知道了頁(yè)面 ID,您可以使用條件標(biāo)簽修改先前包含主題樣式表和腳本的代碼,如下所示:
wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)
使用頁(yè)面標(biāo)題
頁(yè)面的條件標(biāo)簽也適用于頁(yè)面標(biāo)題。如果您的作品集頁(yè)面的標(biāo)題為“我的作品集”,則代碼可能如下所示(為了簡(jiǎn)潔起見(jiàn),我只是添加了條件部分):
wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);
使用頁(yè)面別名
您可以將條件標(biāo)簽與頁(yè)面別名一起使用,頁(yè)面別名是該頁(yè)面的用戶友好 URL。以下是實(shí)際應(yīng)用中的樣子:
function mytheme_styles_scripts() { // 主樣式表,style.css wp_enqueue_style( 'style', get_stylesheet_uri() ); // 作品集部分的樣式表 // (與網(wǎng)站的其余部分不同) 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); } // 將函數(shù)掛接到 wp_enqueue_scripts 操作掛鉤 add_action( 'wp_enqueue_scripts', 'mytheme_styles_scripts' );
結(jié)論
在本文中,我討論了如何在 WordPress 網(wǎng)站中以條件方式包含樣式表和腳本文件。在某些情況下,額外的樣式數(shù)量很少,因此為它們創(chuàng)建專用樣式表沒(méi)有多大意義。這只會(huì)生成一個(gè)您的網(wǎng)站可能不需要的 HTTP 請(qǐng)求。
但是,在適當(dāng)?shù)臈l件下,例如,頁(yè)面或主題區(qū)域的設(shè)計(jì)與網(wǎng)站的其余部分不同,樣式表和腳本的選擇性加載遵循 WordPress 的最佳實(shí)踐,并確保訪問(wèn)者的瀏覽器僅下載顯示所需內(nèi)容所需的數(shù)據(jù)量。
您如何將自定義腳本和樣式包含到您的 WordPress 網(wǎng)站中?點(diǎn)擊下面的評(píng)論框分享。
關(guān)于 WordPress 中條件標(biāo)簽和加載樣式和腳本的常見(jiàn)問(wèn)題解答 (FAQ)
WordPress 中的條件標(biāo)簽是什么,它們是如何工作的?
WordPress 中的條件標(biāo)簽是在主題文件中使用的 PHP 函數(shù),用于根據(jù)頁(yè)面滿足的條件來(lái)更改特定頁(yè)面上顯示的內(nèi)容。它們用于確定是否滿足特定條件,然后再執(zhí)行特定函數(shù)。例如,您可以使用條件標(biāo)簽來(lái)檢查頁(yè)面是否是單個(gè)帖子,然后再顯示特定的側(cè)邊欄。
如何使用條件標(biāo)簽在 WordPress 中加載樣式和腳本?
要在 WordPress 中使用條件標(biāo)簽加載樣式和腳本,您需要在主題的 functions.php 文件中添加您的腳本和樣式。您可以將 wp_enqueue_script
和 wp_enqueue_style
函數(shù)與條件標(biāo)簽一起使用。例如,如果您只想在主頁(yè)上加載腳本,可以使用 is_home()
條件標(biāo)簽。
WordPress 中的一些常用條件標(biāo)簽是什么?
WordPress 中的一些常用條件標(biāo)簽包括 is_single()
、is_page()
、is_home()
、is_front_page()
、is_category()
、is_tag()
、is_author()
等。每個(gè)標(biāo)簽都檢查特定條件,例如頁(yè)面是否是單個(gè)帖子、特定頁(yè)面、主頁(yè)、首頁(yè)、類別頁(yè)面、標(biāo)簽頁(yè)面或作者頁(yè)面。
如何在 WordPress 中創(chuàng)建條件代碼片段?
要在 WordPress 中創(chuàng)建條件代碼片段,您需要在 PHP if
語(yǔ)句中使用條件標(biāo)簽。只有在滿足條件時(shí),if
語(yǔ)句中的代碼才會(huì)執(zhí)行。例如,要僅在主頁(yè)上顯示代碼片段,可以在 if
語(yǔ)句中使用 is_home()
條件標(biāo)簽。
為什么我的樣式?jīng)]有在 WordPress 中加載?
如果您的樣式?jīng)]有在 WordPress 中加載,可能是由于多種原因造成的。最常見(jiàn)的原因是樣式文件沒(méi)有在 functions.php 文件中正確注冊(cè)。確保您已正確使用 wp_enqueue_style
函數(shù)。此外,請(qǐng)檢查文件路徑和依賴項(xiàng)是否正確。如果您使用條件標(biāo)簽,請(qǐng)確保滿足條件。
如何以正確的方式在 WordPress 中加載條件 CSS?
要在 WordPress 中加載條件 CSS,您需要使用 wp_enqueue_style
函數(shù)在主題的 functions.php 文件中注冊(cè) CSS 文件。您可以使用條件標(biāo)簽來(lái)指定應(yīng)加載 CSS 文件的條件。例如,要僅在主頁(yè)上加載 CSS 文件,可以使用 is_home()
條件標(biāo)簽。
我可以在 WordPress 中使用多個(gè)條件標(biāo)簽嗎?
是的,您可以在 WordPress 中使用多個(gè)條件標(biāo)簽。您可以使用邏輯運(yùn)算符(如 AND(&&)和 OR(||))將它們組合起來(lái)。例如,要檢查頁(yè)面是否是單個(gè)帖子并且不是主頁(yè),您可以將 is_single()
和 !is_home()
條件標(biāo)簽一起使用。
如何使用條件標(biāo)簽為 WordPress 中的不同頁(yè)面加載不同的樣式?
要為 WordPress 中的不同頁(yè)面加載不同的樣式,您可以在主題的 functions.php 文件中使用條件標(biāo)簽。對(duì)于每種樣式,請(qǐng)使用 wp_enqueue_style
函數(shù)以及檢查特定頁(yè)面的條件標(biāo)簽。例如,要為主頁(yè)加載特定樣式,為單個(gè)帖子加載不同的樣式,可以使用 is_home()
和 is_single()
條件標(biāo)簽。
WordPress 中 is_home()
和 is_front_page()
條件標(biāo)簽有什么區(qū)別?
WordPress 中的 is_home()
條件標(biāo)簽檢查是否正在顯示主頁(yè),而 is_front_page()
條件標(biāo)簽檢查是否正在顯示首頁(yè)。如果您已將首頁(yè)設(shè)置為顯示您的最新帖子,則這兩個(gè)標(biāo)簽都將返回 true。但是,如果您已將靜態(tài)頁(yè)面設(shè)置為首頁(yè),則 is_front_page()
將為此頁(yè)面返回 true,而 is_home()
將為設(shè)置為帖子頁(yè)面的頁(yè)面返回 true。
我可以在 WordPress 中循環(huán)之外使用條件標(biāo)簽嗎?
是的,您可以在 WordPress 中循環(huán)之外使用條件標(biāo)簽。但是,某些條件標(biāo)簽(如 is_single()
和 is_page()
)在循環(huán)之前使用時(shí)可能無(wú)法按預(yù)期工作。這是因?yàn)?WordPress 只有在循環(huán)開(kāi)始后才知道查詢的細(xì)節(jié)。因此,通常建議在循環(huán)內(nèi)或循環(huán)開(kāi)始后使用這些條件標(biāo)簽。
以上是在WordPress中加載樣式和腳本的條件標(biāo)簽的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章!

熱AI工具

Undress AI Tool
免費(fèi)脫衣服圖片

Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序,用于創(chuàng)建逼真的裸體照片

AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。

Clothoff.io
AI脫衣機(jī)

Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費(fèi)的代碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
功能強(qiáng)大的PHP集成開(kāi)發(fā)環(huán)境

Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具

SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)

使用Git管理WordPress項(xiàng)目時(shí),應(yīng)只將主題、自定義插件和配置文件納入版本控制;設(shè)置.gitignore文件以忽略上傳目錄、緩存和敏感配置;利用webhook或CI工具實(shí)現(xiàn)自動(dòng)部署并注意數(shù)據(jù)庫(kù)處理;采用兩分支策略(main/develop)進(jìn)行協(xié)作開(kāi)發(fā)。這樣做可避免沖突、保障安全,并提升協(xié)作與部署效率。

使用WordPress測(cè)試環(huán)境是為了確保新功能、插件或主題在正式上線前的安全性和兼容性,避免影響真實(shí)網(wǎng)站。搭建測(cè)試環(huán)境的步驟包括:下載安裝本地服務(wù)器軟件(如LocalWP、XAMPP),創(chuàng)建站點(diǎn)、設(shè)置數(shù)據(jù)庫(kù)和管理員賬號(hào),安裝主題和插件進(jìn)行測(cè)試;復(fù)制正式網(wǎng)站到測(cè)試環(huán)境的方法是通過(guò)插件導(dǎo)出站點(diǎn)、導(dǎo)入測(cè)試環(huán)境并替換域名;使用時(shí)應(yīng)注意不使用真實(shí)用戶數(shù)據(jù)、定期清理無(wú)用數(shù)據(jù)、備份測(cè)試狀態(tài)、適時(shí)重置環(huán)境,并統(tǒng)一團(tuán)隊(duì)配置以減少差異問(wèn)題。

創(chuàng)建Gutenberg塊的關(guān)鍵在于理解其基本結(jié)構(gòu)并正確連接前后端資源。1.準(zhǔn)備開(kāi)發(fā)環(huán)境:安裝本地WordPress、Node.js和@wordpress/scripts;2.使用PHP注冊(cè)塊并用JavaScript定義塊的編輯和顯示邏輯;3.通過(guò)npm構(gòu)建JS文件以使更改生效;4.遇到問(wèn)題時(shí)檢查路徑、圖標(biāo)是否正確或使用實(shí)時(shí)監(jiān)聽(tīng)構(gòu)建避免重復(fù)手動(dòng)編譯。按照這些步驟,可以逐步實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Gutenberg塊。

在WordPress中,當(dāng)新增自定義文章類型或修改固定鏈接結(jié)構(gòu)后,需手動(dòng)刷新重寫規(guī)則,此時(shí)可通過(guò)代碼調(diào)用flush_rewrite_rules()函數(shù)實(shí)現(xiàn)。1.可在主題或插件激活鉤子中添加該函數(shù)以自動(dòng)刷新;2.僅在必要時(shí)執(zhí)行一次,如添加CPT、分類法或修改鏈接結(jié)構(gòu)后;3.避免頻繁調(diào)用以免影響性能;4.多站點(diǎn)環(huán)境下需視情況為每個(gè)站點(diǎn)單獨(dú)刷新;5.某些托管環(huán)境可能限制規(guī)則保存。此外,訪問(wèn)“設(shè)置>固定鏈接”頁(yè)面點(diǎn)擊保存也可觸發(fā)刷新,適合非自動(dòng)化場(chǎng)景。

要實(shí)現(xiàn)響應(yīng)式WordPress主題設(shè)計(jì),首先要使用HTML5和移動(dòng)優(yōu)先的Meta標(biāo)簽,在header.php中添加viewport設(shè)置以確保移動(dòng)端正確顯示,并用HTML5結(jié)構(gòu)標(biāo)簽組織布局;其次,利用CSS媒體查詢實(shí)現(xiàn)不同屏幕寬度下的樣式適配,按移動(dòng)優(yōu)先原則編寫樣式,常用斷點(diǎn)包括480px、768px和1024px;第三,彈性處理圖片和布局,為圖片設(shè)置max-width:100%并使用Flexbox或Grid布局替代固定寬度;最后,通過(guò)瀏覽器開(kāi)發(fā)者工具和真實(shí)設(shè)備進(jìn)行充分測(cè)試,優(yōu)化加載性能,確保響應(yīng)

tosetupredirectsinwordpressingthe.htaccessfile,locateThEfileInyourSite'sRootDirectorectoryAndDrectRectrulesabovethe#beginWordPresssection.forbasic301redirects,USETHEETHEETERECTREFTATRECTATREDERTREFTATREDERTREFTATRECTRECTATRECTRECTATREDECT301/OLD-PAGEHTTPS:

TOINTEGRATETHIRD-PARTYAPISINTOWORDPRESS,關(guān)注臺(tái)詞:1.SelectAutableabepianDobtainCredentialslikeapikeYsoroAuthtoKensByEnterRegisteringThemSecure.2.ChooseBeteBetB??eteBetB??eteBetB??etebetInpliCityOorcustimplicityOrcustomPliCoseTompliCoseTomploomcoseusionfunctionfunctionfunctibunitiacuciencipuity forfunigation。

UsingsMtpForWordPresseMailSimProvesDeliverabilitialComparedComparedTothEdeDefaultPhpMail()函數(shù).1.smtpauthenticateswithyouremailserver.2.somemomehostsdisablesablephpmail()
