多言語化プラグイン「Bogo」の使い方

WordPressのプラグインで手軽に多言語化できる「Bogo」の設定方法についてまとめてみました。

「 Bogo 」とは

「Bogo」プラグインは問い合わせフォームでお馴染みの「Contact Form7」と同じ開発者の方が作成されています。
操作もとてもシンプルで直感的にわかりやすいです。

多言語化できるプラグインをいろいろ探していたのですが、「Bogo」がいちばん私が利用しているWordPressのテーマ「SWELL」と相性が良さそうなのでこれを選びました。

第二言語を画面から選択できる

右上の選択ボタンより、１３１言語を任意に選択する事ができます。
例えば言語で「英語」を選択するとWordPressの管理画面がすべて英語で表記されます。

多言語を編集ページからワンクリックで複製する事ができる

Bogoで固定ページを編集するとサイドバーに他の言語への移行リンクが表示されます。
例えば、日本語で編集していると「英語サイトへ」のリンクが表示され、クリックする事によって自動的にロケールがen-USになる複製の下書きが作成されます。

自動翻訳機能はついていないので、複製された英語サイトを英語に自身で書き直す事は必要になります。逆に言えば自動翻訳でないので自身の言葉で英語サイトを作る事はできるといったメリットと感じています。

多言語サイトのURL構成

多言語化サイトのURL構成は下記の通りになります。

注意点としてパーマリンクをデフォルトから「投稿名」等に最初に変更する事をしてください。

トップページ
・日本語のページ　https://tech.bonyoshi.com/ 　　 ※任意のドメイン名
・英語のページ　　https://tech.bonyoshi.com/en/

固定ページ
・日本語のページ　https://tech.bonyoshi.com/sample 　　 ※任意のドメイン名
・英語のページ　　https://tech.bonyoshi.com/en/sample

Bogoのインストール及び設定方法

インストール方法

管理メニューより「外観」「プラグイイン」を選択します。
プラグインの検索より「Bogo」を入力します。

検索すると下記のように検索されますので、「今すぐインストール」をクリックしインストールが完了したら「有効化」をクリックして導入します。

設定方法

有効化すると管理画面に「言語」が追加されます。
サブメニューの「言語パック」を選択します。

多言語の固定ページの作り方

管理画面の「固定ページ」より「新規作成」をクリックしてます作成します。

保存を押すとサイドメニューの中に「言語」があり「英語の翻訳を作成」をクリックします。

カテゴリーの変換設定

カテゴリが日本語と英語が異なるのでそれぞれに対応して内容の変換設定をしてあげる必要があります。

「言語」「テキストの編集」を選択し、言語センタリストより「英語（アメリカ）」を選択します。英語に対するテキストの変換テーブルで表記されますので「翻訳」の箇所を表示内容に変更します。

グローバルメニュー切り替え方法

「グローバルメニュー」や「フッターメニュー」はそれぞれ言語に応じた物を用意し「言語の表示設定」で表示と非表示を切り替えます。

ヘッダーバーへの追加

「外観」「ウィジェット」を選択し「ヘッダー内部」に「言語切り替え」を追加します。

上級編のカスタム設定

ヘッダー内に表示する「言語切り替え」を任意にカスタマイズする場合は「SWELL子テーマ」の「function.php」と「追加CSS」を編集する必要があります。

上級編と書いているのはプログラムのソースコードを直接変更する為、表示がくずれたりWordPressが正常に動作しなくなる事があるので注意して作業してください。

「外観」「テーマファイルエディター」を開きます。

function.phpの編集

「編集するテーマを選択」「SWELL CHILD」「テーマのための関数(function.php)」を選択して国旗を非表示にするコード追加します

表示される文字の変更したい場合は更に下記のコードを追加します。

追加CSSで位置やデザインを変更

「カスタマイズ」「追加CSS」に下記コードを追加