Holly

這次的網站修改是從 Solid Post Likes 更新開始的,原本只是很單純地進行更新,就更新的時候手癢點了下外掛的說明頁面,沒想到在下面的說明中,意外發現 Solid Post Likes 原來還可以把按讚資料拿來做統計,並以短代碼來來列出按讚數最多、指定天數內按讚等的文章,甚至還可以設定要顯示幾篇,這個功能讓我覺得可以放在側邊資訊欄位裡,來觀察下按讚的邊數統計。

畢竟 Solid Post Likes 目前並沒有可以直接看到相關統計數據的介面,且按讚統計跟原本網站上的熱門文章本質上是兩回事,熱門文章反映的是純粹的瀏覽人數,而按讚則是讀者主動留下來的喜好,兩邊統計出來的文章不一定會相同,所以兩邊所呈現出來的文章截然不同,算是一種互補,不過 Solid Post Likes 所提供的功能比較簡約,所以要好看就得花點工夫用 CSS 來調整。

雖說 Solid Post Likes 可以把文章圖片、標題與按讚數一起列出來,只是預設的排列方式是圖片在上、文字在下,跟我網站原本熱門文章的排列方式完全不同,好不好看是一回事,至少看起來是非常突兀,盡量改成接近原本熱門文章的呈現方式,至少統一樣式。這部分其實花了不少時間,除了圖片比例、標題位置與間距,還要考慮整個側邊欄的高度,外掛原本可以顯示更多篇文章,考量到排版問題後,純文字的話可以放五篇到六篇,但加上圖片後區塊很快就會變長,最後只能訂下四篇。

fd0ecd85 7fa7 4f8b 9785 2d326368cb47 e1790945622265

Shortcode 要改成五篇其實很簡單,但多一篇圖片文章,整個側邊欄的高度與比例都會跟著改變,甚至可能需要連其他區塊的文章數量與間距一起調整。以目前的版面來看,四篇雖然少了一點,但整體比較俐落,也不會讓側邊欄過長,所以暫時就維持這個數量。

這次在整理 Solid Post Likes 的時候,也讓我想起當初安裝外掛時沒想到的點,當初壓根沒有想過要拿它做什麼統計,那時候單純只是覺得有個不用註冊的按讚工具,多少可以讓我知道這篇有沒有人覺得不錯,所以就裝了,也沒特別期待數字會多好看,這也是當初對於統計分析不感興趣的原因之一。

然這個外掛從 2022 到現在也四年了,這次使用統計之後之後才突然發現,這幾年累積下來的按讚數其實比我想像中多,而且甚至居然有第三篇破百的文章,這真的讓我有點意外,我一直以為只有一篇,且我記得上上個月有翻過一輪的說,四年多的累積有點出乎我的意料之外。

而 Solid Post Likes 維護也比我原本想像中積極,現在除了基本的按讚功能之外,跟最初相比,現在已經有 Like Button Block、最受喜愛文章 Shortcode、近期趨勢統計、後台 Likes 欄位與排序,甚至在後台文張列表中已經可以看到按讚數了,尤其 1.2.0 之後,每一個 Like 都會獨立記錄時間,這些更新都讓這個免費外掛越來越強,這種積極度我覺得開發者真的可以考慮付費版的說。

這次讓我意識到這類互動外掛其實跟 GA4 的流量統計是完全不同的東西。GA4 可以告訴站長哪些文章被看、讀者從哪裡來、使用者怎麼進入網站;按讚數則必須有人主動按下去才會留下資料,重點則在於可以提供另一種讀者反應,若後台可以看到 Likes 數量、排序,甚至直接知道哪些文章累積最多按讚時,就會多出一個不同於瀏覽量的觀察角度。

如果一開始就有察覺它可以提供另一角度的觀察,我當初應該會安裝能提供數據統計的其它類似外掛,只是現在已經過去許久,五年多的資料已經累積下來,也很難再重新開始。也因為這次重新整理,我才真正意識到,這類統計型外掛在安裝前,最好就先想清楚是否會長期使用,資料一旦累積多年,之後要更換外掛就不只是換個工具這麼簡單,之後有時間再來寫一篇相關的文章來分享經驗。

結果按讚區塊處理完,感覺現在腦袋還算清醒,覺得英文網站的頁尾處裡應該不是問題,就決定動手來解決。英文網站頁尾一直是我覺得比較麻煩的地方,免費版外掛沒有辦法進行頁尾中文、英文切換,幸好這部分也可用 Code 來處理,讓頁尾可以依照語系切換,中文網站顯示中文內容,英文網站則顯示英文內容,這部分同樣花了一點時間調整,但還是比我預期的快很多,然其實最麻煩的是「頁尾排版」。

雖然我已經有根據英文網站進行調整,但怎麼調整都覺得很礙眼,其實一開始沒想要安裝電子報訂閱欄位,畢竟中文都要累死我了,還寫英文,但看了很久後還是只能先這樣子,等之後在重新構思要怎麼排版會更貼近英文網站,且不只頁尾要動,還有很多英文版面都要進行調整,文章頁面可能還沒有那麼明顯,畢竟文章本身就是文字內容,中文與英文雖然字數不同,但基本結構還能維持,其它的地方就是怎麼看都覺得哪裡怪怪的。

8ee97b9f eb49 42a3 8501 d97de1191586 e1790945493731

只好回頭去開始去研究歐美網站常用的 WordPress 佈景主題,看看英文網站通常會怎麼處理首頁結構。只是這件事情其實比想像中困難,因為我已經習慣中文網站的排版邏輯,再回頭看歐美網站的設計,很多地方第一眼還是會覺得「怎麼這麼怪」,畢竟中文與英文的閱讀模式、字數長度與視覺比例本來就不同,並不是把中文網站翻成英文之後,再套同一套版型就會自然。

還好在 Astra 的一些示範版型,其中有一個比較符合我目前需求的方向,雖不能直接照搬,需求差太多了,但至少上半部的結構讓我覺得還有參考價值,所以目前英文首頁先暫時朝這個方向調整。至於頁尾,我自己還是不太滿意,目前只能說先做到不會跟上面的中文內容放在一起時顯得太突兀,真正漂亮的版本還需要再慢慢調整。

原本我還想過要不要讓中文網站可以跟英文網站直接切換,但現在還是覺得英文網站還不夠好看,文章數量也不夠多,還蠻陽春的,就暫時先不要切換比較好,等改好然後挑個好日子在完成切換的安裝。

處理完英文網站之後,我又想起一件其實放在心裡很久的事情:GA4 的前台流量顯示。以前我在 WordPress 社團看到有開發者做了類似於匹客邦的前台流量顯示外掛,當時也跟著教學試過一次,但最後還是失敗,一直不知道當初到底是哪裡出錯,明明照著教學一步一步做,卻就是串不起來,但當時沒有很在意,因為我 GA4 流量並沒有很好,沒成功也是件好事。

而現在流量已經有長成了,覺得還是可以嘗試看看,只是這次乾脆直接叫 ChatGPT 把我當 WordPress 小白,一步步帶我從頭開始進行,先檢查主機,後重新確認 GA4、網站端以及相關設定到完成,這次終於成功把 GA4 的資料串起來,而當初會失敗,主要是在串接 GA4 的過程中漏掉了一個步驟,導致後面的設定全部建立在錯誤的基礎上,會成功才奇怪。

串接成功後接下來就是安排數據如何出現在前台上,一般網站如果要顯示流量資訊,傳統作法就是方在側邊資訊欄的最下面的位置,但我的側邊欄本來就已經塞了不少資訊,如果再增加一個完整的流量統計區塊,整個側邊欄會再拉長,這樣子的話,連帶我還要去調整旁邊的文章數量顯示才能達到兩邊平衡,所以最後我沒有採用傳統做法。

我選擇把流量資訊直接拉到自我介紹附近,接著再用 CSS 調整間距與位置,讓流量統計看起來像是自我介紹的一部分,而不是突然多出來的一個獨立區塊。這樣做最大的好處就是省空間,而且視覺上也比較完整,這樣調整完之後,反而覺得這樣比獨立放在側邊欄下面自然很多。

既然已經動到側邊欄,乾脆連頁尾一起整理。原本頁尾目錄清單下面的資訊,這次不知道不知道是動到甚麼語法,導致後來想把它們往上拉都一直失敗,想了想就乾脆把原本的資訊區塊拆掉,改成現在的流量顯示。

這次也順便重新調整了頁尾目錄的數量與間距,把不必要的空間盡量壓縮,再把流量統計往上拉一點,讓整個頁尾看起來比較緊湊,最後再用 CSS 微調上下位置,讓各個項目的底部盡量維持在同一個水平線上,不要出現一邊高、一邊低的感覺,這樣調完之後,反而是目前這個版本讓我覺得蠻舒服的。

aa57bf73 6b46 4661 9eec cc9068bbaa6e e1790945302183

這次其實沒有改什麼驚天動地的大東西,大多都是一些 CSS、Shortcode、頁尾結構與第三方服務串接的小修改,但都是我覺得蠻重要的調整,尤其是 GA4 前台顯示,都是我以前想做很久、卻一直沒有真正完成的功能。網站大概就是這樣,一開始只是調整一個小地方,然後就可能連帶的調整了其它地方,於是從更新一支外掛,變成改了一整天的網站。