WordPressプラグインBogoを使って多言語対応(デモサイトつき)
はじめに
今回WordPressサイトを多言語対応(今回の案件は3言語への対応)をする必要があった際に、色々なサイトを調べ、実際に3言語に対応することができたので、そのアウトプットと、もしこれからWordPressサイトを多言語対応するコーダーさんへ向けて少しでもこの記事が参考になれば嬉しいです。
※デモサイトでは3言語目にアラビア語を選定しています。(習字方向が右横書きの言語で、CSS論理プロパティの理解のアウトプットも兼ねて)
多言語対応でBogoを選んだ理由
WordPressサイトを多言語対応させる上で、さまざまな方法、プラグイン等がある中で、私がBogoを選んだ理由は下記になります。
- 言語スイッチャーで簡単に言語の切り替えができる(必要がある)
- カスタマイズして複数の言語に切り替えができる
- 固定ページのテキストも手動翻訳が可能
- 無料で多言語対応可能(大事)
目標物(デモサイト)
以下のURLよりデモサイトを確認できます。
Githubソースコードはこちら
やりたいこと
- 翻訳文章はクライアントで用意していただいていたので自動翻訳では無く、固定ページも投稿の部分も全て手動で翻訳したい。
- ディレクトリ構成はサブディレクトリにしたい。
日本語)
https://exsample.com/
英語)
https://exsample.com/en
アラビア語)
https://exsample.com/ar
手順
Bogoのインストール
(この辺りは他のブログサイトでも詳しく説明されていたので、簡易で紹介します。)
参考にしたサイトは下記です。
- WordPress管理画面にログイン
ダッシュボードにアクセスし、「プラグイン」→「新規追加」をクリックします。 - Bogoを検索してインストール
検索バーに「Bogo」と入力し、表示されたBogoプラグインを「今すぐインストール」します。 - プラグインを有効化
インストール後、「有効化」をクリックしてプラグインを有効にします。
Bogoの言語設定
- 言語の追加
ダッシュボードの「設定」→「Bogo」に移動し、言語パックから、対応させたい言語（例:日本語、英語、アラビア語）を追加します。 - デフォルト言語の設定
日本語をデフォルト言語として設定します。 - 言語スイッチャーの配置
ウィジェットエリアにBogoの言語スイッチャーを追加し、ユーザーが簡単に言語を切り替えられるようにします。
デモサイトではウィジェットは使用せず、ショートコードでヘッダーの中に配置しています。
<!-- ショートコードでBogoを配置 -->
<?php echo do_shortcode('[bogo]'); ?>
多言語記事の作成
投稿も固定ページも、まず日本語で作成し、その後多言語のページを作っていく流れになります。
言語スイッチャーの国旗を削除してオリジナルのスタイルを当てる
デフォルトでは選択した言語に合わせて国旗がついています。私はこれが不要だったので、functions.phpに下記記述を追加し、削除し、オリジナルのスタイルを当てました。
// 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 ('ar' === $links[$i]['locale']) { // アラビア語の場合
$links[$i]['title'] = 'AR'; // ARが変更後のテキスト
$links[$i]['native_name'] = 'AR'; // ARが変更後のテキスト
}
}
return $links;
});
Bogoの言語切り替えスイッチのスタイルです。
ここはデザインに合わせて自由に編集可能です。実際の案件でもBogoのデフォルトの言語切り替えボタンのスタイルをそのまま使用することはあまり無いのかなと思いました。
/* bogo言語切り替えスイッチのスタイル */
.bogo-language-switcher {
display: flex;
align-items: center;
gap: 0.3em;
}
.t-headerCenter .menuBtn__link::after {
content: "LANG";
}
.widget > ul.bogo-language-switcher {
border: none;
text-align: center;
}
ul.bogo-language-switcher li {
display: inline-block;
width: 30px;
height: 30px;
font-size: 12px;
background: #7a7a7a;
border-radius: 50%;
overflow: visible;
cursor: pointer;
}
ul.bogo-language-switcher li.current {
background: navy;
font-weight: 600;
}
ul.bogo-language-switcher li span {
position: relative;
display: block;
text-align: center;
line-height: 30px;
color: #fff;
}
ul.bogo-language-switcher li a {
display: block;
}
上記スタイルでの完成イメージ
固定のテキストを言語に応じて出し分ける
投稿部分は先ほどの手順で出し分けができるので、次は固定のテキストの出し分けです。
下記で実現可能です。自動翻訳ではないので、おそらくこのコードが1番使用頻度高くなるのと、工数がかかる部分かと思います。
<h2 class="section__title">
<?php
$locale = get_locale();
if ($locale == 'ja'): ?>
<!-- 日本語用のテキスト -->
セクションタイトルが入ります。固定テキストも言語切り替え可能です。
<?php elseif ($locale == 'ar'): ?>
<!-- アラビア語用のテキスト -->
يحتوي على عنوان القسم تبديل اللغة ممكن.
<?php else: ?>
<!-- 英語用のテキスト -->
Contains the section title. Language switching is possible.
<?php endif; ?>
</h2>
現在の選択言語に合わせてリンク先を変える
この部分が色々記事を調べましたがあまり参考になる記述がなく、苦労した部分でもありましたが、ChatGPTに聞きながら実装しました。
ボタンはヘッダーやフッターなどのナビゲーション部分だけでなく、ページの至る所に出てくるので、そのボタン全てを選択言語に合わせてリンク先を変える必要がありました。
英語でサイトを閲覧していたのに、ボタンを押すと英語ではなく日本語のaboutページに飛ぶのは違いますよね。それを実現するためのコードが下記です。(固定ページABOUTへのリンク先)
- やっていること
日本語で閲覧中:ABOUTボタンをクリック→日本語のABOUTページへ遷移
英語で閲覧中:ABOUTボタンをクリック→英語のABOUTページへ遷移
※各言語で翻訳した固定ページを作成していないと遷移できないので注意
<div class="contents__btn">
<?php
$locale = get_locale();
$link = home_url('/about'); // デフォルトは日本語
if ($locale == 'en') {
// 英語の場合
$link = home_url('/en/about'); // 英語で作成したaboutページへのリンク
} elseif ($locale == 'ar') {
// アラビア語の場合
$link = home_url('/ar/about'); // アラビア語で作成したaboutページへのリンク
}
?>
<a href="<?php echo esc_url($link); ?>" class="c-btn">
<?php
$locale = get_locale();
if ($locale == 'ja'): ?>
<!-- 日本語用のテキスト -->
ABOUTボタン
<?php elseif ($locale == 'ar'): ?>
<!-- アラビア語用のテキスト -->
حول زر
<?php else: ?>
<!-- 英語用のテキスト -->
ABOUT Button
<?php endif; ?>
</a>
</div>
htmlにlanguage_attributes()をつける
大事。language_attributes() 関数は、HTMLタグに適切な言語属性を追加します。これにより、ブラウザや検索エンジンがページの言語を正しく認識できるようになります。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<html lang="ja-JP">
<html lang="en-US">
カスタム投稿もBogoに対応させる
実案件だとカスタム投稿を作成してコンテンツを管理することの方が多いと思いますので、
カスタム投稿部分もBogoに対応させるためのコードです。それ以外の使い方は通常の投稿と同じ。
//カスタム投稿をBOGO対応に
function my_localizable_post_types($localizable)
{
$custom_post_types = array('location', 'members');
// 例)カスタム投稿タイプlocationとmemers
return array_merge($localizable, $custom_post_types);
}
add_filter('bogo_localizable_post_types', 'my_localizable_post_types', 10, 1);
まとめ
自動翻訳はなく、投稿やカスタム投稿に関しても日本語記事を作成後、手動で翻訳記事を作成するという手間はありますが、それでも実装がシンプルなのでWordPressで多言語サイトを作成する際はBogoおすすめです。あと無料で対応が可能。
コンタクトフォームなども言語に合わせて複数作成すればOK.
今回対応する際にいろんなブログサイトを見ましたが、基本的な使い方の紹介は多かったのですが、特に
現在の選択言語に合わせてリンク先を変えるに関する記事がほとんどなかったので、この記事が少しでも参考になれば嬉しいです。
細かい部分はデモサイトやソースコードを見ながら実装していただければデモサイトのような多言語対応サイトは完成します。もしも間違っている点・改善点などございましたらコメント等で指摘していただけると嬉しいです。それ以外でもお気軽にコメントしてくれると嬉しいです🥰
Discussion