WordPressでの英語サイト・多言語サイトの作り方を
自分用の備忘録も兼ねて書き留めておきます。
今回の要件
今回は、メインの日本語に加えて英語のみがあればよいそうで
翻訳はお客様がご自身でしてくれるとのことで、自動翻訳も不要だそう。
英語や中国語など、外国語のみのサイト(日本語がない)を作った経験はありましたが、
外国語と日本語をスイッチできる多言語サイトを作るのは、今回が初めてです。
![](https://carat.mondbrand.net/wp-content/uploads/2019/11/ea44c3d3605c390332ba9a99114ac8c5_s.jpg)
なんか難しそうだなぁ…と思いつつ、重い腰を上げて調べてみましたら
意外とそんなに難しくなく設置できるようでした。
プラグインさまさまですね…
Bogo
使用予定だったのが、Bogoという有名なプラグイン。
作者さんがCF7(Cnotact Form 7)と同じらしく
見覚えのある風の絵柄に安心感がありますね。
PHPのバージョンが古いと
インストールできない
しかし、こちらの「Bogo」を使おうと思ったところ、
お客様先のPHPバージョンが古く、インストールができない模様。
(使えない以前、インストール自体ができない)
お客様先のドメインはテストサイト用ではありましたが
他にも管理しているサイトがたくさんあるであろうため
そう簡単にこのためだけにPHPバージョンを最新にしてくれとは頼みにくい。
また、仮にテストドメインのPHPを適合するバージョンに上げていただけたとしても、
もしかすると、本番サイトとして設置するお客様先のサイトのPHPバージョンもまた合わないかもしれない。
と思うと、今の環境で使える別の似たプラグインはないかなと探して見ました。
Polylang
見つけたのが、Polylangというプラグイン。
名前がそのままでわかりやすいですね。
今回はこちらを使ってみることにしました。
軽量・シンプルが決め手
選んだ理由は、
- 無料(有料版Polylang PROもあり)
- 軽量でシンプル
- 他のプラグインや機能と干渉しにくそう
- (今回は使用しないが)英語以外の多言語にも対応可能で、拡張性が高そう
- 使い方がBogoと似ていそう
という感じで、Bogo同じような感じで使えそうなイメージを持ちました。
今回はそこまで複雑な機能やプラグインをゴリゴリに実装しているサイトではありませんでしたが
やはり、予期せぬ不具合は避けたいところ。
プラグインは機能の高さよりも、他の機能を邪魔しないシンプルさを重視したい派です。
Polylangをインストールしてセットアップした
こちらは、先ほどBogoでダメだったPHPバージョンでもインストールができるようでしたので
早速インストールしてセットアップしてみました。
セットアップも簡単でした。
使用言語を選択
セットアップ画面の最初で、何語を使うかを聞かれます。
![](https://carat.mondbrand.net/wp-content/uploads/2023/11/スクリーンショット-2023-11-16-12.48.33-610x427.png)
注意点は、この時点で日本語も選択することをお忘れなく。
わたしは英語だけ選択したら、デフォルトで作っていた投稿記事や固定が英語という設定になってしまい
設定を戻すのに手間がかかりました;
自分たちで翻訳するのであれば、2つ目のはスキップでOK。
3つ目の項目は、デフォルトの言語を選択します。
日本なら日本語ですね。
英語記事の投稿方法
投稿の方法は、WordPressの管理画面上で
日本語で既に作成済みのページ横の「+」ボタンから、英語のページを新規作成します。
![](https://carat.mondbrand.net/wp-content/uploads/2023/11/スクリーンショット-2023-11-16-13.30.20-640x398.png)
上記の画像だと、日本語ページ(デフォルトの言語)は作成済みで
英語ページはまだ作成していないので、「+」を押すと、対応する英語版ページを作成できます。
あとは、英語で記事を投稿するのみ。
こんな感じでできました!
まぁ、本文を英語にしただけなのですが、海外サイト感がありますね!
(メニューやウイジェットなど細々したところは設定していないです)
![](https://carat.mondbrand.net/wp-content/uploads/2023/11/スクリーンショット-2023-11-16-13.13.23-640x328.png)
記事を翻訳する必要こそありますが、
新しい記事を1記事投稿する感覚で、英語ページが作れます。
こんなに簡単なのですね…!
管理画面での言語確認
ちなみに、管理画面上の記事一覧では、
鉛筆マークのついている記事は、対応する言語の記事を作成済み、
プラスマークのついている記事は、未作成という感じの見方です。
![](https://carat.mondbrand.net/wp-content/uploads/2023/11/スクリーンショット-2023-11-16-13.26.23-640x220.png)
上の画像では、
1つ目の「About Sample Office(英語)」と、「サンプル事務所概要(日本語)」が紐づいています。
(位置が離れているのは、日付順にソートされているため)
同じスラッグは設定できない
ちなみに、スラッグは同じものが指定できない模様。
英語配下は「ドメイン/en/スラッグ(パーマリンク設定で決めた階層など)」
になりますが、例えばaboutを設定しようとすると、about-2となってしまいます。
階層が違うのだから、同じスラッグを設定できてほしいところですが
日本語ページと英語ページがちゃんと紐づいてくれているので
スイッチボタンを押すと、英語版/日本語版が切り替わってくれます。
記事以外の細かい設定
ちなみに、カテゴリにも英語版の設定ができます。
(というか、日本語のカテゴリがそのまま適用されないようで、
Uncategorizedというカテゴリが新しくできていました)
作成方法は同じで、日本語のカテゴリから紐づくように、新規作成しましょう。
![](https://carat.mondbrand.net/wp-content/uploads/2023/11/スクリーンショット-2023-11-16-13.46.21-640x196.png)
日本語:「セミナー」と英語:「Seminar」を作成してみました。
カテゴリごとに条件分岐やスタイルを分けたりしていたとしたら、
そちらの対応も必要になるかもしれません。
カスタム投稿、カスタムタクソノミーにも適用可能
カスタム投稿やタクソノミーにも多言語設定を適用可能です。
どこまで対応させるかは、設定で選べます。
トラブル対応:一覧に記事が出ない
ところが、カスタム投稿の多言語を適用したところ
一覧に記事が表示されなくなってしまいました。
(多言語の適用を戻すと再表示される)
記事に言語が割り当てられていなかった
色々調べてみましたが原因がわからず、しばらくつまづいていたのですが
原因は至極単純で、
Polylangをインストールする以前に作成した記事の言語が、
日本語・英語のいずれにも割り当てられていなかったためでした。
(先に述べたとおり、最初の設定時にデフォルト言語設定を間違えたためと思われます;)
管理画面の記事一覧で、国旗のマークがついていない記事は
言語が割り当てられていない記事ですので、記事情報を編集して設定してあげましょう〜
設定方法は、個別に記事を編集する画面からでも設定できますし
デフォルト言語を設定済みであれば、「クイック編集」を押して「更新」するだけで割り当てられます。
もちろん、間違えた場合は割り当て直すこともできます。
言語スイッチャーの設置
日本語⇔英語(などの外国語)を切り替えるためには
<ul><?php pll_the_languages(); ?></ul>
を設置します。
言語の数だけ<li>が出力され
現在選択中の言語には<li class=”current-lang”>
がつきます。
サイドバーやフッターに設置する場合は、
管理画面の外観→ウィジェットの項目からも設置できますよ。
まとめ:
プラグインを使ったサイトの多言語化
意外と簡単だった!
以上、プラグインひとつでサイトを多言語化できる
Polylangをご紹介しました。
多言語サイトって、別の言語のサブドメインを作って…とか
もっと作るのが難しいイメージでしたが、
こんなに直感的に作れるなんて驚きました。
コード部分なんてほとんど改変していないですし。
テンプレート部分に書いてある日本語表記を英語に訳したり、少し条件分岐を増やしたくらいです。
(「もっと見る」を「MORE」にしたり)
![](https://carat.mondbrand.net/wp-content/uploads/2019/11/bmw-1393421_640.jpg)
今の時代なら、本文の機械翻訳も難しくはありませんし
サイトのグローバル化も夢ではありません。
英語に苦手意識のある方や、多言語化は難しいという先入観のある方は
ぜひ、プラグインで試してみてはいかがでしょうか。