Wordpress

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

にゃん花子

WordPressのサイトを、多言語化したいにゃん

はいはい、無料で使えるプラグインbogoを使って挑戦にゃん

今回は、Wordpressを多言語化できるプラグインbogoを使用して、日本語サイトを多言語化する方法をご紹介します。

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

このblogでわかること
  1. WordPressを無料で多言語化する方法
  2. bogoの基本設定
  3. bogoのカスタム投稿対応
  4. bogo言語切り替えボタンのカスタマイズ例

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

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

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

多言語のURL階層

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

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

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

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

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

手間なく多言語ページができるから便利!
な反面…デメリットとしては、主言語が日本語であった場合に、どのページも必ず日本語のページが必要になるにゃん。
日本語が主言語の場合は、英語だけページが欲しくても、「必ず対応する日本語ページを作る」必要があるにゃん。

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

固定ページや投稿ページだけではなく、メニューも多言語対応されます。
WordPressのデフォルトのメニュー作成画面から、チェックボックスで多言語の表記管理できるため、簡単にメニューの表示・非表示も管理できます。

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

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

Bogoのインストール

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

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

Bogoの基本設定

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

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

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

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

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

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

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

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

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

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

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

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

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

1[bogo]

ショートコードを追加して、表示するとこのような形で、ボタンが表示されます。

言語スイッチャーのボタンですが、デフォルトではデザイン性に欠けるため、カスタマイズしていきます。
カスタマイズしたイメージは、このような形。CSSも整えれば、オシャレな切り替えボタンもできますよ!

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

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

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

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

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

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

1// Bogoの言語スイッチャーの表記を変更
2add_filter('bogo_language_switcher_links', function ($links) {
3    for ($i = 0; $i < count($links); $i++) {
4        if ('ja' === $links[$i]['locale']) { //日本語の場合
5            $links[$i]['title'] = 'JP'; //JPが変更後のテキスト
6            $links[$i]['native_name'] = 'JP'; //JPが変更後のテキスト
7        }
8        if ('en_US' === $links[$i]['locale']) { //英語の場合
9            $links[$i]['title'] = 'EN'; //ENが変更後のテキスト
10            $links[$i]['native_name'] = 'EN'; //ENが変更後のテキスト
11        }
12		   if ('zh_CN' === $links[$i]['locale']) { //简体中文の場合
13            $links[$i]['title'] = '简体'; //简体が変更後のテキスト
14            $links[$i]['native_name'] = '简体'; //简体が変更後のテキスト
15        }
16		   if ('zh_HK' === $links[$i]['locale']) { //香港の場合
17            $links[$i]['title'] = '繁体'; //繁体が変更後のテキスト
18            $links[$i]['native_name'] = '繁体'; //繁体が変更後のテキスト
19        }
20    }
21    return $links;

CSSで言語切り替えボタンを整える

先ほどイメージとして紹介した、黒と灰色の正方形のボタンにするには、CSSも変更が必要です。参考までにCSSコードもご紹介しておきます。

(デモサイトのテーマはTheThorを使用しています。)

1.t-headerCenter .menuBtn__link::after {
2		content: "LANG";
3	}
4.t-headerCenter .menuBtn__link::after {
5    font-family: initial;
6}
7	.widget>ul.bogo-language-switcher{
8		border: none;
9		text-align: center;
10	}
11ul.bogo-language-switcher li{
12		display: inline-block;
13		width: 60px;
14		height: 60px;
15		font-size: 13px;
16		background: #999999;
17		overflow: visible;
18		cursor: pointer;
19	}
20	ul.bogo-language-switcher  li.current{
21		background: #2d2d2d;
22	}
23	ul.bogo-language-switcher li span{
24		display: block;
25		text-align: center;
26		line-height: 60px;
27		color: #ddd;
28		position: relative;
29	}
30ul.bogo-language-switcher li a{
31	display:block;
32}

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

固定ページ

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

多言語対応の固定ページ 制作STEP

主言語でページを作成する

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

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

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

画像に alt 属性が指定されていません。ファイル名: -2024-01-25-9.25.29.png
言語メニューから、多言語化したいページを選択、多言語ページを作成する。

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

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

作成した多言語ページに、内容を記載する

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

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

投稿ページ

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

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

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

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

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

カスタム投稿タイプのスラッグは、Custom Post Type UIの管理画面から確認できます。
ダッシュボード > CPT UI > 登録済み から、bogoに対応させたいカスタム投稿のnameがスラッグになります。

もしnameが日本語などになっている場合は、「投稿タイプの追加と編集」から、英語表記に変更してください。

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

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

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

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

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