4 種簡單方法(3 種無代碼)
已發表: 2022-07-21標題是大多數訪問者看到的網站的第一個元素。 通常,這是放置站點徽標和菜單的位置,它是每個頁面的重要組成部分。 如果您不知道如何編輯 WordPress 標頭,您將很難留下深刻的第一印象。
WordPress 使您能夠以多種方式編輯站點的標題。 幾乎每個主題都帶有獨特的標題設計,您可以手動自定義。 或者,您可以使用更大的 WordPress 社區提供的一系列工具。
在本文中,我們將向您展示四種編輯 WordPress 標頭的方法,包括使用插件和不使用插件。 讓我們開始工作吧!
目錄:
- 使用定制器編輯標題
- 使用完整的站點編輯(和兼容的主題)
- 使用 WordPress 頁面構建器編輯標題
- 使用插件將自定義代碼添加到標題
1. 使用定制器編輯標題
WordPress Customizer 是一個內置工具,可讓您編輯網站的全局元素。 您可以使用定制器來編輯站點的頁眉、頁腳、版式、菜單和其他關鍵方面。
要訪問定制器,請轉到您的儀表板並單擊外觀>定制。 定制器將在左側顯示選項菜單,在右側顯示您的網站預覽:

請注意,如果您在儀表板中沒有看到 WordPress Customizer 選項,則您可能正在使用啟用塊的主題。 要編輯此類主題的標題,您需要使用完整站點編輯,我們將在下一節中介紹。
在定制器中,您應該會看到與標題相關的選項。 有時這可能會立即可見,如上例所示。 其他時候,您可能需要轉到子菜單。 例如,某些主題將標題選項放在佈局選項或類似內容中。
找到主題的標題選項後,您現在看到的選項將取決於您使用的主題。 例如,我們的 Neve 主題包括用於更改徽標、標題顏色以及此部分中顯示的菜單的選項:

Neve 還提供了一系列元素,您可以使用拖放功能將這些元素添加到標題中。 選擇可用組件下的任何元素並將它們拖到定制器底部的標題行中。 Neve 允許您為標題添加最多三行元素並將元素放置在您想要的任何位置:

當您對標題的配置感到滿意時,單擊定制器頂部的發布按鈕,將更改保存到您的主題。
請注意,您使用定制器所做的任何更改將僅適用於您的活動主題。 如果您更改主題,則需要再次編輯 WordPress 標頭。
2.使用完整的站點編輯(和兼容的主題)
完整站點編輯是一項較新的功能,可讓您使用塊編輯器編輯主題模板。 這僅適用於啟用塊的主題,因此它可能在您的網站上可用,也可能不可用。
要查看您的主題是否支持完整站點編輯,請打開外觀菜單並查找編輯器選項:

選擇那個 選項和塊編輯器將打開。 但是,您將編輯您的主題模板,而不是您的單個頁面或帖子。
默認情況下,編輯器將打開主頁模板,該模板應包含一個Header元素:

請注意,當您使用完整站點編輯時,某些塊只會顯示為佔位符。 那是因為這個工具不是用於編輯單個塊,而是用於編輯整個佈局。
編輯標題時,您可以完全控制要包含的塊和元素。 如果您打開列表視圖工具,您可以看到標題當前包含的塊的細分:

在此階段,您可以選擇在標題中添加或刪除塊。 要刪除或編輯現有塊,請選擇它並使用執行此操作時出現在屏幕上的上下文菜單:

當您選擇一個塊時,您還可以使用塊編輯它 屏幕右側的設置菜單。 此菜單通常包含樣式選項,它們會根據您正在編輯的塊而有所不同:

要添加新塊,請選擇Header元素並查找加號圖標。 該按鈕將打開一個菜單,使您可以選擇要添加的塊:

完整站點編輯器的另一個有用功能是您可以直觀地編輯菜單。 為此,只需使用導航塊選擇一個菜單。 您將看到添加新鏈接、創建新菜單以及在現有菜單之間交換的選項:


當您對標題的更改感到滿意時,單擊Save e 。 這將保存對主題標題模板的更改,它們將自動反映在您的網站上。
3. 使用 WordPress 頁面構建器編輯標題
一些 WordPress 頁面構建器插件提供了用於編輯 WordPress 標頭的選項。 例如,Elementor Pro 包含一個 Theme Builder 工具,您可以使用高級許可證訪問該工具。
如果您無權訪問 Elementor Pro,則可以使用免費的第三方擴展,例如 WordPress.org 上的 Elementor Header & Footer Builder 插件。
不過,我們將向您展示如何使用 Elementor Pro 及其主題生成器功能來做到這一點。
在實踐中,Elementor Theme Builder 的工作方式與完整站點編輯類似。
要訪問主題生成器,請轉到模板>主題生成器。 選擇SITE PARTS下的Header選項,然後在右側查找現有模板。 應該只有一個標題模板,您可以單擊它旁邊的編輯按鈕:

這將啟動 Elementor 編輯器。 從這裡,您可以選擇使用 Elementor 塊構建標題或導入現成的模板。 如果您單擊編輯器正文中的文件夾圖標,您可以看到您可以訪問哪些標題模板:

如果您使用的是 Elementor,我們建議您利用這些模板。 這使您可以嘗試多種標題樣式,您可以通過添加或自定義模塊來編輯它們:

如果您不熟悉使用 Elementor,此頁面構建器可讓您使用左側的菜單選擇模塊。 您可以將這些模塊拖到您的頁面上,該頁面顯示在屏幕右側的預覽中。
使用 Theme Builder 時,您只是在編輯特定的主題模板。 但是,您仍然可以使用 Elementor 提供的全部模塊和配置選項。
編輯完標題模板後,使用“發布”按鈕將其保存。 然後,Elementor 會要求您選擇模板應顯示在哪些頁面上:

除非您已經為高級 Elementor 許可證付費,否則 Theme Builder 工具可能無法自行證明購買的合理性。 它完全可以完成完整站點編輯的工作,但成本很高。 主要區別在於您可以使用 Elementor 更廣泛的模塊陣列,如果您已經在使用 Elementor,則更容易確保您的標題設計與您網站的其他部分保持一致。
4.使用插件將自定義代碼添加到標題中
通常,使用插件是在 WordPress 中實現自定義的最簡單方法。 但是,標題通常不是這種情況。 如果您想要一個能夠讓您直觀地編輯標題的插件,您將需要使用頁面構建器。 正如我們在上一節中討論的那樣,大多數提供此功能的頁面構建器都非常昂貴。
使您能夠自定義標頭的免費插件通常只提供一種更簡單的方法來向其添加自定義代碼。 另一種方法是使用子主題手動編輯主題文件,這可能會令人生畏(並且有風險),除非您有 Web 開發經驗。
這種插件的一個很好的例子是頁眉頁腳代碼管理器。 此工具使您能夠將 HTML、CSS 和 JavaScript 片段添加到頁眉和/或頁腳,並選擇將在哪些頁面上加載這些片段:
插件激活後,轉到儀表板中的HFCM >添加新片段頁面。 在這裡,您可以選擇要添加的片段類型、顯示位置以及是否將其添加到頁眉或頁腳:

如果您打算向標頭添加新元素,則需要使用 HTML。 要更改標題及其包含的元素的樣式,您需要使用 CSS 片段。
這種方法的主要缺點是您需要檢查標頭代碼以查看它使用的類和 ID,以便向它們添加 CSS。 這可能是一個耗時的過程,因為您添加了新的代碼片段,檢查更改是否有效,並調整代碼直到您對結果滿意為止。
立即自定義 WordPress 標頭
編輯 WordPress 標頭比您想像的要容易。 這是因為 WordPress 提供了廣泛的選項來自定義此元素,從主題的內置設置到頁面構建器。 您所要做的就是找到您覺得使用起來最舒服的選項,然後您就可以開始工作了。
您對如何在 WordPress 中編輯標題有任何疑問嗎? 讓我們在下面的評論部分中討論它們!