【WordPress】インバウンド向け観光サイトを多言語対応する方法（Bogo × Poedit 編）

## 1. はじめに
### 1-1. サイトリニューアルの背景
近年、インバウンド需要が高まり、観光業界でもWebサイトの多言語対応が必須になっています。今回、私たちがリニューアルを担当したのは、日本国内の観光情報を発信するサイト。

もともと静的サイトで運用されており、現場担当者での更新ができないという課題がありました。そのため、最新情報をスムーズに更新できるCMS化と、UIの改善が求められていました。

対応する言語は、日本語を含めた5言語（英語・韓国語・中国語の簡体字・繁体字）。翻訳対応をスムーズに進めるために、今回はWordPressの「Bogo」プラグインとPoeditを組み合わせた手法を採用しました。

### 1-2. なぜ「Bogo × Poedit」を選んだのか？
多言語対応の方法にはさまざまな選択肢があります。例えば、フロント側で翻訳を自動化してくれるツールもありますが、今回のプロジェクトでは「紙媒体と並行した情報発信」が行われており、確実に翻訳原稿を登録する必要がありました。

そのため、手動で翻訳データを管理しやすいBogoと、翻訳ファイル（`.po`/`.mo`）を効率的に作成できるPoeditの組み合わせを選択しました。

この方法でどのように多言語対応を進めたのか、具体的な設計や実装方法を詳しく解説していきます！

## 2. 多言語対応の基本設計
### 2-1. 言語ごとに対応が必要な設計ポイントは？
✅ **投稿ページ：各言語ごとに作成する**
- Bogoの仕組みを活用し、言語ごとに個別の投稿を作成
- 投稿ごとにURLが分かれるため、SEO的にも適切な対応が可能

✅ **タクソノミー（カテゴリ・タグ）：カスタムフィールドで翻訳対応**
- Bogoではカテゴリやタグの翻訳機能がないため、ACFを活用
- 各カテゴリ・タグに多言語対応のためのカスタムフィールドを追加し、テーマ側で取得・表示

✅ **投稿やタクソノミーに紐づかない設定値：ACF PROのオプションページで管理**
- サイト全体で共通する情報（例：電話番号、キャッチコピーなど）は、ACF PROのオプションページで一元管理
- 各言語で個別の値を設定し、テーマ側で取得・表示

✅ **共通部分（ヘッダー・フッター・画像など）：テーマ側で対応**
- ヘッダー・フッターの静的なテキストはPoeditの翻訳ファイルを使用
- 画像は言語ごとに差し替えが必要な場合、条件分岐で対応

## 3. WordPress管理画面での設定
### 3-1. Bogoのインストール＆基本設定
1. Bogoプラグインをインストール
    - WordPress管理画面の「プラグイン」→「新規追加」で「Bogo」を検索
    - インストール後、有効化
2. 対応する言語を追加
    - 「言語」→「言語パック」から、サイトで対応する言語（英語・韓国語・簡体字・繁体字）を有効化
    - 言語を有効化すると、各言語ごとに投稿を作成できるようになる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3924179/9121d20e-05be-4544-b70d-78f3eab13216.png)

### 3-2. 投稿の翻訳方法（各言語ページの作成）
1. 新規投稿を作成
2. 投稿編集画面のサイドバーにある「言語」設定を確認
    -  追加したい言語のリンクをクリック
    -  各言語ごとにタイトル・本文などを入力
3. URL構造は自動で切り替わる
    - example.com/page/（日本語）
    - example.com/en/page/（英語）

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3924179/bbbc8baf-509e-43dc-8aaf-d66890bd7d5b.png)

### 3-3. カテゴリ・タグの翻訳方法（カスタムフィールドを活用）

1. Bogoにはタクソノミー（カテゴリ・タグ）の翻訳機能がないため、ACFを利用
2. 「ACF」→「フィールドグループ」で、新しいフィールドを作成  
    - フィールド名：`term_title`/`term_title_en_US`など（言語ごとに作成）  
    - 表示ルール：「タクソノミー」で表示に設定
3. テーマ側でタイトルを取得＆出力
    日本語と英語の場合のサンプルコード
    ```
    $lang = get_locale();
    $category_id = get_queried_object_id();
    
    if ($lang === 'en_US') {
        $category_name = get_field('term_title_en_US', 'category_' . $category_id);
    } else {
        $category_name = get_field('term_title', 'category_' . $category_id);
    }
    
    echo esc_html($category_name);    
    ```

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3924179/0009c806-b692-48c9-a7c7-c85facd7e496.png)

### 3-4. ACF PROの設定ページを使った多言語対応
1. 投稿やカテゴリに紐づかない情報（例：フッターのキャッチコピー、連絡先など）はACF PROの設定ページで管理
2. 「ACF」→「フィールドグループ」で、新しいフィールドを作成
    -  フィールド名：`theme_op_title`/`theme_op_title_en_US`など（言語ごとに作成）
    -  表示ルール：「オプションページ」で表示に設定
3. テーマ側でタイトルを取得＆出力
    日本語と英語の場合のサンプルコード
    ```
    $lang = get_locale();
    
    if ($lang === 'en_US') {
        $option_title = get_field('theme_op_title_en_US', 'option');
    } else {
        $option_title = get_field('theme_op_title', 'option');
    }
    
    echo esc_html($option_title);
    ```

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3924179/8decd9c2-36b1-413a-9485-c21b9c148e04.png)

## 4. テーマ（PHP）での実装
### 4-1. Poeditで翻訳ファイル（.po/.mo）を作成・管理
初期設定に関する情報がWEB上に少なかったため、今回はこの部分を重点的に解説します。
すでにPoeditの使い方を知っている方は、このセクションを読み飛ばしてOKです。
具体的なコードについては、他のサイトも参考にしてください！

Poeditのダウンロードはこちら：https://poedit.net/

1. 翻訳対象のPHPファイルを準備
    まず、PHPファイル内で`gettext`を使い、翻訳元データとなる日本語テキストと翻訳テーマ名を指定します。
    ```
    // __( 'テキスト', 'text-domain' ) で翻訳対象を指定
    $sitemap = __( 'サイトマップ', 'my-theme' );
    
    // _e( 'テキスト', 'text-domain' ) は直接出力
    _e( 'お問い合わせ', 'my-theme' );
    ```
    <div></div>
2. ブランクのPOTファイルをダウンロード
    翻訳用の`.pot`ファイルを以下からダウンロードし、カスタマイズします。
    [Blank WordPress POT](https://github.com/fxbenard/Blank-WordPress-Pot/blob/master/Blank-WordPress.pot)
3. `functions.php`で翻訳ファイルの読み込み先を設定
    翻訳ファイルを適用するために`functions.php`に以下を追加します。
    ```
    function my_theme_load_textdomain() {
    load_theme_textdomain('my-theme', get_template_directory() . '/languages');
    }
    add_action('after_setup_theme', 'my_theme_load_textdomain');
    ```
    <div></div>
4. POTファイルを翻訳テーマ名にリネーム
    ダウンロードした`Blank-WordPress.pot`を`my-theme.pot`のようにリネームします。
5. リネームしたPOTファイルを指定ディレクトリに保存
    POTファイルを`languages/`ディレクトリに配置します。
    ```
    /wp-content/themes/my-theme/languages/my-theme.pot
    ```
    <div></div>
6. PoeditでPOTファイルを開く
    Poeditを起動し、「ファイルを閲覧」から`languages/my-theme.pot`を選択します。
    
    ![スクリーンショット 2025-03-24 21.09.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3924179/788be6ba-c5c0-42cb-bbd8-17bff5fe0442.png)
    <div></div>
7. ソースコードから更新
    「ソースコードから更新」をクリックしてファイルをスキャン・更新します。
    このとき、先ほどの`__( 'サイトマップ', 'my-theme' )`などの翻訳対象が反映されることを確認してください。
    
    ![スクリーンショット 2025-03-24 21.13.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3924179/1e034c3e-3a69-43a1-b51d-84a4caf4bd4b.png)
    <div></div>
8. 新規翻訳ファイルを作成
    Poeditを開き直し「新規作成」→ `languages/my-theme.pot`を選択します。
    
    ![スクリーンショット 2025-03-24 21.29.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3924179/3b9998b5-7432-4ab4-a18f-faaab1b41c83.png)
    <div></div>
9. 翻訳言語を選択
    英語 (`en_US`)や韓国語 (`ko_KR`)など、適用する言語を選択します。
    
    ![スクリーンショット 2025-03-24 21.31.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3924179/faed4886-169f-4393-9422-c8da4455707a.png)
    <div></div>
10. 翻訳テキストを入力し保存
    翻訳テキストを入力後、`.po`および`.mo`ファイルを生成（`command + s`で生成されます）し、`languages/`ディレクトリに保存します。
    
    ![スクリーンショット 2025-03-24 21.32.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3924179/277c1da7-3325-4b4e-99b2-d9d668178fb7.png)
        
    ```
    /wp-content/themes/my-theme/languages/en_US.po
    /wp-content/themes/my-theme/languages/en_US.mo
    ```

    以上で翻訳ファイルの作成は完了です。
    あとは、実際のページにて各言語に切り替えることで、ここで設定した翻訳テキストが表示されます。

### 4-2. 実装時のソースサンプル
1. テーマ側での翻訳設定
    `header.php`や`footer.php`、各種テーマファイルで`gettext`を使うことで翻訳を適用できます。
    
    ```
    <footer>
        <p><?php _e('著作権 © 2025', 'my-theme'); ?></p>
    </footer>
    ```
    <div></div>
2. 言語ごとの条件分岐（画像を切り替える場合）
    `get_locale()`を使って言語ごとに異なる画像を表示できます。
    
    ```
    $lang = get_locale();
    
    if ($lang === 'en_US') {
        $logo = get_template_directory_uri() . '/assets/logo-en.png';
    } else {
        $logo = get_template_directory_uri() . '/assets/logo-ja.png';
    }
    ```

## 5. まとめ
今回のリニューアルでは、BogoとPoeditを組み合わせた多言語対応を採用しました。
Bogoのシンプルさと、Poeditで管理する翻訳ファイルの運用のしやすさが、このプロジェクトにはピッタリでした。

特に、`.po`/`.mo`ファイルで翻訳データを一元管理できるのが大きなメリットで、手作業の翻訳が効率化され、運用もグッと楽になります。

**運用をラクにするポイント**

✅ **デザイン段階からデータ管理を設計**
✅ **更新しやすい構成にしておく**
✅ **テキストや画像を適切な方法で管理**

こうすることで、扱いやすく効率的なサイト運営が可能になると思います。
多言語対応が必要になったときは、ぜひ参考にしてみてください！