https://idea-hack.com/blog/38915/
Bogoで多言語展開をしているときに、ヘッダーに切り替えボタンを実装する方法

Bogoで多言語展開をしているときに、ヘッダーに切り替えボタンを実装する方法

Bogoを使って多言語サイトを展開するときに便利な「各言語のトップページへの切替リスト出力機能」の作り方を紹介しています。

WordPress関連で多言語サイトの案件がありました。

多言語サイトは、企業ブランディングでも個人ブランディングでも、ターゲットを広めるために非常に重要です。それだけ潜在客が増えます。

私はWordPressのデフォルトのデータベース構造を変更するようなプラグインは嫌いなので、「Bogo」というプラグインを利用しています。

このプラグインはpost_meta(要するにカスタムフィールド)に言語に関する設定を入れているだけなので、WordPressのコア機能を改造せずに使えます。

このプラグインの良さについてはまた別の機会に述べるとして、このプラグインを使うにあたって一つだけ機能を自作する必要がありました。

各言語のトップページへの切替リスト出力機能がない

Bogoはもちろん言語切替Widgetを持っています。

php
<?php echo do_shortcode( '[ bogo ]' ); ?>

これは次のような特徴を持っています。

  • そのページの言語ごとのページへのリンクを出力してくれる
  • 対応言語が作成されているときは、リンク付きで表示される
  • 対応言語が作成されていないときは、テキストのみで表示される

しかし、私が求めていた言語切替機能は次のとおりです。

  • どのページにいても、各言語のトップページへのリンクを出力する

各言語のトップページへの切替リスト出力機能の自作

該当する機能をBogoが持っていなかったので、仕方なく自作することにしました。

とはいえ、Bogoは便利な関数が多く用意されており、基本的にはBogoの組み込み済み関数を利用して関数を作るだけで完了しました。

完成済みコード

php
function bogo_available_url_for_menu( $responsive_class ) {
	$bogo_available_locales = bogo_available_locales();
	$bogo_get_default_locale = array( bogo_get_default_locale() );
	$bogo_available_locales = array_diff( $bogo_available_locales, $bogo_get_default_locale );
	?>
	<div class="btn-group <?php echo esc_attr( $responsive_class ); ?>">
  	<button type="button" class="btn btn-secondary btn-light btn-sm dropdown-toggle" data-toggle="dropdown"><?php echo esc_html__( 'LANG', 'wplaboaries' ); ?></button>
	  <div class="dropdown-menu dropdown-menu-right">
	    <a class="dropdown-item" href="<?php echo esc_url( bogo_get_url_with_lang( home_url(), '' ) ); ?>"><?php echo esc_html( bogo_get_language( bogo_get_default_locale() ) ); ?></a>
			<?php
			foreach ( $bogo_available_locales as $bogo_available_locale ) {
				?>
				<a class="dropdown-item" href="<?php echo esc_url( bogo_get_url_with_lang( home_url(), bogo_lang_slug( $bogo_available_locale ) ) ); ?>"><?php echo esc_html( bogo_get_language( $bogo_available_locale ) ); ?></a>
				<?php
			}?>
	  </div>
	</div>

この関数を好きなところに置けば、各言語のトップページへのリンクを出力してくれます。

表示例

私のサイトでも適用済みで、下記のようになります。

【補足】
スタイルはBootstrap4に頼っているので、Bootstrap4を利用していない人はスタイル調整が必要です。
ヘッダーに置くことを想定して、ドロップダウンで出るようにしています。

コードの作業内容

STEP1
有効化済み言語情報を取得
$bogo_available_locales = bogo_available_locales();
STEP2
デフォルト言語だけ除外する
$bogo_get_default_locale = array( bogo_get_default_locale() );
$bogo_available_locales = array_diff( $bogo_available_locales, $bogo_get_default_locale );
STEP3
デフォルト言語のリンクを出力
<a class="dropdown-item" href="<?php echo esc_url( bogo_get_url_with_lang( home_url(), '' ) ); ?>"><?php echo esc_html( bogo_get_language( bogo_get_default_locale() ) ); ?></a>

デフォルト言語は「 bogo_available_locales() 」を使って出力した場合、
https://example.com/en
のような形式になります。
出力させたいのは
https://example.com
の形式なので、デフォルト言語だけ別に出力させる必要があります。
STEP2の作業を行う理由も同様です。
STEP4
それ以外の言語のリストを出力する
<?php foreach ( $bogo_available_locales as $bogo_available_locale ) { ?> <a class="dropdown-item" href="<?php echo esc_url( bogo_get_url_with_lang( home_url(), bogo_lang_slug( $bogo_available_locale ) ) ); ?>"><?php echo esc_html( bogo_get_language( $bogo_available_locale ) ); ?></a> <?php }?>

まとめ

これで、切り替えボタンを使用可能になります。

ちなみに、Bogoのテーマを組み込んだテーマを販売しています。こちらも参考にしてください。

Bogo対応のテーマ