您的網站標頭是訪問者訪問您的 WordPress 網站時看到的第一個部分。通過將 WordPress 小工具添加到標頭，您可以優化這個區域以幫助吸引讀者的注意。大多數網站標頭都會包含一個自定義標誌和導航菜單，以幫助訪問者瀏覽您的網站。您還可以在這個區域的上方或下方添加一個標頭小工具，以展示有用的內容、橫幅廣告、限時優惠、單行表單等。
在 WPressize Me，我們在導航菜單的下方直接添加了呼籲行動的標頭。
大多數 WordPress 主題都在側邊欄和頁腳區域提供小工具就緒區域，但並非每個主題都在標頭添加小工具就緒區域。
編者註：如果您的主題沒有小工具就緒的標頭區域，您現在可以從頭開始創建完全自定義的 WordPress 主題（無需任何編碼）。
首先，讓我們一步步了解如何在現有主題的網站標頭添加 WordPress 小工具。您可以使用以下快速鏈接直接跳轉到您要使用的方法：
方法 1：在 WordPress 主題設置中添加 WordPress 小工具到您的網站標頭
許多最佳的 WordPress 主題包括一個可自定義的標頭小工具區域。首先，您需要查看當前的 WordPress 主題是否支持標頭中的 WordPress 小工具區域。您可以通過訪問 WordPress 主題自定義器或 WordPress 管理面板的小工具區域來找到它。導航到 外觀 » 自定義，查看是否有編輯標頭的選項。
注意：如果您使用的是區塊主題，則不會在管理側邊欄中看到此選項。相反，您應該參考我們的關於如何使用 WordPress 全站編輯器自定義標頭的指南。
在這個示例中，免費的 Astra 主題有一個名為「Header Builder」的選項。我們將向您展示如何在 Astra 中使用此功能，但請注意，這會根據您使用的主題而有所不同。
如果您點擊它，它會將您帶到一個編輯標頭並添加小工具的屏幕。在屏幕底部，您可以完全自定義標頭以及標頭上下方的區域。只需將鼠標懸停在空白區域之一上，然後點擊「加號」圖標。
這會彈出一個菜單，您可以在其中選擇「Widget 1」。還有其他選項可供選擇，但您需要選擇一個「小工具」選項來讓標頭支持小工具。
要添加小工具區域到標頭，請點擊標頭自定義器部分中的「Widget 1」框。這會彈出一個添加小工具的選項。接下來，點擊左側菜單中的「加號」圖標。這會彈出一個窗口，您可以在其中選擇要添加到標頭的小工具。
您可以繼續自定義標頭並添加任意多的小工具。一旦完成，請確保點擊「發布」按鈕以保存您的更改。現在，您可以查看添加了小工具後的標頭區域。
這是我們演示網站上顯示的樣子。
不使用 Astra？
要查看您的主題是否已經有一個 WordPress 標頭小工具，您可以導航到 WordPress 管理面板中的 外觀 » 小工具。看看是否有標為「標頭」或類似名稱的小工具區域。如果有，則只需點擊「加號」圖標以彈出小工具菜單。然後，您可以點擊要添加的小工具。
確保點擊「更新」按鈕以保存您對標頭小工具區域的更改。
方法 2：通過添加代碼到 WordPress 在網站標頭中添加 WordPress 小工具
如果您的 WordPress 主題在標頭中沒有小工具區域，則您需要通過添加代碼到 WordPress 來手動添加。如果您之前沒做過，請查看我們的指南，了解如何在 WordPress 中複製和粘貼代碼。
然後，您可以將以下代碼片段添加到 functions.php 文件中，或使用代碼片段插件如 WPCode（推薦）：
function wpb_widgets_init() { register_sidebar( array( 'name' => 'Custom Header Widget Area', 'id' => 'custom-header-widget', 'before_widget' => '', 'before_title' => '', 'after_title' => '
', ) ); } add_action( 'widgets_init', 'wpb_widgets_init' );此代碼會為您的主題註冊一個新的側邊欄或小工具就緒區域。如果您導航到 外觀 » 小工具，則會看到一個標為「Custom Header Widget Area」的新小工具區域。現在，您可以將小工具添加到這個新區域。了解詳情，請查看我們的指南，了解如何在 WordPress 中添加和使用小工具。
在 WordPress 中顯示您的自定義標頭小工具
現在，您已經創建了標頭小工具區域，您需要告訴 WordPress 在網站上顯示該區域。為此，您需要編輯主題的 header.php 文件。接下來，將以下代碼添加到您要顯示小工具的位置：
<?php if ( is_active_sidebar( 'custom-header-widget' ) ) : ?> <?php endif; ?>此代碼會將您早前創建的小工具區域添加到網站標頭區域。現在，您可以訪問您的 WordPress 博客查看已激活的標頭小工具區域。
使用 CSS 樣式化您的 WordPress 標頭小工具區域
根據您的主題，您可能還需要添加 CSS 到 WordPress 以控制標頭小工具區域和其中每個小工具的顯示方式。這可以通過以下幾種方式完成：
- 如果您使用的是舊版主題，則可以通過訪問 WordPress 儀表板中的
外觀 » 自定義使用主題自定義器。 - 如果您使用的是區塊主題，則可以在 WordPress 管理中修復缺失的主題自定義器。
- 如果您使用的是區塊主題，則可以通過訪問儀表板中的
外觀 » 編輯器使用全站編輯器來添加額外的 CSS。 - 您可以使用 WPCode 插件添加自定義 CSS（推薦）。
- 如果您不懂 CSS，您可以使用像 CSS Hero 這樣的插件。
了解更詳細信息，請查看我們的指南，了解如何輕鬆地將自定義 CSS 添加到您的 WordPress 網站。
在上面的方法 2 中，我們向您展示了如何使用 WPCode 向 functions.php 文件添加代碼片段。您還可以使用此插件添加自定義 CSS。創建新片段時，請確保從右側下拉菜單中選擇代碼類型「CSS 片段」，並確保選擇了「自動插入」選項。
在代碼預覽部分，您需要添加用於樣式化標頭小工具的 CSS。這裡有一些示例 CSS 代碼以幫助您入門：
div#header-widget-area { width: 100%; background-color: #f7f7f7; border-bottom: 1px solid #eeeeee; text-align: center; padding: 20px; } h2.chw-title { margin-top: 0px; text-align: left; text-transform: uppercase; font-size: small; background-color: #feffce; width: 130px; padding: 5px; }之後，確保切換到「激活」設置，然後點擊屏幕右上角的「保存片段」按鈕。要改用主題自定義器，請導航到 WordPress 管理面板中的 外觀 » 自定義。這會打開 WordPress 主題自定義器面板。請點擊「額外 CSS」標籤。
這允許您直接向主題添加額外 CSS 並實時查看更改。只需將我們前面展示的 CSS 代碼添加到「額外 CSS」框中。一旦完成添加 CSS，請確保點擊「發布」按鈕以保存更改。這就是應用了 CSS 更改後自定義標頭小工具的外觀。
我們希望這篇文章能幫助您了解如何將 WordPress 小工具添加到網站標頭。您可能還想查看我們關於如何選擇最佳 WordPress 託管的指南以及我們為小型企業精選的最佳實時聊天軟件。 如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道，以獲取 WordPress 視頻教程。您也可以在 Twitter 和 Facebook 上找到我們。
