翻訳の記入がある場合だけその言語で表示する多言語機能を自作する

はい、みなさんこんにちは。ビジネス向けWordPressテーマ「BizVektor/Lightning」開発者のイシカワです。

この記事は WordPress Advent Calendar 2015に参加したかった人達の Advent Calendar 2015において、12月7日の井村さんの記事「WordPressプラグインを作るのが辛い話 – ファンタラクティブ株式会社」に続く12月8日のバトンをすっかり忘れていて14日にようやく公開した次第です。

すみませんすみません・・・。

需要の高まる多言語サイト

今回挑戦するのは「多言語サイト」です！

多言語サイトと言えば今まで自分が使っていたのは「Multisite Language Switcher」か「Bogo」です。

Multisite Language Switcher はマルチサイト化して１言語１サイトにするタイプ。

今回は本当はこれを使う予定だったのですが、このプラグインの欠点として、英語メインで日本語も対応サイトの場合、日本語訳が無い場合も日本語サイトにはページを作成して、英語サイトの該当ページとのひも付けを行うという作業が必要になります。

それは手間になるし、手間が増えると使われないからという事で、改善要望が・・・

そこで「Bogo」を検討しました。BogoはContactform7で世界的に有名な三好さんが作った多言語プラグインです。

こにらはシングルサイトで利用可能で、メインが英語ならそれに連携する日本語の記事を登録していくタイプです。

ただし、例えば固定ページなら、固定ページ一覧の中に同じページが各言語分登録される事になってしまいますが、今回別で固定ページにも編集制御機能のカスタマイズが必要なため、同じページの投稿が複数あると都合が悪い・・・。

結局のところ

メインは英語
日本語の記入がある場合、表示言語が日本語だったらその値を表示

って機能があればいいので・・・

自作しましょう！

やること

カスタムフィールドで日本語のタイトルと本文欄を作る
カスタムフィールドに入力があったらその内容で差し替える
言語切替ボタンを作る

カスタムフィールドで日本語のタイトルと本文欄を作る

カスタムフィールドは・・・面倒なのでプラグインで設定します。

キタジマさんの Smart Custom Field を使います。Advanced Custom Field はデータの保存形式がオレオレ仕様だったりするので、最近はカスタムフィールド使う時は自作か Smart Custom Field でやってます。

とりあえず日本語用のカスタムフィールドを

タイトルのフィールド: lang_title_ja
本文のフィールド名: lang_content_ja

で作っておきます。

カスタムフィールドに入力された内容でタイトルを書き換えてみる

まずはカスタムフィールドの値でタイトルを書き換えてみましょう。
こんな感じでいけるかと思います。

function replace_title($title,$id){
    // カスタムフィールドに入力された日本語のタイトルを取得
    $title_ja = get_post_meta($id,'lang_title_ja',true);
    // 日本語タイトルが入力されていたら
    if ( $title_ja ) {
        // タイトルを日本語に差し替え
        $title = $title_ja;
    }
    // 値を返す
    return $title;
}
add_filter( 'the_title', replace_title',10,2 );

これだと、英語を表示させたくても問答無用で日本語になってしまいます。

現在表示させたい言語の状態を取得してタイトルを切り替える

表示言語の切り替えにはWordPressの言語の情報を利用します。

管理画面の「設定」→「一般」を見てみると、サイトの言語が選べるようになっています。

これが日本語になっている場合は、管理画面の項目が日本語になりますし、英語にすれば英語に切り替わります。

この言語情報は例えば

$locale = get_locale();

のように取得できます。

日本語であれば、$locale には ja が返ってきます。

なので、この値で条件分岐を加えると

function replace_title($title,$id){
    $locale = get_locale();
    // 日本語だったら
    if( $locale == 'ja') {
        // カスタムフィールドに入力された日本語のタイトルを取得
        $title_ja = get_post_meta($id,'lang_title_ja',true);
        // 日本語タイトルが入力されていたら
        if ( $title_ja ) {
            // タイトルを日本語に差し替え
            $title = $title_ja;
        }
    }
    // 値を返す
    return $title;
}
add_filter( 'the_title', 'replace_title',10,2 );

こんな感じになります。

これで言語が日本語の時にだけタイトルが日本語に書き換わります。

表示言語切り替えをする

で、これだと、表示言語を切り替えるのは管理画面だけなので、公開画面側にも言語切替ボタンを設置します。

とりあえずHTMLはこんな感じでマークアップしてみます。
header.phpなどに書いてみるとよいでしょう。

<ul class="lang_list">
<li id="lg_bt_en"><a href="#">ENGLISH</a></li>
<li id="lg_bt_ja"><a href="#">JAPAN</a></li>
</ul>

もちろんこれだけだと何もおきません。

ENGLISH/JAPANボタンが押された時に、押された言語をcookieに保存します。

まずはcookieを使えるようにjQuery.cookieを読み込みます。

function load_cookie() { // cookieを利用するためにjQuery.cookieを読み込み wp_enqueue_script( 'jquery_cookie', get_template_directory_uri(). '/js/jquery.cookie.js', array( 'jquery' ), 'kurudrive_suteki', true ); } add_action( 'wp_enqueue_scripts', 'load_cookie' );

上記のコードだとテーマディレクトリの/js/ディレクトリにjQuery.cookieをアップする事が前提です。

※ jquery.cookie.js はWordPressに標準で入っていて、別の書き方をすれば簡単に呼び出せるんじゃないかと思ったりもしますがどうなんでしょう？とりあえず今回は調べてません！

とりあえずcookieを使う準備が整ったので、言語切替ボタンが押された時に、その情報をcookieに保存します。

/*-------------------------------------------*/
/*  言語ボタンを押された時に言語のクッキーの入れ替え＆再読み込み
/*-------------------------------------------*/
function lang_switch_action(){
    // 管理画面じゃない場合
    if ( !is_admin()){ ?>

<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function($){

    // 言語スイッチャーに対して、現在の表示言語にstrongタグを追加
    var lang = jQuery.cookie("lang");
    if ( lang == 'ja' ){
        jQuery('#lg_bt_ja a').wrap('<strong></strong>');
    } else {
        jQuery('#lg_bt_en a').wrap('<strong></strong>');
    }

    jQuery('#lg_bt_ja').click(function(){
        var lang = jQuery.cookie("lang");
        if ( lang != 'ja' ){
            jQuery.cookie("lang", "ja", { expires: 7,path: "/" });
            setTimeout("location.reload()",5);
            lang = jQuery.cookie("lang");
        }
    });
    jQuery('#lg_bt_en').click(function(){
        var lang = jQuery.cookie("lang");
        if ( lang != 'en-US' ){
            jQuery.cookie("lang", "en-US", { expires: 7,path: "/" });
            setTimeout("location.reload()",5);
            lang = jQuery.cookie("lang");
        }
    });
});
//]]>
</script>
    <?php } // if ( !is_admin()){
}
add_action( 'wp_footer', 'lang_switch_action' );

で、cookieに言語切替ボタンで押された言語情報が保存されるので、これを受け取って、WordPressでの言語設定を書き換えます。
WordPressの表示言語情報は get_locale() で取得出来ますが、この値は ‘locale’ のフィルターフックで書き換えられるので
下記のように書き換えます。

function locale_custom($locale){
    // cookieに保存されている言語情報を取得して書き換え
    if(isset($_COOKIE['lang'])) {
        $locale = $_COOKIE['lang'];
    }
    return $locale;
}
add_filter( 'locale', 'locale_custom' );

これで、完成です。

タイトルだけではなくて本文も含めて書くとこんな感じかと思います。

ただし・・・

Google様にとっては、日本語だの英語だのって完全にコロコロ切り替わられたらまったく相手にされなくなるんじゃないかと思うので、検索に関係ない内部サイトとかじゃないと使いみちがないかなと思ったりする今日この頃・・・。

と、いう事で明日（？）はWordPressカルタって何？〜この３年を振り返る〜です！

この記事を書いた人

石川栄和代表取締役

名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。
企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わる。
[ 著書 ]
・いちばんやさしいWordPressの教本（共著）
・現場でかならず使われているWordPressデザインのメソッド（共著）
[ 最近のWordPressコミュニティでの活動 ]
WordCamp Tokoy 2023 セッションスピーカー
WordCamp Asia 2023 セッションスピーカー（LT）
WordCamp Niigata 2019 セッションスピーカー
WordCamp Haneda 2019 セッションスピーカー
WordCamp Osaka 2018 セッションスピーカー
WordCamp Kyoto 2017 セッションスピーカー
他

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。

今すぐチェック

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。

VK パターンライブラリを今すぐチェック

ブロックエディターで

ABテストを

自由に作成できる VK AB Testing

VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。

VK AB Testing を詳しく見る

AB テストでクリック率 &
売上アップ！