WordPressのフルサイト編集対応テーマ「X-T9」と多言語化プラグイン「Bogo」で個人サイトをリニューアルしてみました

VWSアドベントカレンダー参加中！

この記事は「Vektor Web Solutions Advent Calendar 2025」の12月23日の記事になります。前日の川井昌彦さんの「固定ページ本文ブロック」でWordPressを運用しやすくしようの記事に続いて書いてます…3日遅れで公開しました🙇‍♀️
この記事では、無料テーマと無料プラグインをベースにしたサイト多言語化の話を書いておりますが、一部、有料製品の紹介が含まれます（PR）

こんにちは。ベクトルでマーケティングや広報を担当しているコウノです。

あっという間に2025年も終わりが近づいてきましたね。

今年の前半は日本に滞在することが多く、香港拠点に少し戻ったり、マニラで多言語サイト構築について登壇したり、マレーシアやタイを行き来したり、さらには初めてイギリスに滞在する機会もあり、移動の多い上半期を過ごしていました。夏以降は一転して、腰を据えて目の前の課題にじっくり取り組む日々を送っております。

さてそんな中、今回はこの個人サイトをリニューアルしてみました。
テーマにはフルサイト編集（FSE）¹ 対応の「X-T9」、多言語化にはプラグイン「Bogo」を使い、日本語をベースに、英語・中国語の3言語対応にしています。

どちらもWordPressの公式ディレクトリに掲載されている無料テーマ・無料プラグインで、ご自身のWordPressの管理画面から検索してすぐにダウンロード・インストールが可能です。

この記事では、実際にフルサイト編集テーマで多言語サイトを構築してみて感じたことや、個人サイトならではの気づきを、かいつまんでご紹介したいと思います。…と書き始めたのですが、長くなってしまいました。

リニューアルの背景

以前は、程よく使い勝手の良い Lightning Pro ベースの「Katawara」に、6年ほどお世話になっていました。その後、フルサイト編集対応テーマに乗り換えたいなぁ、同時に多言語化もしたいなぁ、などと欲が出つつも、なかなか重い腰を上げられずにいました。

そんな中、先日、ベクトルの開発リーダー・石川さんによるアドベントカレンダーの記事「知ってました？WordPressのブロックテーマって実は多言語サイトにめちゃめちゃ相性がいいんです。」が公開され、「このタイミングだ！」と思い立ちました。
この記事では、フルサイト編集対応テーマ「X-T9」と多言語化プラグイン「Bogo」、そしてX-T9でBogoが使いやすくなる「言語切り替え部分のデザイン調整プラグイン」がどなたでも無料で使えるように公開されています。ありがたい！

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

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

株式会社ベクトル

そして、ベクトルスタッフの佐々木さんが、ひと足さきにブログをX-T9でリニューアルされており、こちらの記事も参考にさせていただきました😊

VK FullSite Installer でインポートしたデモサイトを使って既存サイトを移行してみた | 株式会社ベクトル

アドベントカレンダー参加中！この記事は「Vektor WordPress Solution Advent Calendar 2025」の12月11日の記事になります。今回は、VK FullSite Insta…

株式会社ベクトル

そこから、４日間ほどでサイトの目的の練り直しやコンテンツの加筆をし（ここが一番時間がかかる）、「X-T9」×「Bogo」を導入して（構築の作業時間は実質半日程度）、そこそこ思い通りの日本語・英語・中国語のサイトのベースが出来上がりました。

WordPress本来の仕組みと親和性の高い設計の「Bogo」

多言語化プラグイン Bogo の良さは、ひとことで言えば「WordPress と親和性の高い設計」です。

Bogo は、Contact Form 7 の作者として知られる開発者 Takayuki Miyoshi さんが手がけたプラグインで、WordPress がもともと持っている仕組みをできるだけ素直に使う、という思想で設計されています。

WordPress本来の仕組みをきちんと活かしながら、多言語対応を実現したい人にとって、とても分かりやすいプラグインです。

Bogo

過去に行った登壇では、Bogo をはじめ、WPML や Polylang といった世界でもメジャーな多言語化プラグインについても調査・比較しました。いずれも優れたプラグインで、多くの開発者に支持されています。その際にまとめた資料は、下記にまとまっています。

WordPress多言語化プラグイン比較一覧表

Google スプレッドシート

セッションスライド

「WordPressで始める多言語サイト構築〜どこまでできる？多言語化プラグインまるわかり〜」約27分

用途や規模によって最適な選択肢は変わりますが、今回の私の個人サイトでは「シンプルに、多言語化の仕組みそのものを理解しながら運用したい」という目的に最も合っていたのが Bogo でした。

💡実際に構築した際に気づいた点

Bogo の便利なところ 👍

原文ページから翻訳したい言語を選択してクリックすると、新しい編集ページが生成され、原文のコンテンツも自動的に複製される。 すぐに翻訳文を当てていく作業に入れるため、作業の初動がとても楽。
原文ページと翻訳後ページの紐付けが、同時に行われる。 編集画面の右サイドバーには翻訳後ページへのリンクが表示されるので、原文に変更が入った場合でも、すぐに該当ページへ移動して作業できる。
原文と翻訳後ページの内容や構成を、必ずしも揃える必要がない。 自動翻訳のように原文へ翻訳文を当てはめる形ではないため、言語や文化に合わせて、表現や構成を柔軟に変えられる。
管理画面の投稿・固定ページ一覧を、言語ごとに絞り込んで表示できる。 ページ数が増えてきても、どの言語のコンテンツかを把握しやすい。
「翻訳パック」や「テキストの編集」などの操作が直感的で、迷いが少ない。 設定項目が過剰に多くなく、必要なところに手が届く印象。
独自のデータベーステーブルを追加しない設計のため、余計なデータ領域を生まない。 WordPress 本来の構造を活かした設計で、長く使う前提でも安心感がある。
hreflang を含む多言語向けのHTML出力を自動で補ってくれる ⭐️ SEO面で重要なポイントを、意識せずにカバーできるのは非常に助かる。

⭐️ hreflang が自動で出力される、という点について

Googleなどの検索エンジンが多言語ページの関係性を理解する際、<html lang=”ja”> のような属性だけを見ている、と思っている方も多いかもしれません。

しかし、lang 属性は主にブラウザが表示言語を判断するためのものであり、検索エンジンに対して「どのページが、どの言語・地域向けなのか」を正確に伝えるためには、hreflang を使った決められた形式の記述が必要になります ²。

例えば私のブログですとこちらの記事を日本語・英語・中国語で設置しているのですが、HTMLソース内には以下のような記述が自動で出力されています。

<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" />

上から順に、香港中文、イギリス英語、日本語の記事が、それぞれ対応関係にあることを示しています。
Bogo は、このような hreflang の記述を自動で出力してくれるため、多言語サイトにおいて重要なSEO上の要件を、自然に補ってくれます。

無料でこれだけの機能があり、安心して使えるのが素晴らしいですね。

X-T9（FSE）の便利なところ 👍

管理画面だけで、すべてのテンプレートを編集できる。 テーマファイルを直接触る必要がなく、管理画面上で完結するので環境構築の手間がその分少ない。
あらかじめテンプレートが用意されており、好みの状態からスタートできる。 いきなり白紙から作らなくてよいので、コンテンツを検討しながら、テンプレートを選択できる。また、フルサイト編集の入り口として取り組みやすい。
複数のカラーバリエーションが用意されている。 イメージに近い配色を選んだうえで、少しずつ好みに寄せていけるのが便利。
テンプレートをカスタマイズして表示がおかしくなっても、リセットで初期状態に戻せる。 気軽に試せて、失敗してもやり直せる点は、FSEを触り始める段階では特に心強い。
ブロックごとにスタイルを登録し、呼び出して使える。 例えばブログカードのスタイルを先に用意しておけば、記事作成時に迷わず使える。（もっと自分好みに育てていきたいところです）
ベクトル謹製の「言語切り替え部分のデザイン調整プラグイン」により、Bogo対応の言語スイッチャーをほぼそのままの見た目ですぐ設置できた 🙌 フルサイト編集＋多言語という構成でも、デザイン面で悩まずに済みました。

X-T9のヘッダーナビゲーションの見た目をちょっと調整 ⚙️

ナビゲーションメニューの多言語化については、ベクトルの石川さんの記事で紹介されている方法にならい、

翻訳言語ごとに、ページ名とURLを手動で入力したナビゲーションメニューを作成
VK Dynamic If ブロックを使って、言語ごとにナビゲーションを出し分ける

という流れで設定してみました。

基本的にはこの方法で問題なく動作するのですが、ひとつ気になった点がありました。それは、基本言語の日本語から、他の言語へ切り替えた場合、ヘッダーメニューで「今いるページ」を示す下線表示が出なくなってしまったことです。

これは、①の手順で他の言語のナビゲーションメニューを「カスタムリンク（URL手動入力）」として設定しているため、リンク先ページが current ページかどうかを WordPress 側で判定できず、.current や .current-menu-item といったクラスが付与されなくなることが原因のようでした。結果として、現在閲覧しているページを示す下線スタイルが効かなくなってしまいます。

そこで私のケースでは、current クラスに頼らず表示を制御するため、下記のような CSS を「追加 CSS」に記述して調整しました。

追記場所：外観＞エディター＞スタイル＞ ︙（タテ3点メニュー）＞追加 CSS

/* --------------------------------------------------
 * ナビゲーションの current クラスが付かない場合の対応
 * body タグに自動付与される .post-name-スラッグ名 を利用して、
 * 表示中ページに対応するメニュー項目に下線を表示する
 * -------------------------------------------------- */

/* About ページ表示中：/about/ へのリンクに下線を表示 */
.post-name-about .wp-block-navigation-item a[href*="/about/"]::after {
    width: 100% !important;
}

/* Works ページ表示中：/works/ へのリンクに下線を表示 */
.post-name-works .wp-block-navigation-item a[href*="/works/"]::after {
    width: 100% !important;
}

ここでは、body タグに自動で付与される .post-name-スラッグ名 を条件にスタイルを指定しています。
ナビゲーション側では current 判定ができなくても、表示中のページ自体は WordPress が把握しているため、このクラスを利用しました。
これで、このサイトでは日本語だけでなく、英語・中国語に切り替えても、About と Works のページで、ヘッダーメニューに下線が表示されるようになりました。
（他にもよりスマートな実装方法があれば、ぜひ教えていただけると嬉しいです。）

言語ごとの表示や翻訳調整の一例 🎨

業務の範囲を示すカード表示

Works ページの「業務の範囲」を紹介するカード表示では、言語ごとにそのまま直訳するのではなく、見た目や読みやすさも含めて、表示内容を少しずつ調整しています。

中国語（繁体字）版では、基本的なレイアウトや構成は日本語版を踏襲しつつ、香港向けの表現として、英語タイトルを併記しています。文言自体も、直訳というよりは「業務内容が自然に伝わること」を優先し、漢字量や行のバランスを見ながら調整しました。

英語版では、他の言語と同じ情報量をそのまま載せると、どうしても文字数が多くなり、カード内が窮屈に見えてしまいます。そのため、

フォントサイズをやや小さくする（アルファベットは日本語よりフォントを小さくしても視認性あり）
白いカード内の余白（パディング）を１段階大きくする
「Product photography / Asset creation」のように、要素を分けて整理する

といった形で、情報の整理と視認性を優先した調整を行っています。

このように、同じ「業務内容」を伝える場合でも、

言語ごとの文字量
読み手の想定
レイアウトとの相性

を踏まえながら、翻訳＋UIの調整をセットで考えるようにしました。

多言語対応では、テキストを置き換えるだけでなく、「その言語で見たときにどう見えるか」まで含めて調整することが大切 ³ となります。今回のケースでは、Bogo とブロック編集を使うことで、そうした調整も問題なく進めることができました。

例えば、原文の構造を前提として翻訳を当てる設計のプラグインでは、言語ごとに表現を分ける自由度が低く、結果として追加 CSS を言語別に用意して対応する、といったケースも考えられます。

翻訳ページにおける免責について

プライバシーポリシーの日本語版の文末には記載していませんが、英語版および中国語版では、免責のために下記のような文言を追記しています。

いずれも、「このページは日本語原文の英語／中国語訳であり、内容に相違がある場合は日本語版が優先される」旨を示したものです。

This page is an English translation of the original Japanese text.
In case of any differences, the Japanese version takes precedence.

本頁為日文原文之中文翻譯版本。
如有任何內容差異，概以日文版本為準。

このような一文を添えておくことで、翻訳による意訳や解釈の違いから生じる誤解を避けやすくなり、発信側としてのリスクも軽減できます。

今後もう少し検証したい点

固定ページで、HOMEのページのみ、翻訳後ページの編集画面から「ページをプレビュー」すると、いったん翻訳元（日本語）が表示されるため、言語を切り替えて確認する必要があった。慣れるまでは「今どの言語を見ているか」を意識する必要がありそう。
翻訳元コンテンツに VK Blocks のアイコンブロックなどで < > を使った Font Awesome 指定がある場合、複製時の安全処理により表示が一時崩れることがあった。該当箇所を手動でコピペし直せば問題なく修正できる。
X-T9 のテンプレートは、初期状態のまま使っている場合は翻訳が反映されるが、編集を加えると「カテゴリー」「タグクラウド」などの文言が日本語のまま残るケースがあった。設定や構成による可能性もあり、こちらはもう少し検証が必要。
このページのようにさまざまなブロックを設置したボリュームのあるページから翻訳ページを生成すると、編集が反映されないことがある。（どれか一つのブロックにだけ問題があるのかも知れない）

ブロックテーマの「最初の一歩」にちょうどいい X-T9 と、仕上がりを後押ししてくれるパターンライブラリ（PR）

X-T9 を使って、ようやく個人サイトのリニューアルに着手できました。

実際に触ってみると、フルサイト編集は想像していた以上に楽しく、「慣れれば確かに速くなる」と実感しています。手作業でテンプレートを書いていた頃と比べると、最初はUIの考え方に少し慣れが必要かもしれませんが、そこを越えてしまえば一気に楽になる印象です。

これから WordPress を学ぶ人にとっても、「WordPress がどういう仕組みで動いているのか」を体感的に理解するきっかけとして、フルサイト編集テーマはぜひ一度触ってみてほしいなと思います。

そして、考えることが山ほどあるサイト制作において、心強い味方になってくれるのが、コピペしてすぐ編集できるパターンの活用です。

今回は、「VKパターンライブラリ」から、X-T9 向けに用意されたパターンを活用しながら、レイアウトや表現のアイデアを借りつつ、すぐにコンテンツ制作へ取りかかることができました。

PC表示でないと分かりにくいですが、トップページだけ雰囲気がぐっと違うのはこちらのパターンを活用しています ⬇️

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

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

VK パターンライブラリ

また、こちらのパターンは、「業務の領域」ページで活用しています ⬇️

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

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