シンプルで便利なWordpressの多言語化プラグイン「Bogo」。現在、このBogoを使って二カ国語のホームページを作成しています。
多言語ホームページでは、ページ右上に言語切替セクションを置くのが一般的ですが、このBogoは、英語の切替表示が「英語」と表示されます。ここはやはり「English」と表示させるのが親切なところ。コード公開していらっしゃるかな～と調べたのですが例がなかったので自分でやりました。
- シンプルに作業することを考える。
- プラグインのコアファイルは触らない
結論から
この言語表示の文字列変換は、ほんの少しのコードで実現できます。そう、jQueryのreplaceを使えば実に簡単に実装できるんですね。
$(function(){
$('ul.bogo-language-switcher li.en-US.en').each(function(){
var txt= $(this).html();
$(this).html(txt.replace('英語 (米国)','English'));
});
});
これだけで動きます。ちなみに、私は自分のスクリプトファイルに記述しております。ヘッドタグあたりに直貼りされる場合、多少工夫が必要な場合もあると思いますのでご注意ください。
※文字コードには要注意です。
プラグインのカスタマイズ
プラグインのカスタマイズはなかなか難しい。私は、コアファイルは触らず、functions.phpだけで解決する方法を考えます。けれど、実際にはそれだけでは難しい場合もありますし、そのような場合は、jQueryを使ったカスタマイズが便利になります。
チャレンジ編
多言語サイトを作る時、すべてのページで英語版が作れる訳ではありません。そのような場合、英語版がなければ「English(not available)」としておけば閲覧者にはより便利になります。
言語切替ウィジェットを見てみると、多言語している場合は当然リンクが設定され、そうでない場合は単なるリスト表示になっています。
このことを考えると、リンク表示の文字列は「English」として、リンクがない、すなわちリストに入ってる文字列は「English(not available)」とすれば良いということになります。
そこで、コードを追加します。
$(function(){
$('ul.bogo-language-switcher li.en-US.en a').each(function(){
var txt= $(this).html();
$(this).html(txt.replace('英語 (米国)','English'));
});
$('ul.bogo-language-switcher li.en-US.en').each(function(){
var txt= $(this).html();
$(this).html(txt.replace('英語 (米国)','English(not available)'));
});
});
条件分岐を使えばもっと綺麗に書けるのでしょうか。しかし、処理の順番に着目してコードを並べるのも悪い手ではないでしょう。
これで、リンクがある場合には「English」と表示され、リンクがない場合には「English(not available)」が正しく表示されました。
まとめ
今回、クラス指定をやたら細かくしていますが、プラグインに対して完全に理解している訳ではないので、指定箇所以外に影響が及ぶことがないことを意図しています。
これで表示は便利になりましたが、肝心の英訳がまだできてません！ここにこだわる時間があればさっさと英訳をはじめなければ…、ということでご参考になさってください。