QOXホームへ

Bogoを使ってWordPressを多言語化

Yuko Hashimoto

Yuko Hashimoto

先日Wordpress製サイトを多言語化する機会があったので、その時やったことを書き出してみます。

プラグイン「Bogo」を使う

WordPressの多言語化には様々な方法があります。こちらの記事が詳しいのでぜひ読んでみてください。
WordPress の多言語化で考えることとプラグインの比較

今回多言語化したサイトはページ数も少なかったので、マルチサイトや別ホストにするよりは1つのシステムで動かした方が良さそう……ということでプラグインで対応することに。
データをシンプルにしたいのと、テンプレートを言語ごとに出し分ける参考記事が見つかったことから「Bogo」を選びました。

プラグインをインストール

公式サイトかプラグインメニューからBogoをインストール。

Bogo
wordpressプラグインBogo
わあ頭痛予防できるよヤッタネ!
ContactForm7の作者の方が作っているそうです。日本語に安心します。

インストールしたら、ツール>Bogo で設定画面を開きます。
Bogoツール画面
インストール直後はこんな感じ。
使用する言語をインストールし、表示しないものを削除/停止します。

今回は英語以外を削除しました。

Bogoツールバー
管理メニューに言語スイッチャーが表示されています。
ここで切り替えるとダッシュボードも言語切り替えされます。
言語ごとに編集者が異なることもあるので、これはありがたい。

言語
編集画面に「言語」という枠ができています。
ここで言語を選択して「翻訳を追加」すると、この記事に紐付いた翻訳投稿が作られます。

言語(追加済み)
追加するとこんな感じ。クリックすると編集画面にジャンプします。

翻訳記事追加後の一覧
投稿一覧で見るとこんな感じ。
言語一つずつに記事が作られ、それぞれにロケールが設定されています。

サイトのURLについて

デフォルト以外の言語では、言語ごとのサブディレクトリが作られます。

[日本語版]
http://●●.co.jp
http://●●.co.jp/2016/09/09/mypost

[英語版]
http://●●.co.jp/en/
http://●●.co.jp/en/2016/09/09/mypost

URLとサブディレクトリ以下のパーマリンクは紐付いた記事で同じになります。

言語スイッチャーを表示

言語切替ショートコード

言語切替メニューを記事の中に入れる時は、ショートコード[bogo]を使用します。

記事内に言語切替メニュー表示
記事内に表示されました。

言語切替ウィジェット
ウィジェットもあります。

記事の外、ヘッダーやサイドメニューに表示させる時は、テンプレート内でショートコードを使用します。

<?php echo do_shortcode( '[bogo]' ); ?>

bogoblog08
ヘッダーに入れてみました。

ん? 英語記事ですが、最近の投稿に日本語の記事が表示されてますね。

言語ごとに表示を分ける

Bogoを使って紐つけていても1言語につき1投稿ずつ、言語別に投稿が存在し、コメントやカテゴリーはそれぞれの記事に別々に紐付きます。
しかしウィジェットは1機能で1つ。
ウィジェットのタイトルなど翻訳ファイルが用意されている部分は言語切替で表示が変わりますが、”カテゴリーの書き方そのものを言語ごとに変える”、”選択中の言語によってウィジェット中の表示や参照元を変える”などといったことは、このままではできないようです。

カテゴリーはカスタムメニューを使う

カテゴリーを言語ごとで表示を変えるには、投稿をその言語ごとに作ったカテゴリーに仕分けるのが無難かなと思います。

カスタムメニューで各言語のカテゴリを設定し、表示する言語をチェック。

階層構造を持っている場合、こんな感じで入れ子にします。
画面では子カテゴリーの設定を閉じていますが、それぞれ開いて表示する言語のチェックをし、設定します。
言語ごとメニュー

それをウィジェットで設定します。
カスタムメニューウィジェット

ウィジェットごとに表示する言語を選択できるので、他のウィジェットも言語ごとに分けて表示すればいいかなと思います(未確認です)

ウィジェットそのものを編集する時は、この記事が参考になりそうです(ロケールパラメータを使用します)
【ワードプレス】WordPress Popular Postsを多言語化サイトが構築できるBogoプラグインに対応させる方法

テンプレート内で言語ごとに表示を変える

テンプレート内で言語ごとに表示を変えたい時、$localeで分岐させます。

<?php $locale = get_locale();
if ('en_US' == $locale  ) { ?>
<!--英語表示の時-->
<?php } else { ?>
<!--日本語表示の時 -->
<?php } ?>

ロケールに指定する文字列は ツール>Bogoで確認できます。
日本語なら「ja」、ドイツ語なら「de_DE」、イタリア語なら「it_IT」。

get_postsで言語ごとの投稿を取得するにはこちらの記事が役立ちそうです。
(’suppress_filters’ => false にし、’lang’ => ‘ja’ とパラメータ指定)
Bogoプラグイン使用時、get_postsで投稿を取得すると全部の言語が対象になる

翻訳ファイルで出力を変える時はこちらを参考にどうぞ。
WordPress のサイト名とキャッチフレーズを多言語化する方法 with Bogo プラグイン

言語スイッチャーのスタイルを変更する

Bogo導入時、すでにページ全体のコーディングは終わっていたので、

言語切替メニューのデザインを変更したい!
画像も変えたい!
というか、スタイルを先に用意してあるんだけど!

という状態でした。

ショートコードで書き出されるコードはこうなっています。

<ul class="bogo-language-switcher">
  <li class="en-US en current first">English (United States)</li>
  <li class="ja last"><a rel="alternate" hreflang="ja" href="http://〜〜/" title="Japanese">日本語</a></li>
</ul>

jaとかen-USといったロケールと同名のクラスは国旗の画像を指定しています。
ここのCSSを上書きするのも良いですが、もっと他にもクラスを付けたいとか、リストタグ使いたくないよということもあります。
そんな時はショートコードを変更して出力されるコードを変更するといいみたい。

こちらを参考にしました。
トピック: bogo デザイン変更 « サポートフォーラム — WordPress

plugins/bogo/includes/language-swicher.phpの中の、bogo_language_switcherfunctions.phpにコピーし、ショートコードを上書き編集します。

remove_shortcode( 'bogo', 'bogo_language_switcher' );
add_shortcode('bogo', 'my_language_switcher');
// function bogo_language_switcher( $args = '' ) {
// my_language_switcher に変更
function my_language_switcher( $args = '' ) {
// 〜略〜
}

この中の

if ( empty( $link['href'] ) ) {
          // 現在表示中の言語
			$li = esc_html( $label );
		} else {
          // 選択可能な言語
			$li = sprintf(
				'<a rel="alternate" hreflang="%1$s" href="%2$s" title="%3$s">%4$s</a>',
				$link['lang'],
				esc_url( $link['href'] ),
				esc_attr( $title ),
				esc_html( $label ) );
		}
     // liに言語ごとのクラス($class。ロケールと同名)を付加
		$li = sprintf( '<li class="%1$s">%2$s</li>', $class, $li );

		$output .= $li . "\n";
	}

	$output = '<ul class="bogo-language-switcher">' . $output . '</ul>' . "\n";

このへんを編集すると出力コードを変更できます。

参考にしたサイト

プラグイン「Bogo」で多言語サイトを簡単に作る!
WordPressで多言語サイトを気軽に作るなら、まずBogoを試してみるといいかも。
WordPress サイトの多言語化に もう迷わない そう、Bogo ならね

Yuko Hashimoto

Yuko Hashimoto デザイナー

デザインって何だろう、と悶々としながら、オシャレさん目指して試行錯誤する日々です。ハト好き。寺社と散歩と時代劇が好きです。気がつくと荷物が多くなるのが悩み。

記事一覧
Go up