從 Divi 到 Blocksy,部落格佈景主題更新參考資料全記錄

從 Divi 到 Blocksy,部落格佈景主題更新參考資料全記錄

✉  訂閱《 我很好奇!》電子報:固定於每週二中午寄出,除了獲取我最新的文章外,也會跟大家分享不錯的文章和推薦的 Podcast,讓我們一起成長吧!

⭐ 關注《好奇先生》: Facebook | Instagram


嗨,大家!好久不見 ~

在 8 月到 9 月中這 1 個多月都沒有更新文章,並不是我偷懶了,在這段時間我其實是在更新部落格的佈景主題。

原先部落格的佈景主題是使用 Divi Theme,在這 3 年的時間雖然也架出堪用的網站,但因為網站的載入速度偏慢,再加上看到其他部落格精美的設計,每每看到總是讓人羨慕,所以更換部落格的佈景主題一直在我的待辦清單中。

只是這件事雖然在我的待辦清單中,但我真的不知道怎麼下手,在密集做了一些功課和比較各種佈景主題後,我決定將我的佈景主題改為 Blocksy 了。

至於這篇文章的誕生,是因為在做功課的期間,深感資料過於分散,特別寫了這一篇文章來分享我是參考哪些資料來完成這次的大工程。

前情提要:關於更換佈景主題

你可能會以為更換佈景主題就像換衣服一樣簡單,只要短短的幾分鐘就完成了。

但事情並沒有那麼容易,換了佈景主題後,你可能要重新調整舊有的每一篇文章,可能還要重新設計整個部落格的架構。

這也是為什麼,很多專業的人會說,更換佈景主題比重新架一個網站還要複雜的原因。

好啦!現在你知道更換佈景主題的工程浩大,以下就讓我依步驟介紹吧!

1. 備份網站

更換佈景主題之前,一定要將個人網站先備份。

如果你在更換佈景主題時,不小心發生嚴重的錯誤時,還可以透過先前備份的網站救回來。

我是使用 WPvivid 這款外掛進行個人網站的備份的,關於這個外掛的操作,則是參考網站帶路姬的文章,連結如下:

如何備份個人網站:WordPress 備份還原、搬家、換網址,竟然都只要用同一個外掛!

這款外掛蠻好操作的,只要短短幾個步驟,就幫你備份好網站了。

2. 複製目前的網站

網站備份之後,就可以複製個人網站了!

複製網站最主要的目的是讓你營運中的網站不受到影響,所以在我改版網站的期間,如果你是我的忠實觀眾,你會發現網站都還是可以正常瀏覽。

關於複製網站的操作,我也是參考網站帶路姬的文章,連結如下:

如何複製個人網站:幫 WordPress 網站建立測試環境!複製網站和 Staging 測試網站大解秘

像我網站的主機是在 Cloudways 購買的,所以複製網站超級方便只要按一個按鈕就搞定了。

如果你是其他的主機商,也可以在上面的文章內找到解答。

💡 註:在你繼續看文章之前,這邊想跟你提醒一下,接下來的任何操作,請在你複製的那個網站進行。

3. 停用外掛及清除短代碼(Shortcode)

複製網站後,接下來要做的就是停用你網站使用的外掛及清除短代碼了,停用外掛大家都會操作,所以這個部分就針對清除短代碼說明。

每個主題或頁面編輯器都會有獨特的短代碼,如果更換佈景主題後,這些短代碼就沒有用處了,為了不要讓網站留下沒有用的代碼,你一定要清除短代碼。

關於清除短代碼,可以參考網站帶路姬的這篇文章:

我要清除短代碼:WordPress 備份還原、搬家、換網址,竟然都只要用同一個外掛!

網站帶路姬是利用 Shortcode Cleaner 來清除短代碼的,像我依照說明操作,一下子就把短代碼刪除了,超便利的。

只是要提的是,這個外掛是需要付費的,費用是 21 美金(約新臺幣 600 初頭),不過雖然這款外掛要花錢,但我認為這筆錢花得很值得。

4. 更換至 Blocksy 佈景主題

前面的前置作業都完成後,接下來就要更換佈景主題了。

在這個階段我是參考平凡以上的免費線上課程,課程的連結如下:

免費課程:平凡以上快速精通 WordPress 入門

💡 註:只要註冊就可以免費上這堂課囉!

Blocksy 這個佈景主題主打的是輕量化,所以網站載入速度會快一些。

自從我的網站換到這個主題後,我的網站在 Google 的 PageSpeed Insights 的分數變得超高,所以相當推薦給大家。

另外,這個佈景主題的基本功能都是免費的,如果是剛起步的部落格或是有預算的限制,就很適合使用這個佈景主題。

不過為了支持他們公司,讓這個佈景主題可以繼續經營下去,我之後應該會花錢支持這家公司。

5. 操作 Blocksy 及 Stackable

佈景主題換完之後,接下來就是調整 Blocksy 佈景主題的細節了,對於剛接觸這個佈景主題的新手而言,會有很多眉角不太清楚。

所以在調整 Blocksy 佈景主題的細節,我也是參考平凡以上的線上課程。

免費課程:平凡以上快速精通 WordPress 入門

另外,雖然 WordPress 官方的各種區塊功能就還蠻夠用了,但如果你想要讓你的網站更有設計感,那麼你還可以再使用 Stackable 這個外掛。

Stackable 是一款區塊編輯器外掛,可以做出 WordPress 內建區塊更多的變化,而且免費版內的功能就足夠讓你做出漂亮的網站。(目前我的網站就是使用免費版)

關於 Stackable 基本的操作我也是參考平凡以上的線上課程,裡面很詳細的介紹了。

免費課程:平凡以上快速精通 WordPress 入門

6. 網站上線

當你在複製的網站調整完所有東西後,接下來就要將網站上線了。

關於如何將網站上線,我則是參考網站帶路姬的影片,假如你的主機是使用 Cloudways 的,就可以參考影片,連結如下:

Cloudways 教學:如何把臨時網址換成自己買的網址?

你只要照著影片的步驟操作就可以將複製的網站的臨時網址換成自己買的網址了。

不過這邊提一下,這部影片的網域商是以 Namecheap 為示範,假如你是使用其他家的網域商,還是可以參考這支影片,因為操作的步驟都是一樣的,唯一不同的是不同家網域商的介面不同而已。

總共花費

這次從 Divi 換到 Blocksy 這個佈景主題,只有花到一筆錢而已,也就是清除短代碼的外掛工具,也就是 600 多塊而已。

而且換完之後,還可以省下 Divi 的每年訂閱費,這樣比較下來,我反而還省下了一筆錢,哈!

寫在最後

如果你也是一個自架站的部落客,又不滿意自己網站佈景主題,真心建議你在文章數還很少的時候就更換。

像我在更換時,部落格的文章已經有 110 篇文章了,再加上我以前是用頁面編輯器(我是用 Divi Builder)寫文章,也就是用錯誤的方法寫文章。

為什麼用區塊編輯器寫文章是錯的?【嚴守紀律】為什麼不建議使用 Elementor 或其他第三方頁面編輯器撰寫文章?

所以在這次的佈景主題改版工程期間,真的讓我眼神死,因為我每一篇文章的照片全都不見了,有些排版還跑掉了。

最後,我真的是一篇一篇的調整文章,在調整的過程中有好幾次想打死前幾年的自己的念頭(大家有感受到我的憤怒嗎?

也是這個原因我花了一個多月才將改版工程完成,慶幸的是我的文章還沒到好幾百篇,甚至到上千篇,不然我應該會改到懷疑人生,哈!

好啦!在這篇文章我把我這次改版網站所有的參考資料全都寫在這篇文章內,希望能幫助到想要更換部落格佈景主題的你。

我是好奇先生,我們下篇文章見,Peace!

(Free mockup by unsplash

延伸閱讀

寫作沒靈感?我的 3 個靈感來源,讓我靈感不枯竭

部落格新手必看!我寫文章必用的 7 款軟體不藏私!

Mr. Curiosity
Mr. Curiosity

希望自己保有好奇心而取名為好奇先生。
主要分享讓生活變得更好的生產力軟體、自我成長、閱讀心得及線上課後心得。
期望能透過文字幫助你提升生產力,並推薦好產品來讓你少踩點雷。

文章: 112
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x