54 天的網站改版艱辛挑戰,從 Avada 轉換成 OceanWP,只為讓網站呈現更加流暢、美觀的全新面貌

標題有點誇大,但大體來講還蠻符合的。套句前輩說的,換主題本來就是某種程度的打掉重練,而我的狀況更加重這當中的痛,想當初架站完成只花了 6 天,而網站改版卻得花上 54 天,足足相差了 9 倍。

會發生這種冏事情,首先我對網站版型跟結構不夠了解,少掉 Avada 已經幫忙組好骨架的主題,換成可以自由發揮的 OceanWP ,結局就是不知道如何下手,幸好有先去好想工作室上過基礎前端課程,在切板部分有點概念,之後才辦法邊摸邊動手將套版抽換成我要的樣子;其次,我對區塊編輯器不熟,一開始我對區塊編輯器認識只有傳統編輯器的樣子,首次搬家時文章只有單純置換連結,等熟悉區塊編輯器的排版模式後,文章總算能排成我心目中的樣子後,95 篇全部手動重新排版,排完後人也快掛

總之,因為基礎不牢靠,很多東西就是邊摸邊去社團發問,邊查 Google 邊看Youtube 教學影片,以及每次小聚時跟與會的前輩求救,花了 54 天才總算完成這次主題的更換。雖然過程很痛苦,畢竟白天要上班,只能利用晚上跟休假日來改,導致連續長時間熬夜跟日夜顛倒,讓身體嚴重虛弱,不但連續感冒還短短時間內連續吞了五包大正感冒藥,這可是半年份的量阿,但等完成之後,由衷感謝當初決定更換主題的我。

我將改版期間的遇到的課題很多,畢竟沒有了影片教學,很多要思考與理解,最終我把這些東西濃縮成以下幾點來跟大家分享。

換掉 Avada 的理由

嚴格來講,我並沒有很喜歡 Avada ,做好的網站自己評價也只有 60 分,本來就有計畫將來要換掉 Avada ,碰巧剛好在 WordPress 社團上有前輩拋出 Avada 是個很麻煩主題的貼文

雖然有點驚嚇到,不過本來就有換掉打算,只是趁此機會詢問參與小聚的工程師們相關問題,也看了該則貼文的下面的回應,總結出來就是 Avada 糟不糟要看你是哪一個面向去看,Avada 特色就是所有東西都收納進去於主題之中,你不用額外在去下載甚麼東西來用,以工程師來講這就很肥大,所有東西都包含在主題內,意味著用不到的東西也在裡面,這就會拖累網站速度,但又割捨不掉,工程師他們對速度是很敏感的。

接著就是 Avada 的確是主題森林中賣最好的一個,因此就算外掛只適用於他們家,也有一定比例的基本族群會用,但更多的是很多外掛不相容於 Avada ,當想改善網站甚麼功能,要用的外掛居然不能相容,這件事情本身就讓人不爽了,雖然不是沒有其他解決辦法,只是本來只要一小時能解決的事情,因為 Avada 不相容的關係,要花上半天甚至一天的時間,甚至更久時間,就算不是工程師,光聽到也很令人很崩潰。

同時因為很多外掛都是他們家獨家,不相容於其他家主題,這又導致另一個令人詬病的問題,就是無法更換主題,因為既然只適用 Avada,那麼換成其他主題,一定會發生相衝的問題,如果堅持想換,那就只能打掉重來,講到這,應該會有人覺得很糟糕吧。

但以上是以工程師的角度去看,若是以一般使用者的角度來看,Avada 給的模組都很好看,這點對於初學者來講,絕對是有利的,當你不太清楚要怎麼弄出個好看的網站,Avada是個很不錯的選擇,怎麼弄怎麼好看,拿來當形象官網絕對是綽綽有餘。

如前述有提到,雖然很多外掛 Avada 不一定能用,但是如果你根本不太更新,你也無需太多功能,就只是要介紹些基本資訊、服務項目之類,就很像大部分的企業官網那樣,久久才一則活動訊息更新,其他都萬年不變,那麼使用 Avada 也還可以拉。

拿 Avada 來當部落格使用也不是不行,只是最好是純文字類型,因為 Avada 本身就很肥大,如果是像旅遊、食記、美妝那類型會需要大量圖片的就不適合,以我來講,我一篇文章可以放 20-100 張照片,這種類型明顯就會讓本來就慢的網速變得更慢,就不適合用 Avada 。

說到最後,其實我換掉 Avada 最大理由就是我沒那麼喜歡 Avada 的版面,同時也感覺 Avada 的回應式模組 ( 也就行動裝置 )並沒有很好,倒不是因為 Avada 肥大,其實因為當初是影片手把手教學,沒有影片教學的部分我都不太敢亂動,因此在 Avada 時期,我外掛超少,也沒甚麼機會遇到衝突,經驗上沒有很糟糕的印象。

延伸相關文章推薦

為何選擇 OceanWP

從確定要換主題開始,其實就有在蒐集各式各樣被推薦的主題貼文,想從中找出一個適合自己的,但看來看去,感覺好像都差了一點東西,直到我看到網站攻略站長寫的6 個最快的WordPress佈景主題(2019)」,才想到 Avada一直被詬病的就是速度慢,說實話我有點無感,我對速度忍耐力算蠻強的,但朋友們一直在講,且很多相關資訊也是顯示速度會影響訪客觀看意願,既然我對於主題沒有甚麼偏好,就挑個速度快的吧~

在這篇文章中作者推薦了六個,但我在這中只有挑出 OceanWPAstra 來評估,因為在 Avada 是個麻煩的貼文後續相關文章中,下面回應說後來改用的主題最常出現就是這兩個,其中頻率最高的是 Astra ,同時使用後反應也最好

網站改版前主題挑選的重要參考資料

我最終還是選擇了 OceanWP ,兩者的示範套版樣式對我而言都差不多,各有其喜歡的,只是 OceanWP 的擴充外掛(Extensions),可以依照使用者需求來選擇想要的功能來進行擴充,這點深得我心,像我後來就刪除掉用不到的輪播功能外掛,另外還有就是文章作者有在 OceanWP 推薦原因中寫到 OceanWP 跟 WooCommerce 相容度挺高的,考量到未來可能會用 WooCommerce,加上剛好遇到 OceanWP 有打折,從 39 美金變成 21 美金,就選了它。

撤離痞客邦的最後一哩路

這次改版很重要的事情就是要把還在痞客邦的圖片全數移到 WordPress 之中,以及嘗試把流量導入到新站這裡。

首先圖片部份,使用痞客邦搬家神器- Pixnet 痞客邦部落格搬家匯入工具,這個是專門為要離開痞客邦所研發出的外掛,最重要的特點就是是中文介面跟連圖片都可以搬走,付費版功能甚至可以連同文章標籤一起搬,也可以在版主回覆那邊去設定指定名稱,沒特別講究的話,免費版已經超好用的了。

重點提醒下,這款外掛目前尚不支援客製化網域名稱的版本,也就是不能使用個人網址 ,舉我來當例子,我現在痞克邦的網址是這樣子 http://changlsis.yanshoto.com/blog ,跟我現在新站的網址 https://yanshoto.com/ 很像有沒有,這種就是客製化網域,也就是個人網址,必須是原先痞客邦網址,上頭有痞客邦英文字樣的 https://changlsis.pixnet.net/blog 的網址,搬家外掛才有辦法可以使用。

一般痞客邦搬家教學的 MT 格式備份檔匯出匯入這種模式,是很方便,只是最重要的圖片不會跟著一起走,我一開始就是用這種,結果就是圖片受控於痞客邦,不算完全搬家完畢。本來以為要費盡千辛萬苦才能將圖片搬離,沒想到有了 Pixnet 痞客邦部落格搬家匯入工具這個搬家神器後,按照影片操作就能簡單把圖片搬離痞客邦。

大概半天的時間就全數遷移完畢,只是遇到一個小小的意外,就是我痞客邦的主題跟外掛衝突到,導致雖然有按照教學去做,還是無法搬遷,後來是去詢問開發者後,由開發者協助處理完畢,如果發現明明通過驗證,但在文章匯入工具卻顯示無法通過驗證,可能跟我一樣去遇到相同的問題了,再麻煩直接詢問開發者了。

這邊小小觀念提醒下,使用外掛若遇到問題,先去信詢問開發者,這是最快可以獲得解答跟處理方式喔!!

處理完圖片後,接著是想要將流量導入新站,因為看到有文章教學表示可以做到,也就是使用 301 轉址的方式,可惜的是根據工程師朋友的說法這不可能。301 轉址必須由擁有方去協助,就像如果我們網站要搬家,一定會被提醒要做好 301 轉址,因為我們就是擁有方可以有能力操作, 若是想要進行 301 轉址,就必須由痞客邦那邊協助, 想也知道這是不可能發生的事情,每個部落格可都是痞客邦最大的資產阿。

可能會有其他搬家工作室可以做到 301 轉址,那就是他們專業的部份,一般自學者或對網站網路了解沒那麼深的人還是放棄比較實際。我最後是購買了痞客邦個人網域,再去 Google Search Console 來提交「變更網址」需求,接下來就是交給時間,慢慢的將流量轉到新站這邊了,至於 301 轉址這件事情就直接放棄了 XDD

雖然放棄了 301 轉址,但是還是可以去跟 Search Console 來提交「變更網址」需求 ,最近 Search Console 有新版的變更網址工具,我按照哈部落的教學文總算順利完成轉址了,超感動的說,這樣等個人網域一年時間到期,我就可以直接將痞客邦帳號給刪掉了。

一月初動手設定,六月底痞客邦個人網域到期還沒搬完,網域名稱恢復成痞客邦,我沒有做任何設定變更,等到8月初隨手點過過去看時,已經完成搬遷作業了,不過我還是保留著痞客邦的帳號沒有動,主要是因為想使用痞客邦在搜尋引擎有高權重比的優勢,拉抬下自家網站。

2020 08 26 223656

新世界-區塊編輯器的再認識

OceanWP 搭配頁面編輯器 Elementor 可以做出很多很不錯的頁面組合,但有個讓我很介意的點來了-文章編排的選擇很少,Elementor 在免費版本中,只有格狀顯示跟輪狀顯示

69495841 1300809286758973 7968469269698576384 n

我慣用的條列式顯示沒有,那個在付費版中才有,要我因為這個購買付費版本,雖然不甘心但也沒辦法,本來都預計黑色星期五要買了,後來在一次意外詢問社團前輩下,發現了解決辦法-區塊編輯器跟區塊套件組合。

69838304 1300809310092304 2538877102787133440 n

在此之前,我只知道區塊編輯器是用來編輯文章的,但我不知道原來他也可以編輯頁面,不用全靠頁面編輯器,若有不足之處可以使用區塊套件組合,網站攻略站長所寫的文章「 12 個免費Gutenberg古騰堡外掛推薦」非常詳細,可以參閱,我從文章中下載了前三款區塊套件組合來用

Qubely Blocks 家的功能強大,不管在對齊位置、顏色、文字甚至特效的設定等可以調整的細節很多,更超過的甚至還有模板可以讓人套入,且還是免費的,這麼好的用的外掛當然要載來用阿

Stackable 除了可以達到我想要的條列式顯示文章外, 我最愛的就是 Stackable 家有提供非常多各式各樣的文章顯示模式,網站還有提供線上體驗,雖然這些要付費才有,但價格才 29 美金還是終身的,對於排版控來講這很划算阿~等黑色星期五折扣月看有沒有折扣,有就買,沒有還是會買

Ultimate Addons for Gutenberg 家則是有輪播功能,這個是我首頁想要的功能,Elementor 可以做到,但有個問題, Elementor 無法幫我把圖片統合成一至性大小,之前使用痞客邦時並沒有統一照片大小的習慣,而 Ultimate Addons for Gutenberg 可以做到,這樣版面好看很多,且還可以設定小箭頭指引訪客後面還有文章可以參考,或者是可以自動輪播

以及他們家還有目錄的提供,這樣子就不用裝目錄外掛外,本來是預計要安裝  Easy Table of Contents  這款目錄外掛,只是這款目錄出現位置不太好橋,正想研究如何手動指定目錄位置時,發現 Ultimate Addons for Gutenberg 的目錄不但可調整顏色,自由又輕鬆的出現在自己想要的位置,就果斷放棄  Easy Table of Contents 

其實在使用文章顯示模式時,就默默的懷念起 Avada 提供的多種文章顯示模式,且照片都幫忙統一好了,這是我換主題前沒有想到的困擾,幸好可以用區塊套件組合來解決掉。

目前看起來區塊編輯器是未來使用 WordPress 的趨勢,區塊編輯器的好朋友-區塊套件組合也是會未來各家開發團隊著重的項目,同時也有前輩說官方目標要讓多數使用者習慣區塊編輯器,且使用區塊編輯器去處理頁面,在將來更換主題時需要更動的東西也會比較少。

雖然 Elementor 很好用,就某方面想,萬一想換掉 Elementor,改用其他家頁面編輯器,你的版面會大亂,其痛苦應該是相當於 Avada 不能換主題的痛。

其他版面調整的概念

這邊有很大部分參考幾個很不錯的部落格,可以挑幾個大流量且自己也喜歡的部落格去參考,我就很喜歡-披著虎皮的貓翹鬍子旅行團,他們網頁排版非常精彩,尤其是在介紹自己部份,很少看到那麼棒的介紹。雖然網路有上不少推薦的用 WordPress 製作的網站範例,只是多為形象官網之類的,對於部落格其實沒那麼合用阿。

資訊欄位

很多人很習慣在這側邊資訊欄位放很多資訊,其實效果有限,且認真想放那麼多資訊,是你的話,你在使用時會入眼多少呢 ? 更別說有一些主題在手機模式下資訊欄位是消失的,因此我取消掉原先 FB 欄位,之前放了一年多也沒多增加幾個讚,也不打算放 IG,道理同 FB。然後這邊就主要放置 Google 廣告,這邊也算廣告中的黃金位置的說,放廣告會更實際些。

首頁的資訊欄位不放文章分類,因為這邊已經有個分類最新文章的輪播了,文章分類改放置文章/ Blog 頁面,會來這邊的就是想要看文的,文章詳細分類就對他們有幫助,可以讓他們更快找到合適的主題。

顏色部份

這點是一開始沒想過的,有兩篇文章寫得不錯,「色彩通用設計通用設計—色盲色弱對應方案」, 做網頁設計挑選顏色時可做為參考

特別去找了幾個網站可以去是測試自己的網站是否適合色弱的人觀看,colorblindor 這家可以截圖上去測試在不同層面的色弱者看到的樣子,Colorblind Web Page Filter 這個則是可以將網站丟上去測試,大致上對於色弱的人來講首先是以明度作為對比標準;其次是冷暖色對比,因為他們對於 對明度和飽和度非常敏銳,因此網站顏色對比明亮度高,對於色弱的人會比較友善。

不過我還是覺得超連結藍色有點醜,於是在日本傳統色中挑選了琉璃色,亮度跟顏色飽和度都比原先設定的更高,跟網站顏色也比較匹配,也不會造成色弱者閱讀上的困擾

手機模式

現代人很大部分都是依靠手機在搜尋資訊,因此好的手機閱讀模式,會有助於訪客停留跟觀看,因此在做網頁排版時,記得要按 F12 切換到手機模式去看效果如何,更好的是直接用自己的手機觀看。小聚的工程師有提過,雖然 F12 可以模擬手機模式,但模擬並竟是模擬,直接用手機觀看還是會更準確,雖然不能到專業 APP 開發者那樣市面各個熱門手機都來一隻測試,至少自家手機要看起來順一點啊。

Elementor 在手機瀏覽模式中提供很不錯的幫助,部份在桌機版很不錯的樣式,到手機版後變得有點多餘,就可以使用 Elementor 將其在手機版消除。

斷捨離是為了再快一點

既然一開始目標就設定為「」。

所以那麼網站就要來斷捨離,首先先動手的就是是文章,全部重新排版整理,在刪除文章的過程中,也去想為什麼是這幾篇是要被刪掉,也提醒自己之後這類型的文章也盡量避免掉,特別是像是有時效性的,現在回首看看,連我都不太想看了的說,就這樣子文章一路從 163 篇刪減到 95 篇。

不只是改文章,還有 SEO 外掛的設定、超連結重新檢查跟設定、超連結顏色設定等,這些小小細節累積起來很驚人,網站改版從開始到結束也才 54 天,文章就耗掉我將近 30 天的時間,為了讓訪客讀取速度可以加快些,這邊也採用了分頁模式,某幾篇連我在後台改到心裡都在罵的長文章,適度讓他分成兩頁,以加快讀取速度。

接著就是去認識並熟悉後台每一項外掛,刪除掉有功能重覆到的外掛,或者去重新尋找更合適的外掛,務必做到每個外掛性質不重疊,並規定自己外掛群只能在 30 個以內,現階段是 27 個,每項都有其他必須的作用,目標是在刪減到 24-25 個,外掛群越多不但容易拖累網站速度,也容易導致外掛相互衝突,因此下每個外掛都要很謹慎。

至於圖片部分,就要等  WordCamp Taipei  當中有堂關於圖片的議程,預計活動結束後,再來改善圖片,至於 Google 強力推薦的 AMP 模式,也還在研究中,總之為了更快一點,後面要學習的東西還很多呢

最後的總心得

整個網站改版完成後,最重要也是一開始的重點-速度變快了。遲鈍如我都感受到了,而其他朋友們回報也是如此,而認識的工程師也表示雖然有點慢,不過考量到我網站有大量的圖片,在這個前提下,速度還算可以,這樣子速度這關過了。

其次是文章的排版,之前在痞客邦時,因為痞客邦的文章排版不友善,我一直是用 CSS 語法去指定文章間距,不然 12 字體太小,14 字體會重疊。重新認識區塊編輯器跟區塊套件組合後,字體大小行距這些可以調整不說,之前很在乎的照片跟下一段文字的距離在插入「空白間隔」也可以拉開了,超級開心的說。

整體成果是滿意的,朋友們的評價也比舊版好,自己專業部分-和服着付也趁此機會直接放到網站上,感謝 Elementor 單獨匯入版型的功能,讓我短時間內完成這個原先不在預定範圍內的頁面,這整路的心路歷程就像最近看的武士搬家好吃驚中搬家歌「引っ越し唄」對不同階段搬家所描述的:

引っ越し唄 歌詞

今天是那地獄般的搬家日
今天是那令人困擾的搬家日
今天是那快樂的搬家日
返回頂端