2021 WordPress 部落格網站改版的七個步驟

Last Updated on 17 9 月, 2021 by Blocksy Staff


【 聲明 】這篇文章有聯盟行銷,意即當你透過文章內任何一個連結購買產品,我可以獲得分潤。這些資源全是我親自使用過後的真心推薦,並堅持不放任何我沒有認可的產品,更多細節請點這裡。(Disclosure: This post may contain affiliate links, meaning I get a commission if you decide to make a purchase through my links, at no cost to you. Get more info here.


一直以來,都覺得自己的部落格速度有點慢。把網站丟進 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 上公開分享,而不再是默默寫日記,與三兩好友互動的平台。

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

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

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

[ 2013 – 2021 ] 沒有牆的小房間部落格改版歷史

因此,才會有第二次、第三次、第四次的改版,為的是讓我能一直保持初衷。而這也是為什麼,這次我選擇讓「部落格回歸單純」,把廣告、部分的行銷圖片、看起來很 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 Homepage

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

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

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

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

Test Result from GTmetrix

如果我不要用 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

2 則留言

發佈留言

Youi / 宥逸

一個好奇心旺盛、來自台灣的小小創業家,用設計、影像、文字、心靈訓練、部落格經營來打造自己的網路事業王國。現在,我要把我的所看所學通通教給你!

0 Shares
Share
Tweet
Email
Pin