【網站設計教學#5】如何設定WordPress外觀？文字樣式、網站配色、頁面選單教學

這系列是《網站設計教學》，目標是幫助完全不懂網站設計的小白們，可以跟著教學實際完成自己網站的設計。

上一篇已經完成網站視覺設計，大家有了自己的網站整體視覺，接下來會開始實際將設計好的頁面，製作到 WordPress 上。

但在開始執行頁面時，先不急著編輯頁面，要先把外觀設定完成。為什麼要先設定外觀呢？在前面幾篇的網站規劃中，有提到顏色規劃、文字字級、按鈕樣式，另外還有頁首/頁尾，這些「一次性樣式」如果都在全域設定好，就能避免後續出現與自己品牌不符的樣式，也能減少許多後續調整的時間。

步驟一：安裝佈景主題 Astra

在開始安裝佈景主題之前，你需要先有一個 WordPress 網站。如果還沒架設完成，可以先閱讀 WordPress 網站架設教學，並實際操作。

為什麼 ＷordPress 需要使用佈景主題？佈景主題可以用來調整網站的整體外觀，像是顏色設置、欄位設定、文字大小等其他設計功能。

我自己本身的網站，以及接案製作客戶網站時，大多都是使用「Astra」這套佈景主題，因為：

• 操作上很直觀非常快速的好上手
• 免費版本就能做到很足夠的樣式

接下來跟著步驟開始安裝 Astra 佈景主題：

1. 點選外觀
2. 點選佈景主題
3. 搜尋：Astra
4. 點選安裝
5. 點選啟用

安裝並啟用後，要開啟佈景主題的外觀設定，有 2 種方法：

1. 在前台的方式：點選上方的「自訂」。
2. 在後台的方式：點選「外觀 > 自訂」。

進入後，就可以看到網站的外觀設定區域了。

步驟二：色彩規劃

色彩規劃在全域的設定中，我認為是最重要的部分，會先將設定好的顏色輸入調色盤中，再設定文字及背景的顏色，這樣未來在製作每個頁面時，就不用再重複手動調整每個區塊的顏色，因為系統會自動帶入預設值。

首先，點選「全域 > 色彩」開始調整整體的顏色。

一、全域調色盤

在「色彩」中，你會看到全域調色盤，需要將之前網站配色所配置好的色票新增上去：

step 1

：點選全域調色盤中的色票 1

step 2

：輸入正確的色票號碼，例如：「#000000」

step 3

：點選其中的主題色

step 4

：檢色器的上排，會出現剛才新增的全域調色盤

完成這個動作，在未來想要設定顏色，就不需要再輸入色票號碼，也不會因為記錯色票號碼，而導致於出現不同的顏色。

二、佈景主題色彩

接下來要來設定佈景主題色彩，是所有網站顏色的調整，包含網站標題、文章連結等，在這邊設定完，就能統一網站的所有配色。

1. 強調：當滑鼠選取文字時，所顯示的顏色，清楚讓人知道選取哪些文字。
2. 連結：當文字新增連結時，所呈現的顏色，以及滑鼠碰觸到時改變的顏色。
3. 標題（H1 – H6）：一次設定所有標題的顏色 (所有標題只能設定一種顏色)。
4. 內文文字：所有內容文字的顏色

額外補充：Astra 付費版本可以獨立設定每個標題不同的顏色

三、表層色彩

為了讓網站更有層次感，「表層色彩」可以將網站與內容的背景色，設定不同的顏色。不然預設如果都是白色，就會顯得有些單調。

步驟三：按鈕設定

網站上免不了按鈕設計，所以接下來我們要來針對按鈕做設定，需要讓按鈕的樣式統一，避免讀者在點選時感受到疑惑。

首先，點選「全域 > 按鈕」開始調整整體的按鈕樣式。

一、按鈕預設集

還記得上一篇的網站視覺設計請大家將按鈕統一元件，在 WordPress 上也能全域設定好，整個網站就能統一樣式了。

step 1

：總共有六個基本按鈕形式，需要選擇一個基本樣式。

step 2

：設定按鈕的顏色，以及滑鼠移碰觸的顏色，可以調整文字、背景、框線。

step 3

：字型調整：

1. 字型樣式調整：預設是繼承上層元素，也就是網站預設的字型。
2. 字體粗細調整：可以調整字體的粗細樣式，如果文字過細也會導致於按鈕不夠明顯。
3. 字體大小調整：可以調整按鈕內的文字大小。不過調整大小時，要注意邊框間距。
4. 行距、間距調整：可以調整按鈕內的文字上下距離，以及文字之間的距離。
5. 字母大小寫：如果是使用英文字母時，可以選擇預設字母的大小寫
6. 底線位置：可以調整底線的位置，不過一般預設是正常的狀態，沒有任何的底線

二、按鈕樣式設定

按鈕除了上述的基本樣式，也能調整出更多特色的按鈕樣式，可以參考以下步驟：

step 1

：邊框間距，可以將原先的預設值上下左右間距，調整更自由的寬度與高度。

step 2

：邊框寬度，如有需要線框的效果，這裡的數值需要調整 1 以上，否則調整完顏色並不會出現邊框。

step 3

：邊框圓角半徑，可以藉由圓角半徑玩出更多按鈕的樣式，圓角的弧度也能更彈性。

步驟四：返回頂端

在閱讀網站文章時，如果滑鼠瀏覽到最下方，使用返回頂端的按鈕回到最上方，就能減少讀者滾動的時間，對於使用者體驗來說十分良好。

所以這個步驟，我們要來設定返回頂端的按鈕，需要先點選「全域 > 返回頂端」。

一、一般設定

進入後，要先做按鈕的功能設定，以下步驟參考：

step 1

：點選分頁「一般 GENERAL」

step 2

：開啟返回頂端按鈕

step 3

：選擇需要在哪一個裝置顯示，而我選擇「桌面版＋行動版檢視」

step 4

：可以選擇右下或左下角的位置

step 5

：調整回頂端按鈕的尺寸大小

二、設計設定

除了功能外，外觀樣式也能做設定：

step 1

：點選分頁「設計 DESIGN」

step 2

：調整回頂端按鈕的箭頭、背景顏色，還有滑鼠碰觸的樣式效果。

step 3

：框線圓角半徑的調整，可以藉由圓角做出不同的樣式，下圖為水滴造型。

步驟五：無障礙設定 Accessibility

什麼是無障礙設定？這個功能非常的貼心，可以利用鍵盤的「Tab」按鈕來瀏覽你的網站。

為了在使用鍵盤上操作時，明確知道選取到哪一個目標物，也可以設定成以框線來顯示，以下完整設定。

step 1

：開啟無障礙設定。

step 2

：當點選鍵盤上「Tab」時，所框起來的顏色，並且可以選擇虛線或實線的樣式。

step 3

：當在搜尋框輸入文字時，邊框所顯示的顏色，並且可以選則虛線、實線或無效果。

步驟六：網站標識

網站標識圖是用來區分瀏覽網站時，可以讓人更快速分辨你的網站。

所以在設計網站標識時，有幾點建議：

• 不要使用太複雜的線條，一眼是好辨識的圖示。
• 顏色上也使用醒目一點的視覺，可以加上白底、邊框。
• 要注意在瀏覽器上黑色與白色的底會如何顯示，因為每個人使用的底色都不同。
• 尺寸大小一般瀏覽是 16 x 16 px，但是為了圖示更清楚，我會使用 32 x 32 px。

首先，先點選「Site Identity」並開啟「網站圖示」。

step 1

：點選選取網站標示

step 2

：將設計好的標識圖檔案拖放或選取檔案上傳

step 3

：選取上傳的標識圖檔，並點按選取

完成網站標識後，會有預設範圍圖，不過還是要以實際觀看為主，如果認為不夠明顯再加以修改。

步驟七：頁首設定

下圖為上一篇網站視覺設計中的頁首設計，接下來就要實際將這個頁首樣式製作到網站中。

首先，點選「頁首編輯器」開啟頁首編輯器自訂項目設定。

下方會跳出頁首欄位的設定格子，可以由這三欄三列，排列出不同的頁首設計。

一、品牌 LOGO 設定

step 1

：點選想要放置的欄位格子，會跳出多個工具。

step 2

：選擇「網站標題及標誌」

step 3

：在分頁中的「元素 ELEMENTS」，點選「網站標題與標誌」。

step 4

：在「一般 GENERAL」分頁中上傳並新增標誌

1. 點選「選取標誌」
2. 上傳一張圖示
3. 點選「選取」
4. 調整「標誌寬度」

step 5

：在分頁中的「設計 DESIGN」設定網站「標題、說明」的樣式

1. 輸入標題「溫研創意」
2. 設定「網站標題」需要在哪一個裝置顯示，預設都是顯示的狀態。
3. 可以調整是否標誌及標題並排在同一列，或是也可以選擇斷行的效果。
4. 網站說明可以輸入品牌的標語或說明，如果要輸入品牌的英文名稱也可以。
5. 設定「網站說明」需要在哪一個裝置顯示，預設都是顯示的狀態。

step 6

：在分頁中的「設計 DESIGN」設定網站「標題、說明」的樣式

1. 調整文字顏色，以及滑鼠碰觸到的顏色
2. 調整「標題」文字大小
3. 調整「說明」文字大小
4. 調整上下左右的間距寬度

step 7

：頁首背景設定

1. 將滑鼠碰觸到背景
2. 出現「藍色鉛筆」的按鈕，點選後
3. 點選分頁中的「設計（DESIGN）」開始調整樣式
4. 調整「背景」底色
5. 調整「下框線顏色」，以及「下框線的尺寸」
6. 調整「邊框間距」上下左右寬度，可依照網站設計圖調整，沒有標準答案
7. 調整「邊界」上下左右寬度，可依照網站設計圖調整，沒有標準答案

二、頁首選單設定

在開始設定選單前，需要「建立選單」以及「新增頁面」，所以回到後台介面：

step 1

：點選「外觀 > 選單」

step 2

：建立選單

1. 點選「建立選單」
2. 輸入選單名稱：「我的選單」(或是可以輸入「頁首選單」，自訂即可)
3. 勾選「主要選單」
4. 點選「建立選單」

step 3

：因為還未成立頁面，所以選單即便建立但也沒有頁面可以選擇，需要先新增頁面

1. 點選「頁面」
2. 點選「新增頁面」

step 4

：開啟新的頁面

1. 輸入「頁面標題」(根據你在選單上想要出現的頁面做設定，例如你 選單上想要直接連結到「關於我頁面」，那頁面標題就打「關於我」，未來再回頭設計頁面的內容與樣式)
2. 點選「發佈」

step 5

：回到選單頁面

1. 點選「外觀 > 選單」
2. 勾選需要頁面：首頁、關於我 (選擇你頁首想要呈現的選單內容)
3. 點選「新增至選單」會自動移動至右方
4. 點選「儲存選單」

補充一下，以上只是針對「頁首選單」進行設定，而選單你可以建立很多個，通常除了頁首外，頁尾也會有頁尾的選單，沒有一定，如果要新增另外一個選單，就根據前面的步驟重複做就好。

step 6

：回到前台設定選單

1. 在要新增選單的位置，點選 + 號
2. 點選「主要選單」，這是前面設置建立選單時，請大家記得勾選的的選單

step 7

：在分頁中的「元素 ELEMENTS」開始編輯主要選單

1. 點選「主要選單」
2. 左側欄位，點選「主要選單」

step 8

：在分頁中的「設計 DESIGN」，開始設定樣式

1. 選擇「選單游標暫留樣式」，我選擇的是底線模式，當滑鼠碰觸到選單時，會在下方出現底線
2. 調整選單顏色，以及滑鼠碰觸到的顏色

步驟八：頁尾設定

下圖為上一篇網站視覺設計中的頁尾設計，接下來也是一步步做實際示範。

點選「頁尾編輯器」開啟頁尾編輯器自訂項目設定。

下方會跳出頁尾欄位的設定格子，可以由這三欄，排列出不同的頁尾設計。

一、品牌 LOGO

step 1

：設定欄位數量，以及新增工具

1. 點選左側齒輪欄位「設定」
2. 在分頁中的「一般 GENERAL」點選需要的欄位數量，因為只有一張圖片，所以選擇「1」
3. 點空白欄位
4. 新增工具「Widget1」

step 2

：新增品牌 LOGO 圖片

1. 點選「Widget1」工具
2. 點選左側空白格子
3. 選擇「圖片」
4. 上傳品牌 LOGO 圖片
5. 點選「選取」

step 3

：將品牌 LOGO 圖片置中

1. 點選左側已經上傳的圖示
2. 點選「位置」設定按鈕
3. 選擇「置中對齊」

step 4

：在分頁中的「設計 DESIGN」調整背景樣式

1. 滑鼠碰觸背景，出現藍色框
2. 點選藍色「鉛筆」按鈕
3. 將上框線尺寸調整為「0」
4. 調整「背景」底色
5. 調整邊框間距，我調整的是上方：60px，下方：0px。

二、頁尾選單與社群

step 1

：調整背景樣式

1. 點選左側齒輪欄位「設定」
2. 在分頁中的「一般 GENERAL」點選需要的欄位數量，因為選單與社群是上下排列置中，所以選擇「1」數量
3. 點空白欄位
4. 新增工具「Footer Menu」選單 (因為選單是在上排，所以需要先新增「Footer Menu」)
5. 新增工具「Social」社群

step 2

：在分頁中的「一般 GENERAL」新增頁尾選單

1. 點選選單「Footer Menu」工具
2. 點選「請在這裡設定選單」
3. 到頁尾選單，選擇你要放置在頁尾的選單，這裡我選擇與首頁一樣的選單「我的選單」。如果不知道怎麼新增選單，或者想要額外讓頁尾有不同的選單，可以回到步驟 7-2 再次建立選單
4. 返回頁尾選單設定

step 3

：在分頁中的「設計 DESIGN」調整「選單」樣式

1. 點選選單「Footer Menu」工具
2. 調整文字顏色，以及滑鼠碰觸文字連結顏色

step 4

：在分頁中的「一般 GENERAL」新增「社群」功能

1. 點選社群「Social」工具
2. 新增需要的社群軟體

step 5

：在分頁中的「設計 DESIGN」設定「社群」樣式

1. 點選社群「Social」工具
2. 點選分頁中的「設計 DESIGN」
3. 調整「圖示色彩」：調整 ICON 圖示本身的顏色
4. 調整「背景色彩」：如果你希望 ICON 圖示有底色襯托，可以調整背景顏色
5. 調整「圖示尺寸」：加入背景顏色後，也許會顯得 ICON 圖示視覺上太小，所以可以再調整 ICON 圖示本身的尺寸
6. 調整「圖示間距」：調整 ICON 圖示之間的左右距離
7. 調整「圖示跟背景之間的間距」：調整背景與 ICON 圖示的距離位置，可以調整成滑鼠好點選的間距
8. 調整「圖示圓角半徑」：將背景加上圓角，數值越大就會形成完整的圓形，這部分可以依照自己設定來調整

step 6

：在分頁中的「設計 DESIGN」調整背景樣式

1. 滑鼠碰觸背景，出現藍色框
2. 點選藍色「鉛筆」按鈕
3. 點選分頁中的「設計 DESIGN」
4. 將上框線尺寸調整為「0」
5. 調整「背景」底色
6. 調整邊框間距，我所調整的是上下左右 24px

三、版權聲明

還記得在網站架構心智圖的頁尾有介紹版權聲明的組合方式，而我選擇的組合方式是「Copyright © 2023 溫研創意」，

所以為了可以不用每一年都去改年份，可以使用代碼的方式填寫。

step 1

：點選「Copyright」工具

step 2

：在分頁中的「一般 GENERAL」填寫版權聲明代碼

會使用代碼的方式填寫，以下是對應的代碼：

• ©：[copyright]
• 2023： [current_year]
• 溫研創意：[site_title]

Copyright [copyright] [current_year] [site_title]

step 3

：調整背景樣式

1. 滑鼠碰觸背景，出現藍色框
2. 點選藍色「鉛筆」按鈕
3. 在分頁中的「一般 GENERAL」調整高度「50px」
4. 點選分頁中的「設計 DESIGN」
5. 將上框線尺寸調整為「0px」。（下圖是尚未調整為 0px ，就會在邊框上出現一條線）

6. 調整「背景」底色

step 4

：最後完成發佈

1. 點選「發佈」，一定要記得點選才會儲存設定
2. 點選「關閉」，回到前台

步驟九：完成檢查

關閉自訂設定後，回到前台，就能看到完整的網站頁首與頁尾的設計，可以再檢查看看有沒有沒調整好的地方。

小作業：完成網站外觀設定（含頁首／頁尾）

這篇是在開始設計網站頁面前，網站的整體外觀設定，可以讓後續在製作網站時，可以省去很多重複的設定；並且我們也同步完成了頁首與頁尾的設定，可以讓讀者未來在切換頁面時更方便。

接下來，換你跟著以下步驟，實際完成你網站的外觀設定：

1. 安裝佈景主題 Astra
2. 調整全域的色彩規劃
3. 元件按鈕設定
4. 返回頂端設定
5. 無障礙設定
6. 新增網站標識
7. 完成頁首、頁尾的製作

如果你還不確定是否要找網頁設計師合作，可以參考我這篇的分析：製作網站需要找設計師嗎？專業設計師分析給你聽