如何在 WordPress 中創建自定義標題小部件

已發表: 2021-11-16

您是否正在尋找在您的網站上創建標題小部件的方法？你來對地方了。我們將向您展示如何在 WordPress 中輕鬆創建自定義標題小部件。

擁有吸引人的標題是給訪問者留下印象的關鍵。此外，它可能是展示限時優惠或特殊機會的理想場所。如果您的主題不支持此小部件區域，您可以手動創建一個。在本指南中，我們將向您展示如何在 WordPress 中創建自定義標題小部件。

在我們了解如何做之前，讓我們更好地了解自定義標題小部件的好處。

為什麼要在 WordPress 中創建自定義標題小部件？

標題是訪問者登陸您的網站時首先看到的內容。這是用戶比較關注的事情之一，因此大多數網站都會在標題上顯示他們最重要的內容，例如特價和菜單。

四層標題

如果那是用戶關注的地方，那麼在那裡添加大量內容是很誘人的。但是，您應該避免在主菜單（標題）上有太多鏈接。不建議在標題菜單中包含太多內容，因為這可能會使用戶感到困惑並使您的網站看起來很糟糕。這就是標題小部件可以提供幫助的地方。您可以在主導航欄下方添加自定義標題小部件，並向該空間添加額外小部件，而不會佔用主菜單。

創建自定義標題小部件可讓您毫無問題地顯示任何內容，無論是廣告、時事通訊小部件、橫幅、文本內容、WooCommerce 優惠和自定義小部件。這樣，您可以將內容添加到標題中，同時保持其井井有條。

現在我們更好地理解了自定義標題小部件的重要性，讓我們學習如何以最少的努力創建一個。

如何在 WordPress 中創建自定義標題小部件

我們之前已經看到了自定義 WordPress 標頭的不同方法。但是，在本節中，我們將學習如何通過創建自定義標題小部件來編輯標題。為此，我們將使用 PHP 和 CSS 片段。

注意：在繼續之前，我們將編輯一些核心文件，我們建議您生成網站的完整備份並安裝子主題。要創建子主題，您可以按照本教程或使用這些專用插件中的任何一個。

完成後，請繼續下一部分。

1) 創建自定義小部件

首先，您需要創建一個新的小部件區域。為此，在您的WordPress 儀表板上，轉到外觀 > 小部件。

在 WordPress 中創建自定義標題小部件 - 所有小部件

在那裡，您將看到活動主題中可用的所有小部件區域。這可能會根據您的主題而改變，但在大多數情況下，您會在此處看到幾個區域。對於這個演示，我們使用的是 GeneratePress，它帶有許多已經註冊和样式化的小部件區域。

在 WordPress 中創建自定義標題小部件 - 所有小部件區域

您需要創建一個新的小部件區域，我們將在其中添加自定義標題小部件。為此，您需要調整子主題的functions.php文件。為此，您可以直接使用該文件，也可以使用 Code Snippets 之類的插件。

對於此演示，我們將使用代碼片段，因此我們轉到插件 > 添加新並蒐索代碼片段插件。然後，我們安裝並激活它，如下所示。

安裝代碼片段插件

激活後，您將在左側看到插件的設置。轉到所有片段並按添加新以創建新片段。

在 WordPress 中創建自定義標題小部件 - 創建一個新片段

為代碼段命名，然後將以下代碼段粘貼到代碼部分：

 函數 quadlayers_widgets_init() {
 register_sidebar（數組（
 'name' => 'QuadLayers 標題小部件',
 'id' => 'quadlayers-header-widget',
 'before_widget' => '<div class="ql-widget">',
 'after_widget' => '</div>',
 'before_title' => '<h2 class="ql-title">',
 'after_title' => '</h2>',
 ));
 }
 add_action('widgets_init', 'quadlayers_widgets_init');

此片段在您的 WordPress 站點中創建一個名為 Quadlayers Header Widget 的新小部件。

在 WordPress 中創建自定義標題小部件 - 創建自定義小部件

然後保存更改，激活後，您將在 WordPress 小部件部分下看到一個全新的小部件區域。

四層標題小部件

這樣，您可以註冊一個新的小部件。在此之後，您必須將小部件添加到您網站的標題中。讓我們看看如何做到這一點。

2）將小部件添加到標題

您已成功在您的網站上創建了一個新小部件，但您尚未指定位置。在本節中，我們將向您展示如何將這個新的自定義小部件添加到 WordPress 標題中。

為此，您需要編輯header.php文件。您可以通過轉到外觀>主題編輯器> 主題標題 (header.php)在主題目錄中找到此文件。在編輯文件之前，請確保您使用的是子主題。如果您的子主題沒有header.php文件，請打開父主題的文件夾，從那裡下載header.php文件，然後將其上傳到子主題文件夾。

之後，將以下代碼粘貼到header.php文件中：

 <?php

 如果（is_active_sidebar（'quadlayers-header-widget'））：？>
 <div class="ql-widget-area widget-area" role="complementary">
 <?php dynamic_sidebar('quadlayers-header-widget'); ?>
 </div>

 <?php endif; ?>

粘貼代碼後，更新文件。

在文件中粘貼標題小部件

如果您不確定在哪裡添加代碼，您可以測試不同的位置或聯繫您的主題支持團隊，並根據您的需要向他們詢問最佳位置。添加代碼後，通過向其添加小部件來測試小部件區域。在這個例子中，我們添加了一個帶有一些虛擬內容的段落塊。

示例文本塊

在網站的前端，您將看到如下所示的標題。

示例標題小部件

這意味著小部件和代碼正在工作。偉大的！

這是您可以在 WordPress 中添加自定義標題小部件的方法。您可以使用該區域顯示橫幅、廣告、限時優惠或任何您想要的東西。

但這還不是全部。該小部件功能正常，但您仍然可以改進它。讓我們看看我們如何使用一些 CSS 來設置小部件的樣式以匹配您網站的外觀。

3) 使用 CSS 自定義小部件

將小部件添加到頭文件後，是時候使用一些 CSS 讓它看起來更好了。您可以將 CSS 代碼輸入主題的style.css文件或使用 WordPress 定制器。這兩種方法都運行良好，但我們建議您使用管理儀表板上的Additional CSS部分添加 CSS 代碼。這樣，您將立即在實時預覽嚮導中看到更改。然而，

現在讓我們看一個示例腳本，以便您可以自定義在上一節中創建的自定義標題小部件。複製以下代碼，轉到Appearance > Theme Editor > Additional CSS並粘貼它。

 div#quadlayers-header-widget {
 寬度：100%；
 背景顏色：#f5f5f5；
 邊框底部：1px 實心#eeeeee；
 文本對齊：居中；
 }

 .ql 小部件 {
 寬度：100%；
 背景顏色：#f5f5f5；
 文本對齊：居中；
 }

 h2.ql-標題{
 邊距頂部：0px；
 文本對齊：左；
 文本轉換：大寫；
 字體大小：小；
 背景顏色：#feffce；
 寬度：130px；
 填充：5px；
 }

CSS 腳本

更新 CSS 後，它將如下所示：

標題小部件 css

這只是一個示例代碼。您可以將其作為基礎並對其進行自定義以使其適應您網站的樣式和要求。

而已！這就是您可以使用一些代碼在 WordPress 中創建自定義標題小部件的方法。沒那麼難，不是嗎？

結論

總之，標題是任何網站最突出的部分之一，您應該在其中包含希望訪問者看到的重要內容。這就是為什麼添加標題小部件是吸引用戶注意力並顯示限時優惠、網站最重要部分等的絕佳選擇。

在這篇文章中，我們向您展示瞭如何創建自定義標題小部件並使用一些代碼對其進行自定義。即使您沒有編程技能，您也可以按照教程將小部件添加到您的站點。但是，要更改其樣式，您可能需要一些 CSS 的基本知識。根據您的主題，編輯header.php文件可能會很棘手，因此如果您遇到任何問題，可以聯繫您的主題作者。

您是否創建了標題小部件？你的經歷如何？在下面的評論部分讓我們知道。

有關自定義標題的更多方法，請查看以下指南：

3 在WordPress中自定義標題的方法
如何使 Divi 標頭具有粘性