WordPress：多言語サイト制作時に便利なプラグイン「Bogo」のカスタマイズ備忘録

言語スイッチャーを設置

言語を切り替えるためのリンクを出力してくれる言語スイッチャーを特定の記事のみで表示させるといったような使い方をしたい場合は、エディタなどに下記ショートコードを記述することで設置できます。

[bogo]

また、エディタではなくサイト共通部分の一部として設置するなど常に言語スイッチャーを表示させたい場所には、該当のテンプレートへ下記のような記述をすることで設置できます。

echo do_shortcode( '[bogo]' );

言語スイッチャーのテキストやタイトルを変更

言語スイッチャーにデフォルトで表示されているテキストやタイトルは、functions.phpに下記のように記述することで任意のものに変更できます。
下記はインストール・有効化してそのまま設置した場合に表示される「日本語」と「English (United States)」をそれぞれ「JP」と「EN」に変更する場合のサンプルコードになり、条件分岐部分にある$name['lang']で変更したい言語を指定し、表示されているテキストを変更する場合は['native_name']を、title属性を変更する場合は['title']を変更します。

add_filter( 'bogo_language_switcher_links', 'custom_bogo_language_title_name', 10, 2 );
function custom_bogo_language_title_name( $links ) {
  foreach ( $links as $code => $name ) {
    if ( $name['lang'] === 'en-US' ) {
      $links[$code]['title'] = 'EN';
      $links[$code]['native_name'] = 'EN';
    } elseif ( $name['lang'] === 'ja' ) {
      $links[$code]['title'] = 'JP';
      $links[$code]['native_name'] = 'JP';
    }
  }
  return $links;
}

言語スイッチャーの並び替え

「1. 言語スイッチャーを設置」で紹介した方法で言語スイッチャーを任意の場所に出力できますが、それをさらに任意の順番で表示する方法です。
ここではCSSを使って並び替えを行う方法で、具体的には「Bogo」の言語スイッチャーはulとliを利用したHTMLとなっているので、ulにFlexboxを指定し、liのorderを使ってそれぞれをどの順番にするかを指定していきます。

例えば、言語パックで「日本語」「ドイツ語」「英語」を選択した場合は、言語スイッチャーを表示させると「ドイツ語 → 英語 → 日本語」のような順で表示されますが、それを「日本語 → 英語 → ドイツ語」の順にしたいときは下記のようなCSSで並び替えをできます。

.bogo-language-switcher {
  display: flex;
  flex-direction: column;
}
.bogo-language-switcher .ja {
  order: 1;
}
.bogo-language-switcher .en-US {
  order: 2;
}
.bogo-language-switcher .de-DE {
  order: 3;
}

.jaや.en-USというclassは、それぞれの言語を表示しているli要素に付いているものになり、これをセレクタに利用してorderを指定していけばCSSだけで任意の並びに変更できます。
また、この指定の場合はデフォルトと同じように上からひとつずつ並べられるものですが、横並びに表示したい場合はflex-direction: column;の指定をしなければ実装できます。

言語スイッチャーの国旗を非表示

言語スイッチャーで各言語リンクの横に表示されている国旗が不要な場合、とりあえず見えなくするだけならCSSで.bogoflags { display: none; }と記述するのでも可能ですが、見栄えだけでなくHTML自体が出力されないようにしたい場合は、functions.phpへ下記のように記述します。

add_filter( 'bogo_use_flags', 'remove_bogo_lang_flags' );
function remove_bogo_lang_flags() {
  return false;
}

未翻訳言語のナビを非表示 または 別スタイルを指定する

言語スイッチャーは言語パックで選択（指定）されている言語をすべて表示するので、まだ未翻訳であるページについても表示します。
サイト内でこれらの言語に対応している または 対応予定ということがわかるのでこの動き自体は悪いとは思いませんが、翻訳されている場合は表示して未翻訳の場合は非表示にといったように見た目でハッキリ分かるようにしたい場合は、無理矢理感はありますがjQueryを用いて下記のような形で実装できます。

未翻訳言語のナビを非表示

「Bogo」は、翻訳済みのページであればリンク指定付きで出力され、未翻訳であれば表示はされるもののリンク指定がない形で出力されるので、それを条件分岐に利用することで未翻訳の言語がどれかを判定させます。
また、現在見ている言語についてもリンク指定がない形になっているので、それは現在見ている言語の場合に付与される.currentを条件分岐に利用していきます。

$('.bogo-language-switcher li').each(function() {
  if ( !$('a', this)[0] && !$(this).hasClass('current') ) {
    $(this).hide();
  }
});

各li要素の中にa要素がない場合とli要素に.currentというclassが付与されていない場合を条件として指定しており、それにあてはまるものは.hide()で非表示にしてしまいます。

未翻訳言語に別スタイルを指定

基本的な条件などは同様で、上で.hide()を使っていた部分を.addClass()に差し替えれば未翻訳の要素にだけ任意のclassを付与することができるので、あとはそのclassに対してCSSを記述すれば翻訳と未翻訳とで異なる見栄えにすることができます。

$('.bogo-language-switcher li').each(function() {
  if ( !$('a', this)[0] && !$(this).hasClass('current') ) {
    $(this).addClass('untranslated');
  }
});

選択中の言語によって出力内容を変更

これに関しては「Bogo」の機能というわけではないですがついでに...。
言語によって出力させる内容を変更したい場合は、下記のようにget_locale()と条件分岐を組み合わせることで実装できます。

$locale = get_locale();
if ( $locale == 'ja' ) {
  echo '日本語選択時のみ出力';
} elseif ( $locale == 'en_US' ) {
  echo '英語選択時のみ出力';
} elseif ( $locale == 'de_DE' ) {
  echo 'ドイツ語選択時のみ出力';
} else {
  echo 'その他の言語で出力';
}

'ja'や'en_US'など条件に記述する値については、htmlのlang属性や「Bogo」有効時にメニューに追加される「言語 > 言語パック」内で確認できます。

選択中の言語によってスタイルを変更

body_class()を使用している状態で「Bogo」を有効化した場合は、bodyに.jaや.en-USといった言語別のclassが付与されるようになっており、それをセレクタに利用することで基本的には同じHTMLでも言語によってページのスタイルを変更することが可能です。

また、言語スイッチャーで選択されている言語のみスタイルを変えたい場合は、li要素に.currentというclassが付与されるので、それを利用すれば現在選択されている言語のみスタイルを変更することが可能です。
例えば「現在閲覧中の言語スイッチャーは表示しない」という動きであれば、下記のようなCSSで対応することができます。

.bogo-language-switcher .current {
  display: none;
}

指定した投稿タイプで無効化する

プラグインを有効化すると「投稿」と「固定ページ」で利用できるようになっていますが、例えば「固定ページ」で無効化したいときはfunctions.phpに下記のように記述することで無効化でき、投稿画面にプラグイン有効化時に追加されるウィジェットが表示されなくなります。

add_filter( 'bogo_localizable_post_types', 'remove_bogo_localizable_post_types' );
function remove_bogo_localizable_post_types( $localizable ) {
  if ( ( $key = array_search( 'page', $localizable ) ) !== false) {
    unset( $localizable[$key] );
  }
  return array_values( $localizable );
}

「投稿」で無効化したい場合は、array_searchの第1引数で'page'としている箇所を'post'に変更することで無効化できます。

カスタム投稿に対応させる

デフォルトでは「投稿」と「固定ページ」のみで利用できる形になっていますが、それをカスタム投稿でも利用できるようにしたい場合はfunctions.phpに下記のように記述し、ハイライト表示している行にある'post_type'の部分を該当の投稿タイプ名を指定します。

add_filter( 'bogo_localizable_post_types', 'add_bogo_localizable_post_types' );
function add_bogo_localizable_post_types( $localizable ) {
  $localizable[] = 'post_type';  return $localizable;
}

複数のカスタム投稿にまとめて対応させる

上でカスタム投稿に対応させる方法を紹介しましたが、投稿タイプが複数あり且つそれらすべてに対応させたいという場合は、functions.phpに下記のように記述することでまとめて対応させることが可能です。

add_filter( 'bogo_localizable_post_types', 'add_bogo_localizable_post_types' );
function add_bogo_localizable_post_types( $localizable ) {
  $args = array(      'public'   => true,
      '_builtin' => false
  );
  $custom_post_types = get_post_types( $args );
  return array_merge( $localizable, $custom_post_types );
}