註冊
WordPress優化

如何在特定頁面禁用WordPress外掛載入以提升速度

WBOLT_COM
4k+
1

如何禁用WordPress外掛載入特定頁面和文章

談到WordPress的效能，我們有很多關於外掛的說法。每個外掛都新增了必須執行的PHP程式碼，通常包括指令碼和樣式，甚至可能對資料庫執行額外的查詢。這意味著不必要的外掛會影響頁面速度，並可能對使用者體驗和頁面排名產生負面影響。

例如，考慮一個在首頁上構建和顯示自定義表單的外掛，例如Contact Form 7。通常，您在單個頁面上只需要一個表單，但理想情況下，您可能希望使用外掛的短程式碼在任何頁面上嵌入表單。因此，Contact Form 7會在您網站的每個頁面上載入指令碼和樣式。

但是您真的想執行外掛程式碼並在WordPress網站的每個頁面上包含指令碼和樣式嗎？

在這篇文章中，我將向您展示如何防止在特定文章/頁面上載入不必要的外掛，以便您可以安裝其他外掛（當然不要發瘋），並且仍然可以快速載入您的WordPress網站。為了完成此任務，我們將在特定文章和頁面上以程式設計方式禁用WordPress外掛。這是一個四步過程：

選擇外掛時要遵循的三個一般規則

選擇外掛時，以下一般規則可能會有所幫助：

  • 僅安裝來自可信賴開發人員的編碼良好的外掛：考慮活躍安裝、使用者評級、客戶端支援、更新頻率以及來自WordPress社羣的任何有用資訊。
  • 首選可擴充套件外掛：在效能方面比較類似外掛，利用瀏覽器開發工具和/或線上服務（如Google Pagespeed Insights、  Pingdom和GTmetrix）來評估每個外掛對頁面載入時間的影響。
  • 不要安裝不必要的外掛：這應該是顯而易見的，但值得一提的是，出於安全和效能原因，您永遠不應該安裝您並不真正需要的外掛。此外，請確保您不時檢查您的外掛並解除安裝那些您不再需要和不再使用的外掛。

WordPress外掛目錄提供了我們在選擇外掛時應始終考慮的相關資訊

WordPress外掛目錄提供了我們在選擇外掛時應始終考慮的相關資訊

一個真實的例子

Contact Form 7是一個很棒的外掛，可以在WordPress中構建和顯示錶單。它為我們的目的提供了一個完美的示例，因為它在每個頁面上都包含以下檔案，即使頁面不包含表單：

  • style.css
  • scripts.js

Chrome DevTools Network面板提供有關載入頁面時發出的網路請求的詳細資訊

Chrome DevTools Network面板提供有關載入頁面時發出的網路請求的詳細資訊

外掛可能會減慢您的網站速度，但我們可以強制WordPress根據請求URL有選擇地停用外掛。如果您是開發人員，請閱讀下一節，我們將學習如何以程式設計方式管理外掛並構建過濾不必要外掛的mu-外掛。如果您不是開發人員，請隨時跳到專門介紹允許過濾和組織外掛的外掛部分。

如何以程式設計方式獲取所有活動外掛的列表

首先，您可以使用簡單的PHP程式碼片段獲取WordPress網站上所有活動外掛的列表。您可以在自定義外掛或免費WordPress 外掛（如Code Snippets）的編輯器中新增以下程式碼。如果您決定使用自定義外掛，請不要忘記新增外掛標題，如下所示。

wp_options表中的活動外掛

wp_options表中的活動外掛

每個活動外掛都儲存在wp_options表中，其中options_name的值active_plugins。所以我們可以通過一個簡單的get_option呼叫來提取這些外掛的列表。這是程式碼：

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php
/**
* @package active-plugins
* @version 1.0
*
* Plugin Name: Active Plugins
* Plugin URI: http://wordpress.org/extend/plugins/#
* Description: This is a development plugin
* Author: Your Name
* Version: 1.0
* Author URI: https://example.com/
*/
add_shortcode( 'activeplugins', function(){
$active_plugins = get_option( 'active_plugins' );
$plugins = "";
if( count( $active_plugins ) > 0 ){
$plugins = "<ul>";
foreach ( $active_plugins as $plugin ) {
$plugins .= "<li>" . $plugin . "</li>";
}
$plugins .= "</ul>";
}
return $plugins;
});
<?php /** * @package active-plugins * @version 1.0 * * Plugin Name: Active Plugins * Plugin URI: http://wordpress.org/extend/plugins/# * Description: This is a development plugin * Author: Your Name * Version: 1.0 * Author URI: https://example.com/ */ add_shortcode( 'activeplugins', function(){ $active_plugins = get_option( 'active_plugins' ); $plugins = ""; if( count( $active_plugins ) > 0 ){ $plugins = "<ul>"; foreach ( $active_plugins as $plugin ) { $plugins .= "<li>" . $plugin . "</li>"; } $plugins .= "</ul>"; } return $plugins; });
<?php
/**
* @package active-plugins
* @version 1.0
*
* Plugin Name: Active Plugins
* Plugin URI: http://wordpress.org/extend/plugins/#
* Description: This is a development plugin 
* Author: Your Name
* Version: 1.0
* Author URI: https://example.com/
*/
add_shortcode( 'activeplugins', function(){
$active_plugins = get_option( 'active_plugins' );
$plugins = "";
if( count( $active_plugins ) > 0 ){
$plugins = "<ul>";
foreach ( $active_plugins as $plugin ) {
$plugins .= "<li>" . $plugin . "</li>";
}
$plugins .= "</ul>";
}
return $plugins;
});

更改外掛詳細資訊，然後儲存active-plugins.php檔案並將其上傳到您的/wp-content/plugins/資料夾中。建立一個新的部落格文章幷包含[activeplugins]短程式碼。它現在應該顯示所有活動外掛的列表。

活動外掛列表顯示資料夾和每個外掛的名稱

活動外掛列表顯示資料夾和每個外掛的名稱

完成後，我們可以更進一步，利用option_active_plugins過濾器以程式設計方式新增或刪除外掛。此過濾器屬於option_$option_name過濾器組，允許在從資料庫中檢索到任何選項後對其進行過濾。由於所有活動外掛都儲存在wp_options表中的 option_value為active_plugins，option_active_plugins過濾器提供了一種以程式設計方式啟用或停用外掛的方法。

所以我們可以以程式設計方式啟用外掛。舉個例子，你想啟用ACF外掛。這是程式碼：

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
add_filter( 'option_active_plugins', function( $plugins ){
$myplugin = "advanced-custom-fields/acf.php";
if( !in_array( $myplugin, $plugins ) ){
$plugins[] = $myplugin;
}
return $plugins;
} );
add_filter( 'option_active_plugins', function( $plugins ){ $myplugin = "advanced-custom-fields/acf.php"; if( !in_array( $myplugin, $plugins ) ){ $plugins[] = $myplugin; } return $plugins; } );
add_filter( 'option_active_plugins', function( $plugins ){
$myplugin = "advanced-custom-fields/acf.php";
if( !in_array( $myplugin, $plugins ) ){
$plugins[] = $myplugin;
}
return $plugins;
} );

在此示例中，我們假設外掛已安裝但尚未啟用。

上面的程式碼只是將外掛新增到我們網站每個頁面上的活動外掛列表中。不是很有用，但你明白了。

此外，外掛應該在任何其他外掛之前載入，否則我們的程式碼無法按預期工作。為了優先考慮我們的外掛載入，我們必須在Must-use外掛中新增我們的指令碼。

如何構建一個必須使用的外掛來以程式設計方式停用外掛

我們將構建一個Must use plugin，它是一個駐留在特定/wp-content子資料夾中的外掛，並在任何常規外掛之前執行。

不幸的是，在這種情況下，我們不允許使用條件標籤，因為條件查詢標籤在查詢執行之前不起作用。在此之前，它們總是返回false。所以我們必須以其他方式檢查我們的條件，例如通過解析請求URI並檢查相應的URL路徑。

將以下程式碼新增到active-plugins.php檔案中，然後將其移動到/wp-content/mu-plugins：

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$request_uri = parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH );
$is_admin = strpos( $request_uri, '/wp-admin/' );
if( false === $is_admin ){
add_filter( 'option_active_plugins', function( $plugins ){
global $request_uri;
$is_contact_page = strpos( $request_uri, '/contact/' );
$myplugin = "contact-form-7/wp-contact-form-7.php";
$k = array_search( $myplugin, $plugins );
if( false !== $k && false === $is_contact_page ){
unset( $plugins[$k] );
}
return $plugins;
} );
}
$request_uri = parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH ); $is_admin = strpos( $request_uri, '/wp-admin/' ); if( false === $is_admin ){ add_filter( 'option_active_plugins', function( $plugins ){ global $request_uri; $is_contact_page = strpos( $request_uri, '/contact/' ); $myplugin = "contact-form-7/wp-contact-form-7.php"; $k = array_search( $myplugin, $plugins ); if( false !== $k && false === $is_contact_page ){ unset( $plugins[$k] ); } return $plugins; } ); }
$request_uri = parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH );
$is_admin = strpos( $request_uri, '/wp-admin/' );
if( false === $is_admin ){
add_filter( 'option_active_plugins', function( $plugins ){
global $request_uri;
$is_contact_page = strpos( $request_uri, '/contact/' );
$myplugin = "contact-form-7/wp-contact-form-7.php";
$k = array_search( $myplugin, $plugins );
if( false !== $k && false === $is_contact_page ){
unset( $plugins[$k] );
}
return $plugins;
} );
}

讓我們深入研究一下這段程式碼：

  • parse_url返回請求的URL的路徑。
  • strpos查詢第一次出現的位置，如果沒有找到字串則'/wp-admin/'返回false。$is_admin變數儲存返回值。
  • 該條件阻止過濾器在管理面板中執行，以便我們可以安全地訪問外掛設定頁面。如果請求URI不包含'/wp-admin/'，那麼我們呼叫option_active_plugins過濾器。
  • 最後，如果當前外掛不在活動外掛陣列中，並且當前頁面的URI不包含/contact/，那麼我們從$plugins.

現在儲存您的外掛並將其上傳到您的/wp-content/mu-plugins/資料夾。清除快取並將[activeplugins]短程式碼新增到多個頁面。它應該只顯示在/contact/頁面上的列表中。

script.js檔案從頁面資產列表中消失

script.js檔案從頁面資產列表中消失

然後我們可以使用一些額外的PHP一次性取消設定一組外掛。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$request_uri = parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH );
$is_admin = strpos( $request_uri, '/wp-admin/' );
if( false === $is_admin ){
add_filter( 'option_active_plugins', function( $plugins ){
global $request_uri;
$is_contact_page = strpos( $request_uri, '/contact/' );
$myplugins = array(
"contact-form-7/wp-contact-form-7.php",
"code-snippets/code-snippets.php",
"query-monitor/query-monitor.php",
"autoptimize/autoptimize.php"
);
if( false === $is_contact_page ){
$plugins = array_diff( $plugins, $myplugins );
}
return $plugins;
} );
}
$request_uri = parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH ); $is_admin = strpos( $request_uri, '/wp-admin/' ); if( false === $is_admin ){ add_filter( 'option_active_plugins', function( $plugins ){ global $request_uri; $is_contact_page = strpos( $request_uri, '/contact/' ); $myplugins = array( "contact-form-7/wp-contact-form-7.php", "code-snippets/code-snippets.php", "query-monitor/query-monitor.php", "autoptimize/autoptimize.php" ); if( false === $is_contact_page ){ $plugins = array_diff( $plugins, $myplugins ); } return $plugins; } ); }
$request_uri = parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH );
$is_admin = strpos( $request_uri, '/wp-admin/' );
if( false === $is_admin ){
add_filter( 'option_active_plugins', function( $plugins ){
global $request_uri;
$is_contact_page = strpos( $request_uri, '/contact/' );
$myplugins = array( 
"contact-form-7/wp-contact-form-7.php", 
"code-snippets/code-snippets.php",
"query-monitor/query-monitor.php",
"autoptimize/autoptimize.php" 
);
if( false === $is_contact_page ){
$plugins = array_diff( $plugins, $myplugins );
}
return $plugins;
} );
}

在這個例子中，我們首先定義了一個要刪除的外掛陣列，然後我們用array_diff刪除它們。此函式“將array1與一個或多個其他陣列進行比較，並返回array1中不存在於任何其他陣列中的值”。

你可以從Gist下載這個外掛的完整程式碼。

現在您可以將外掛上傳到mu-plugins資料夾並檢查您網站的任何頁面。mu-plugin可以高度自定義新增更多條件和檢查更多URI，但每個條件都必須手動新增到程式碼中，從長遠來看，這個簡單的mu-plugin可能會很困難且維護起來很麻煩。

因此，您可能需要檢視以下外掛。

過濾外掛的外掛

作為替代方案，我們可以檢視許多優秀的外掛，這些外掛允許我們新增可以從WordPress管理面板管理的過濾器。

Plugin Load Filter

Plugin Load Filter是需要在多種條件下過濾外掛的WordPress使用者的免費選項。

Plugin Load Filter允許過濾管理面板和站點頁面中的外掛

Plugin Load Filter允許過濾管理面板和站點頁面中的外掛

目前，它支援以下功能：

  • 文章格式
  • 自定義文章型別
  • Jetpack模組
  • WP嵌入內容
  • URL過濾器（REST API / Heartbeat / AJAX / AMP / 等）

啟用過濾器後，管理員使用者可以指定必須在站點中應用它的位置，如下圖所示。

一旦過濾器被啟用，站點管理員可以在頁面型別過濾器啟用選項卡中設定他們的例外

一旦過濾器被啟用，站點管理員可以在頁面型別過濾器啟用選項卡中設定他們的例外

Plugin Organizer

Plugin Organizer是一個流行的外掛，擁有超過10,000的活躍安裝。這是一個更全面的外掛，允許站點管理員：

  • 通過文章型別和請求URL有選擇地停用外掛
  • 按使用者角色選擇性停用外掛
  • 建立外掛組
  • 更改外掛載入順序
  • 附加的功能

外掛管理器設定頁面

外掛管理器設定頁面

全域性外掛選項頁面提供了一個拖放工具，允許管理員使用者全域性禁用外掛，防止WordPress在站點的任何地方執行一個或多個外掛，除非它對單個文章或頁面進行了不同的指定。相同的功能可用於搜尋頁面和文章型別。

CF7已被全域性禁用

CF7已被全域性禁用

該外掛在文章編輯螢幕中新增了一個元框，以便管理員可以覆蓋全域性和文章型別設定。通過檢查常規設定螢幕中的相應專案，也可以為文章型別啟用此功能。一個很棒的功能是外掛管理器除錯訊息，它為站點管理員提供有關影響每個站點頁面的外掛的有用資訊。

更多資訊可以在他們的文件中找到 。

聯絡頁面上的外掛管理器自定義元框

聯絡頁面上的外掛管理器自定義元框

Perfmatters外掛

一種部分不同的方法來自Perfmatters外掛。這是一種高階替代方案，允許站點管理員根據URL或自定義文章型別有選擇地載入主題和外掛資產。它是外掛和主題優化的絕佳工具。

Perfmatters指令碼管理器

Perfmatters指令碼管理器

該外掛具有稱為指令碼管理器的功能，其中所有內容都按外掛或主題名稱分組在一起。這使得一次禁用整個外掛或其中的單個CSS和JavaScript檔案變得非常容易。

您甚至可以使用regex禁用指令碼。這對於具有更復雜的URL結構或動態生成的頁面的站點特別有用。

這非常強大，可以大大提高您的WordPress網站（尤其是您的主頁）的速度。這可以用於以下幾個示例：

  • 社交媒體分享外掛應該只載入到您的文章中。您可以輕鬆地在任何地方禁用它並僅載入文章型別，甚至自定義文章型別。
  • 流行的Contact Form 7外掛會在每個頁面和文章上自行載入。您可以一鍵輕鬆地在任何地方禁用它，並僅在您的聯絡頁面上啟用。
  • 如果您已升級到WordPress 5.0但未使用Gutenberg區塊編輯器，也許您仍在使用經典編輯器，則可以在站點範圍內新增兩個額外的前端指令碼，您可以禁用它們： /wp-includes/css/dist/block-library/style.min.css 和 /wp-includes/css/dist/block-library/theme.min.css

你可以從這篇perfmatters的評論中看到，它減少了20.2 的總載入時間。僅在他們的主頁上，他們就能夠將HTTP請求的數量從46個減少到30個！頁面大小也從506.3KB縮小到451.6KB。

使用perfmatters外掛進行速度測試

使用perfmatters外掛進行速度測試

 

如何跟蹤效能：瀏覽器的開發工具

效能優化高速公路上的一個基本步驟是載入時間測量。我們有許多外掛和線上工具可用於跟蹤網站效能，例如Google Pagespeed Insights和Pingdom。但首先，我們可以使用瀏覽器的開發工具，它提供了很多有意義的資訊。

每個瀏覽器檢查器都有一個網路面板，顯示網路請求和相關資訊的列表。請按照以下連結獲取詳細文件：

在帶有18個活動外掛的WordPress安裝中，我們使用Firefox Dev Tools反覆檢查了一個文章頁面。在安裝任何過濾外掛之前，我們首先測量了頁面速度並列出了請求的資源。下圖顯示了Firefox網路監視器中可用的效能分析工具的輸出。

Firefox效能分析工具

Firefox效能分析工具

網路監視器提供以下結果（空快取）：

  • 大小：255.19Kb
  • 載入時間：1.24秒
  • 請求數：12

接下來，我們安裝了外掛管理器來阻止WordPress執行CF7外掛。餅圖略有變化。

Firefox效能分析工具2

Firefox效能分析工具

現在頁面載入速度更快（空快取）：

  • 大小：104.21Kb
  • 載入時間：0.80秒
  • 要求：8

接下來，我們停用了幾個不必要的外掛，下圖顯示了我們對頁面效能的改程序度。

Firefox效能分析工具3

Firefox效能分析工具

禁用所有不必要的外掛後，網路監視器的空瀏覽器快取返回以下資料：

  • 大小：101.98Kb
  • 載入時間：0.46秒
  • 要求：8

我們可以比較我們的測試結果。資源大小減少了60.04%，載入時間從1.24秒減少到0.46秒，HTTP請求數從12減少到8。這證實了外掛可以影響頁面效能，我們可以提高頁面速度通過利用外掛過濾器。

小結

無論您是構建自己的指令碼還是安裝第三方工具，在效能優化方面，組織和過濾外掛都是您應該始終考慮的事情。請記住，並非所有外掛的開發都考慮到了效能。因此，明智的做法是花一些時間來確定正在載入哪些外掛資產（CSS和JS）以及載入到何處。

但是學習如何禁用WordPress外掛只是旨在提高網站速度的許多其他技術之一。以下是與站點效能相關的其他一些有用指南和教程的列表：

WordPress效能 WordPress速度
評論收藏微海報
分享
分享到

相關的

評論留言

脣槍舌劍 (1)

馬上學習

文章目錄

  • 選擇外掛時要遵循的三個一般規則
  • 一個真實的例子
  • 如何以程式設計方式獲取所有活動外掛的列表
  • 如何構建一個必須使用的外掛來以程式設計方式停用外掛
  • 過濾外掛的外掛
  • Plugin Load Filter
  • Plugin Organizer
  • Perfmatters外掛
  • 如何跟蹤效能：瀏覽器的開發工具
  • 小結