Bogoを利用するときの注意点とカスタマイズ方法

WordPress多言語化プラグイン Bogo を利用する際の注意点と、コードによる表示系のカスタマイズをまとめます。

Contents

1 多言語化プラグインの比較検討メモ
2 Bogo利用時の注意点
3 コードによるカスタマイズ方法
4 参考リンク

多言語化プラグインの比較検討メモ

WordPressの多言語化プラグインといえば WP ML か Bogo らしい。qTranslate は新しく qTranslate X として作り直されたらしいが、他のプラグインと競合しやすい癖がまだ抜けてなさそう。

Bogoは結構絶賛されていたが「One language per post」と呼ばれる1ページ1言語の考え方なので、つまりは現行ページ数×言語数のページを生成せねばならない。

元々は「poファイルみたいな翻訳ファイルを作ってlanguageフォルダに設置すればOKだろう」くらいで考えていた（これもpoファイルの元となるpotファイルにない単語は翻訳不可）ので、今回Bogoを使った多言語化には思った以上に工数がかかった。

しかし逆に「One website per language」のマルチサイト型にするよりは楽なようなので、今後もBogoにお世話になろうと思う。

Bogo利用時の注意点

ページタイトルに言語名を付与すべし

WordPressのメニューにおいて、Bogoではメニュー項目ごとに「どの言語で表示させるか」を選択することができる。ただ基本的には1項目1言語でしか表示しないだろう。つまり「日本語のメニュー項目数×言語数」の項目が、外観＞メニューのページにズラーッと縦並びすることになる。

さらにBogoでは言語ごとにページを生成するため、メニューに追加したい各ページのタイトルはその言語に翻訳されたタイトルになっている。

例えば中国語では中国・香港・台湾と3種類の違いがあるが、これらの言語は共通している部分も多い。日本語で「予約」というページがある場合、これらの中国語3種の翻訳語のタイトルは「预订」「預訂」「預訂」となる。

これをメニューに追加しようと思った時に、どれがどの言語のページなのかわからなくなる。

そのため「预订(中国) 」「預訂(香港) 」「預訂(台湾)」のように、タイトルにはどの国のページなのかを括弧書きで記載することをおすすめする。タイトルはブラウザのタブに表示されるし、SEO的な影響も多少不安ではあるが..。

対応していないページビルダープラグインが多い

テーマ付属のページビルダーだったり SiteOrigin Page Builder プラグイン等で作成した投稿は、Bogoの「翻訳を追加」によるページ複製機能がうまく動作しない。しかし WPBakery Page Builder プラグインなら問題なく複製機能で多言語用投稿を作成することができる。

また最悪できなかったとしてもテンプレート登録＆読み込み機能があるので日本語ページを簡単にコピーできておすすめである。

パーマリンクの更新を忘れずに！

カスタム投稿タイプのアーカイブページが404になった。この記事をみて「もしや」と思いパーマリンク設定を更新したら直りました！URLやスラッグ系ではあるあるですので、もしかするとこちらのケースも直るかもです！

パーマリンクに不具合があるとカスタム投稿タイプの投稿の外国語版投稿をBogoで生成しても、そのパーマリンクは日本語ページのそれにリダイレクトされてしまいますので注意が必要です。

スラッグは英語でなければならない

投稿だけかもしれないが、スラッグ（URLに使われる一部）を日本語にしていると以下の警告が出た。

Too few arguments in/home/example/example.com/public_html/wp-includes/nav-menu-template.phpon line261

これはナビメニューに使用される sprintf() 関数の引数が足りない時に吐かれるエラーだが、今回は日本語スラッグの投稿だけでエラーが出たので原因はスラッグだ（正確には日本語スラッグの投稿から、Bogoにより外国語の投稿を生成し公開したものにエラーがでる）。

なお、タイトルをそのままスラッグに使われてしまわないようパーマリンクを「基本」の?p=123形式にしようと考えるかもしれないが、これをしてしまうと固定ページのパーマリンク形式も変更されてしまうし、URLが example.com/?p=123&lang=en みたいな形式になって美しくもないのでおすすめしない。

コードによるカスタマイズ方法

Bogoの設定画面からでは設定できないものは functions.php にフィルターフックを作成するなどしてコードでカスタマイズする必要があります。

表示系のカスタマイズ

言語スイッチの括弧書き削除
国旗アイコンの削除
カスタム投稿タイプへの対応
言語によるページテンプレートの出し分け

// Bogo: 言語スイッチの English の(United States)を削除
function replace_bogo_text($output){
 return str_replace(' (United States)','',$output);
}
add_filter( 'bogo_language_switcher','replace_bogo_text');

// Bogo: 国旗アイコンを削除
function bogo_use_flags_false(){
 return false;
}
add_filter( 'bogo_use_flags','bogo_use_flags_false');

// Bogo: Support custom post type
function my_localizable_post_types( $localizable ) {
    $localizable[] = 'your_post_type_name';
    return $localizable;
}
add_filter( 'bogo_localizable_post_types', 'my_localizable_post_types', 10, 1 );

// Bogo: ページテンプレート出し分け
function select_locale_template($template){
  $locale = get_locale();
  if($locale == 'en_US'){
    $locale_template = dirname( __FILE__ ) . '/' . basename($template, '.php') . '_en.php';
    if(file_exists($locale_template)){
      $template = $locale_template;
    }
  }
  return $template;
}
add_filter('index_template', 'select_locale_template');
add_filter('404_template', 'select_locale_template');
add_filter('archive_template', 'select_locale_template');
add_filter('author_template', 'select_locale_template');
add_filter('category_template', 'select_locale_template');
add_filter('tag_template', 'select_locale_template');
add_filter('taxonomy_template', 'select_locale_template');
add_filter('date_template', 'select_locale_template');
add_filter('home_template', 'select_locale_template');
add_filter('front_page_template', 'select_locale_template');
add_filter('page_template', 'select_locale_template');
add_filter('paged_template', 'select_locale_template');
add_filter('search_template', 'select_locale_template');
add_filter('single_template', 'select_locale_template');
add_filter('text_template', 'select_locale_template');
add_filter('plain_template', 'select_locale_template');
add_filter('text_plain_template', 'select_locale_template');
add_filter('attachment_template', 'select_locale_template');
add_filter('comments_popup', 'select_locale_template');
add_filter('home_template', 'select_locale_template');

言語ごとに表示内容を切り替える

1つのページで言語によって表示内容を変えたい場合は、get_locale() と switch 文で以下のように書きます。

// PHPファイルで言語ごとに表示内容を切り替える際の switch 文
<?php $locale = get_locale();
    switch ($locale) {    
    case 'en_US': // 英語
        break;    
    case 'zh_CN': // 中国語
        break;
    case 'zh_TW': // 台湾
        break;
    case 'zh_HK': // 香港
        break;
    default:
        break;
} ?>

言語スイッチをナビメニューに埋め込む

PC版は position: absolute で右上などに絶対配置してしまえばいいが、モバイル版はハンバーガーメニューの中に入れたい場合がある。今回の場合TCDテーマ「KADAN」を利用したサイトであったため、wp_nav_menu() の引数に渡す $args の中にショートコードを入れ込むことで綺麗に埋め込むことができた。

$args = array(
  'container' => 'nav',
  'container_id' => 'js-global-nav',
  'container_class' => 'p-global-nav',
  'items_wrap' => '<ul class="%2$s">%3$s'. do_shortcode('[bogo]').'</ul>',
  'link_after' => '<span class="sub-menu-toggle"></span>',
  'theme_location' => 'global'
);