如何在無需外掛下即可編輯WordPress網站頁首

俗話說，留下良好的第一印象很重要。當訪客訪問您的網站時，第一印象從頂部–頁首開始。

WordPress 主題的開發者並不要求包含頁首模板，但沒有頁首模板的網站是很少見的。自網路誕生以來，”header(頁首)” 一直是一個常用術語，指的是在頁面頂部封裝訪客希望找到的基本元素的 HTML 區塊。這通常包括

• 品牌：這可能包括網站名稱，通常還包括徽標。在頁首中使用顏色、圖片或視訊可以強化品牌。
• 主導航：如果網站有多個頁面，訪客可能會在每個頁面的頂部附近尋找網站導航選單。
• 二級導航：二級導航可以是獨立於使用者當前在主選單層級中所處位置的任何連結。例如 “登入” 按鈕和連結到社交媒體賬戶或購物車的圖示。
• 搜尋：如果您的網站支援搜尋，搜尋輸入框不一定要放在頁首處，但訪問者肯定不會在頁尾處尋找它。

WordPress 內容管理系統可以將主題模板中的標記與資料庫中的內容（如徽標連結和選單條目）相結合，動態生成頁首等元件，並將其注入每個頁面。

WordPress 主題生態系統為幾乎所有網站提供了豐富的設計選擇。各種市場上有數以萬計的主題可供選擇，挑選最適合自己的主題可能會讓人望而生畏。

但是，當你最終選擇並安裝了一個主題後，你至少需要定製一些元件（如頁首），以便在網站上印上你的品牌，使其成為你自己的網站。

讓我們來看看如何做到這一點。

區塊與經典：兩個主題的故事

如何自定義 WordPress 網站的頁首取決於其主題的構建方式（有時還取決於您想做多少自定義）。有三種方法可以修改 WordPress 原生的網站頁首：

• 使用網站編輯器：WordPress 5.0 為網站內容引入了一個稱為 Gutenberg 的塊編輯器。隨著 WordPress 5.9 的釋出，區塊的概念擴充套件到了主題，併成為全站編輯的強大選項。網站編輯器以及使用基於 HTML 的元件構建網站主題各個部分的功能，為 WordPress 原生定製帶來了前所未有的靈活性。
• 使用 WordPress 定製器：我們並不是想讓您覺得自己老了，但那些只能通過使用曾經開創性的 “定製器 “和相關部件來調整的主題被稱為 “經典” 主題。儘管名字聽起來有些復古，但新的經典風格主題仍在不斷推出，使市場上已有的數千款主題更加豐富。與網站編輯器和區塊主題相比，自定義器和經典主題提供的標題自定義選項較少。
• 直接編輯主題檔案：您（或您尋求幫助的人）需要具備一些基本的 PHP 知識，才能編輯 WordPress 經典主題檔案中的程式碼，但當自定義器無法滿足您對網站頁首的需求時，這也是一種解決方案。

我們在此不涉及第三方 WordPress 頁面構建工具（如Divi）中的頁首自定義功能，也不涉及任何專門用於處理網站頁首（和頁尾）的外掛。如果你的唯一選擇是直接編輯主題檔案，並且想避免使用 PHP 程式設計，那麼這些外掛值得一試。

如何編輯區塊主題頁首

如果你使用過 Gutenberg 來建立內容，你就會知道 WordPress 提供了大量的區塊，你可以將它們放在頁面上，組成從標題、段落和列表到媒體、導航和表單的任何內容。有一類區塊可以像經典主題中的小部件一樣執行任務，包括生成最新文章和評論的連結、顯示標籤雲或插入日曆。

多個區塊可以進行組合、樣式化並儲存為模式。您還可以將這些元件新增到 WordPress 主題中有助於定義頁面佈局的部分，包括頁首。

與單個區塊一樣，模板部分也可以在 HTML 檔案中定義。區塊主題易於定製，因為描述這些修改的資訊會儲存在 WordPress 資料庫中，並在生成頁面時應用到各個元件中。

因此，當我們談論在塊主題中 “編輯” 頁首時，我們很少談論編輯儲存在 WordPress 主題目錄中的檔案。

區塊主題頁首

檢查頁首等模板部分背後的 HTML 程式碼有助於解釋在自定義主題時發生了什麼。

我們在本教學中使用 Seedlet 主題，因為它有 Seedlet (Blocks) 和舊版 Seedlet (Classic)  兩種版本。Seedlet (Blocks) 以 Blockbase 主題為父主題，這就是 Seedlet 主題目錄中 header.html 檔案的全部內容：

<!-- wp:pattern {"slug":"blockbase/header-centered"} /-->
<!-- wp:spacer {"height":60} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

WordPress 區塊背後的大部分神奇功能都發生在 HTML 註釋中。註釋可以在頁面構建過程中傳遞樣式資訊和其他指令。上面的 HTML 程式碼為我們的預設頁首新增了一些垂直間距，但主要作用是請求在 Blockbase 主題中加入一個模式（一旦新增了 .html），該模式可以在 header-centered.html 檔案中找到。

Blockbase 主題中的模板部分目錄包括這些與頁首相關的檔案：

header-centered.html
header-default.html
header-linear.html
header-minimal.html
header-rounded-logo.html
header-wide.html

例如，header-rounded-logo.html 檔案包含一個 HTML 註釋，其中新增了一個 CSS 類，用於對徽標影象進行圓形剪下。如果我們熱衷於這種方法，我們可以編輯 Seedlet header.html 檔案，使其包含 header-rounded-logo.html，而不是 header-centered.html。但我們不必這樣做，因為我們可以在 WordPress 網站編輯器中應用該模板部分，而不去碰硬碟上的主題檔案。

使用網站編輯器自定義頁首

網站上的區塊主題啟用後，我們可以在 WordPress 管理面板中選擇外觀>編輯器，訪問站點編輯器：

從 WordPress 管理面板訪問網站編輯器。

網站編輯器的初始檢視是一個全頁面佈局，其中包括頁首、頁尾和主題開發人員已新增的任何其他模板部分。我們可以點選頁首區域，立即開始編輯。

下面，我們的頁首包括一個徽標占位符，並已顯示網站名稱和主導航（現在只有 “關於我們” 和 “示例頁面”）。如果我們在網站基本資訊中新增標語，標語也會出現在這裡。

這些網站標識元素已經出現在我們的頁首中，因為上面提到的 header-centered.html 模板部分包含了這些註釋：

<!-- wp:site-logo {"align":"center","width":128} /-->
<!-- wp:site-title {"textAlign":"center","style":{"spacing":{"padding":{"top":"30px","bottom":"20px"}}}} /-->
<!-- wp:site-tagline {"textAlign":"center","fontSize":"small"} /-->

主導航由該註釋生成：

<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"center","orientation":"horizontal"}} /-->

新增 Logo：

1. 選擇 Logo 佔位符。
2. 點選新增媒體按鈕。
3. 在 WordPress 媒體庫中選擇 Logo，或從磁碟上傳。

在頁首模板部分新增 Logo。

通過新增 Logo 自定義網站頁首是一項非常普通的任務，即使是大多數經典的 WordPress 主題也會在自定義器中簡化這項工作。因此，讓我們新增一個模板中尚未預料到的區塊：頁面頂部附近的二級選單，其中包含一個條目：Shop。

首先，點選網站編輯器左上角的切換圖示，切換區塊插入器的顯示：

切換區塊插入器。

區塊插入器啟用後：

1. 找到導航區塊（可以搜尋）。
2. 將導航區塊拖動到頁首的上邊緣。

將導航區塊拖入頁首區域。

現在，我們通過建立一個自定義連結（與主導航分離）來編輯導航塊，該連結將顯示文字Shop，幷包含電子商務子域的 URL：

為新導航區塊建立頁面連結。

預設情況下，該頁首模板部分的所有內容都位於頁面中央。我們希望Shop連結向右浮動。要做到這一點

1. 點選新導航塊。
2. 單擊工具欄中的 Change items justification 圖示。
3. 選擇專案右對齊。

更改頁首區塊的水平定位。

下面是完成後的頁首：

帶有包含 Shop 連結的二級選單的區塊主題頁首。

如何使用自定義工具修改經典主題頁首

2012 年，隨著 WordPress 3.4 一起釋出了第一個版本的主題定製器，這是幫助管理員在無需編碼的情況下修改網站外觀和感覺方面的一次飛躍。

自此以後，定製器的功能得到了顯著增強，但有一點始終不變：主題的開發者決定了哪些內容可以使用該工具進行定製，哪些不可以。這與網站所有者可以使用基於塊的網站編輯器自由發揮形成了鮮明對比。

使用 WordPress 主題定製器

當支援自定義工具的經典主題在網站上啟用時，可在 WordPress 管理面板中選擇外觀>自定義來訪問它。

從 WordPress 管理面板訪問主題定製器。

在自定義器主選單中選擇 “網站標識” ，即可訪問標題中的自定義元件：

在經典主題定製器中選擇 “網站標識” 選項。

在該主題的 “網站標識” 部分，我們可以新增或更改徽標，編輯網站標題和任何標語。(網站標題和標語最初由管理面板 “常規設定” 頁面的條目填充）。

該主題還將網站的主導航放在頁首處。此外，頁尾也有一個導航位置和一個社交媒體連結選單。自定義器允許你選擇為每個位置分配哪一個選單（如果有的話），但位置本身基本上是固定的。

在自定義器中為經典 WordPress 主題新增 Logo。

點選上面突出顯示的 “選擇 Logo” 按鈕後，我們可以從 WordPress 媒體庫中選擇一個 Logo，或者從磁碟上傳一個新的 Logo。

下圖中的徽標已經就位，自定義器允許我們移除圖片或用其他圖片替換：

使用 WordPress 定製器新增頁首 Logo。

主題定製器可以自定義什麼？

那麼，定製器如何確定我們是否可以上傳 Logo，以及上傳後 Logo 應放在哪裡呢？

這要從主題的 functions.php 指令碼中的這個條目說起：

/**
* Add support for core custom logo.
*
* @link https://codex.wordpress.org/Theme_Logo
*/
add_theme_support(
'custom-logo',
array(
'height' => 240,
'width'           => 240,
'flex-width'  => false,
'flex-height' => false,
)
);

該程式碼塊可啟用自定義器 “網站標識” 選項卡中的 “選擇徽標” 按鈕及其媒體庫功能連結。

然後，在用於建立網站頁首的 PHP 程式碼中，在徽標應出現的位置新增這個簡短的程式碼段：

<div class="site-logo"><?php the_custom_logo(); ?></div>

最終效果：

在主題定製器中更新 Logo 後的網站頁首。

通過編輯主題檔案更改 WordPress 頁首

在上文中，當我們使用網站編輯器自定義塊主題的頁首時，我們新增了一個帶有 Shop 連結的二級選單。我們可以自由地將該導航塊放置在標題中任何我們想要的位置。我們的經典版主題沒有為這樣的選單預留位置，因此我們需要編輯與頁首相關的 PHP 程式碼來進行更改。

我們可以簡單地開啟相應的主題檔案，然後手動為二級選單新增 HTML，但這樣做未免太短視了。稍後，我們可能要更新購物連結的文字（立即購物？）、更改其 URL 或在該選單中新增其他專案（登入？）

我們希望在標題中新增新的導航，並在自定義器中註冊，這樣就可以在 WordPress 選單編輯器中更改二級選單的內容，而無需返回主題程式碼。

開始之前請備份

深入 WordPress 經典主題的 PHP 程式碼來定製網站的頁首通常被描述為編輯header.php檔案。許多主題都是如此，但其他主題可能會將多個檔案組合在一起建立一個頁首。

在更改主題檔案之前，請先進行備份。以下是備份和恢復備份的方法。

即使有備份，當第三方主題的更新覆蓋了你的修改時，你也會遇到麻煩。您的修改可能會從網站上消失，直到您能從備份中恢復已更改的主題檔案。因此，我們強烈建議為您更改的檔案建立一個子主題，並在一個暫存的 WordPress 網站上測試更新。

在經典主題中編輯 WordPress 標題

我們的經典主題示例在頁首中為主導航預留了一個位置。在自定義器中，我們可以選擇分配到該位置的 WordPress 選單。在我們的例子中，該選單被方便地命名為 “主選單”。

主題中還有用於頁尾和社交連結導航的位置，但你可以在下面看到這些位置目前尚未啟用：

在經典主題的自定義編輯器中編輯選單。

如果我們檢視一下主題的 functions.php 指令碼，就會發現這些選單位置首先被引用：

// This theme uses wp_nav_menu() 
register_nav_menus(
array(
'primary' => __( 'Primary Navigation', 'seedlet' ),
'footer'  => __( 'Footer Navigation', 'seedlet' ),
'social'  => __( 'Social Links Navigation', 'seedlet' ),
)
);

下面，我們將新增到該區塊，為新的 “二級導航” 選單註冊一個條目：

// This theme uses wp_nav_menu() 
register_nav_menus(
array(
'primary' => __( 'Primary Navigation', 'seedlet' ),
'secondary' => __( 'Secondary Navigation', 'seedlet' ),
'footer'  => __( 'Footer Navigation', 'seedlet' ),
'social'  => __( 'Social Links Navigation', 'seedlet' ),
)
);

When we return to the Customizer, the new Secondary Navigation option shows up in the Menu Locations area:

在主題定製器中註冊了二級導航選項。

我們可以為選單命名（二級選單）並開始新增連結。就像在基於區塊的主題中使用網站編輯器一樣，我們將為 “Shop” 建立一個條目。

在標題的主題檔案中，我們新增了一些程式碼，以確認二級導航選單的存在，並在連結列表中至少有一個條目。然後，我們解析選單內容並顯示它們：

<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>
<div id="secondary-navigation" class="secondary-navigation" role="navigation">
<?php
// Get menu slug
$location_name = 'secondary;
$locations         = get_nav_menu_locations();
$menu_id           = $locations[ $location_name ];
$menu_obj          = wp_get_nav_menu_object( $menu_id );
wp_nav_menu(
array(
'theme_location'  => 'secondary',
'menu_class'          => 'menu-wrapper',
'container_class' => 'secondary-menu-container',
'items_wrap'          => '<ul id="%1$s" class="%2$s">%3$s</ul>',
)
);
?>
</div><!-- #secondary-navigation -->
<?php endif; ?>        
<div class="menu-button-container">
<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>
<button id="secondary-open-menu" class="button open">
<span class="dropdown-icon open"><?php _e( 'Menu', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ); ?></span>
<span class="hide-visually expanded-text"><?php _e( 'expanded', 'seedlet' ); ?></span>
</button>
<?php endif; ?>
</div>

現在，我們的頁首在二級導航的首選位置包含了我們的 “Shop” 連結（下圖紅色突出顯示）。

經典主題中帶有 Shop 連結的 WordPress 更新版頁首。

使用這種方法，我們只需在 WordPress 管理儀表板中編輯二級導航選單，就可以更改用於商店連結的錨文字，甚至在二級導航中新增其他選單項。

小結

如果您想修改 WordPress 網站的頁首，而又不想借助第三方外掛或頁面生成器，那麼基於區塊的主題與站點編輯器相結合，幾乎可以提供無限的靈活性。網站編輯器允許你在頁面佈局的任意位置放置各種區塊。您對區塊定義和樣式的修改都儲存在 WordPress 資料庫中，因此無需修改磁碟上的主題檔案。

十多年來，我們一直使用定製器來管理經典主題，它允許對主題開發者已確定並註冊為 “可定製” 的元素進行修改。如果您想進行超出該範圍的更改，可能需要編輯主題檔案，而且幾乎肯定需要對 PHP 指令碼語言有基本的瞭解。