使用支援全站編輯（FSE）嘅 WordPress 主題「X-T9」同多語言外掛「Bogo」翻新個人網站

本文係由日文原文經 AI 協助翻譯而成。（この記事は日本語でも読めます）

你好，我係 Chiaki，目前喺 Vektor, Inc. Japan 負責市場推廣同公關工作。

轉眼之間，2025 年 都就快去到尾聲，真係令人感到時間過得好快！

今年上半年幾乎都喺移動之中度過——主要留喺日本，其間短暫返過香港據點、喺馬尼拉分享多語言網站建構嘅經驗，又來回馬來西亞同泰國，仲第一次有機會喺英國生活一段時間。可以話係一個「到處走」嘅上半年。

不過自從入夏之後，節奏就慢慢穩定落嚟，開始專注處理眼前嘅課題，同一步一步深入去做。

喺呢個背景之下，我決定 重新整理呢個個人網站。

主題方面，我選用咗支援 全站編輯（Full Site Editing／FSE）¹ 嘅 WordPress 主題 「X-T9」；多語言功能就使用咗外掛 「Bogo」。

目前網站以 日文 為主語言，同時提供 英文 同 繁體中文 三個語言版本。

X-T9 同 Bogo 都係 免費，而且已收錄喺 WordPress 官方目錄，可以直接喺後台搜尋、下載同安裝，非常方便。

喺呢篇文章入面，我會簡單分享一下，實際用全站編輯主題（FSE）來建立多語言網站時嘅一些心得，同埋作為個人網站營運者先會留意到嘅幾個觀察。

……原本係打算「簡單寫下」，但結果就變成咗一篇有少少長嘅文章 😅

翻新嘅背景

之前大約有六年時間，我一直使用以 Lightning Pro 為基礎、兼顧彈性同易用性嘅主題「Katawara」。慢慢地，開始有啲想法浮現——例如想轉用支援全站編輯（FSE）嘅主題，同時亦希望趁機將網站做成多語言。

不過，雖然一直有呢啲念頭，實際上卻總係一拖再拖，始終未真正開始動手。

直到最近，Vektor 開發負責人 Ishikawa 先生發表咗一篇 Advent Calendar 文章〈Did You Know? WordPress Block Themes Are Actually a Perfect Match for Multilingual Sites〉，我即刻心諗：「就係而家喇！」

喺嗰篇文章入面，介紹咗支援全站編輯嘅主題 「X-T9」、多語言外掛 「Bogo」，以及一個可以令 Bogo 喺 X-T9 入面用得更順手嘅設計調整外掛——而且全部都 免費開放畀任何人使用。真係非常感激。

知ってました？WordPressのブロックテーマって実は多言語サイトにめちゃめちゃ相性がいいんです。 | 株式会社ベクトル

VWSアドベントカレンダー参加中！この記事は「Vektor Web Solutions Advent Calendar 2025」の12月17日の記事になります。前回の松田さんの「VK Ful…

株式会社ベクトル

另外，Vektor 嘅同事 Sasaki 女士已經率先用 X-T9 翻新咗佢嘅博客，而下面呢篇文章亦成為咗我非常有用嘅參考 😊

之後，我大約用咗四日時間重新整理網站嘅定位同目的，同時補充內容（呢一部分其實係最花時間嘅）。完成呢啲準備之後，我就導入咗 「X-T9」×「Bogo」 ——實際嘅建構作業大約只花咗半日左右，最後就完成咗一個以日文、英文同繁體中文為對應語言、整體效果同原本構想相當接近嘅網站基礎。

「Bogo」：與 WordPress 原生架構高度契合嘅設計

多語言外掛 Bogo 嘅最大優點，可以用一句說話總結：設計上同 WordPress 本身高度契合。

Bogo 由 Takayuki Miyoshi 先生開發，而佢同時亦係知名外掛 Contact Form 7 嘅作者。呢個外掛背後嘅設計理念好清晰——盡量直接運用 WordPress 原本已有嘅機制，而唔係引入複雜或者專屬嘅系統。

對於希望喺 尊重 WordPress 原有運作方式嘅前提下實現多語言功能嘅使用者嚟講，Bogo 係一款非常容易理解、亦好容易上手嘅外掛。

喺以往嘅登壇分享入面，我亦曾經就多款全球常用嘅多語言外掛作過調查同比較，包括 Bogo、WPML 同 Polylang。呢幾款都係非常出色嘅外掛，亦得到世界各地開發者嘅廣泛支持。

當時整理好嘅相關資料，可以喺下面嘅連結中查閱（日文）。

雖然最合適嘅選擇會因應使用目的同網站規模而有所不同，但就今次呢個個人網站而言，Bogo 最符合我嘅目標——用一個簡單嘅方式管理多語言網站，同時清楚理解多語言機制喺 WordPress 入面係點樣運作。

正正因為呢種重視簡潔同透明度嘅設計取向，最終令我揀選咗 Bogo 作為今次項目嘅解決方案。

💡實際建構過程中嘅觀察

Bogo 好用嘅地方 👍

• 由原文頁面揀選目標語言後，系統會自動建立一個新嘅編輯頁面，並同時複製原有內容。可以即刻開始替換翻譯文字，初期設定非常快同順暢。
• 原文頁面同翻譯頁面嘅關聯會同時建立。喺編輯畫面右側欄位，可以直接見到翻譯頁面嘅連結，即使原文有修改，都可以快速切換過去處理。
• 原文頁面同翻譯頁面嘅內容同結構，唔需要完全一致。因為唔係機械翻譯式「覆蓋原文」嘅流程，可以因應語言同文化，自由調整表達方式同結構。
• 喺管理後台入面，可以按語言篩選文章同固定頁面。就算頁面數量增加，都依然容易分辨每個內容屬於邊一種語言。
• 好似「翻譯套件」管理或者文字編輯呢類操作都好直觀，幾乎唔需要摸索。設定項目唔會過多，操作重點亦好集中。
• 外掛設計上唔會新增獨立嘅資料庫表，避免產生多餘嘅資料負擔。充分利用 WordPress 原生結構，對長期使用嚟講有一種安心感。
• 包括 hreflang 在內、適合多語言網站嘅 HTML 輸出都會自動處理 ⭐️。重要嘅 SEO 要點可以喺唔需要額外設定嘅情況下自然涵蓋，呢點非常加分。

<link rel="alternate" href="https://chiakikouno.com/zh/wordcamp-asia-2025-speaker/" hreflang="zh-HK" />
<link rel="alternate" href="https://chiakikouno.com/en/wordcamp-asia-2025-speaker/" hreflang="en-GB" />
<link rel="alternate" href="https://chiakikouno.com/wordcamp-asia-2025-speaker/" hreflang="ja" />

能夠免費提供如此完整嘅功能，並且具備可靠性，確實令人佩服。

X-T9 (FSE) 好用嘅地方 👍

• 所有範本都可以直接喺後台編輯。 唔需要手動修改主題檔案，所有操作都可以喺 WordPress 管理介面完成，大大減少環境設定同準備嘅成本。
• 預設已準備好多個範本，可以由一個穩定嘅起點開始。 唔使由白紙開始，而係可以一邊思考內容，一邊揀選合適嘅範本，令 X-T9 成為一個好容易入門嘅全站編輯（FSE）起點。
• 內建多款配色方案。 可以先揀一個接近理想風格嘅配色，再逐步微調到符合自己喜好，過程相當方便。
• 就算自訂範本時出現問題，都可以重設回初始狀態。 即使調整過程中令版面出現錯誤，都可以輕鬆還原。可以放心試、錯咗又可以重來，對初次接觸 FSE 嚟講特別安心。
• 可以按區塊註冊同重用樣式。 例如預先設定好一個「博客卡片」樣式之後，寫文章時就可以毫不猶豫咁直接套用。（之後都希望可以慢慢再調校到更貼近自己風格。）
• 多得 Vektor 提供嘅 語言切換設計調整外掛，幾乎可以原封不動咁加入支援 Bogo 嘅語言切換器 🙌 即使係「全站編輯＋多語言」呢種組合，喺設計層面上都唔需要煩惱太多。

Fine-tuning the Header Navigation in X-T9 ⚙️

關於多語言嘅導覽選單設定，我係跟隨 Vektor 嘅 Ishikawa 先生文章入面介紹嘅做法：

• 為每一種語言建立對應嘅導覽選單，並手動輸入翻譯後頁面嘅 頁面名稱同 URL
• 使用 VK Dynamic If 區塊，按目前使用中嘅語言切換顯示唔同嘅導覽選單

整體嚟講，呢個做法運作得相當順暢，並冇出現咩大問題。不過，有一個細節引起咗我嘅注意。

當由預設語言（日文）切換到其他語言時，頁首導覽入面用嚟表示「目前所在頁面」嘅 底線提示 會消失。

出現呢個情況嘅原因，似乎係因為喺步驟（1）入面，其他語言嘅導覽選單係以 自訂連結（手動輸入 URL） 嘅方式建立。

因此，WordPress 無法判斷某個連結係咪指向「目前瀏覽中嘅頁面」，結果就唔會再加上.current 或.current-menu-item 呢類 class。

結果就係，用嚟表示「目前頁面」嘅 底線樣式 亦因此失效。

喺我嘅情況入面，我冇再依賴 current class，而係透過喺 Additional CSS 加入以下 CSS，來調整顯示邏輯。

加入位置：

/* --------------------------------------------------
 * Fallback when navigation items do not receive
 * a "current" class
 * Use the automatically added body class
 * .post-name-{slug} to underline the active menu item
 * -------------------------------------------------- */

/* When viewing the About page: underline the /about/ link */
.post-name-about .wp-block-navigation-item a[href*="/about/"]::after {
    width: 100% !important;
}

/* When viewing the Works page: underline the /works/ link */
.post-name-works .wp-block-navigation-item a[href*="/works/"]::after {
    width: 100% !important;
}

呢度係以 <body> 標籤上自動加入嘅 .post-name-{slug} 作為判斷條件來套用樣式。

即使導覽選單本身無法判斷「目前頁面」，WordPress 本身仍然知道而家顯示緊邊一頁，所以可以穩定咁利用呢個 class。

透過呢個調整，頁首導覽選單而家喺 About 同 Works 頁面上，都可以正確顯示底線——而且唔只係日文，就算切換到 英文 同 繁體中文 都同樣適用。

（如果有更簡潔或者更優雅嘅實作方式，歡迎隨時分享，我都好想學習一下。）

按語言調整顯示與翻譯嘅一個例子 🎨

用卡片版面呈現「業務範圍（Areas of Work）」

喺 Works 頁面入面，用嚟介紹「業務範圍」嘅卡片版面，並唔係對每種語言作逐字直譯。
相反，我會因應 視覺平衡同可讀性，為唔同語言作出少量顯示調整。

繁體中文（香港）版本

繁體中文版本大致沿用日文版嘅基本版面同結構，不過考慮到香港讀者嘅閱讀習慣，會同時併列顯示英文標題。

用字方面亦唔拘泥於直譯，而係以「業務內容能否自然傳達」作為優先考量，並根據中文字數同換行節奏作出微調，令卡片保持易讀。

英文版本

至於英文版本，如果完全照搬其他語言嘅資訊量，往往會因為字數較多，令卡片內部顯得擠迫。

因此，我作出咗以下調整：

呢啲調整重點放喺清晰度同視覺平衡，而唔係追求完全一致。

正如呢個例子所示，即使係傳達同一個「業務範圍」，都值得同時考慮：

• 各語言所需嘅文字量
• 讀者嘅背景同閱讀預期
• 內容同版面之間嘅配合程度

多語言網站嘅處理，並唔只係「替換文字」咁簡單，而係要一併思考內容喺每種語言下睇落去嘅感覺³.

喺今次嘅案例入面，配合 Bogo 同 區塊編輯，令呢類調整可以順利完成，而唔會造成太大負擔。

相反，如果使用嘅外掛係以「翻譯內容必須完全沿用原文結構」作前提，靈活度就會受到限制，最後往往只好透過 語言別 CSS 來補救，而唔係直接從內容層面去調整。

翻譯頁面免責聲明

日文版嘅《私隱政策》並未加入翻譯免責聲明。

不過，為咗讓內容更清楚明確，英文版同繁體中文版 另外加入咗一段說明。

呢段說明主要指出：本頁內容為日文原文之翻譯版本，如出現任何內容差異，概以日文版本為準。

英文版本

繁體中文版本

加入簡短免責聲明，有助減少翻譯差異帶來嘅誤解，亦可降低發佈風險。

有幾個之後想再深入檢證嘅地方

• 喺 固定頁面 入面，如果由翻譯後頁面嘅編輯畫面去「預覽」首頁（Home），一開始會先顯示翻譯來源嘅 日文頁面，之後需要再手動切換語言先可以確認翻譯版本。未習慣之前，可能要特別留意自己而家睇緊係 邊一種語言。
• 如果翻譯來源內容包含以 < > 指定嘅 Font Awesome 圖示（例如透過 VK Blocks 嘅圖示區塊加入），喺複製時因為安全處理（sanitisation），顯示有時會暫時出現錯亂。不過只要將相關部分 手動重新複製貼上，就可以正常修正。
• 使用 X-T9 範本 時，如果係維持初始狀態，翻譯一般都可以正常反映；但一旦對範本作出編輯，有時會出現例如 「Categories」、「Tag Cloud」 等文字仍然保留為日文嘅情況。呢個問題可能同設定或結構有關，仍需要再進一步確認。
• 像呢一頁咁，包含多種區塊、內容較多嘅頁面，如果直接由原文產生翻譯頁面，有時會出現 編輯內容未能完全套用 嘅情況。亦有可能只係某一個特定區塊引起，但呢點同樣需要再測試。

X-T9：適合作為入門嘅區塊主題，加上助你完成網站嘅模式庫（PR）

透過使用 X-T9，我終於正式開始咗今次嘅個人網站翻新。

實際動手之後，發現 全站編輯（Full Site Editing） 比我原先想像中更有趣，而且真係會有一種「愈用愈快」嘅感覺。相比以前手動撰寫範本嘅方式，初期確實需要少少時間去適應介面同思考方式，但一旦跨過呢個階段，整個流程就會輕鬆好多。

對於啱啱開始學習 WordPress 嘅人，我都會好推薦至少試一次全站編輯主題。呢個過程好有助於以更直觀嘅方式，理解 WordPress 背後實際係點樣運作。

而喺網站製作過程中——往往需要同時思考好多事情——其中一個特別可靠嘅好幫手，就係 可以即時複製、貼上同編輯嘅模式（Patterns）。

今次我就利用咗 VK Pattern Library 入面，專為 X-T9 準備嘅模式，一邊參考版面同表現方式嘅想法，一邊可以即刻投入內容製作，而唔會卡喺設計階段。

如果唔係用電腦版（PC）瀏覽，可能未必太容易察覺，不過首頁明顯唔同嘅整體感覺，其實正正就係來自下面呢個模式 ⬇️

ポートフォリオ_トップページ | VK パターンライブラリ

コピペで使える WordPress のブロックパターンライブラリ「ポートフォリオ_トップページ」のパターンです。

VK パターンライブラリ

另外，我亦喺「業務範圍（Areas of Work）」頁面亦有用到另一個模式，下面可以睇到 ⬇️

保育園・幼稚園_年間行事とギャラリー | VK パターンライブラリ

コピペで使える WordPress のブロックパターンライブラリ「保育園・幼稚園 _年間行事とギャラリー」のパターンです。

VK パターンライブラリ

VK Pattern Library 收錄咗 超過 400 款可直接使用、支援「X-T9」嘅模式，只要訂閱 Vektor Passport 年度方案 就可以無限制使用（服務內容僅提供日文介面）。

呢類工具往往都係用過一次之後，就會忍唔住諗：
「之後再冇模式，真係唔知點樣砌網站……」

如果你覺得有興趣，真係好值得花少少時間了解一下。

今次嘅翻新其實只係 啱啱踏出第一步，不過多得全站編輯（FSE），成個過程入面不斷會出現「呢度好似可以再調整一下」、「下次想試下改善嗰部分」嘅想法，令我好期待可以慢慢將個網站一路培養落去。

之後如果有新進展，我亦會再同大家分享 😊

多謝你一路讀到最後！

VWS Advent Calendar 2025 下一篇、安排喺 12 月 24 日（平安夜） 嘅文章，將會由 Tawashisoft 先生帶來一篇 非常有趣 嘅內容——真係好值得期待！

有朝一日，我都希望可以成為一位又好玩又有啟發性嘅前輩——有少少似 「師父（Master Shifu）」 😊

＜図々しくも、アドベントカレンダー参加中！＞本記事は「Vektor Web Solution Advent Calendar 2025」の12月24日(水) …

tawashisoftのブログ