WordPress中的腳本和样式

鑰匙要點

WordPress中的
• 啟用腳本和样式對於保持性能和防止不同腳本和样式之間的衝突至關重要。添加腳本的推薦方法是使用admin_enqueue_script鉤子，將處理程序前綴以避免衝突並確保腳本始終加載。
>可以使用WP_Deregister_style函數刪除引起錯誤或衝突的不必要腳本。在解決問題時，這在調試模式中特別有用。
• >
>使用短代碼通常需要將腳本注入頁面。這可以通過在the_content過濾器上註冊回調並測試是否包含短碼來實現這一點。但是，該解決方案可能會在高負載網站上存在性能問題。一個更複雜的解決方案涉及使用作曲家加載類並在帖子內容中註冊短碼。
• 。
在開發WordPress插件和主題一段時間後，您開始越來越多地思考主題性能以及對客戶造成的問題。這些問題之一是入圍腳本和样式。在本文中，我們將介紹針對不同用例的起點腳本和最佳實踐的基礎知識。您可以檢查本文以獲取有關管理WordPress資產的初學者概述。

>入圍腳本和样式

>如果您需要一些CSS或JavaScript代碼要注入網站的某些頁面，我們傾向於將它們添加到同一標記文件中，或者使用直接URL添加它們。

但是，這不是添加腳本的推薦方法，並且緩存插件不會優化和緩存您的資產以提高網站性能。我們需要使用Admin_enqueue_scripts鉤。

> wp_enqueue_script方法的第一個參數是腳本處理程序名稱，我們應該始終前綴處理程序以避免任何衝突，並確保我們的腳本始終加載。

// ...
<script type="text/javascript">
    // some JS code
</script>

<style type="text/css">
    // some CSS code
</style>
//...

<script type="text/javascript" src="<?= plugins_url('assets/js/main.js') ?>"></script>

當前的解決方案不是完美的，我們的腳本都包含在每個後端頁面中。我們可以使用傳遞給回調函數的$掛接變量來測試特定頁面。 >

>現在，我們的腳本僅包含在設置和新的帖子頁面中。我們只能在用戶創建一個新頁面時才能使用我們的樣式。 >

add_action( 'admin_enqueue_scripts', function($hook) {
    $pluginPrefix = "my-prefix";
    wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
} );

>刪除不必要的腳本

>大多數開發人員不在乎在需要時起腳本的啟動，這就是為什麼我們總是會遇到意外的錯誤和奇怪的造型問題的原因。當注意到腳本引發錯誤或引起衝突時，您可以在添加自己的腳本之前將其刪除，這通常在調試模式中很有用。

>

// ...
<script type="text/javascript">
    // some JS code
</script>

<style type="text/css">
    // some CSS code
</style>
//...

<script type="text/javascript" src="<?= plugins_url('assets/js/main.js') ?>"></script>

使用快速代碼

大多數插件和主題都提供了一組與網站交互的快捷代碼，有時它們需要將腳本注入頁面。可悲的是，我們無法像以前在後端那樣測試前頁面。

>

實現此目的的一種簡單方法是在the_content過濾器上註冊回調，並測試它是否包含您的短碼。如果它返回是，您可以加入您的腳本，否則什麼都不做。

>

add_action( 'admin_enqueue_scripts', function($hook) {
    $pluginPrefix = "my-prefix";
    wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
} );

上面的代碼效果很好，並且只會為包含快捷代碼的帖子中提起我們的腳本。但是，該解決方案在高負載網站上存在一些嚴重的性能問題。我們將為此問題創建一個更複雜的解決方案。

>

如果您還沒有使用作曲家來加載課程，我建議您開始這樣做。我們的插件composer.json文件看起來如下：

>

add_action( 'admin_enqueue_scripts', function($hook) {
    if ( !in_array($hook, array("options-general.php", "post-new.php")) )
        return;

    $pluginPrefix = "my-prefix";
    wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
} );

src/shertcodes/helloshortcode.php類保存我們的短碼定義。

add_action( 'admin_enqueue_scripts', function($hook) {
    if ( $hook == "post-new.php" && isset($_GET['post_type']) && $_GET['post_type'] == "page" )
    {
        $pluginPrefix = "my-prefix";
        wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
    }
} );

運行方法將返回我們的快捷代碼的HTML標記，並在使用快捷代碼時將加載的靜態屬性設置為true。 >>

>當然，我們可以避免將此代碼放入主插件文件中，但是我們將保持簡單且可讀的內容。

$短代碼變量包含可用的快捷代碼列表。第一個循環將註冊我們的短代碼，並將運行方法成為處理程序。接下來，我們將使用WP_FOOTER鉤在關閉身體標籤之前將我們的快捷代碼腳本勾勒出來。

add_action( 'admin_enqueue_scripts', function($hook) {
    $unautorized_styles = [
        'script1',
        'another-script'
    ];

    foreach ( $unautorized_styles as $handle )
    {
        wp_deregister_style( $handle );
    }

    // enqueue my scripts
} );

>您現在可以創建一個包含我們的短碼的新頁面，並檢查我們的腳本是否正確加載。

>

結論

這篇簡短的文章是有關如何提起插件和主題腳本的摘要，也是避免將它們加載到網站上的每個頁面中的最佳方法。如果您有任何疑問或評論，請在下面發布它們，我會盡力回答它們！

經常詢問有關在WordPress中起義腳本和样式的問題（常見問題解答）

>在WordPress中啟動腳本和样式的目的是什麼？它有助於防止主題或插件可能使用的不同腳本和样式之間的衝突。通過入學，您是在告訴WordPress何時加載腳本/樣式，加載腳本/樣式以及它依賴的其他腳本/樣式。

>

>如何在WordPress中加入腳本？

>

>在WordPress中加入腳本，您需要使用wp_enqueue_script（）函數。此功能至少需要兩個參數：句柄（腳本的唯一名稱）和SRC（腳本的URL）。您還可以指定其他參數，例如依賴項，版本以及是否將腳本加載到頁腳中。

>

> wp_enqueue_script（）和wp_register_script（）？在WordPress上註冊腳本，但是有一個關鍵區別。 wp_register_script（）僅註冊腳本，並且不加入它。這意味著腳本將不會打印，除非以後使用wp_enqueue_script（）拼寫。另一方面，WP_ENQUEUE_SCRIPT（）寄存器併升級腳本，這意味著它將在HTML中打印。

我可以在WordPress中加入樣式嗎？

是的，是的，您可以在WordPress Styles中使用WordPress Styles On WordPress Styles使用wp_enqueue_style（）函數。此功能與WP_ENQUEUE_SCRIPT（）相似，但是它用於樣式表，而不是腳本。

什麼是什麼'wp_enque_scripts的動作鉤？您的腳本和样式。當WordPress即將在HTML中打印腳本和样式時，此鉤被稱為。通過掛接，您可以確保在適當的時間出現腳本和样式。

>

>為什麼在啟動腳本或樣式時指定依賴項很重要？

>

指定依賴項確保您的腳本確保您的腳本或樣式以正確的順序加載。如果您的腳本取決於另一個腳本（例如jQuery），則WordPress將確保在您的腳本之前加載jQuery。使用WP_DEQUEUE_SCRIPT（）或WP_DEQUEUE_STYLE（）函數的WordPress中的腳本或樣式。如果您想停止加載腳本或樣式，這很有用。使用“ admin_enqueue_scripts”動作鉤的區域。這與“ wp_enqueue_scripts'掛鉤相似，但它用於管理區域而不是前端。

>

>什麼是'wp_print_scripts的動作鉤？ Hook是一種較舊的鉤子，用於加入腳本。但是，不建議再使用此鉤子，因為它可能導致腳本加載順序的問題。您應該使用“ wp_enqueue_scripts”掛鉤。

>我可以有條件地輔助腳本和样式嗎？例如，如果要查看某個頁面，則可以使用is_page（）函數僅在腳本或樣式中使用腳本。這對於性能很有用，因為它可以防止不必要的腳本和样式被加載。

以上是WordPress中的腳本和样式的詳細內容。更多資訊請關注PHP中文網其他相關文章！