近日疏於撰文只因忙為網誌《講。鏟。片》轉換新貌,現在總算階段性完成,將過程紀錄以供日後翻閱,有相同需要的朋友也可作參考。

延伸閱讀:一樣的內容,不同的外觀

轉換佈景主題原因

好端端為何要轉變?一動不如不靜很多人都有這種想法。但自 WordPress 進入 5.0 以後,舊式佈景主題 ( WordPress Theme ) 可能有安全漏洞,而且《講。鏟。片》舊佈景主題並非採用響應式網頁設計 ( Responsive Web Design, RWD ) 而是靠外掛 ( Plugin ) WPtouch 達致手機版頁面效果,技術經已過時,再加上作為讀者我一向覺得字體偏小,是時候換新裝。此外經已式微的新浪微博和存取用戶太多資料的 Facebook 留言框不知何時也失修,留下醜醜空洞,回歸基本步與他們中斷連結,保障讀者私隱是更換佈景主題的次要原因。

揀選新佈景主題

選擇佈景主題往往最坑人,雖然主事人 Ryan 說甚麼都想試沒有所謂,我還是按照這幾大原則去揀選:

免費 V.S. 付費主題 - 付費客戶當然可以選擇貴森森佈景主題,就算出包也有多一層保障/推卸責任(大誤!),然而免費主題更是我心頭好。俗又大碗固然好,最重要付費主題很多時候都加入一些不切實際/不常用得到功能,那些對於電子商貿網站來說很好的區塊在網誌式網站完全用不著,設定功能過多更顯前台後台肥大有機會增加客戶誤觸出錯機會。我不是說每個付費主題都會這樣,以往見過鬼怕黑,今次只需要簡單網誌功能就決定採用免費主題,測試到滿意才換上去。

免費主題注意事項 - 外型合眼緣為首要,其他細節可以再想辦法處理。例如新主題預設主題圖片 ( Header Image ) 部份非常肥大,佔據大半屏幕並不為 Ryan 和我所喜,不過修改 functions.php 後可以縮小,另外還有一些問題詢問作者也得到解答,最後堅定了使用免費主題的心意。事實上選擇免費或付費佈景主題,縱使它在 WordPress.org 評價有多高,有幾多人下載都好,如果作者不回覆討論區使用者問題,再按照需求時常作出更新,有幾高人氣都不要使用,這一點對免費主題尤其重要。當然詢問前一定要自己做足功課,查找解決方法再去詢問,不要浪費這些無私貢獻優質佈景主題作者的資源。

不需要特色圖片 ( Feature Image )  也精美 - 電影海報或劇沒有太多格式規範,夾硬要做成特色圖片有難度,所以放棄那些必須要提供特色圖片才顯得美觀的佈景主題。

活用測試網站

作為一個受歡迎香港電影網站絕對不容使用現有數據惡搞,所以我使用 Google Cloud Platform 免費資源弄了一個 WordPress 網站進行測試,放置一些樣版文筆觀察版型變化。貼文章之前要在控制台>設定 > 閱讀 > 搜尋引擎可見度選擇「阻擋搜尋引擎索引這個網站」,以免測試站被 Google 收錄做成混亂。你也可以使用那些 WordPress 測試網站進行測試,只是不要把真正數據放進去就好了。

延伸閱讀:DemosWP – 免費快速建立 WordPress 測試網站,提供 SSL、phpMyAdmin 與 SFTP 功能

更改佈景主題

子主題 - 要修改主題一定要使用子主題 ( Child Theme ),WordPress.org 指引都是很簡單的英文,建議看一遍,因為到 2019 年仍然看到中文教學說弄 Child Theme 用 @import url(*../[theme style/styles.css);,官方早已說方法過氣,有能力還是看原文比較保險。

Google Fonts - 很多 WordPress 教學網站都說使用思源黑體多麼美好,可惜用盡方法,連線到 Google 速度總是相當慢。我建議使用 CAOS for Webfonts | Host Google Fonts Locally 這個外掛直接將所需字型放進自己伺服器,和網站內容同步顯示結果會無敵快。在設定當中選擇 Optimize Webfonts,輸入所需字款(例如 Noto San TC 就是思源黑體)下載到伺服器內,再產生 css 檔,之後再按存在於主題中的需求修改代碼即可。

Footer - 作者容許的話修改成為自己的版權宣告,否則不要 hack 人家設計。有些設計師預設人家改 footer 就會讓整個網站 GG。

Media Queries - 要達致 RWD 要使用 Media Queries,原本這一塊不用沾手,但客戶要求在桌機模式不顯示 Top Navigation bar,採用 Sidebar 作導覽,但又不能令它在手機中消失。這樣不是一個 display:none 就可以完全解決,只好自習一下 Media Queries 再修改 css 檔。

全方位測試 - 桌機狀態要好看,手機狀態也不容忽視,雖則有模擬器,還是到九龍塘某大商場測試實際版面,在 Apple Store 一次過試好試滿,專業公司都應該有自己測試機就不用如我這般業餘。還要留意在社群媒體分享時 og:image 即是預覽縮圖能否正確顯示,這牽涉名為 Open Graph 的設定。要讓 WordPress 文章 Open Graph 正確無誤,有賴佈景主題 functions.php 或 header.php 內裡程式是否完備,不完備或不懂得修改現時 SEO 外掛例如 Yoast SEO、All in One SEO 或 Rank Math 都有相關設定幫助處理。想與 Facebook 作緊密整合更可以製作自己的 Facebook App 看看數據搞搞留言板之類。這次要擺脫 Facebook 私隱問題就不多處理這部份。

延伸閱讀:如何設定 Open Graph, Twitter Card 管理網頁分享到 Facebook, Google, Twitter… 的內容[WP] WordPress – 設定你的 Open Graph (og:image)

SSL 重拾正軌

《講。鏟。片》網站原本採用 Really Simple SSL 方式運作,在上一篇 WordPress 舊網站轉 SSL,由佔用主機資源到完全搞定經已說明會把網站拖得爆慢,要擺脫就要將網站內所有內容例如圖片連結轉為 https://。原本我打算使用 Search Regex 外掛處理,可是它跑得很慢而且數據不能出來,畢竟三年都沒有更新。後來找到德國人製作 Search & Replace 終於將全部要改的東西找出來。驚嚇是如果要將內容由 http://你的網站.com 改為 https://你的網站.com,會出現警告說讓網站停擺,於是我乖乖地去找 MySQL 語法。

有網站會叫你將所有圖片由 http:// 改為 https://,自己的網站可以這樣,但不肯定客戶網站會否有外連圖片,如此做法會將整個網站弄爛,所以我採用 http://你的網站.com 改為 https://你的網站.com 這種做法,數以萬筆內容在 PHPMyAdmin 一兩分鐘就完事。做任何修改一定要先備份、備份、備份(講三次!)否則有甚麼閃失恨錯難返。之後拆除 Really Simple SSL 再修改 .htaccess 做好 301 Redirect 即成。

延伸閱讀:WORDPRESS PLUGIN SEARCH & REPLACE – 搜尋取代外掛程式[WP外掛]如何批次修改MySQL中的資料

外掛整理及內容修復

有些外掛是舊佈景主題必須,也有些安裝後一直都沒用過的外掛決定不再使用而又不刪除都會帶來安全風險,故此下一步要清除這些以後都不需要再使用的東西。基於以往網站技術所限,貼 Youtube 影片需要使用名為 yframe IFRAME Embed For YouTube 和 FBVideo for WordPress 之類外掛,產生出一堆無用 shortcode 例如 [yframe= 和 [fbvideo=。作為一個經已有十二年歷史介紹港產片的網站,甚至有使用 Shockwave Flash,embed code 出現 macromedia.com 的影片。其實我大可以用搜尋/取代方式處理,可是有鑑於年代久遠, 片源散失,最後我人手處理這堆東西,而內裡確實有不少片段經已失聯,尤其是 Youtube 大概從 2016 年中轉換為 https://,古舊片源掉得很兇。

與此同時,我亦發現有一些外連圖片,幸好沒有跟隨上面談及錯誤做法。我採用搜尋 <img src=”http:// 方法,把他們盡量換掉。假如仍然不肯定甚麼原因導致網站沒有鎖頭,可以使用 Chrome 瀏覽器 Plugin HTTPS Mixed Content Locator 幫助找出答案。

雖然修復花了不少時間(從今天開始你可以叫我「網誌保育員」無誤),卻不及另一事情驚嚇:我刪除許多名稱相同外掛後,發現外掛清單中竟然有未激活的 WordPress Researcher,這是一個知名後門程式!我立即按照指示使用 Sucuri Security 外掛檢查,幸好問題不大,可能入侵者只安裝那堆外掛為他工作,刪除了就沒事。然後我又發現有一個名為 Ban user By IP 的外掛,雖然看上去還好,原作者網站竟然經已被駭變成賭博網(驚!)所以要不時查看外掛狀態,久未更新就要淘汰。

一面整理舊外掛直至剩下舊佈景主題所需就可以套用新佈景主題,進行小工具 ( Widget ) 調整後新網站正式運作。等待一段時間後沒有發現問題就可以和千瘡百孔絕不安全的舊佈景主題說再見。

其他調整

整埋 FTP 檔案 - 登入 FTP 內裡有舊外掛製造出來 .TMP 檔案,幾十 MB 相當可怕,還有在後台刪不掉的外掛檔案和翻譯檔,全部講再見。

刪除多餘 wp_options 和 wp_postmeta - 舊佈景主題將字體大小和其他內容寫入數據庫,這些都要清掉。

添加 Favico - 據說有網站圖示 SEO 會比較好。

添加 Google 自訂搜尋引擎 - 現成搜尋很爛又不想安裝外掛,用 Google 吧。

更多改善工程 - 實在不敢相信網站使用這麼多年都沒有弄 XML Sitemap 及 Google Analytics,只靠 Google 自然爬蟲生存,唯一可視網站數據就是採用 Jetpack 再加上 Jetpack Lite 只使用統計資料部份,可能舊網站設計公司愛特別玩法?由於現時網站儲存還未用滿,尚可以觀察多一段時間整理才禁止多餘縮圖,反而比較著緊去找一些掃描錯誤連結的外掛再看看有沒有甚麼可以整理,畢竟數以萬筆資訊並非人力可及。加強網站保護、設定快取和 CDN 會後一步再作深度處理。

延伸閱讀:[WordPress] 加速網站!禁止主題或外掛產生多餘縮圖格式

以上就是替網站轉換 WordPress 佈景主題心得,有些內容特別加入英文對照詞語以便從搜尋器進來的朋友可以按圖索骥。假如有一些值得保育的內容,也歡迎聯絡網誌保育員本人看看有甚麼可以幫助你的。誠言沒有一種做法是「終極最佳做法」,起碼寫出來可以和有興趣的朋友交流心得,有其他想法也不妨留言給我切磋一番。