Holly

比原本預計的時間更早把 Xwrite 主題更新了。其實我上一次付費更新是在今年 3 月,原本是打算等到年底再更新就好,不過 WordPress 更新到 7.1 版本後,這次改動的幅度比我原先預期的大很多,雖然網站前台目前沒有受到什麼影響,但後台已經有部分區塊開始出現不太正常的狀況,再繼續拖下去,很可能之後連編輯都會變得麻煩,想了一陣子,最後還是決定提早把主題更新掉。

螢幕擷取畫面 2026 09 21 212346 e1789997183985

結果這一更新,就順便花了一整個下午整理網站版面。原先表格一直也有線條出現,我都把顏色去掉了,怎麼還是消不掉,這困擾我很許久,想說已經付費更新了,就直接去詢問開發團隊是哪邊衝突到了,但在發問之前突然想到,以我對他們設計團隊的了解,如果真的是原生區塊出現這麼明顯的版面問題,應該早就會修正了才對。於是我先回頭打開官方的原始模板,拿該區塊的設定跟我的進行對照。

這才發現不是主題出問題,而是我自己一開始就搞錯了設定邏輯,表格的線條,如果不希望它在畫面上出現,不是要把線條顏色直接拿掉,而是要讓它和背景使用相同的顏色,在視覺上自然消失,理解這件事之後,就重新把相關區塊調整了一遍,特別是和服配件專區那邊,那邊算是受災最嚴重之處。

在重新調整外框、拿掉不需要的表格線,再把內部距離盡量抓得平均,額外再追加最外框的線條,讓其跟背景色有色差,這樣子視覺上閱讀會比較輕鬆一點。這一段其實比單純調整表格還累,因為使用的顏色彼此很接近,要靠非常細微的色差和留白做出層次,盯久了眼睛真的很吃力。

剛好這次主題更新之後,之前困擾我的英文顯示問題也已經解決,所以順手把過去為了修正它而另外加入的 CSS 刪掉,同時把文章中因為加入額外外掛功能而導致的「留白過多」進行了微調,同時跟以往不同的是,以前調整 CSS 時,常常先以電腦版看起來順眼為主,但同樣的負間距套到手機之後,有些地方就會靠得太近。

這次因此把電腦和手機的數值分開設定,調完一個地方就重新確認手機版,也順便考慮手機端的顯示,希望盡可能在不同尺寸之間抓到平衡,如果真的沒有辦法共用同一套版面,再考慮另外做手機版的配置。

另一個這次改動比較大的地方,是網站整體寬度。最早曾經設成 1320px,後來覺得實在太寬,又縮成 1280px。這次重新檢查文章在電腦上的閱讀感受之後,還是覺得電腦版正文橫向拉得太開,長篇文章讀起來並不是很舒服,掙扎了一陣子,最後決定直接回到官方預設的 1200px。

寬度從 1280px 縮到 1200px 之後,文章在電腦上的閱讀寬度確實正常很多,但也連帶影響其他區塊,因此又得重新微調。正文原本使用 19px 字體,放到新的寬度之後會讓不少地方需要跟著大改;改成 18px,我自己看了又覺得稍微小了一點,最後折衷調成 18.5px,目前看起來算是我比較能接受的大小。

首頁也趁這次重新整理了一輪。當初剛換新版首頁時,我還不太熟悉 Xwrite 對區塊間距的控制方式,所以有不少地方當時只是覺得「好像還差一點」,卻沒有繼續處理,畢竟過往經驗就是很難處理,然還好 Xwrite 本身可以調整區塊本身的間距,拉大距離之外,甚至可以使用負值,,就把這些地方重新拉近或拉開。加上網站寬度從 1280px 改成 1200px,原本設計好的比例也會跟著改變,因此又重新確認了一次各區塊之間的距離,讓以前那些「看起來只差一點點」變的不在只差一點點了

首頁下方的區塊也重新整理了一些,之前一直覺得手機版看起來不太理想,實際反覆測試之後,發現有些配置還是按照官方模板原本的比例會比較自然,因此也重新調整排列方式;另外,原本使用的圖示尺寸偏大,看起來甚至有一點像圖片解析度不足,所以這次也把圖示縮小,縮小之後反而乾淨很多。

284351be 793b 4b45 ad60 a0a0915bac6b e1790000088170

這次會想提早把主題更新,還有一個原因,就是網站現在累積的文章真的越來越多了。以前文章數量還不多時,在文章底下一篇一篇放相關文章連結還沒有什麼問題,但現在同一類內容動不動就已經十幾篇,如果全部列出來,不只維護很麻煩,文章底部也會變得非常長,版面也很不好看。

所以這次也把很久以前 GPT 曾經建議過我的做法真正拿來用了。現在的方式是先利用 Tag 把同一分類下面的文章再細分,再讓文章底部的入口直接連到對應的 Tag 彙整頁,像和菓子文章,我就可以再分成東京、京都與其他地區,之後新增文章時,只要把 Tag 設定好,就不需要回頭到每一篇舊文章裡,一個一個增加相關文章連結。

一開始也想過直接使用按鈕,但如果要做得漂亮,很容易變成依賴主題自己的按鈕區塊,考量到未來萬一再次更換 WordPress 主題,我還是希望盡可能使用原生區塊,這樣比較安全,最後參考 Xwrite 官方模板裡的設計,把它們稍微改成現在的樣子。

b5445094 cfa5 4cc5 bc89 ddfb99c325ae e1790004164608

目前看起來有點像大型的分類按鈕,但又保留圖片和文字資訊,視覺上比直接列出十幾篇相關文章乾淨很多,然後每個入口都加入貓爪 icon,方便讓讀者比較容易理解這是一個可以點進去的連結。這也是為什麼這次主題真的不能再拖著不更新,WordPress 7.1 改動之後,舊版主題和新版編輯器之間已經開始有一些功能已經無法串接起來了,不更新不行了。

待這些全部處理完之後,我自己其實還蠻滿意的,只是這種版面調整真的非常耗時間,很多地方不是亂版,而是這裡差一點、那裡又差一點,可能只是幾個 px 的距離、字體差 0.5px,或某個區塊在電腦看起來剛好,到了手機又太擠,然就是這些看起來好像沒什麼的小地方,一個一個加起來之後,才會決定整個網站看起來舒不舒服。

這一路改下來,必須說我還好我自己會弄,不然這種工作如果真的交給工作室,肯定又是一筆費用,而且很多只差一點點,這溝通成本應該很大,要是交給工程師,我大概就是奧客中的奧客,且還要花很多時間來回溝通,像現在這樣子自己動手調整,就很適合我。

且這次也比上一次進步了一點,不再只顧著電腦版,而是每一個比較明顯的修改都重新確認手機端,盡量兼顧電腦、平板與手機的閱讀效果。花了一整個下午,把原本只是「提早更新一下主題」,一路做到網站寬度、字體、CSS、表格、首頁間距、手機版配置、圖示,以及文章底部的相關內容入口全部重新整理了一遍。

整個過程很累,但現在看著調整完的版面,至少自己是滿意的,希望網站就這樣一點一點修下去,文章越來越多的同時,版面也能跟著越來越成熟,讓不管用電腦還是手機進來看文章的人,都可以讀得舒服一點。