プラグイン「Bogo」で多言語サイトを簡単に作る!

グローバル化は進む進む。
外国語対応を求められる制作も増えてきた今日この頃です。

ww

WordPressで日本語と、翻訳した英語のページを切り替えする機能が欲しいとき、とっても助かる「Bogo」というプラグインがあります。
これを利用して英語切り替え対応のサイトを作ったので、備忘録を書きます。

ツール→Bogoで切り替えたい言語を選んでください。
将来中国語も導入しようかなと思っておられる方。
それは将来その時に設定する方がいいので、いま利用する言語をお選びください。
(切り替えボタンが日本語英語に加え、まだ作っていない中国語まで表示されてしまうようになったので、私はプラグインを削除して再度インストールしました)

元ある日本語記事にリンクした英語記事を作成する

管理画面上部adminバーの「日本語」と書いているところから「英語」に切り替えます。

bar

そのまま英語対応させたい投稿や固定ページの編集画面を開くと、下記のようなボタンが出現します。

btn

こちらをクリックして、記事を書くと、リンクし合う英語ページができあがります。
記事の作り方は下記サイトがとても参考になりました。とても丁寧に説明されていましたので、上のざっくり説明でぴんと来ない場合はこちらを参考にされることをお勧めします。
http://pronama.azurewebsites.net/2014/07/17/wordpress-bogo/

言語切り替えのボタン実装方法は3つ。

  1. ショートコードで[bogo]とcontentの中に書いて表示。
  2. ウィジェットが用意されているのでポイッとドラッグ&ドロップして設置してもいいです。
  3. もしくは、テーマのどこかに下記のようにコードを入れておくといいかもしれません。
 <?php echo do_shortcode( '[bogo]' ); ?>

すると、それぞれに下記のようなボタンが出現します。
左が日本語表示時。右が英語表示時。

英語と日本語切り替えボタン

英語表示時にはヘッダー、ナビ、サイドバーやウィジェットなども英語に切り替える

記事だけが英語と日本語の切り替えができても、ナビゲーションやウィジェットが日本語のままではなんだか2度手間というか、これでは多言語サイトとはなかなか呼べないかもしれません。

カスタムメニューの切り替え方

Bogoを有効化すると、カスタムメニューひとつひとつにチェックボックスで表示非表示を選択できるようになっています。
例えば固定ページのHOME(日本語)とHOME(英語)を、カスタムメニューに追加し、HOME(日本語)固定ページは日本語のみで表示、HOME(英語)は英語のみで表示、とチェックボックスで指定して簡単に英語には英語メニューの対応ができます。

home

ウィジェットの切り替え方

ウィジェットはチェックボックスひとつで切り替えができます。例えばこれは私が使っているイベントカレンダーのプラグインですが、下の方に日本語英語にチェックができるようになっています。

ウィジェット

それ以外(画像やテンプレートに直接書いているものなど)で切り替えたいところがある場合

重宝したのはロケール(Locale)というもの。
ロケールが英語だったら、英語のヘッダーを表示!という指定をすることができます。
PHPで、if文を書きます。

<?php $locale = get_locale();
	if ('en_US' == $locale  ) { ?>
<!--英語で対応させたいことはここに書く-->
<?php } else { ?>
<!--日本語で対応させたいことはここに書く -->
<?php } ?>

もし、ロゴ画像を切り替えるとすると、
下記のように書くと表示が切り替わります。

<?php $locale = get_locale();
	if ('en_US' == $locale  ) { ?>
<!--英語のロゴ表示-->
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/en-logo.png" alt="英語ロゴ" width="400" height="90"/></a></h1>

<?php } else { ?>
<!--日本語のロゴ表示-->
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="日本語ロゴ" width="400" height="90"/></a></h1>

<?php } ?>

ロケールについては下記の記事を参考にさせていただき、実装ができました。ありがとうございます。
http://mylifeyourlife.net/2014/07/bogo-menu-switch/

英語の勉強もしたい、ものです、ね。。。(苦手)

英字で会議(ぱくたそさん)

以上、Bogo実装備忘録でした。皆様、WordPressで素敵な多言語サイト作って下さいネ。

“プラグイン「Bogo」で多言語サイトを簡単に作る!” への1件の返信

この記事にコメントを残す