多言語プラグインBogoの言語スイッチャーの表示をプチカスタム

友人のサイトで多言語プラグイン”Bogo”を導入して開設準備をしているのですが、言語スイッチャーの表示がいまいちしっくりこないので何とか変更してほしいと指令を受け、ネット検索を行いながら試行錯誤してやっと見つけました！友人からもとりあえずOKが出たので忘備録として残しておくことに。また、これからBogoの導入を考えている方のちょっとした参考になればと思います。

このページの目次

要望① 現在の言語を表示しない
要望② 翻訳ページがないときに文字を追加
さらに追加で

要望① 現在の言語を表示しない

Bogoの言語スイッチャーで現在表示されている言語を表示せずシンプルなものにしたい。
これはCSSに追記することで表示させない方法が一番いいようです。それもシンプルな構文で…。
⇩のサイトで解説しているものをそのまま使わせていただきました。

Bogo プラグインの言語切り替えウィジェットをプチカスタマイズ | Design Hack and Slash

WordPress を手軽に多言語化できる Bogo プラグインの言語切り替えウィジェットを少しだけ改造するメモです。 Bogo はその仕組み上、何ヶ国語でも多言語対応できるのですが、この記事では日本語と英語のバイリンガルサイトを例にして...

手順はシンプルです！
外見/テーマファイルエディターからStyle.cssを選択し、赤枠の構文を追記するだけです。

赤枠の内容は⇩

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

いろいろなサイトで同じようなものが紹介されていましたが、これが一番シンプルで分かりやすかったです。

目次に戻る

要望② 翻訳ページがないときに文字を追加

英語の翻訳ページがないときにも言語スイッチャーに”English”と表示がされ、翻訳ページがあるときにはリンクが張られ、ないときには文字のみとなっています。これって結構わかりにくいので、リンクがないときには追加で説明文？を表示させたいと思います。
でたどり着いたのが⇩サイトです。

https://www.nxworld.net/wp-plugin-bogo.html?utm_source=pocket_mylist

jQueryを使う必要があるようですが、幸いCocoonでは外見/テーマファイルエディターからjavascript.jsを選択し、ここにそのままjQueryを記述すれば問題ないとのこと。
早速⇩の赤枠の内容を追記してみました。
翻訳ページがないときには”English”自体を表示させないのも一つの方法だと思いましたが、今回はあえて追加で文字を入れることにしました。

赤枠の内容は⇩

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

するとこんな感じにうまく表示することができました。

翻訳ページがないときに何も表示させたくない場合には、上の構文の最後のハイライトした部分 ”append(‘ (Coming Soon)’を ”hide()”にすると表示されなくなります。

目次に戻る

さらに追加で

せっかくなのでメッセージだけではなくCSSで文字の色を変えてみました。
また、多言語といっても日本語と英語のみなのでjQueryも少し変更。

ハイライトしたのが変更部分です。

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

“addclass”でCSSで指定できるクラスを設定、”text”ですきな文言を表示することができます。
ただし、日本語、英語以外の言語もある場合には”append”を使う方がいいですね。そうでないと翻訳ページがない場合はすべての言語に”text”で指定したものが表示されることになります。
最後にCSSにも赤枠の内容を追記。