本文へジャンプ

WordPress×Bogoでスムーズな切り替えを実現する
自由度の高い多言語サイト制作

Posted by OYM

こんにちは、エンジニアのOYMです。
今回は実務でWordPressへの組み込み時に、悩んだ内容をシェアできればと思います。

今回の課題

多言語化の国産プラグイン「Bogo」はシンプルで使いやすいプラグインです。追加するだけで簡単に多言語サイト用の記事作成・管理が行えるようになります。しかし、実務では「英語の時はテンプレートを変えたい」「翻訳がないページでも適切に言語を切り替えたい」という細かな制御が必要になる場面があります。
今回は、そんなBogoの運用をワンランクアップさせる、テンプレート自動振り分けとURLスイッチ機能のカスタマイズについて紹介できればと思います!

Bogoの編集画面

Bogoは投稿を独立させて管理するため、基本的にはWordPressのテンプレート優先順位に従います。
しかし、実務では以下のような要望が出てくることがあります。

  • 「英語ページは専用のテンプレートで表示させたい」
  • 「翻訳ページが存在しない場合、トップや一覧へスマートに飛ばしたい」

これらの課題を解消するために実装したコードがこちらです。

コード解説

言語に応じてテンプレートを自動で切り替える

まず、ロケールやクエリ変数を見て、読み込むテンプレートファイルを動的に変更します。
template_includeフィルターを使うのがポイントです。

fuction.php

/**
 * Bogo言語切り替え機能:言語に応じてテンプレートを切り替え
 */

function satas_template_include($template) {
  $current_locale = get_locale();
  $lang_query_var = get_query_var('lang');

  // 英語ロケール、またはクエリ変数が 'en' の場合を判定
  $is_en = ($current_locale === 'en_US') || ($lang_query_var === 'en');

  if (!$is_en) return $template;

  // ページの種類ごとに -en.php があれば優先的に読み込む

  if (is_single()) {
    $en_template = locate_template('single-en.php');
    if ($en_template) return $en_template;
  }

  if (is_page()) {
    $en_template = locate_template('page-en.php');
    if ($en_template) return $en_template;
  }

  // アーカイブやフロントページも同様に判定...(後述)

  return $template;
}

add_filter('template_include', 'satas_template_include', 99);
}

こうすることで、テーマ内に single-en.php や page-en.php を置くだけで、英語版専用のレイアウトを適用できるようになります。
locate_templateを使っているので、子テーマでの上書きにも対応できるのがエンジニア的に嬉しいところです。

「言語スイッチURL」の生成

次に、サイト共通のヘッダーなどで使う「言語切り替えボタン」のリンク先を制御する関数です。
単に /en/ に飛ばすのではなく、「今見ているページの翻訳版があるか?」を判定して、なければ「一覧」や「トップ」へ誘導する、UXを考慮した設計にしました。

function.php

/**
 * 言語切り替えURLを取得する関数
 */

function satas_get_language_switch_url($target_locale = 'en_US') {

  // 翻訳ペアの取得(Bogoの関数を活用)

  if (is_single() || is_page()) {
    $current_post_id = get_the_ID();

    if (function_exists('bogo_get_post_translations')) {
      $translations = bogo_get_post_translations($current_post_id);

      // 翻訳が存在すればそのURLを返す
      if (isset($translations[$target_locale])) {
        return get_permalink($translations[$target_locale]);
      }
    }

    // 翻訳がない場合のフォールバック
    return ($target_locale === 'en_US') ? home_url('/en/news/') : home_url('/news/');
  }

  // アーカイブページやトップページの処理...
}

実装のポイント

  • Bogoの標準関数 bogo_get_post_translations を優先し、プラグインが持っている情報を最大限活用させて二重管理を防いでいます。
  • 投稿以外のページでも、URLを判定して /en/ を付与したり削除したりすることで、シームレスな遷移を実現しました。

まとめ

Bogoは非常に「素筋が良い」プラグインです。 そのまま使っても便利ですが、今回のようにtemplate_includebogo_get_post_translationsを組み合わせることで、大規模なサイトや特殊なデザインのサイトにも柔軟に対応できるようになります。

「多言語化はプラグインにおまかせ」ではなく、「プラグインの仕組みを活かして、コードで挙動を制御する」。
これが、保守性の高いWeb制作への近道かもしれませんね。

近年では進歩したAIが容易くコードを書いてくれる時代になりましたが、そんな中でも要望に合わせて機転をきかせ、対応できる発想と工夫が必要だと改めて感じ、今後も養っていくべきだと思いました。

Recent Entries
MD EVENT REPORT
What's Hot?