3月 29th, 2015|ブログ|

 シンプルで便利な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を使ったカスタマイズが便利になります。

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)」が正しく表示されました。

まとめ

 今回、クラス指定をやたら細かくしていますが、プラグインに対して完全に理解している訳ではないので、指定箇所以外に影響が及ぶことがないことを意図しています。

 これで表示は便利になりましたが、肝心の英訳がまだできてません!ここにこだわる時間があればさっさと英訳をはじめなければ…、ということでご参考になさってください。

最後までお読み頂いてありがとうございます。
 一生懸命書いたオリジナルの文章なのでコピーはしないでくださいね。IPアドレスとコピーされた場所を特定できるシステムになっています。(さらに詳しく)