Last Updated on 5 5 月, 2022 by Youi Shih

一直以來，都覺得自己的部落格速度有點慢。把網站丟進 GTmetrix 測試時，分數總是落在 50% 上下。大概研究了下，推測是因為現在使用的部落格版型裡涵蓋了太多的功能，加上版型本身語法設計的關係，導致速度變差。

The Issue 版型是我從 2019 年使用到現在的版型，因為它的視覺好看，擁有多種的排版方式與多元的功能，非常吸引當時是新手的我，而我也很推薦給自己的學生使用。 —— 然而，因為速度的關係，今年我決定終止與 The Issue 的緣分，轉而使用 Blocksy。

如果你不想花費太多時間改版，想要尋找新的 WordPress 現成版型，我建議可以使用另一個我也很喜歡、能跟 The Issue 媲美的版型 Overflow。我對 Demo 親自做了速度的測試，分數都可以達到 80% 以上，是很棒的替代方案。

今天我要來分享自己通常都是如何改版的。你可以作為參考，每年對自己的部落格進行維護與優化。

若你想改版自己的網站，卻不知道從何開始，我有提供「部落格線上診療室」的服務。除了幫你評估與分析部落格的狀況，還會給你一份網站報告，讓你能知道如何對症下藥，提升自己的盈利部落格。

為什麼每年都會改版？

撇除自己是個熱愛 CSS 設計的狂熱者，大概就是因為每年對「部落格的定位與期許」都會改變。

經營盈利部落格，新的想法隨時都在蹦出，如果網站的設計跟不上自己的想法，讀者也會難以跟上自己的步調。除此之外，部落格是我盈利收入來源，所以任何資訊都要盡量是最新的版本。

雖然自己有時候真的會懶惰，舊的資訊若不影響到網站整體，就會先暫時擺著。但對於許多關鍵的頁面，像是「首頁、關於或產品官網」等頁面，我想盡量讓讀者知道自己最新的狀態。

這是「建立信任」最直接的管道，過時的內容往往會降低信用度，所以能花多少力氣更新「重要資訊」就盡量做，這就是我每年都會改版的原因。

關於改版，初期真的沒什麼流程可言（遠目喝茶）。但隨著經驗的積累，共做了三次的改版（網站歷史），現在已經大概清楚自己的改版流程，整理了一下，總共有「六個」步驟。

Step 1：決定改版的內容

無論要進行新的實驗專案，或是要做一件事時，第一個要決定的就是「內容」。

問問自己：「針對這次改版，我想改的東西是什麼？」。把你想改的項目，逐步一一列下來。不需要現在就決定細節，但要知道大方向，這樣你才會知道針對每件事情可能會花費多少時間來進行。

因為我知道自己對視覺設計有種強迫症，容易花太多時間在調整細節，所以我在一開始就規定自己「除了增加的產品與服務，其餘只能動版型的設計，盡量不要修改原有內容，除非資訊太過老舊」。

由於這個限制，這次我總共只改了「五個地方」：整體視覺設計簡化、首頁架構、修改關於頁面的網站里程碑記事、新增會員功能、新增產品與服務頁面與表單。

我很慶幸這次在執行前有先做好規劃，讓我只花了「兩週」就完成改版，以前都花了我將近一個月的時間呢。

ps. 如果你沒有自己的網站，可以用我寫的WordPress 教學文章來快速打造屬於你的小房間。

Step 2：制定改版的日期與時間

當你知道要更改的內容有哪些，接下來就要決定「日期與時間」，其中包含「製作時間」與「截止日期」。

想一想，在做特定項目的修改時，你會需要花多少時間？綜合所有要改的東西，時間共是多長？搭配最近的行事曆，你哪一天能完成改版？

第一次架設網站時，因為自己是新手，所以對時間根本沒有概念。因此要進行改版時，當然也會不知道該如何預測時間。如果這就是你，我建議你把自己當作「架站新手」來預估時間。接著，你就能推算「改版完成的日期」。

在安排時間時，建議「不要對自己過度嚴厲或鬆散」，什麼意思呢？

如果你需要 20 天來完成，就嘗試在 18 天完成，留 2 天當作緩衝。然而，若你知道自己 20 天內就可以完成這件事，卻決定給自己 25 天做這件事，你就會拖延自己的進度。

有沒有聽過老奶奶的故事呢？

一個無事在家的老奶奶，可以花整天來完成一封明信片。她「各花了一小時」選擇要寫的明信片、老花眼鏡、找到親戚的地址，再用一個多小時動筆寫信。她想要出門把明信片丟到郵筒，卻又為了「要不要帶傘」而想了二十分鐘。

《 帕金森定律 》一書的作者提出了一個對時間的見解，就是——工作會自動膨脹，佔滿一個人的所有時間（Work expands so as to fill the time available for its completiont.），意即就算給再多的時間，人們總會在「最後一分鐘」才完成。事實上，很多工作「需要完成」的時間，遠比我們想像中的少很多。

Step 3：檢視「部落格的定位與目的」

現在，打開你的空白筆記本或 Evernote。我們要開始來重新檢視自己的「部落格定位」了。

記得 2019 年，我第一次改版部落格，並成為一位正式的部落客。就是那種寫完部落格文章，會大聲的在自己的 Facebook 上公開分享，而不再是默默寫日記，與三兩好友互動的平台。

《一個小房間》這個名字，起源於《你的心是最強大的魔法》，而核心理念始終如一。透過分享「網路賺錢、獨立接案與打造健康身心靈的生活」來協助每一位讀者都能在自身的體內找到屬於他的健心房。

「這個理念還是我所認同的嗎？」每年進行改版時，我都會問自己這個問題，而每年的答案都是肯定的。

但是，網站所散發出的訊息卻未必相同。有時候，部落格裡的文章會變調；有時候，行銷圖片或廣告的份量會蓋過我的聲音；有時候，它變成了「只是賺錢」的工具，我甚至沒有花時間寫新的文章。

因此，才會有第二次、第三次、第四次的改版，為的是讓我能一直保持初衷。而這也是為什麼，這次我選擇讓「部落格回歸單純」，把廣告、部分的行銷圖片、看起來很 fancy 的功能全部拿掉，只安裝最基本的工具。

Content is the king. Keep it simple.

最初，我的重心在寫作，因為我需要找到自己的寫作方向。找到了之後，我開始製作自己的產品，努力行銷。現在，產品與盈利的管道都部署好了，因此我把重心再度擺回「寫作」上。畢竟，對部落格而言，內容才是最重要的心臟。

你呢？你的部落格「想傳達的訊息」及「核心理念」是什麼？在新的部落格版本中，你的部落格的目的為何？

Step 4：檢視「部落格的動向引導」

知道了部落格想傳達的訊息之後，就可以來檢視目前的設計是否符合自己的目標。

想像部落格就是你的家，當讀者從大門進來之後，你想要如何引導他們來認識你的家？

初期經營部落格時，因為沒有自己的產品，也沒有文章，所以網站的目的很單純，就是引導他們去「閱讀你推薦的文章類別」。 你可以透過在網站裡的主要選單（Main Menu）或是側邊小工具欄（Sidebar widget）裡做到這件事。

現在，我有了自己的產品與服務，網站的結構就變得複雜一些了。

除了「選單的設定」要清楚，「首頁」與「關於」頁面裡的引導也相當重要。我喜歡用說故事的方法去引導讀者，讓他們能有流暢的體驗。如果你有自己的產品與服務，也要適時的把他們帶到你的產品入口頁面。

Step 5：檢視「部落格的盈利功能性」

決定好動向的引導之後，接下來就要思考最重要的「部落格的盈利功能性」。

在這邊，你要先知道自己想要如何盈利。無論是透過廣告、聯盟行銷、業配文、販售自己的產品等，都要把它們的「入口連結或按鈕」加入到你的網站中。

經營部落格時，很多人（含我自己）都容易陷入「過度行銷」的狀態，讓整體視覺變得混雜，失去美感也讓讀者的體驗變差。我建議，在加入盈利資訊時要拿捏好平衡，常問自己：「若我是讀者，看到這個頁面是舒服的嗎？」

相信我，如果「內容」是部落格世界裡的國王，那「讀者體驗」就是你要守護好的皇后。

你正在進行部落格網站改版的計畫嗎？如果你不清楚自己要如何優化網站，卻又深深知道自己必須有所改變，我可以幫你評估與分析你的部落格，並給你最直接的優化建議。

Step 6：尋找參考的範例

接下來，就是為「視覺設計」的調整做準備了。

由於我在開頭就制定好自己「要花最少的時間」完成這次的改版，因此設計的部分決定微調就好。最主要的差別，就是在 Sidebar 拿掉部分的圖片，這部分我是參考 Neil Patel 的設計。 —— 我是「橘紅色」與「極簡主義」的狂粉，所以當作我的模範剛剛好。

在進行設計時，尋找「參考的範例」是相當重要的。然而，「參考」與「抄襲」就只是一線之隔。一般在創作時，參考別人是很常見的事，但帶來的負面效應就是 —— 很少人能夠發展出「自己的風格」。

因此，我建議在找到參考的模板之後，你可以思考這些元素，融合設計出屬於你的風格：

• 我喜歡這個部落格的哪些設計？我能怎麼修改成自己的東西？例如：不同的顏色、線條、背景、位置、字級大小、字型風格等。
• 我能把這個設計應用在我的部落格中的哪些地方？例如：我喜歡他的電子報訂閱表單的設計，但我能把它應用在讀者回饋的意見表單裡。
• 我喜歡這個設計，但有些地方不是很喜歡，我該怎麼調整？例如：這個設計的字型不合我的口味，

Step 7：更新版型 / 使用 CSS 來設計視覺

有了改版的方向、參考的模範，在真正開始動手改版以前，還有最後一件事要做。 —— 你要決定是否「沿用版型」還是「使用新的版型」。如果要沿用版型，你就可以直接開始改版。但如果想更換版型，你必須先找到合適的版型。

我在前言說過，這次決定改用 Blocksy 作為我的版型。原因呢？官網是這個說的：

Blocksy 是一個輕量化，以 Gutenberg 編輯器（Wordpress 核心編輯器）為基準而做出來的佈景主題。相容性極高，速度非常快。你可以利用 Blocksy 簡單做出各種不同類型的網站，例如：企業官網、商店、教育網站、餐廳、部落格、作品集、登陸頁面等。Blocksy 也與知名的頁面編輯器如 Elementor、Beaver Builder、Visual Composer、Brizy、Stackable 等合作，延展性高。最後，Blocksy 有提供響應式設計、SEO 優化設定，能幫你提升轉換率。

另一個原因是，最近喜歡的部落客 Chris Lema 也是用這個，而我測了一下他的網站速度，99% … 有夠迷人。

雖然我知道自己無法做到完全不在部落格裡放圖片，但這讓我非常有信心，相信網站速度會提高許多。而改版後也證明我做了對的投資，實測每一頁平均的速度都在 80% – 95% 之間。

如果我不要用 Thrive Architect 的頁面編輯器（以前就買了）轉而使用原生的 Gutenberg 編輯器，並拿掉所有圖片、使用預設網頁字型，我相信網頁速度可以更快。 —— 但沒辦法，用 Thrive Architect 製作網頁的速度很有效率，透過直覺的拖拉設計，現在暫時還無法割愛。

ps. Gutenberg 雖是 WordPress 原生編輯器，但要做一個精美的設計與排版會需要大量用到 CSS 技巧。即使自己已經很熟悉 CSS 還是會很耗時，違背了我這次改版的初衷（快狠準）。

挑選完版型，你就可以開始進行部落格的施工了，記得在做設計時，搭配 CSS 語法能夠讓你做出最客製化的設計，而這也是我在盈利部落格學院裡必教的技巧，非常實用。

盈利部落格學院（Master of Profitable Blogger School）教你如何從零開始經營部落格事業，包含：正確的經營態度、網站基本觀念、架站教學、美學與設計、電子報行銷、聯盟行銷，以及如何製作與販售自己的產品。

此次改版使用的工具與資源

呼，不知道這篇文章可以這麼長。

以上就是我的改版流程教學，喜歡的話歡迎服用，照著操作看看。最後，我來幫你整理一下這次部落格裡用到的所有工具。如果你對我使用的其他工具有興趣，可以左轉至推薦資源查看。

• Blocksy：編輯起來非常順手，網站速度也因此提升，目前很滿意！
• Stackable：針對 Gutenberg 設計的網頁編輯器，能做出快速的網頁，但要客製化設計需要會 CSS。
• Thrive Architect：直覺式拖拉設計，跟知名編輯器 Elementor 一樣強大，但便宜很多。
• WPForms：以往都是用免費的，但因為需要建立更進階的表單，所以購買了 Basic Plan（一年才 US$39，是滿無負擔且 CP 值高的投資）。
• ThriveCart：用了快兩年的「金流處理系統」，因為有這個好用的金流工具，我才可以在部落格裡進行各種盈利收費行為，非常划算的投資。在推薦資源的「創業專區」裡有更詳細的說明。
• ConvertKit：也是從建立部落格開始就使用的「電子報行銷系統」，簡單又直覺，能進行「自動化寄信、登陸頁設計、產品販售系統等功能，使用 Creator 的版本就很夠用。

好啦，這些都是現役的愛用產品清單（除了 Stackable 還要再觀望），希望你也可以從中找到適合你的工具。喜歡這篇文章的話，歡迎分享並存到書籤裡，未來會很實用的！

5.5 hr