WordPress 限制外掛只能在選定頁面上載入其 CSS 和 JS？

問題描述

我想導致一個外掛將 CSS 樣式表和 JavaScript JS 檔案的載入限制到只需要它們的那些頁面。

我的問題的一個例子是我用來在我的網站 (「contact me」頁面) 的一個頁面中建立一個表單的外掛 Contact Form 7 。但是，它會在網站上的每個頁面/帖子中新增以下行：

<link rel='stylesheet' id='contact-form-7-css'  href='http://www.r-statistics.com/wp-content/plugins/contact-form-7/styles.css?ver=2.3.1' type='text/css' media='all' />

<script type='text/javascript' src='http://www.r-statistics.com/wp-content/plugins/contact-form-7/scripts.js?ver=2.3.1'></script>

這使我懷疑這個外掛會損害我的網站的載入時間，只有在網站上只有一頁的感興趣的擴充套件。

因此，我的問題是如何從除了”Contact Me” 頁面之外的所有頁面中刪除這些額外的行，但不停用外掛？

最佳解決方案

樣式和指令碼始終由函式 wp_enqueue_script()和 wp_enqueue_style()設定，wp_enqueue_style()和 wp_enqueue_style()必須繫結到特定的動作鉤子才能執行。我在聯絡表格 7 中看到，它看起來像是使用 wpcf7_enqueue_scripts 和 wpcf7_enqueue_styles 的動作標籤將它們新增到 wp_print_scripts 和 wp_print_styles 鉤子。

所以，你需要做的是 un-hook 每個頁面的指令碼和樣式，但你的聯絡頁面。 wp_head 操作在指令碼和樣式操作之前觸發，因此您需要在主題的 functions.php 檔案中新增如下內容：

function remove_wpcf7_extras() {
    remove_action('wp_print_scripts', 'wpcf7_enqueue_scripts');
    remove_action('wp_print_styles', 'wpcf7_enqueue_styles');
}

if( ! is_page('contact me') ) {
    add_action('wp_head', 'remove_wpcf7_extras');
}

當您在聯絡頁面上時，is_page()函式將返回 true(假設名稱為”contact me”)… 您還可以使用頁面段和頁面 ID 作為過濾器。在所有其他頁面上，if()條件將指令碼/樣式刪除功能新增到 wp_head 操作之前，該操作將在 wp_print_scripts 和 wp_print_styles 操作之前觸發。

這應該從您的頁面刪除額外的程式碼，您將不必停用 plug-in 或編輯任何核心檔案。上面列出的功能和程式碼也不會導致您的主題中斷，如果您以後刪除聯絡表 7，… 所以沒有必要擔心未來的升級相容性。

參考文獻

Restricting a Plugin to Only Load its CSS and JS on Selected Pages?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

WordPress 限制外掛只能在選定頁面上載入其 CSS 和 JS？