先日Wordpress製サイトを多言語化する機会があったので、その時やったことを書き出してみます。
目次
WordPressの多言語化には様々な方法があります。こちらの記事が詳しいのでぜひ読んでみてください。
WordPress の多言語化で考えることとプラグインの比較
今回多言語化したサイトはページ数も少なかったので、マルチサイトや別ホストにするよりは1つのシステムで動かした方が良さそう……ということでプラグインで対応することに。
データをシンプルにしたいのと、テンプレートを言語ごとに出し分ける参考記事が見つかったことから「Bogo」を選びました。
公式サイトかプラグインメニューからBogoをインストール。
Bogo
わあ頭痛予防できるよヤッタネ！
ContactForm7の作者の方が作っているそうです。日本語に安心します。
インストールしたら、ツール＞Bogo で設定画面を開きます。
インストール直後はこんな感じ。
使用する言語をインストールし、表示しないものを削除/停止します。
今回は英語以外を削除しました。
管理メニューに言語スイッチャーが表示されています。
ここで切り替えるとダッシュボードも言語切り替えされます。
言語ごとに編集者が異なることもあるので、これはありがたい。
編集画面に「言語」という枠ができています。
ここで言語を選択して「翻訳を追加」すると、この記事に紐付いた翻訳投稿が作られます。
追加するとこんな感じ。クリックすると編集画面にジャンプします。
投稿一覧で見るとこんな感じ。
言語一つずつに記事が作られ、それぞれにロケールが設定されています。
デフォルト以外の言語では、言語ごとのサブディレクトリが作られます。
[日本語版]
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]' ); ?>
ヘッダーに入れてみました。
ん？ 英語記事ですが、最近の投稿に日本語の記事が表示されてますね。
Bogoを使って紐つけていても１言語につき１投稿ずつ、言語別に投稿が存在し、コメントやカテゴリーはそれぞれの記事に別々に紐付きます。
しかしウィジェットは１機能で１つ。
ウィジェットのタイトルなど翻訳ファイルが用意されている部分は言語切替で表示が変わりますが、”カテゴリーの書き方そのものを言語ごとに変える”、”選択中の言語によってウィジェット中の表示や参照元を変える”などといったことは、このままではできないようです。
カテゴリーを言語ごとで表示を変えるには、投稿をその言語ごとに作ったカテゴリーに仕分けるのが無難かなと思います。
カスタムメニューで各言語のカテゴリを設定し、表示する言語をチェック。
階層構造を持っている場合、こんな感じで入れ子にします。
画面では子カテゴリーの設定を閉じていますが、それぞれ開いて表示する言語のチェックをし、設定します。
それをウィジェットで設定します。
ウィジェットごとに表示する言語を選択できるので、他のウィジェットも言語ごとに分けて表示すればいいかなと思います（未確認です）
ウィジェットそのものを編集する時は、この記事が参考になりそうです（ロケールパラメータを使用します）
【ワードプレス】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_switcherをfunctions.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 ならね
