小说改编的网页游戏,择天记

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

wp_enqueue_scripts–如何在WordPress中實(shí)現(xiàn)資源隊(duì)列

在wordpress中，不是簡(jiǎn)單地將這些添加到標(biāo)題中，您應(yīng)該使用一種稱(chēng)為入隊(duì)的方法，這是一種處理資產(chǎn)的標(biāo)準(zhǔn)化方式，具有管理依賴(lài)項(xiàng)的額外好處。在下面了解如何使用 wp_enqueue_scripts.

十余年的市南網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整市南建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“市南網(wǎng)站設(shè)計(jì)”,“市南網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

排隊(duì)的工作原理
使用wp_enqueue_scripts排隊(duì)基礎(chǔ)知識(shí)
依賴(lài)管理
在頁(yè)腳中加載腳本
為樣式指定媒體

排隊(duì)的工作原理

將腳本或樣式排入隊(duì)列時(shí)需要執(zhí)行兩個(gè)步驟。首先你注冊(cè)它——告訴WordPress它在那里——然后你實(shí)際上將它排入隊(duì)列，最終將它輸出到標(biāo)題中或在結(jié)束正文標(biāo)簽之前。

有兩個(gè)步驟的原因與模塊化有關(guān)。有時(shí)您會(huì)想讓W(xué)ordPress知道某個(gè)資產(chǎn)，但您可能不想在每個(gè)頁(yè)面上都使用它。例如：如果您正在構(gòu)建一個(gè)使用Javascript的自定義圖庫(kù)簡(jiǎn)碼，您實(shí)際上只需要在使用簡(jiǎn)碼時(shí)加載JS – 可能不是在每個(gè)頁(yè)面上。

實(shí)現(xiàn)這一點(diǎn)的方法是首先注冊(cè)腳本，只有在顯示簡(jiǎn)碼時(shí)才真正將其排入隊(duì)列。

使用wp_enqueue_scripts入隊(duì)基礎(chǔ)知識(shí)

要在前端排隊(duì)腳本和樣式，您需要使用wp_enqueue_scripts鉤子。在該掛鉤的函數(shù)可以使用wp_register_script()，wp_enqueue_script()，wp_register_style()和wp_enqueue_style()功能。

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
    wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );

    wp_enqueue_style( 'custom-gallery' );
    wp_enqueue_script( 'custom-gallery' );
}

在上面的例子中，我在同一個(gè)函數(shù)中注冊(cè)和排隊(duì)資產(chǎn)，這有點(diǎn)多余。實(shí)際上，您可以使用入隊(duì)函數(shù)立即注冊(cè)和入隊(duì)，方法是使用與注冊(cè)函數(shù)中相同的參數(shù)：

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );
}

如果我要將這兩個(gè)函數(shù)分開(kāi)，我會(huì)通過(guò)在不同的鉤子中使用它們來(lái)實(shí)現(xiàn)。在一個(gè)真實(shí)的例子中，我們可以使用wp_enqueue_scripts鉤子來(lái)注冊(cè)資產(chǎn)和短代碼的函數(shù)來(lái)將它們排入隊(duì)列。

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
    wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );

}

add_shortcode( 'custom_gallery', 'custom_gallery' );

function custom_gallery( $atts ){

    wp_enqueue_style( 'custom-gallery' );
    wp_enqueue_script( 'custom-gallery' );

    // Gallery code here
}

依賴(lài)管理

WordPress的排隊(duì)機(jī)制內(nèi)置了對(duì)依賴(lài)項(xiàng)管理的支持，使用兩者wp_register_style()和wp_register_script()函數(shù)的第三個(gè)參數(shù)。如果您不需要將它們分開(kāi)，您也可以立即使用排隊(duì)功能。

第三個(gè)參數(shù)是需要在當(dāng)前資產(chǎn)入隊(duì)之前加載的已注冊(cè)腳本/樣式數(shù)組。我們上面的例子很可能依賴(lài)于jQuery，所以讓我們現(xiàn)在指定：

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) );
}

我們不需要自己注冊(cè)或排隊(duì)jQuery，因?yàn)樗呀?jīng)是WordPress的一部分。您可以在Codex中找到WordPress中可用的腳本和樣式列表。

如果您有自己的依賴(lài)項(xiàng)，則需要注冊(cè)它們，否則您的腳本將無(wú)法加載。下面是一個(gè)例子：

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) );
    wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery' ) );
}

假設(shè)第一個(gè)腳本是畫(huà)廊，第二個(gè)腳本是使圖像在燈箱中打開(kāi)的擴(kuò)展。請(qǐng)注意，即使我們的第二個(gè)腳本依賴(lài)于jQuery，我們也不需要指定這一點(diǎn)，因?yàn)槲覀兊牡谝粋€(gè)腳本已經(jīng)加載了jQuery。也就是說(shuō)，聲明所有依賴(lài)項(xiàng)可能是個(gè)好主意，只是為了確保如果您忘記包含依賴(lài)項(xiàng)，不會(huì)有任何破壞。

WordPress 現(xiàn)在知道我們需要哪些腳本，并且可以計(jì)算出需要將它們添加到頁(yè)面的順序。

在頁(yè)腳中加載腳本

每當(dāng)您可以在頁(yè)腳中加載腳本時(shí)，您都應(yīng)該這樣做。這會(huì)增加明顯的頁(yè)面加載時(shí)間，并可以防止您的網(wǎng)站在加載腳本時(shí)掛起，尤其是當(dāng)它們包含AJAX調(diào)用時(shí)。

入隊(duì)機(jī)制可以使用第五個(gè)參數(shù)（第四個(gè)是可選版本號(hào)）向頁(yè)腳添加腳本。如果我們稍微修改一下，上面的示例將加載頁(yè)腳中的腳本。

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ), '1.0', true );
    wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery', 'jquery' ), '1.0', true );
}

指定true作為第五個(gè)參數(shù)會(huì)將腳本放在頁(yè)腳中，使用false或省略參數(shù)將在頁(yè)眉中加載內(nèi)容。正如我之前提到的，只要有可能，就在頁(yè)腳中加載腳本。

為樣式指定媒體

使用樣式注冊(cè)/入隊(duì)功能的第五個(gè)參數(shù)，您可以控制已定義腳本的媒體類(lèi)型（打印、屏幕、手持設(shè)備等）。通過(guò)使用此參數(shù)，您可以將樣式的加載限制為特定的媒體類(lèi)型，這是一個(gè)方便的小優(yōu)化技巧。

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_register_style( 'custom-gallery-print', plugins_url( '/css/gallery.css' , __FILE__ ), array(), '1.0', 'print' );

}

有關(guān)可以使用的媒體類(lèi)型的完整列表，請(qǐng)查看CSS規(guī)范。

小結(jié)

對(duì)資產(chǎn)進(jìn)行排隊(duì)是一種強(qiáng)大的處理方式。它為您和其他插件/主題制作者提供了對(duì)整個(gè)系統(tǒng)的更多控制，并使依賴(lài)管理脫離您的手。

如果這還不夠，這是添加資源的方式，如果您不使用此方法，許多主題市場(chǎng)和WordPress插件庫(kù)本身將不會(huì)批準(zhǔn)您的工作。

分享標(biāo)題：wp_enqueue_scripts–如何在WordPress中實(shí)現(xiàn)資源隊(duì)列
本文網(wǎng)址：http://m.fisionsoft.com.cn/article/ccicsis.html