最後更新日期: 2023 年 2 月 7 日
這個單元我們要來處理的是頁首選單 Header。
開始之前,我們先來理解一下一個網頁通常大架構上會分成 Header, Content 和 Footer 這三個部分 (如下圖) ,那這個單元我們會先來介紹 Header 調整。

網頁的組成
其中,中間的 Content 也就是內容,會因為每個頁面不同而有不同的內容 (例如:文章、頁面的變更) ,但整體來看,整個網站裡面的每個網頁,上面的 Header 和下面的 Footer 都是共用的不會去變更。
所以我們習慣會在上面放一些可以讓使用者快速找到重要的網頁連結資訊,因此這裡有導航、導覽的重要意義。
Header 通常是固定在網頁最上方的,一般來說會放品牌 Logo 、子頁面連結、搜尋或是社群媒體連結等等,因應不同的主題佈景,能放的東西也會不一樣,我們之後會教大家如何去客製化這個部分。
而 Footer 則是固定在網頁最下方,通常是會放上各頁面的連結,或是聯絡資訊,或是營業時間。
網站選單
選單會放上目前網站所有的頁面,預設就是全部都顯示出來的,這些是我們可以自定義的。首先我們可以進入外觀裡面的選單,進行選單的設定和調整。

這邊可以編輯選單名稱,並儲存選單,接下來就可以勾選既有頁面並且點選新增至選單來加進去選單裡,也可以另外為這些頁面改名稱

同時也能可以使用 自訂連結 來加入連到其他網頁的超連結,比如說可以加上 Facebook 粉絲專頁的連結 或是 蝦皮商城 的連結。有什麼重要的資訊想跟讀者第一眼就看到,都可以放在這。
記得,底下一定要勾選主要選單,這樣才會讓網站辨識為主要的選單。然後按下 儲存選單 就完成了,回到網站後重新整理一下網頁,就能看見我們的選單被更新了。
客製化 Header
如果你看到網路上比較舊的文章會跟我們說可以到 WordPress 後台外觀裡面的 自訂 Header 這裡做修改,或者是到小工具裡面做修改,不過這要看主題佈景有沒有支援。
在新的 WordPress 版本中,我們可以直接透過外觀裡面的編輯器,來修改我們的 Header 。

這邊也是直接透過最新的 Gutenberg 區塊編輯器去做修改。我們可以在這放入圖片、文字、連結,甚至是影音。
接下來,我們會來說 Footer 怎麼編輯。
搶先發佈留言