【2022年度】 Blocksy教學:想讓網站變漂亮就靠這個! | WordPress佈景主題推薦

想把 WordPress 網站變得漂亮又吸引人,那大概只能推薦 Blocksy 這款佈景主題了!輕量化不嚴重拖慢速度、免費版就有強大功能、一鍵套版快速上線。

現在就跟著這Blocksy教學,輕鬆快速地改變自己網站的樣貌吧~

YouTube影音教學

Blocksy影片教學

什麼是佈景主題?

佈景主題 (Theme) 將決定整個網站的主要視覺,像是背景色、字型、最上面的頁首、選單、最下面頁尾的配置;而從 WordPress.org 的佈景主題目錄中,就有超過萬種佈景主題可以挑選,本教學要介紹的Blocksy主題也涵蓋在其中。

別人那些很漂亮的首頁又怎麼做?

有些佈景主題會提供預設範本,你只要簡單套版,然後把自己的圖片和文字換上去就好;但目前的潮流比較是額外再安裝個頁面編輯器外掛,自己設計個漂亮的頁面出來,像是一小時架站首頁一小時學盲解首頁都是我再獨立做的。

套版有什麼優缺點?

最大的好處會是省時間,你不用再花很多時間思考整個頁面開如何規劃;另一個優點則是樣式不差,對於沒有設計基礎的人來說,我建議可以套版,起碼他們的設計師也是有領錢認真做事的,那些版面配置都有設計過。

但這同時也是缺點,我個人認為最優秀或最適合的佈景主題一定不會是套版,所以強烈建議各位站長跟著下方教學操作並學習看看,未來也可以抽空學習點設計技巧,等有充足靈感與能量的時候就能自行設計囉!

Blocksy

這是一個備受推薦推薦的輕量化 WordPress 佈景主題,所以不用擔心用了它會害網站變很慢,同時免費版給的功能是我目前用過數一數二全面的!

要到這麼多的功能通常都要付費,比方說像帶路姬推的Soledad主題確實好用,就是無免費版一定要付錢。

Blocksy Pro

對的,Blocksy 也是有提供付費版的,而且一個整限制器解放,我有買並且也有做個範例網站給大家參考,可以看看上方首頁,那麼棒的進階選單就是鎖在付費版裡面的!

如何安裝 Blocksy

Blocksy 佈景主題安裝
Blocksy 佈景主題安裝
  1. 在 WordPress 後台的外觀分頁找到佈景主題,點選安裝佈景主題
  2. 右上角輸入 Blocksy 做搜尋。
  3. 找到它後直接點安裝,之後點選啟用。

安裝子佈景主題 (Child-Theme)

子佈景主題是要有極高度客製化時會用到的東西,多數人用不到。但如果你需要的話就是先把這檔案載下來,之後到 WordPress 後台的安裝佈景主題區域,點選上傳佈景主題,把檔案放上去安裝就可以了。

Blocksy Companion

Blocksy Companion 外掛
強烈推薦安裝的 Blocksy Companion 外掛

剛安裝好佈景主題並啟用後馬上就會跳出這提示,我強烈建議安裝,這時免費版才有全面性的功能!

Blocksy 一鍵套版

Blocksy Starter Sites
Blocksy Starter Sites

安裝好 Blocksy Companion 之後,後台會多出一個 Blocksy 區域,裡面可以找到 Blocksy Starter Sites,這裡就是官方準備的範本,找到喜歡的按下 Import,之後全部點下一步就好了(它們推薦的外掛建議先全安裝,未來再思考要不要刪除)。

然後再到首頁下方的自訂器捷徑,把需要的部分調整一下,網站就完成囉!

從零開始全面設計

這個是我強項,同時我也整理了一套流程,讓各位即使沒有基礎,也能按照接下來的步驟點選項操作,把網站變成自己想要的樣子!

一開始會建議先設計好一份選單,並指定為主要選單,到時候可以即時預覽效果。現在我們在 WordPress 後台的外觀區域,點下自訂,準備開始囉~

核心區域

Blocksy 佈景主題教學 - 自訂核心區域
核心區域

一開始請先把這裡完成,而做的項目只有兩個:

  • 網站識別:牽涉到網站的標題,一定要改,如果你之前已經有跟這教學把基本設定做好,大概就只剩下網站圖示的部分。
  • 頁首設定:先改成最新文章,這樣才能預覽 Blocksy 的效果。

一般選項

Blocksy 佈景主題教學 - 自訂一般選項區域
一般選項區域

排版樣式和顏色這兩個優先處理,把主要基底確定,之後就很好做了。

排版樣式

排版樣式決定字體,如果想使用中文字的話可以選擇下面兩個:

  • Noto Sans TC
  • Noso Serif TC

但要記得中文字型很佔容量,所以會拖慢一點網站性能,好處是設定好後不管用什麼裝置看都會是這個字體,很一致;但如果不希望犧牲效能的話,其實可以不要設定,到時候訪客的瀏覽器也會自己選擇要用什麼自己顯示。如果你是使用 Cloudways 主機的話我覺得儘管用沒差,負荷上沒問題,但如果是其他家的主機,就自己考慮一下囉~

中文字的基本字型大小可以設定 17px~19px,下面的部分基本上不用去動。

顏色

Blocksy 佈景主題教學 - 顏色區域
顏色區域

整體顏色調色盤的右邊有個小三角,裡面有 Blocksy 提供的範本調色盤,沒特別想法的話從這裡選就好,效果很不錯,那我圖中是示範配個奶茶色色調出來。整體顏色調色盤好了之後,再去動下方的整體顏色部分。

一般

Blocksy 佈景主題教學 - 自訂一般區域
一般選項的一般

這裡我講比較需要改的部分,其他的各位也可以點進去看看,但通常比較進階所以維持預設就好。

  • 版面配置:決定版型的尺寸,我除了把內容區域間距拉大一點之外,其他不怎麼動。
  • 按鈕:可以點一篇文章進去,最下方留言區域有按鈕可以即時預覽調整狀態。這裡開始有時會有個設計分頁可以點進去做更細節的設定。
  • 導覽標記(麵包屑):不用特別設定,之後會講解哪裡打開。順便說一下導覽標記是 Google 官方指定使用詞彙,這個翻譯有點小狀況,總之各位要記得正確名詞,不然未來學報表可能會看不懂。
  • 表單元件 / 條目內容:也是文章裡面都會有個目標可以即時預覽。
  • 社群媒體帳號:有在使用的就全部填上去,之後會講解哪裡打開。
  • 訪客互動:是比較進階的設定,基礎情況可以略過。
  • 返回頂端:我會開啟,打開後右邊有個小三角,點進去可以做更細節的設定。

內容類型

Blocksy 佈景主題教學 - 自訂內容類型區域
內容類型區域

我通常就主要設計網誌文章單篇文章兩個,下面幾項風格基本上完全照抄,這樣會是比較有效率的方式,整體也有一致性。

網誌文章

這裡影響目前的首頁,其實全預設就很好看了,有需要的話可以額外加開個資訊欄,在側邊顯示你想強調的資訊,當然各位也可以每個選項都點點看,反正玩到卡的時候也就發佈一下再重新整理瀏覽器就好

倒是卡片選項應該要點進去看一下,這代表首頁這些文章要顯示的資訊,可以拖拉去改變位置,也可以把不必要的關閉。

單篇文章

Blocksy 佈景主題教學 - 導覽標記顯示
導覽標記

比較重要的一點是文章標題右邊有個小三角,裡面有導覽標記(麵包屑)可以打開,多數情況會建議打開的,起碼訪客不會迷路。如果對於導覽標記的樣式不滿意的話,可以回到一般選項那裡去做調整。

資訊欄哪裡調整?

在一般選項那裡有個資訊欄區域可以調整版面配置,而如果想要調整內容則是要回到 WordPress 後台 > 外觀 > 小工具區域,主要資訊欄的部分就是囉!

頁首

Blocksy 佈景主題教學 - 自訂頁首區域
頁首區域

頁首這區域剛看到肯定會覺得很複雜,那我覺得分成三個區域,並按照下方解釋會最好理解:

  1. 你可以的功能,同時也是調整細項的位置。
  2. 頁首的控制台,可以把「1」的功能拿到這裡放。放上去後點擊就可以到「1」做詳細調整。
  3. 即時顯示調整效果。

特別要說明的有兩點:第一個是社群連結的帳號跟一般選項那裡是連動的,想改的話需要回去那裡改;第二個是「2」的控制台上,橫線的列也是可以點齒輪進去做設定,可以整列調整高度或者顏色之類,這點大家滿容易忽略的。

把頁首吸附在頂端

在「1」的地方點選頁首 > 整體頁首,有個吸附功能性,打開後就可以選擇哪列要吸在頂端囉!

頁尾

Blocksy 佈景主題教學 - 自訂頁尾區域
頁尾區域

有了頁首的經驗後,頁尾這裡應該就很好處理了,差別主要在於頁尾提供的功能是小工具區域,要調整的話也是建議回到 WordPress 後台 > 外觀 > 小工具 做調整,比較好操作。舉例像台積電官網下方那些頁尾,如果要做的話,就是新增個小工具區域,然後每一行都用個文字並插入連結而已,很簡單的!

回應式網頁設計

回應式網頁設計 (Responsive Web Design),可以簡稱為 RWD,國外也有人稱為響應式網頁設計,是因應現在多數訪客會使用平板或手機瀏覽的潮流而產生的技術,能讓網站在用行動裝置瀏覽的時候呈現不同的版面配置,提升使用者體驗。是 Google 建議採用的設計。

在畫面左側功能區的最下方可以找到 電腦/平板/手機 三個圖示,可以點中間的平板圖示,這時就會顯示平板瀏覽時候的畫面,這時候就可以對這裡的元素做一些修改,像是要不要置中或者要不要顯示之類的。

但基本上頁尾完成後,網站就完成了,這個回應式網頁設計是畫龍點睛的地方而已,沒有做也沒關係的!

Blocksy Pro 頂級付費版

無情推坑斂財時間

現在可以再看看我設計的這個網站,Blocksy Pro 主要厲害的地方就是頁首選單的那個 Mega Menu,並且電腦版多了左上角那個選單,而且也可以自由設定條件,像你隨便點幾篇文章或分類,會發現頁首呈現不同顏色或者整組直接不同。如果看一看覺得你需要這些功能的話,可以點此直連官網價目表購買。年付方案的話就是全年度可使用,到期後付費版功能會被鎖回去,再續約解鎖。而如果希望長期使用,則是可以直接買終身版喔!

如何啟用

在購買後,Blocksy 會把付費版的外掛與啟用序號寄到信箱,這時只要做以下步驟:

  1. 把外掛下載。
  2. 到 WordPress 後台 > 外掛 > 安裝外掛,點選上傳外掛,把它安裝上去並啟用。
  3. 把信箱內的序號複製進去完成驗證。

之後你的網站就可以用到這些酷東西囉!

常見問題

Blocksy 速度如何?

Blocksy 可是公認輕量化的佈景主題,基本上不要特別去亂搞,速度肯定滿意!

Blocksy 與 Soledad 主題的差別?

Soledad 一定要付錢才能使用,Blocksy 則有免費版,所以可以直接先安裝試用,不喜歡就直接刪除,也不用煩惱退費問題,而且我覺得免費版大概就有 Soledad 的快九成功能了。當然 Blocksy 也是有提供功能全解放的 Pro 版本!

Blocksy 可以配合 Elementor 使用嗎?

可以,Blocksy屬於佈景主題 (Theme),僅決定整個網站的大方向,背景色、字型、最上面的頁首、選單、最下面頁尾的配置;而Elementor是頁面編輯器,讓人可以自行設定漂亮的單一頁面使用的。

WordPress 佈景主題是什麼?

佈景主題 (Theme) 設定了網站的整體視覺表現,像是色調、字體、頁首頁尾之類。所以挑個自訂功能全面的佈景主題,更能讓自己的網站與眾不同,吸引大家持續觀看!

WordPress 佈景主題如何安裝?

大多數的佈景主題都可以直接在 WordPress 後台的「外觀>佈景主題>安裝佈景主題」找到並安裝;其餘的通常是開發商放檔案在自己的官網上,而使用者付費購買後再自行把檔案上傳到個人網站。

用不到的佈景主題可以刪掉嗎?

沒問題的!刪掉之後也可以省一些主機空間,點選佈景主題的詳細資料後,就有個刪除的按鈕了。但我個人習慣至少留一個備用。

文章類別
建議文章