Wordpress

bogo基本設定、ボタン変更、カスタム投稿タイプ対応【無料で使えるWordPress多言語化プラグイン】

記事内に商品プロモーションを含む場合があります
おなやみにゃん
おなやみにゃん
WordPressのサイトを、多言語化したいにゃん
にゃん花子
にゃん花子
はいはい、無料で使えるプラグインbogoを使って挑戦にゃん

今回は、Wordpressを多言語化できるプラグインbogoを使用して、3ヶ国語の多言語化する方法をご紹介します。

最初の基本的な設定と、よくあるカスタマイズまでご紹介します。

この記事でわかること
  1. WordPressを無料で多言語化する方法
  2. bogoの基本設定
  3. bogoのよくあるカスタマイズ(ボタン変更、カスタム投稿対応)

WordPressを無料で多言語化!bogoとは?

Bogoは、コンタクトフォーム7を開発した会社による、多言語化プラグインです。

無料で使える上に、対応言語も多く、カスタマイズも効くためオススメです。動作も軽量で、他のプラグインに干渉せず動いてくれる点もポイントです。

多言語のURL階層

Bogoで多言語化した場合、本体の種言語サイトから1階層言語用の階層が増えます。そのため、URLの階層は以下のような形になります。

例えば主言語(日本語サイト)のURLが https://demodemo.okimono.life/ の場合に、
Bogoで多言語化したい場合(英語表記)は https://demodemo.okimono.life/en/ となります。

このように、言語ごとに1ページあたり「主言語」「他言語」で、オリジナルのページが増えていくような形となります。

多言語ページを1クリックで作成できる

Bogoでは、まず「主言語」でページを作成し、そのページから1クリックで他の言語ページを作成できます。そのため、主言語のページと、派生した他の言語ページが紐付けられているため、迷子になることがありません。

※手間なくすぐに他の言語ページが作成できますが、主言語が日本語であった場合に、どのページも必ず日本語のページが必要となります。

メニューも多言語対応が可能

固定ページや投稿ページだけではなく、メニューも多言語対応されます。

チェックボックスで管理できるため、簡単にメニューの表示・非表示も管理できます。

言語切り替えが用意されている

Bogoはショートコードで追加できる、言語切り替えボタンが用意されています。そのため、サイドバーなどへ簡単に言語切り替えのボタンを設置できます。

Bogoのインストール

さっそくBogoをインストールしていきます。

ダッシュボード > プラグイン > 新規プラグインを追加 から、Bogoを検索して、「今すぐインストール」 → 「有効化」 に進みます。

Bogoの基本設定

Bogoのインストールができたら、さっそく基本の設定をしましょう。

Bogoの設定は、ダッシュボード > 言語 から行います。

翻訳したい言語パックをインストールする

「言語パック」をクリックし、言語パックの設定画面へ遷移します。

デフォルトは「日本語 ja」「英語(アメリカ)en_US」が選択された状態のため、ご自身の使用したい言語を選んで「有効化」しましょう。

以上で基本設定は完了です!とっても簡単でしたね。

続いて、多言語用のメニューや言語切り替えのボタンを設置していきましょう。

多言語用のメニューを作成する

メニューの切り替えは、Wordpressのメニュー機能を使って可能です。

ダッシュボード > 外観 > メニュー へ進み、新しくメニューを作成します。

メニューの登録時に、言語のチェックボタンが表示されます。対象言語で表示したいメニューにはチェックを入れます。

bogoの言語切り替えボタンを設置する

言語の切り替えボタンは、ショートコードで表示することができます。表示したい箇所に下記のコードを記載すれば、表示されます

[bogo]

言語切り替えボタンのカスタマイズ(国旗の非表示)

言語スイッチャーのボタンですが、デフォルトのままだと、デザイン性に欠けるためカスタマイズしていきます。

まずよくあるカスタマイズが「国旗」を非表示にすること。
こちらはfunction.phpに、下記のコードを追記すればOKです。

// Bogoの言語スイッチャーの国旗を非表示
add_filter( 'bogo_use_flags','bogo_use_flags_false');
function bogo_use_flags_false(){
  return false;
}

言語切り替えボタンのカスタマイズ(言語表示の変更)

もう1つ、あるあるカスタマイズが、表示言語の表記変更です。English(United States)はちょっと長いですよね。

こちらも、国旗と同じ様にfunction.phpに、下記のコードを追記すればOKです。

// Bogoの言語スイッチャーの表記を変更
add_filter('bogo_language_switcher_links', function ($links) {
    for ($i = 0; $i < count($links); $i++) {
        if ('ja' === $links[$i]['locale']) { //日本語の場合
            $links[$i]['title'] = 'JP'; //JPが変更後のテキスト
            $links[$i]['native_name'] = 'JP'; //JPが変更後のテキスト
        }
        if ('en_US' === $links[$i]['locale']) { //英語の場合
            $links[$i]['title'] = 'EN'; //ENが変更後のテキスト
            $links[$i]['native_name'] = 'EN'; //ENが変更後のテキスト
        }
		   if ('zh_CN' === $links[$i]['locale']) { //简体中文の場合
            $links[$i]['title'] = '简体'; //简体が変更後のテキスト
            $links[$i]['native_name'] = '简体'; //简体が変更後のテキスト
        }
		   if ('zh_HK' === $links[$i]['locale']) { //香港の場合
            $links[$i]['title'] = '繁体'; //繁体が変更後のテキスト
            $links[$i]['native_name'] = '繁体'; //繁体が変更後のテキスト
        }
    }
    return $links;

多言語のページを作成する

固定ページ

固定ページで、主言語と多言語(翻訳語のページ)を作ります。Bogoの性質上、必ず主言語で制作したページが必要となります。

まず、通常の固定ページと同様に ダッシュボード > 固定ページ > 新規固定ページを追加 から、新しい固定ページを制作します。

通常の固定ページ制作と同じですが、アイキャッチの上辺りに「言語」が追加されています。

こちらは、まだ主言語(今回は日本語)のページが無い状態のため、翻訳ページが制作できません。試しに、適用なタイトルを入れ、ページを公開します。
すると…言語の箇所をご覧いただくと、Bogoで設定した言語の翻訳ページが、制作できるようになります。

こちらの「◯◯の翻訳を作成」をクリックし、各言語の翻訳ページを制作します。
例えば『中国語(中国)の翻訳を作成』をクリックすると、ボタンが下記の様に変更されます。

タイトルが「ああああ」のページの、中国語ページを制作するため、赤囲みの箇所をクリックします。すると、Bogoで自動制作された「ああああ」の中国語用の固定ページの編集画面に遷移します。

後は、固定ページに中国語に翻訳した内容を記載すればOKです。

固定ページの一覧を見ると、下記のように記載されるため、「何語のページ?」かすぐにわかるようになっています。

投稿ページ

投稿ページも、上記の固定ページと同じように、翻訳ページを制作できます。手順は固定ページと同じため割愛させていただきます。

カスタム投稿タイプを多言語対応にする方法

にゃん花子の場合に、もう1つカスタマイズしなければならなかったのが、カスタム投稿の多言語化でした。
今回は、Custom Post Type UIというアプリを使用して、カスタム投稿タイプを作成しています。

こちらもカスタム投稿タイプのスラッグを指定することで、Bogoに対応できます。
こちらも、function.phpに、下記のコードを追記すればOKです。

//カスタム投稿をBOGO対応に
function my_localizable_post_types( $localizable ) {
	$custom_post_types = array('スラッグ','スラッグ','スラッグ'); // 自分のカスタム投稿タイプ名を入れる
    return array_merge($localizable,$custom_post_types);
}
add_filter( 'bogo_localizable_post_types', 'my_localizable_post_types', 10, 1 );

カスタム投稿タイプで、通常通り投稿を作成すると、言語切り替えができるようになっています。

国旗表記、言語表記、カスタム投稿タイプの全部のコード

今回は国旗表記、言語表記、カスタム投稿タイプと3つのカスタマイズを行っています。全てfunction.phpに追記する内容となるため、3つまとめたコードも最後にご紹介しておきます。

//カスタム投稿をBOGO対応に
function my_localizable_post_types( $localizable ) {
	$custom_post_types = array('スラッグ','スラッグ','スラッグ'); // 自分のカスタム投稿タイプ名を入れる
    return array_merge($localizable,$custom_post_types);
}
add_filter( 'bogo_localizable_post_types', 'my_localizable_post_types', 10, 1 );
// Bogoの言語スイッチャーの国旗を非表示
add_filter( 'bogo_use_flags','bogo_use_flags_false');
function bogo_use_flags_false(){
  return false;
}
// Bogoの言語スイッチャーの表記を変更
add_filter('bogo_language_switcher_links', function ($links) {
    for ($i = 0; $i < count($links); $i++) {
        if ('ja' === $links[$i]['locale']) { //日本語の場合
            $links[$i]['title'] = 'JP'; //JPが変更後のテキスト
            $links[$i]['native_name'] = 'JP'; //JPが変更後のテキスト
        }
        if ('en_US' === $links[$i]['locale']) { //英語の場合
            $links[$i]['title'] = 'EN'; //ENが変更後のテキスト
            $links[$i]['native_name'] = 'EN'; //ENが変更後のテキスト
        }
		   if ('zh_CN' === $links[$i]['locale']) { //简体中文の場合
            $links[$i]['title'] = '简体'; //简体が変更後のテキスト
            $links[$i]['native_name'] = '简体'; //简体が変更後のテキスト
        }
		   if ('zh_HK' === $links[$i]['locale']) { //香港の場合
            $links[$i]['title'] = '繁体'; //繁体が変更後のテキスト
            $links[$i]['native_name'] = '繁体'; //繁体が変更後のテキスト
        }
    }
    return $links;
});
ABOUT ME
にゃん花子
「コード書くには苦手」「コピペで動けば、それでOK」な、ノンプログラマー向け | マニアック・ピンポイントなWordpress TIPSが多め|文系から独学でWeb屋さんになった人|インフラ分野のわかるWebディレクター|主にWordpressのサイト立ち上げ、リプレイス、運用をしています|PC画面にブツブツ呟きながら、制作するのが好きです|坐骨神経痛とぎっくり腰経験済 | ブログ収益を保護猫活動に使いたいので、頑張る人 | 夜型人間から朝方に切り替え中|小学1年生の壁に負けじと2024年も奮闘します

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

wp-puzzle.com logo