プラグインPolylangを使って、ホームページ多言語化 その1:インストールして使ってみる

Photo by Ken Treloar on Unsplash

ホームページの多言語化についてはいろいろなプラグインを試してきました。ボタンをクリックすれば自動的に翻訳してくれるというようなプラグインではなく、本格的に多言語のコンテンツを作ってホームページを公開したいというような場合に使うプラグインでは「これ!」という決定版を見つけきれずにいました。昨年末頃にPolylangというプラグインを見つけて試したところ、これはいいんじゃないか?と思いました。
本格的に多言語化のホームページにするにはそれなりに手数がかかりそうなので複数回に分けて考察したいと思います。まずはインストールしてざっくりとした使い勝手について書いてみます。

Polylangを使うとどのようなことができるか?

日本語のホームページがすでにあったときに、英語や他の言語でも情報を提供したいというときにとても簡単な方法としては、

前回「JetpackプラグインのGoogle翻訳ウィジェットを使ってWebサイトを翻訳できるようにする」という記事を書きました。よく使う...
Webサイトの多言語化について、相談されることも多いのですが今時点で「これが絶対におすすめ!」というものにまだ出会っていません。いくつか...

のように「日本語のホームページのコンテンツをボタンをクリックすれば他の言語に自動翻訳してくれる」というプラグインを使った方法があります。

この方法は単にプラグインを入れておくだけで、とてもたくさんの言語に自動翻訳してくれるのでとっても便利です。

けれども「ホームページはそもそも検索されてその結果から見てもらっている」ということを考えると、日本語だけのホームページは他の言語での検索では引っかからないのではないでかと思われます。

2020年に東京でオリンピックが開かれることになっていますが、それに向けて外国の方に商売やサービスを売っていきたいというような場合は「日本語と○○語(と○○語と○○語と○○語…)」のコンテンツをホームページに表示しておいた方がよい、と思われます。

そういった場合に使うプラグインがPolylangです。多言語化したい複数の言語を登録しておき、基本言語(大概の場合は日本語)のコンテンツから他の言語のコンテンツを追加していくことで、コンテンツを多言語化していきます。

Polylangで日英ページを作って表示した例

Polylangを使って日本語と英語のページを作って表示してみました。

Lightningサンプルデータを使わせていただいています。

このページのウィジェットでアメリカの旗をクリックすると、

同じページの英語版が表示されます。英語版はそれぞれ個別に設定していく必要があります。

Polylangの導入

私はまだ公開ページではPolylangを使っていません。何が起こるか、何をしないとちゃんと表示できるのかがわかっていませんのでローカルのPCにて確認中です。

インストールする

ダッシュボード プラグイン>新規追加 をクリック

Polylang と入力すると

このプラグインが見つかりますので、今すぐインストールをクリック

有効化をクリック。これでインストールが終了です。

使う言語を登録する

インストールが終わるとダッシュボードに 言語 というメニューが追加されています。

言語>言語をクリック

このように、言語を追加する画面になります。日本語と英語を追加したいと思います。

言語を選択から 日本語-ja を選びます。他の項目は選ぶと自動的に入っていました。

言語を追加をクリック。

英語も

このようにして追加しました。

一覧にEnglish、日本語が表示されています。★がついている言語がデフォルトの言語ということだと思われます。

このページの上の方に、

言語が設定されていない投稿、ページ、カテゴリー、またはタグがあります。という表示がありますのでその行のこれらすべてをデフォルトの言語に設定できます。をクリックします。

するとこのメッセージが消えます(それだけ)。これだけで処理は終わっているようです。

日本語のコンテンツに英語のページを追加する方法

日本語のコンテンツに英語のページを追加する方法です。先ほどの「よくあるご質問」ページは固定ページでした。

ダッシュボード 固定ページ>一覧 から よくある質問 の下にある編集をクリック

すると、

編集画面の右側に言語というボックスが追加されています。このコンテンツ自体は先ほどこれらすべてをデフォルトの言語に設定できます。をクリックしたことで日本語となっています。このコンテンツの英語版を作るには、翻訳の国旗の右にあるをクリックします。

新規固定ページを追加の画面になり、言語はEnglishになっています。ここで英語のコンテンツを入力して

公開をクリック。これでよくある質問というコンテンツが先ほど見たように、日本語と英語に対応できるようになりました。

言語の切り替えウィジェットを追加する

言語の切り替えを行うウィジェット言語スイッチャー

を追加します。

ダッシュボード 外観>ウィジェットをクリック

言語スイッチャーを選んで、表示したいウィジェットエリアをクリックしてからウィジェットを追加をクリック

ウィジェットのオプションを好みで選択して(私の場合は国旗を表示するにしました)保存をクリックします。変更しない場合はそのままでも表示されています。

Polylangを導入した時点での注意点

Polylangを導入した時点で、

「今まで表示されていたメニューが出なくなった」
「英語ページはちょっとしか作らなかったが、英語ページを表示してからトップページに戻れなくなった」

というようなことがありました。

今まで表示されていたメニューが出なくなった

メニューに関しては再度 外観>メニュー をクリックすると、今までのメインメニューのメニュー設定

このように Header Navigation 日本語(テーマはLightning) と Header Navigation English のようにメニューが追加した言語別になっていました。英語のメニューも追加する必要があるようですが、とりあえず今まで表示していた日本語のメニューを表示させるために、この状態でメニューを保存をクリック。これでメニューが表示されるようになりました。

英語ページを1ページしか作らなかったが、英語ページを表示してからトップページに戻れなくなった

英語ページは1ページしか作らなかったが、英語ページを表示してからトップページに戻れなくなりました。

このページで表示されている HOME をクリックすると

このようにURLの最後に /en/ とついたページを表示しようとして Not Found になってしまいました。
これについては検索をして

多言語化プラグインの「Polylang」は素敵だけど注意点 | 滋賀県からホームページ制作・作成!ウェブフォーアート | 滋賀県-草津市

というページに

「esc_url( home_url( ‘/’ ) ).’……」をつかっていると「https://webforart.net/en/」と修正されるので画像URLとかリンクエラーになる

と、ありました。ということは、テーマによっては(この場合はLightning)、テンプレートの修正が必要になってくるかもしれません。英語版のメニューの追加も必要そうなので、これについては次回修正などトライしてみようと思います。

2018/02/08追記:最終的にすべての多言語化を終えたときには上記の問題は出なくなっていました。もしかするとトップページを「固定ページ」にしたことでこの問題がなくなったのかもしれません。

まとめ:Polylangは評価もよいので期待できますが、設定はちゃんとした方がよさそうです

今までいくつもの多言語化プラグインを使ってきましたが、複雑な仕組みにならざるを得ないので色々問題が起こったりして「これ!」というものには出会ってきませんでした。このPolylangは調べた限りでは評判もよく、プラグインとしてのダウンロード数が多く評価も高いので期待をしています。

ということで、テーマLightningを使って多言語化のページを作り上げるまでの手順をさらに追加していこうと思います。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

280人の購読者に加わりましょう

トップへ戻る