Last Updated on 31 8 月, 2023 by Youi Shih
【 聲明 】這篇文章有聯盟行銷,當你透過文章內特定的連結購買產品,我可以獲得分潤。這些資源全是我親自使用過後的真心推薦,更多細節請點這裡。(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 上公開分享,而不再是默默寫日記,與三兩好友互動的平台。
《一個小房間》這個名字,起源於《你的心是最強大的魔法》,而核心理念始終如一。透過分享「網路賺錢、獨立接案與打造健康身心靈的生活」來協助每一位讀者都能在自身的體內找到屬於他的健心房。
「這個理念還是我所認同的嗎?」每年進行改版時,我都會問自己這個問題,而每年的答案都是肯定的。
但是,網站所散發出的訊息卻未必相同。有時候,部落格裡的文章會變調;有時候,行銷圖片或廣告的份量會蓋過我的聲音;有時候,它變成了「只是賺錢」的工具,我甚至沒有花時間寫新的文章。
因此,才會有第二次、第三次、第四次的改版,為的是讓我能一直保持初衷。而這也是為什麼,這次我選擇讓「部落格回歸單純」,把廣告、部分的行銷圖片、看起來很 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
這版本跟上次的差異好大,變漂亮許多
我還在努力學習中 o(^▽^)o
謝謝顥哥的肯定~!
網站視覺就是多玩 玩得越多就會越來越能把想像中的畫面實際做出來的 🙂
加油 I will be root for you!