WordPressで多言語サイト作成！Bogoの使い方・カスタマイズ方法を徹底解説

2024年3月21日2024年6月26日

【PR】この記事には広告を含む場合があります。

この記事では、WordPressで多言語サイトを作成するときに使用できる、「Bogo」というプラグインの設定方法について解説しています。

この記事を読めば、WordPressを使用したWebサイトで、

無料で多言語化させたい！
多言語化することになったけど、実装できるか不安
Bogoというプラグインで設定できるらしいけど使い方がわからない

といったことを解決できます！

Bogoの設定方法を早く知りたい！という方はこちらまで読み飛ばして下さい。

Bogoとは？

Bogoは、WordPressで簡単に多言語サイトを作成できるプラグインです。
無料で利用することができ、簡単に多言語サイトの構築が可能です。

Bogoの特徴

Bogoのおすすめポイントや注意点について紹介していきます。

Bogoのおすすめポイント

Bogoを利用するおすすめのポイントを3つご紹介します。

・ワンクリックで別言語ページを作成
・簡単な言語切り替え
・SEOに強いディレクトリ（URL）構造

ワンクリックで別言語ページを作成

Bogoを使うことで、固定ページや投稿ページを簡単に多言語化できます。

作成したページをベースに、ワンクリックで異なる言語のページを作成することが可能です。

簡単な言語切り替え

Bogoには言語スイッチャーが備わっており、ユーザーは簡単に言語を切り替えることができます。

対応する言語ページが存在しない場合は、言語スイッチャーをクリックできない仕様になっています。

SEOに強いディレクトリ（URL）構造

Bogoでは、言語ごとに異なるディレクトリ（URL）が作成されるため、SEOにとって有利な構造になっています。

テンプレートファイル内で条件分岐を作成し切り替えるため、新たにテンプレートファイルを作成する必要はありません。（英語のページの場合、ディレクトリがenになりますが、page-en.phpを作成する必要はないということになります。）

メインの言語を日本語にしている場合、トップページは下記のURL構造になります。

【日本語版】
https://moreo.net/

【英語版】
https://moreo.net/en/

下層ページや投稿ページの場合は、下記のようになります。

【日本語版】
https://moreo.net/about

【英語版】
https://moreo.net/en/about

Bogoの注意点

Bogoを使用する際の注意点を2つご紹介します。

・手動での翻訳が必要
・メイン言語以外での単独ページは作成不可

手動での翻訳が必要

Bogoは自動翻訳機能を提供していません。
そのため、すべての翻訳作業を自分で行う必要があります。

メイン言語以外での単独ページ作成不可

Bogoを使用する場合、メイン言語で作成したページをベースにして、他の言語のページを作成します。
つまりメイン言語にないページを、他の言語だけで作成することはできません。

もう少し説明を加えると、まず、
最初に作成するページはすべて日本語のページ（メイン言語のページ）として作成されます。
他の言語のページは、そのメイン言語（今回は日本語）のページをベースに作成することができます。

そのため、英語の会社概要ページだけ作成するといったことはできず、必ず日本語の会社概要ページを作成して、はじめて英語版の会社概要ページも作成できるようになるということです。

Bogoの設定方法

それでは、Bogoの設定方法を見ていきましょう！

1. プラグインをインストールして有効化

【管理画面】→【プラグイン】→【新規追加】で『Bogo』と検索します。そして『Bogo』をインストールして有効化。

2. 使用する言語を有効化

言語パック画面で、Webサイトに使用したい言語を「有効化」
今回の場合、日本語、中国語、英語を使用していきます。

3. 翻訳の作成

WordPress内でメインで作成したページ（日本語の当該ページ）の右側のサイドバーに「言語」というタブが確認できます。
翻訳と記載されている下に、「中国語の翻訳を作成」、「英語の翻訳を作成」と記載されたボタンがあるので、そのボタンをクリック。（有効化した言語が選択できるようになっています。）

各言語の作成ボタンをクリックすると、下書きが複製されます。

これを公開することで、多言語ページの作成完了になります！

4. 条件分岐による使用方法

ここからは、WordPressのオリジナルテーマで作成する際の方法を解説していきます。

phpファイル（テンプレートファイル）内で言語ごとに表示を変えたい時、$localeで分岐させます。

2言語の場合の条件分岐

日本語と英語の2言語を作成する場合

下記のように、$localeに表示させたい言語を記載して、表示の出し分けを実施しています。

<?php $locale = get_locale();
	if ('en_US' == $locale  ) { ?>
<!--英語表示のときの記述-->

<?php } else { ?>
<!--上記以外の表示のとき（日本語）の記述-->
<?php } ?>

3言語の場合の条件分岐

<?php $locale = get_locale();
	if ('zh_CN' == $locale  ) { ?>
<!--中国語表示のとき-->
<?php } else if ('en_US' == $locale  ) { ?>
<!--英語表示のとき-->

<?php } else { ?>
<!--上記以外の表示のとき（日本語）-->
<?php } ?>

[en_US]や[zh_CN]は、Bogoの設定の言語パックの言語一覧に記載されている[ ]の中の文字になります。

具体例で表すと下記のようになります。

<?php get_header(); ?>
<?php $locale = get_locale();
	if ('zh_CN' == $locale  ) { ?>
<!--中国語表示のとき-->
<p>谢谢你</p>
<?php } else if ('en_US' == $locale  ) { ?>
<!--英語表示のとき-->
<p>Thank you</p>
<?php } else { ?>
<!--上記以外の表示のとき（日本語）-->
<p>ありがとうございます</p>
<?php } ?>
<?php get_footer(); ?>

5. 言語スイッチャーの表示

ヘッダーやサイドメニューなどに言語を切り替えるための言語スイッチャを表示させる時は、下記のショートコードを使用します

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

すると下記画像のように国旗の言語が表示されます。

このまま使用してもよいですが、デザイン等カスタマイズしたいと思うので、カスタマイズの方法も紹介していきます。

6. 言語スイッチャーのスタイルを変更

ショートコードで表示されているデフォルトで出力されるコードは下記のようになります。

<ul class="bogo-language-switcher">
　　<li class="en-US en current first">English (United States)</li>
　　<li class="ja last"><a rel="alternate" hreflang="ja" href="http://〜〜/" title="Japanese">日本語</a></li>
</ul>

この出力されるクラス名にCSSを追加することで、色などを変更することが可能です。

この出力自体を変更する場合、例えば、「日本語」→「Japan」など文字そのものを変更したいときには、functions.phpにコードを記載する必要があります。

言語スイッチャーのスタイルのカスタマイズについて

ここからは、functions.phpにコードを上書きして、国旗の非表示や文字そのものを変更したり、言語の順番を変更するなどのカスタマイズ方法をご紹介します。

1. functions.phpでコードを上書き

まず、

plugins/bogo/includes/language-swicher.phpの中の、bogo_language_switcherをコピーして、functions.phpにペースト。

コピーするコードは下記の箇所になります。
（※プラグインの更新により、変更になっている可能性もございます。）

function bogo_language_switcher( $args = '' ) {
	$args = wp_parse_args( $args, array(
		'echo' => false,
	) );

	$links = bogo_language_switcher_links( $args );
	$total = count( $links );
	$count = 0;

	$output = '';

	foreach ( $links as $link ) {
		$count += 1;
		$class = array();
		$class[] = bogo_language_tag( $link['locale'] );
		$class[] = bogo_lang_slug( $link['locale'] );

		if ( get_locale() === $link['locale'] ) {
			$class[] = 'current';
		}

		if ( 1 == $count ) {
			$class[] = 'first';
		}

		if ( $total == $count ) {
			$class[] = 'last';
		}

		$class = implode( ' ', array_unique( $class ) );

		$label = $link['native_name'] ? $link['native_name'] : $link['title'];
		$title = $link['title'];

		if ( empty( $link['href'] ) ) {
			$li = esc_html( $label );
		} else {
			$atts = array(
				'rel' => 'alternate',
				'hreflang' => $link['lang'],
				'href' => esc_url( $link['href'] ),
				'title' => $title,
			);

			if ( get_locale() === $link['locale'] ) {
				$atts += array(
					'class' => 'current',
					'aria-current' => 'page',
				);
			}

			$li = sprintf(
				'<a %1$s>%2$s</a>',
				bogo_format_atts( $atts ),
				esc_html( $label )
			);
		}

		$li = sprintf(
			'<span class="bogo-language-name">%s</span>',
			$li
		);

		if ( apply_filters( 'bogo_use_flags', true ) ) {
			$country_code = bogo_get_country_code( $link['locale'] );

			$flag = sprintf(
				'<span class="bogoflags bogoflags-%s"></span>',
				$country_code ? strtolower( $country_code ) : 'zz'
			);

			$li = sprintf( '<li class="%1$s">%3$s %2$s</li>', $class, $li, $flag );
		} else {
			$li = sprintf( '<li class="%1$s">%2$s</li>', $class, $li );
		}

		$output .= $li . "\n";
	}

	$output = sprintf(
		'<ul class="bogo-language-switcher list-view">%s</ul>',
		$output
	);

	$output = apply_filters( 'bogo_language_switcher', $output, $args );

	if ( $args['echo'] ) {
		echo $output;
	} else {
		return $output;
	}
}

2. ショートコードの関数名の変更

コピーしたコード内の「 bogo_language_switcher 」を「my_language_switcher」に変更（変更するのは「my_language_switcher」でなく、ご自身のわかりやすい関数名でも問題ないです。）

コード内に2箇所あるので2箇所とも変更します。
1箇所目：先頭
2箇所目：下の方の下記コード

$output = apply_filters( 'bogo_language_switcher', $output, $args );

3. ショートコードの変更

元のショートコードを削除し、新しく作成した関数をショートコードに登録します。

// ショートコードを変更
remove_shortcode('bogo', 'bogo_language_switcher'); // 元のショートコード削除
add_shortcode('bogo', 'my_language_switcher'); // 新しい関数をショートコードに登録

1〜３までの内容をまとめると下記のようなコードになります

function my_language_switcher( $args = '' ) {
	$args = wp_parse_args( $args, array(
		'echo' => false,
	) );

	$links = bogo_language_switcher_links( $args );
	$total = count( $links );
	$count = 0;

	$output = '';

	foreach ( $links as $link ) {
		$count += 1;
		$class = array();
		$class[] = bogo_language_tag( $link['locale'] );
		$class[] = bogo_lang_slug( $link['locale'] );

		if ( get_locale() === $link['locale'] ) {
			$class[] = 'current';
		}

		if ( 1 == $count ) {
			$class[] = 'first';
		}

		if ( $total == $count ) {
			$class[] = 'last';
		}

		$class = implode( ' ', array_unique( $class ) );

		$label = $link['native_name'] ? $link['native_name'] : $link['title'];
		$title = $link['title'];

		if ( empty( $link['href'] ) ) {
			$li = esc_html( $label );
		} else {
			$atts = array(
				'rel' => 'alternate',
				'hreflang' => $link['lang'],
				'href' => esc_url( $link['href'] ),
				'title' => $title,
			);

			if ( get_locale() === $link['locale'] ) {
				$atts += array(
					'class' => 'current',
					'aria-current' => 'page',
				);
			}

			$li = sprintf(
				'<a %1$s>%2$s</a>',
				bogo_format_atts( $atts ),
				esc_html( $label )
			);
		}

		$li = sprintf(
			'<span class="bogo-language-name">%s</span>',
			$li
		);

		if ( apply_filters( 'bogo_use_flags', true ) ) {
			$country_code = bogo_get_country_code( $link['locale'] );

			$flag = sprintf(
				'<span class="bogoflags bogoflags-%s"></span>',
				$country_code ? strtolower( $country_code ) : 'zz'
			);

			$li = sprintf( '<li class="%1$s">%3$s %2$s</li>', $class, $li, $flag );
		} else {
			$li = sprintf( '<li class="%1$s">%2$s</li>', $class, $li );
		}

		$output .= $li . "\n";
	}

	$output = sprintf(
		'<ul class="bogo-language-switcher list-view">%s</ul>',
		$output
	);

	$output = apply_filters( 'my_language_switcher', $output, $args );

	if ( $args['echo'] ) {
		echo $output;
	} else {
		return $output;
	}
}

// ショートコードを変更
remove_shortcode('bogo', 'bogo_language_switcher'); // 元のショートコード削除
add_shortcode('bogo', 'my_language_switcher'); // 新しい関数をショートコードに登録

あとはこの中でカスタマイズしたい箇所を修正します

例えば、国旗の非表示の場合は、

apply_filters('bogo_use_flags', true)をfalseに変更することで非表示にできます。

if ( apply_filters( 'bogo_use_flags', false ) ) {

おまけ

今回は、言語の並び替えと表記を変更してみました。
・並び替え（左から表示させたい順番）：中国語、英語、日本語
・表記：中文→CHN、English→Eng、日本語→JPN

また、HTMLの構造も変更してみたコードになります。
よかったら参考にしてみて下さい。

function my_language_switcher($args = '') {
    $args = wp_parse_args($args, array(
        'echo' => false,
    ));

    // 並び替えるための言語コード順序　左から表示させたい順
    $order = ['zh_CN', 'en_US', 'ja'];
    
    $links = bogo_language_switcher_links($args);
    
    // 並び替え
    usort($links, function($a, $b) use ($order) {
        return array_search($a['locale'], $order) - array_search($b['locale'], $order);
    });

    $output = '<ul class="l-header__list">';

    foreach ($links as $link) {
        $class = 'l-header__item';
        if (get_locale() === $link['locale']) {
            $class .= ' current';
        }

        // 言語表示名をカスタマイズ
        if($link['locale'] == "en_US") {
            $label = 'ENG';
        } elseif($link['locale'] == "ja") {
            $label = 'JPN';
        } elseif($link['locale'] == "zh_CN") {
            $label = 'CHN';
        } else {
            $label = $link['title']; // そのほかの場合はデフォルトの文字
        }

        if (!empty($link['href'])) {
            $atts = array(
                'rel' => 'alternate',
                'hreflang' => $link['lang'],
                'href' => esc_url($link['href']),
                'title' => esc_attr($label),
                'class' => 'l-header__link', // aタグにクラス名を付け加える
            );
            $link_attributes = bogo_format_atts($atts);
            $output .= sprintf('<li class="%s"><a %s>%s</a></li>', esc_attr($class), $link_attributes, esc_html($label));
        } else {
            $output .= sprintf('<li class="%s">%s</li>', esc_attr($class), esc_html($label));
        }
    }

    $output .= '</ul>';

    $output = apply_filters('my_language_switcher', $output, $args);

    if ($args['echo']) {
        echo $output;
    } else {
        return $output;
    }
}

// ショートコードを変更
remove_shortcode('bogo', 'bogo_language_switcher'); // 元のショートコード削除
add_shortcode('bogo', 'my_language_switcher'); // 新しい関数をショートコードに登録

CSSを当てていますが、並び順や表記は下記のようになります