Blocksy 教學:如何客製化 WordPress 佈景主題的外觀

Last Updated on 2 3 月, 2024 by Youi Shih

每當安裝完一個新的 WordPress 佈景主題時,網站通常都不是完美的樣子,需要再客製化。

初步修改剛安裝好的版型時,我會先針對「會影響整體視覺走向」的大項目進行排版調整和設計,包含(按修改順序):訂定網站色調、設定頁首、頁尾資訊欄、網誌文章和頁面的設計

準備好了嗎?現在我要教你如何簡單的去設定這些項目囉!

若你尚未安裝 Creative Theme 的 Blocksy 佈景主題,可以閱讀這篇文章《 WordPress 架站教學:如何從零開始經營部落格 》,我介紹了為何深愛它的原因,也會帶你一步步完成安裝。

如何修改網站的外觀?

無論是安裝哪個佈景主題,要調整網站的外觀設計,都是進入「外觀」底下的「自訂」去修改。

進入自訂頁面後,左邊是「設定區」,右邊則是「即時顯示區」,能立刻看見修改後的結果。

這個功能很方便,假如你不知道什麼設定會對應到網站的哪個地方,只要嘗試修改數值,你就能看到右邊有地方被調整了。透過這樣實驗的方式,你就會慢慢知道該如何設定。

每個設計佈景主題的設計師,都會有自己的一套系統邏輯,下面是「Blocksy 自訂區」的介紹。

我把自訂區由上往下拆成「三個部分」來說明,你可以依此找到「想修改的項目」的位置:

  • 一般選項:整體版型的調整、網站色盤、網站字型、社群媒體、性能和其他細部的設定。
  • 內容類型:網誌文章、單篇文章、分類、頁面、作者頁面、搜尋頁面的設定和設計。
  • 核心:網站標誌、網站標題和說明、選單、小工具、首頁設定、CSS 客製化的設定。

WordPress 專有名詞大補帖

在 WordPress 後台的左邊選單中,有「三個名詞」常讓新手困惑,以下是功能介紹:

文章(Post)/ 頁面(Page)

文章和頁面的介面長的一樣,因此新手常會不懂,到底何時要建立文章或頁面?你可以這樣分辨,只有要「寫文章」時才建立文章(Post),如心得、遊記、教學文或各種內容類型的文章。

而當你要做「文章以外的其他網頁」時,就統一用頁面(Page)來建立。如此一來,你就能清楚地區分和管理文章和頁面囉!

小工具(Widget)

在 WordPress 後台選單的「外觀」底下的「小工具」是個非常實用的功能。你可以把它當成「移動自如的內容區塊」,通常會放在:頁首、頁尾和資訊欄

常見的小工具,包含:段落、標題、按鈕、圖片、引言、清單、搜尋框、社群媒體追蹤、電子報訂閱表單、地圖、熱門或最新文章、文章分類、標籤雲、Html、短代碼和其他自行安裝的外掛等。

STEP 1. 設定網站色盤(Color Palettes)

介紹完介面後,我們就開始設計吧!首先,點擊左邊選單的「顏色」來調整網站的色盤。

你會看到左邊自動跳轉至顏色的設定區,上方的「整體顏色調色盤」是你的顏色模板,總共可以設定「八個顏色」方便日後快速選色,不必手動輸入色碼。

在選色時,我建議以「目前的設定邏輯」來修改顏色,會節省很多調整其他設定的時間。請對照「現有的色盤」與「右邊的即時畫面」,觀察看看,顏色分別都用在哪些地方?

  • 黑色:出現在文字、標題和選單上。
  • 亮藍色:按鈕、文章分類的標籤和超連結,具有 CTA 特性。
  • 深藍色:游標滑到按鈕上的變換顏色,更有互動感,具有 CTA 特性。
  • 灰色:主要內容區塊和資訊欄的背景色。
  • 白色:頁首和卡片的背景色。

因此,不同的顏色有不同的用途。在決定網站色盤時,你可以設定一組具有 Call-to Action(CTA)功能的顏色,目的是導引大家去關注或點擊它。例如:訂閱電子報、購買產品或服務等。

現在,請跟著上圖做做看。把色盤調整成你喜歡的顏色,完成後記得按「發佈」儲存設定喔!

STEP 2. 設計頁首(Header)

好,我們開始設計頁首吧!頁首的功用,是當訪客進入網站時,你要引導他如何瀏覽你的網站。

將游標移至右邊畫面最上方的「上面列」,系統會出現藍色匡線,點擊提示文字後 ➊,「底部」會跳出設定介面 ➋;再點擊列表裡的內容 ➌,「左邊」就會跳出設定介面 ➍。

你會看到底部有三個列表,由上往下依序是:

  • 上面列:子頁首(Sub Header),放次要的訊息。
  • 主要列:主要頁首(Header),放最重要的訊息,如:網站標誌和標題、選單和 CTA 按鈕。
  • 下機列:子頁首(Sub Header),放次要的訊息。

最多能設定三個頁首,優先以「主要列」為主,其次才是「上或下面列」。若你只想要有主要頁首,可以把上面列和下面列裡的東西,點擊「x」刪除就好。全部刪完後,列表就會自動隱藏。

STEP 2.1. 修改上面列

延續上個步驟停留的畫面,接下來,將游標切換到「設計」頁籤 ➊,把上面列變成白色背景 ➋。

接著,將游標移至上面列的「社群圖示」,點擊旁邊的提示藍色水滴圖 ➊,在左邊跳出的設定區裡切換成「設計」頁籤 ➋,把圖示顏色改為「綠色」➌。

同樣的步驟和方式,針對上面列的「搜尋圖示」再設定一次 ➍ ❺。

再來,到底部的設定區裡,把上面列左邊的「選單」刪除 ➊。記得要按「發佈」儲存設定喔!

因為上面列的左邊空掉了,我們再回到底部設定區,點擊「社群」直接移動至最左邊 ➊。

接著,點擊底部的「社群」,在左邊列表中把用不到的社群刪除,留下你有使用的就好 ➊。完成後,再到列表下方的藍色連結裡設定「社群媒體帳號」➋,也就是你的社群媒體首頁網址 ➌。

例如:粉絲專頁網址是「https://www.facebook.com/atinyspaceforu」,就把它貼到輸入匡裡。

修改完後,一定要隨時按「發佈」儲存設定喔,若沒存到就白費努力了呢!

STEP 2.2. 修改主要列

設計完上面列了,接著往下設定「主要列」。首先,點擊主要列的藍色提示匡,在左邊跳出的設定區裡,將「最小列高度」的數值降低,讓主要列變窄些 ➊。

再來,點擊主要列的「標誌」來修改網站標誌(Logo)和標題 ➋。若你還沒有 Logo,可以先刪除模板內容,保持空白並開啟下方的「網站標題」,將你的網站名稱輸入進去 ➌。

打完後,再進入「設計」頁籤裡調整網站標題的字體 ➍。

下一步,點擊主要列的「按鈕」開啟設定區,在「標籤文字」裡打上 CTA 的訊息。

主要列的最後一個設定是「選單」,你可以將文章、頁面、分類或自訂連結設為選單裡的項目。由於是新網站,你還沒有建立選單和其他頁面,因此我先示範「如何新增頁面」。

離開自訂區之前,記得按「發佈」儲存後再回到 WordPress 後台 ➊。

點擊左邊選單裡的「頁面」底下的「新增頁面」➊。開啟之後,參照圖 ➋ 來修改頁面內容。輸入完文章標題和網址後,先按「發佈」讓網頁正式上線 ➌,之後再把內容補上。

回到 WordPress 後台,點擊左邊選單的「外觀」底下的「選單」。開啟頁面後,在右邊的「選單名稱」裡輸入「Primary Menu」來新增一個新選單 ➊。

新增好之後,旁邊的「新增選單項目」裡有頁面、文章、自訂連結和分類。點擊頁面裡的「檢視全部」來新增頁面,將「首頁和關於」兩個頁面勾選,再點擊「新增至選單」➋。

下一步,在「選單設定」中設定選單的性質為「頁首選單 1+2」,完成後按「儲存選單」➌。

建好選單之後,回到自訂區,你可以看到選單裡的項目已經出現了!接著,點擊主要列的「選單 1」來修改字體或顏色的設計 ➊,改好按「發佈」就完成囉!

OK,頁首的基本設計就先這樣。有時間的話,你也可以發揮實驗精神玩玩看其他的設定哦。

STEP 3. 設計頁尾(Footer)

頁尾的設計方式和頁首一樣,差別是裡面的「內容不同」。頁尾的目的,是當訪客要離開網站時,你希望能留住他或把他再次導回網站中。

因此,你可以在頁尾加入:電子報訂閱表單、頁尾選單、社群圖示、廣告或贊助區。此外,頁尾也會放一些重要的法律聲明,如版權聲明、免責聲明和隱私權政策。

版權聲明範本:Copyright © {current_year}. Brand by 你的網站名稱. All Rights Reserved.

由於你才剛起步,因此只要先放「版權聲明」就好了,其他未來可以再加入。

現在給你一個練習題,請參考「STEP 2」設計頁首的方式來自行修改頁尾吧!提示你,盡情地將用不到的內容刪除,最後再針對「版權聲明」進行排版和顏色的調整,成果如下圖。

設計完頁首和頁尾的基本樣式了,有時間的話再自己玩玩看其他的設定吧!

STEP 4. 設計資訊欄(Sidebar)

接下來,我們要整理側邊的資訊欄。回到自訂區的首頁,先點擊一般選項底下的「資訊欄」來進行版面的調整吧!將欄位樣式改成「樣式 2」➊,你也可以調整資訊欄的寬度和其他設定。

設定完資訊欄的樣式後,就可以修改欄位裡的內容了。回到自訂區首頁,點擊選單底部的「核心」➊ 再按「主要資訊欄」來開啟設定區 ➋。你會看到目前的預設內容,我們開始來整理它吧!

首先,點擊「Live Search」,在開啟的工具列中點擊最右邊的「︙」並選擇「刪除」➌。

繼續往下設定。點擊「Post」,把標題改成「最新文章」➊,你可以在右邊看到成果。接著,點擊下面的文章列表區塊,同樣在開啟的工具列中進入「︙」並選擇「刪除」➋。

現在,將游標移到「最新文章和分類」的中間,會出現一個藍色圖示 ⊞,那是「新增小工具」的按鈕。打開後,在搜尋匡裡輸入「Post」並點擊「最新文章」➌。

下一步,點擊「分類」的小工具,把它刪除 ➊。

接著,點擊上方的「」➋,在輸入列裡打「分類」並新增「分類清單」的小工具 ➌。隨後,把「Uncategorized」的「︙」打開,點擊「顯示更多設定」➍。

在設定處,將「顯示文章數量」和「顯示分類階層結構」勾選之後 ➎ ,點擊頂部的「<」回到上一頁,按「Uncategorized」並點擊功能表的「⌃」將區塊移至「最新文章列表」下方 ➏。

現在,我們要為分類的小工具新增一個標題。點選「最新文章」的標題字,在功能列最左邊點擊「雙重正方形」的圖示來選取整個標題群組 ➊。接著,開啟「︙」並選擇「再製」來複製群組 ➋。

完成後,將複製的標題往下移至「分類清單」的上方 ➌,再把文字改成「文章分類」就好囉 ➍。

最後一個步驟,就是把下面的「引言」刪除,讓你練習操作看看,記得存檔喔!

STEP 5. 設計網誌文章(Blog)

回到自訂區首頁,點擊「內容類型」底下的「網誌文章」開啟設定區 ➊。

首先,選擇文章排版樣式為「簡單」➋。將頁面往下拉,找到「顯示文章數量」並改成「5 篇」➌,每頁超過 5 篇文章就會進入第二頁

接著,我們來修改每篇文章的區塊內容,點擊 Card Options(卡片設定)打開設定區 ➊。點擊「閱讀全文按鈕」來開啟隱藏的按鈕 ➋,並將按鈕文字改成「閱讀更多」,再打開「顯示箭號」➌。

修改完區塊裡的內容,可以再進行卡片外觀的設計。

進入設計頁籤後,先將所有的 CTA 顏色改成綠色,再將「游標暫留的顏色」調成黑色 ➊。接著,把「卡片陰影」設為灰色,點擊「調整」來開啟設定 ➋,你可以把數值調整成想要的模樣 ➌。

最後,將「卡片邊界」設為實線 ➍,顏色調成灰色,再把「框線圓角半徑」設為「4 px」➎。

STEP 6. 設計頁面(Page)

到這邊,已經設計完頁首、頁尾和側邊欄位囉。下一步,我們來進行頁面的排版設計吧!

回到自訂區首頁,點擊「內容類型」裡的「頁面」➊。進入上方的「頁面標題」後,你會看到目前被開啟(黑色眼睛圖示)的元件有「標題和摘要」➋,以下是其他項目的介紹:

  • 文章中繼資料:顯示「發佈日期、作者、更新日期或留言數」等文章資訊。
  • 麵包屑:網頁的層級路徑。例如「旅遊 > 亞洲 > 越南遊記文」代表,越南遊記文被收藏在亞洲的文章分類中,而亞洲隸屬在旅遊分類裡。

我們保留原始設定,到最下方調整「容器最小高度」,將目前的標題區塊變矮一些 ➌。

隨後,切換成設計頁籤,我們來修改標題區塊的背景 ➊。

點擊「容器背景」開啟設定視窗 ➊,選擇「圖片」來上傳事先找好的背景圖 ➋。你可以到 UnsplashCanva 來下載喜歡的圖片,建議找沒有主體的圖作為背景,否則會搶過標題文字的目光。

打開上傳視窗,因為圖片還沒上傳至虛擬主機,點擊左邊的「上傳檔案」後再按「選取檔案」來傳檔 ➌。完成後,圖片會跑到「媒體庫」裡,點選「你要的圖」再按右下方的「Select」➍。

最後,我們再調整一下「想顯示的區域位置」就好囉 ➎!

設計完頁面標題了,現在回到「頁面」的設定區 ➊。

我們稍微來調整「頁面結構」吧!共有「四種」可選擇,分別是:窄版、寬版、左邊資訊欄和右邊資訊欄,我們選擇「右邊」➋。完成後,再修改「頁面背景」為淺灰色就大功告成啦 ➌!

設計版面的教學,就先到這邊。如果你有時間,可以再玩玩看其他設定哦!

STEP 7. 設定網站核心內容(Core)

在自訂區,你還可以設定網站的「核心內容」。

你可以進入「網站識別」裡設定標題、說明和 Favicon(網站 Icon)。若輸入內容後 ➊ 即時畫面卻沒出現,那是因為你把區塊隱藏了。點擊網站標題旁的「藍色水滴圖示」開啟設定 ➋ 就看得到囉!

你也可以修改「首頁」的設定。剛開始架站,選擇最新文章(即「顯示所有文章」的頁面)作為首頁最省心。或也能自訂靜態頁面作為首頁 ➊,若選此項,你同時要指定一個頁面作為最新文章頁面。

示範的做法是,到 WordPress 後台新增「兩個頁面」,分別是:

  • 首頁 ➋:將頁面標題設為「首頁」,打上網址「home」後按發佈。可以事後再修改本頁內容。
  • 部落格 將頁面標題設為「部落格」,打上網址「blog」後按發佈。你不用在本頁內新增任何內容,系統會自動取代覆蓋內容成你所發佈的文章列表。

完成後回到自訂區,將靜態首頁設為「首頁」,再把文章頁面設為「部落格」就完成啦

結語

Blocksy 是我第一次用就從此愛上的佈景主題。本篇文章是最基礎的設定教學,若你想購買付費版本,或學習如何更進階的操作這個佈景主題,我也有提供一對一家教服務,歡迎寫信給我。😉

希望這篇文章有幫助到你,一起繼續在部落格的世界裡享受寫字吧!

【 延伸閱讀 】

Youi Shih
Youi Shih

多元斜槓的人生實踐家,擅長攝影和文字創作,喜歡音樂、武術、冒險和大自然,現專注於探索個人成長、一人創業和打造身心靈均衡的生活,為本站主理人。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

error: 網站已受到保護!