Eyes, JAPAN Blog > 今日から始める多言語対応WordPressサイトのつくり方【qTranslate-X】

今日から始める多言語対応WordPressサイトのつくり方【qTranslate-X】

shimizu

近年の積極的なインバウンドの推進に伴い、観光や行政、あるいは一般の企業や店舗においても、外国からのお客様への情報提供や、お問い合わせニーズに対応したいという要件は珍しくなく、今後ますます重要になると予想されます。そうした背景を受けて、Webサイトは顧客との接点として大きな役割を担っていることから、多言語対応が求められるケースは少なくないと思います。

今回は、Webサイトの構築に広く採用されているWordPressを基盤とするサイトの場合どのように対応したらよいか、方法を探ってみましょう。

WordPress多言語化の手段・方式について

WordPressの公式情報では、いくつかの多言語化の方法が紹介されており、以下の5つの方式が挙げられています。

  1. 翻訳記事を言語ごとに別投稿として管理する方法
  2. すべての翻訳文をひとつの投稿内に含めて管理する方法
  3. WordPress上では1つの言語でのみ記事を作成し、生成されたページ上で動的に翻訳する方法
  4. 各ページに外部のオンライン翻訳サービスを開くリンクを設置する方法
  5. WordPressのマルチサイト機能を利用し、言語ごとに個別のサイトを構築し相互リンクする方法

WordPress で多言語サイトを作成する より抜粋、要約)

このうち、3と4は外部の翻訳サービスに翻訳処理を任せてしまう方法で、WordPress側でのカスタマイズが比較的軽微で済むことと、翻訳作業を自動化できることから、手軽に導入できそうです。しかし、サービスの仕様によっては、翻訳文の品質が自動翻訳の精度に依存してしまう可能性があります。

1、2、5は、WordPressをカスタマイズして、あらかじめ用意した翻訳文を格納する方法です。

1、5は、1ページ分の内容を複数の記事に分けて保存する方式を取ります。特に5は、内部的には言語ごとにサイトを1つ立ち上げる形となり、管理の手間が増えそうです。

2は、通常と同じく1ページ1記事で管理するシンプルな実装方法となります。

今回は、構造が単純で扱いやすい2番目の方法を取ってみましょう。「qTranslate-X」という便利な多言語化プラグインを使って実装する手順をご紹介します。

※以降で紹介する操作は、日本語版のWordPressが稼働している環境で行うことを前提としています。

多言語化プラグイン「qTranslate-X」のインストール

それでは、WordPressにqTranslate-Xをインストールするところから始めましょう。

WordPressの管理画面で「プラグイン」→「新規追加」を開きます。

プラグイン→新規追加を開く

検索単語欄に「qTranslate-X」と記入して検索し、「今すぐインストール」を押してインストールします。検索結果では似たような名前を持つ補助プラグインなどもヒットしますので、間違えないようにお気を付けください。

qTranslate-Xの「今すぐインストール」をクリック

インストールが完了したら、「有効化」ボタンを押してください。

qTranslate-Xの設定

この段階でqTranslate Xが組み込まれて稼働するようになりましたので、初期設定を行いましょう。管理画面で「設定」→「言語」を開くと、qTranslate-Xの設定画面に入ることができます。

qTranslate-Xの設定画面

まず、この画面の「言語」タブを開いてみましょう。右側に利用可能な言語の一覧が見えます。最初の状態では、WordPress本体のデフォルト言語(日本語)と英語の2件のみが有効となっていますので、サイトに必要な言語の「有効にする」をクリックしてください。

利用可能な言語の一覧

ここでは、日本語と英語の2言語のみを有効にした状態で進めます。

この画面では使用する言語の設定の他にも、多言語化に関わる様々なプラグイン機能の設定が行なえますが、ひとまず既定の設定内容のままで使ってみます。

多言語化したWordPressで記事を編集するには

次に、Webサイトに掲載する記事を作成する方法を見ていきましょう。プラグインを入れる前であれば記事タイトルや本文を日本語だけで書いていたところを、多言語化した後は各言語向けにそれぞれ別となる文章を書いて作成する必要があります。

では、記事作成画面を開いてみましょう。「投稿」→「新規作成」を開いてください。

記事作成画面を開く

おなじみの記事作成画面の中で以前と異なるのは、タイトル記入欄の上に「日本語」と「English」のボタンがあることです。始めは「日本語」が選択された状態ですので、タイトル欄に「1つ目の投稿記事」、本文欄に「1つ目の投稿記事の本文です。」と記入してください。これで日本語版の内容が記述できました。

タイトルと本文を記入

それでは、「English」のボタンを押してみましょう。すると、タイトル欄と本文欄が再び空欄になりますので、それぞれ「My First Post」「Body text of my first post.」と記入してください。これで英語版の内容が記述できました。

英語版の内容を記入

最初に記入した日本語の文章が見えなくなってしまいましたが、消えてしまってはいませんので安心してください。「日本語」と「English」のボタンを押すことで、記入欄の言語が切り替わり、記入済みの内容を確認できます。(言語切り替えボタンはこの画面内にいくつかありますが、どれを使ってもかまいません)

これで、日英両方の内容を記入できました。画面右側にある「公開」ボタンを押してください。

公開ボタンを押す

新しく記事が保存され、公開状態になりました。

公開画面を開けば、たった今作成した記事が閲覧できるはずです。

作成した記事が掲載された

これで解決!といきたいところですが、まだ表示を英語に切り替えることができませんね😅

そこで、サイドバーに表示言語を切り替えるリンクを置いてみましょう。

表示する言語を切り替えられるようにしてみよう

管理画面で、「外観」→「ウィジェット」を開いてください。サイドバーなどに表示するウィジェットの設定画面が開きます。

ウィジェットの設定画面

左側の「利用できるウィジェット」の中に、「qtranslate 言語選択機能」という項目があります。これをドラッグアンドドロップして、右側の「ブログサイドバー」の枠内に追加してください。(ご使用のテーマによっては、「ブログサイドバー」以外の名称となっている場合があります)
追加すると、オプション設定欄が現れますが、ここでは変更は不要です。

「qtranslate 言語選択機能」を追加

これで表示言語選択機能のウィジェットが登録できました。再度公開画面を開いてみてください。右側のサイドバーに、「日本語」「English」のリンクが現れました。

サイドバーに言語切替が表示された

「English」をクリックすると、英語版に切り替えることができます。

英語版に切り替わった

おっと、サイトのタイトルがまだ日本語のままでしたので、ここにも英訳を設定しましょう。管理画面で、「設定」→「一般」を開いてください。

一般設定の「サイトのタイトル」

投稿記事作成画面と同様に入力欄の言語を切り替えて、英語版の「サイトのタイトル」に「Multilingual Blog」と記入し、画面最下部の「変更を保存」ボタンを押してください。

公開画面を開き、英語版ページに切り替えると、設定した英語版サイトタイトルが反映されていることが確認できます。

英語版サイトタイトルが反映されている

終わりに

今回は、WordPressとプラグインを組み合わせることで、多言語対応Webサイトを実現する方法をご紹介しました。
上記の手順の中で挙げた記事タイトルと本文だけでなく、カテゴリーやカスタムフィールドのテキストも多言語化することができます。また、qTranslate-Xの設定を変更することで、公開URLへの言語パラメータの持たせ方など、細かい動作をカスタマイズすることも可能です。
WordPressサイトの国際化に向けた対応を行う際は、ぜひご活用ください。

また、弊社ではWordPressを使ったWebサイト制作や多言語化対応のご相談も受け付けておりますので、Webサイトの制作でお悩みの方はお気軽にお問い合わせください。

Eyes, JAPANへのお問い合わせはこちら

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

コメントは受け付けていません。