清理 WordPress 主題 HEAD 部分和不需要的 JS 和 CSS 文件

已發表: 2018-09-04

無論您是否願意，WordPress 的核心廣告都會在網站的 HTML head部分中投放大量代碼。該代碼遠非無用，並且在大多數網站上都有用。但是，如果您是一個乾淨的代碼狂或使用 WordPress 為 SaaS 提供支持，您將需要清理 HTML。與 WP 中的大多數內容一樣，只需刪除一些操作和過濾器即可。

#WordPress 是構建#SaaS 網站的絕佳平台。但在你這樣做之前，它需要一些清潔。

點擊推文

為什麼我要刪除 HEAD、CSS 或 JS 文件中的這些標籤？

有幾個原因。有些人喜歡保持他們的代碼和網站盡可能整潔。如果您知道不需要它並且知道如何刪除它，為什麼還要在 HTML 中編寫一行代碼。沒有任何理由。額外的 CSS 和 JS 文件也是如此。如果您不在您的網站上使用表情符號，為什麼要在每個頁面上都包含該 JS？

然後是安全。 WordPress 自動添加的一些 HTML 確實顯示了過去被利用的 URL。我必須強調，這些 URL（尤其是 XML RPC 端點）並不是秘密。他們應該是公開的。但是，將它們更改為定制的東西並隱藏它們是一種已知的做法。在這種情況下，很明顯您不希望 HTML 中包含這些 URL。

速度也是清理 HTML 的一個正當理由。雖然我不得不說我不確定從 HTML 中刪除幾百個字符會獲得多少收益，但這是朝著正確方向邁出的一步。消除不需要的 JS 和 CSS 文件將為您節省一些 HTTP 請求，這是您應該重點優化的內容。 Tidy Repo 最近測試了 100 多個 WordPress 主題的速度，請求的數量對網站的整體速度產生了重大影響。

擁有乾淨的 HTML 代碼可確保您了解網站上發生的情況，並且是優化網站速度的良好開端。

最後但並非最不重要的一點是，我們可以方便地使用此代碼的原因是 WordPress 驅動的 SaaS。在構建 SaaS 時，您希望完全控制 HTML 中的內容，而 WP 本身添加到 HTML 中的大部分內容並不是您將要使用的。因此，出於上述所有原因 - 我們盡可能地清理事物。這為我們提供了一個出色、精益的平台來構建自定義解決方案，同時仍保留 WP 用於支持 SaaS 的 99% 的核心功能。

我可以安全地移除這些東西嗎？他們不是有目的嗎？

是的，它們確實有目的，但僅在某些情況下。在“普通”網站上，標題中的一些額外link標籤不是問題，它們都使某些操作和集成更容易。但是，它們對於任何站點的運行都不是至關重要的，當然對於 SaaS 也不是。

讓我們清理一些代碼

您可以使用任何主題測試下面的代碼。默認的 2017 就可以了。然而，如果你使用的是“普通”的 WordPress 主題（以及一些插件），你永遠無法知道是誰添加了代碼——WP 核心、主題或插件。我建議您重置您的網站以刪除所有插件，然後使用其中只有wp_head()和wp_footer()的主題。以下是 index.php 的外觀，以及可用於測試的整個測試主題。

<!DOCTYPE html>
<html>
<head>
  <?php
    wp_head();
  ?>
</head>
<body>
  <h1>The Most Basic WP Theme</h1>
  <?php
    wp_footer();
  ?>
</body>
</html>

如果您激活我們的測試主題並打開首頁源代碼，您會注意到比上面 index.php 中可見的代碼要多得多。這就是我們要清理的。將下面的代碼放在主題的functions.php中。如果您不想刪除/禁用某個功能，請註釋掉提及它的行。

add_action('after_setup_theme', 'cleanup');

function cleanup() {
  remove_action('wp_head', 'rsd_link');
  remove_action('wp_head', 'wp_generator');
  remove_action('wp_head', 'feed_links', 2); 
  remove_action('wp_head', 'feed_links_extra', 3);
  remove_action('wp_head', 'index_rel_link');
  remove_action('wp_head', 'wlwmanifest_link');
  remove_action('wp_head', 'start_post_rel_link', 10, 0);
  remove_action('wp_head', 'parent_post_rel_link', 10, 0);
  remove_action('wp_head', 'adjacent_posts_rel_link', 10, 0);
  remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);
  remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0);
  remove_action('wp_head', 'print_emoji_detection_script', 7);
  remove_action('wp_head', 'rel_canonical');
  remove_action('wp_head', 'rel_alternate');
  remove_action('wp_head', 'wp_oembed_add_discovery_links');
  remove_action('wp_head', 'wp_oembed_add_host_js');
  remove_action('wp_head', 'rest_output_link_wp_head');
  
  remove_action('rest_api_init', 'wp_oembed_register_route');
  remove_action('wp_print_styles', 'print_emoji_styles');
  
  remove_filter('oembed_dataparse', 'wp_filter_oembed_result', 10);
  remove_filter('pre_oembed_result', 'wp_filter_pre_oembed_result', 10);
  
  add_filter('embed_oembed_discover', '__return_false');
  add_filter('show_admin_bar', '__return_false');
}

做什麼做什麼

rsd_link操作負責顯示真正簡單的發現鏈接，而wp_generator顯示 WP 版本，幾乎所有為 WP 編寫的安全插件都將其刪除。這兩個feed_links操作將各種鏈接添加到幾個 RSS 提要。各種_rel_link操作將鏈接添加到帖子，以便各種服務更容易訪問和找到它們。除非您使用的是 Windows Live Writer，否則您真的不需要wlwmanifest_link操作。我們不需要表情符號，所以print_emoji_detection_script可以運行，各種oembed鏈接也是如此，包括對 REST API 中的 oembed 的支持。刪除oembed_dataparse操作將確保 WP 不會弄亂您帖子中的任何鏈接，也不會通過 oembed 將它們變成任何富媒體。最後一個過濾器show_admin_bar將阻止 WP 管理欄顯示在您的前端，無論每個帳戶的設置如何。

#WordPress 中只有少數內容無法通過操作和過濾器進行修改。值得慶幸的是，控制 HEAD 內容不是其中之一。

點擊推文

WordPress的靈活性很棒

許多文章都帶有諸如“如何從 WP 標題中刪除垃圾”之類的標題。這不是垃圾。它為 WordPress 提供了開箱即用的強大功能。許多人重視這一點，他們不必花費數小時進行設置。另一方面，清理只是刪除一些操作的問題。您可以完全控制放入 HTML 的內容，並且可以輕鬆地使用 WordPress 為非內容網站（如 SaaS）提供支持。