Amazon10/19まで!プライム感謝祭開催中! セール会場へ

Bogoの使い方|翻訳投稿と言語切り替えをWordPressに設置する

wordpress-bogo

Bogoは投稿ごとに言語を割り当てる多言語化プラグインです。

公式の導入手順に従い、言語パック、翻訳投稿、切り替えリンクを設定します。

2026年10月2日、Bogo 3.9.3で日本語・英語の切り替えとウィジェットの保存を確認しました。

旧画面の画像も残しているため、現在の操作例は末尾の実画面を参照してください。

コーポレートサイトに多言語化ページを作りたいと思いまして、導入してみました。

多言語化切り替えのプラグインは多数ありますが、その中でもContact Form 7の開発者Takayuki Miyoshiさんの作成されたBOGOというプラグインが独自のデータベーステーブルを増やさない設計を理由に選びました。

翻訳用の投稿や設定は既存のデータベースに保存されるため、データが増えないという意味ではありません。

Bogoが作るのは翻訳用の投稿と切り替えの仕組みです。

本文やメニューを各言語に合わせる作業は別に行います。

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

BOGOの使い方

導入前に投稿・設定のバックアップを取り、変更するウィジェット、メニュー、PHP・CSSの設置場所を控えます。

まず日本語と英語の1組で、翻訳先の本文とリンクを確かめます。

STEP
プラグインの追加

管理画面からプラグイン>新規追加からBOGOで検索。

今すぐインストールを押して有効化しましょう。

プラグインの新規追加画面でBogoを検索し、インストールと有効化を行う手順を示す画面。
STEP
言語の選択

管理画面に言語というメニューが追加されているので、確認しましょう。

この記事では日本語と英語(en-US)を使います。

必要な言語パックを「言語」の画面で確認し、追加した言語が翻訳作成の選択肢に出るか確かめてください。

管理画面に追加された言語メニューで、追加する言語を確認・選択する設定画面。
STEP
英語版の記事の追加

すでに作成されている日本語の記事を開きましょう。

右側のメニューに言語というメニューが作成されています。

英語の翻訳を作成を押し、翻訳用の投稿を作ります。

ボタンを押すだけで本文が英訳されるわけではありません。

日本語記事の編集画面右側にある言語メニューから、英語の翻訳を作成する操作手順。

作成されたリンクを押すと英語版の記事が開きますので、英訳して公開しておきましょう。

繰り返して、英語のページで表示したい記事はすべて生成&翻訳しておきましょう!

下記のような感じで、言語ごとに記事が生成されます。

複製された投稿のタイトル・本文・スラッグは、自動で英訳されません。

翻訳用の編集画面で内容とURLを確認し、公開前に必要な箇所を変更します。

翻訳作成後に言語ごとの記事が一覧で生成された様子を示す画面。

元の日本語記事と翻訳先の記事で、編集画面の言語と対応する翻訳先を確認します。

更新ボタンを押したことだけで、意図した言語になったと判断しないでください。

STEP
グローバルメニューの設定

英語版のグローバルメニューも設定しましょう。

日本語版と英語版のメニューをそれぞれ挿入。

表示したい言語だけにチェックを入れましょう。

グローバルメニューの設定で日本語版と英語版のメニューを配置し、表示する言語にチェックを入れる画面。

日本語と英語の公開ページを往復し、ヘッダーメニューの文言とリンク先を確認します。

別言語のメニューが残る場合は、現在の設定を控えて該当するキャッシュを切り分けます。

下の画像は旧設定画面で、表示を確認せず全キャッシュを停止するための手順ではありません。

ヘッダーのキャッシュを停止する設定箇所の画面。
STEP
ヘッダーに言語切替メニューを配置する

ショートコード[bogo]を設定してあげると言語切り替えスイッチが設定できます。

記事内やサイドバーに配置するのも良いですが、今回はグローバルメニューの右端に設定したいと思います。

外観>ウィジェットで、利用中のテーマが用意するヘッダー用の領域に言語切り替えウィジェットを追加します。

ブロックで設定する場合は、ショートコードブロックを使います。

カスタムHTML欄ではショートコードが実行されるとは限りません。

ショートコード[bogo]を設定します。

ウィジェットのタイトルが不要なら空欄にします。

以下の画像は旧画面の記録で、現在の追加方法は上の説明に従ってください。

ヘッダー内部にカスタムHTMLウィジェットを追加し、ショートコードを設定する画面。

下記のようにヘッダーに言語切り替えが表示されます。

ヘッダーに言語切り替えボタンが実際に表示された様子。
STEP
言語切り替えスイッチのカスタマイズ

言語切り替えの見た目を調整します。

以下は日本語(ja)と英語(en-US)の言語メニューを横並びにするCSSです。

別のロケールや3言語以上の表示は、この指定だけで確認済みとしたものではありません。

以下のCSSは表示中の言語を非表示にします。

適用後も別言語へ移動できるリンクが残るか確認してください。

.bogo-language-switcher li.en-US {
    float: left;
    margin-right: 14px;
}

.bogo-language-switcher li.ja {
    float: left;
}

.bogo-language-switcher .current {
  display: none;
} 

次のPHPは国旗を非表示にし、jaとen-USの切り替え名を変更します。

対象外の言語名はこの分岐では変更しません。

PHP例はバックアップした子テーマのfunctions.php末尾へ、既存の開始タグを重複させず追加します。

CSSは追加CSSへ貼り付けます。

元に戻す場合は今回追加したPHPとCSSだけ取り除きます。

add_filter( 'bogo_use_flags','bogo_use_flags_false');
function bogo_use_flags_false(){
 return false;
}

add_filter( 'bogo_language_switcher_links', 'custom_bogo_language_title_name', 10, 2 );
function custom_bogo_language_title_name( $links ) {
  foreach ( $links as $code => $name ) {
    if ( $name['lang'] === 'en-US' ) {
      $links[$code]['title'] = 'English';
      $links[$code]['native_name'] = 'English';
    } elseif ( $name['lang'] === 'ja' ) {
      $links[$code]['title'] = '日本語';
      $links[$code]['native_name'] = '日本語';
    }
  }
  return $links;
}

保存後に日本語と英語のページを開き、切り替え名とリンク先、元の言語へ戻れることを確認します。

カスタマイズ後にグローバルメニューの表示が言語に応じて切り替わっている確認画面。

下の画面は過去の表示例です。

現在のテーマでの結果は、設置先の公開画面で照合してください。

STEP
モバイルのハンバーガーメニューにも表示する

SWELL 2.19では「外観>ウィジェット」の「スマホ開閉メニュー下」を使えます。

ここにBogoの言語切り替えウィジェット、またはショートコードブロックを追加してください。

親テーマや子テーマのsp_menu.phpを書き換える手順は不要です。

以前の例は、メニューのul内に別のulを直接挿入する構造だったため撤回しました。

すでにその例を導入した場合は、変更前との差分を確認して言語切り替えの追加部分だけ戻してください。

他のカスタマイズが入ったファイル全体を削除しないでください。

日本語・英語のページをそれぞれ開き、スマホメニュー内のリンク先が対応する翻訳になっているか確かめます。

言語やページを切り替えても古いリンクが残る場合は、該当するメニューキャッシュを停止して削除し、再確認してください。

Tabで移動しEnterで切り替えられることも確認します。

日本語と英語を切り替えて確かめる

Bogo 3.9.3とSWELL 2.19.0で、別々に保存した日本語・英語の固定ページを関連付けて確認しました。

英語リンクをEnterで開くと、英語の本文と日本語へ戻るリンクが表示されます。

日本語リンクから元の本文へ戻ることも確認しています。

下の画面はスマホ幅390pxです。

掲載のPHPで切り替え名がEnglish・日本語になり、旗画像を出さず、CSSで現在の言語を非表示にしました。

切り替えリンクを消すCSSは追加せず、翻訳先の本文と言語が一致することを確認してください。

旧ウィジェット画面ではLanguage Switcherを検証専用エリアへ追加し、タイトルを保存しました。

画面を開き直して保存値を確認し、公開側にも同じタイトルと英語リンクが出ることを確認しています。

ウィジェット画面の切り替え手順も参照できます。

今回の翻訳用ページは検証データとして作成しており、投稿編集画面の複製ボタン操作は再検証していません。

Bogoは本文を自動翻訳しないため、公式手順で複製後に本文を翻訳し、両方のページを開いて確認してください。

戻す場合は追加したウィジェット・ショートコード・カスタマイズだけを外します。

Bogo 3.9.3で日本語から英語本文へ切り替えたスマホ画面
2026年10月2日、隔離WordPressで撮影した実画面です。

翻訳用の複製後はSEO設定も確認する

スクロールできます
複製されるもの作成直後の状態公開前の確認
投稿ID・公開状態別IDの下書き翻訳対象のIDを控えて編集
タイトル・本文元言語の内容をコピー本文と見出しを翻訳
SSPの個別title・description元言語の値をコピー翻訳ページ向けの値へ変更
SSPの個別canonical元ページの指定URLをコピー翻訳ページの正規URLと照合

Bogo 3.9.3の翻訳作成処理は投稿メタもコピーします。

SEO SIMPLE PACKで記事ごとのタイトル・説明文・canonicalを指定していた場合、その値も翻訳用の下書きへ引き継がれます。

本文だけを英訳して公開しても、SEOタイトルや説明文が元の言語のままになり、canonicalが元ページを指す場合があります。

変更前の個別値を控え、翻訳先のSEO SIMPLE PACK設定から必要な項目を変更します。

翻訳ページ自身を正規URLにする場合は、個別canonicalを解除した後の出力が翻訳先のURLになっているか確認してください。

元ページと別の正規URLを採用する設計なら、その指定を理由なく消しません。

戻すときは翻訳先の変更した値だけを控えた値へ戻します。

REST APIで更新する場合も、元記事のIDではなく翻訳先のIDを指定します。

title・descriptionをRESTで更新する例にはcanonicalの更新は含まれません。

両言語の公開ソースでtitle・description・canonical・hreflangを照合します。

2026年10月4日、隔離WordPress 7.1.2・Bogo 3.9.3・SEO SIMPLE PACK 3.7.0で翻訳作成のPHP処理を実行し、別IDの下書きと個別メタのコピーを確認しました。

本文・投稿タイトルだけを翻訳した後も元のSEO値が残ること、翻訳先のメタだけをREST処理で変更できること、個別canonicalの解除で翻訳先URLへ戻ることを確認しています。

編集画面の複製ボタン操作、翻訳内容の品質、検索エンジンでの認識は今回の検証対象外です。

BOGOの使い方まとめ

本記事では多言語に切り替えるプラグインBOGOの使い方についてまとめました。

翻訳はBogoが自動生成するものではありません。

言語ごとに本文・画像の説明・リンク先を確認し、未翻訳のコピーをそのまま公開しないようにします。

公開前に両言語の本文・メニュー・SEO設定を照合し、翻訳用の複製で引き継がれた値を確認してください。

この記事で紹介しているコードは、GitHubのMOTOKI-LLC/WAZA-codeにも旧版を保存しています。

外部のコードは今回の修正と同期していないため、本文の手順を優先してください。

よくある質問:Bogoで翻訳投稿と言語切り替えを設置するとき

Bogoは、どんなプラグインですか?

記事では、投稿ごとに言語を割り当てる多言語化プラグインです。Contact Form 7の開発者Takayuki Miyoshiさんの作成で、独自のデータベーステーブルを増やさない設計を理由に選ばれています。ただし、翻訳用の投稿や設定は既存のデータベースに保存されるため、データが増えないという意味ではありません。

Bogoを入れれば、本文も自動で翻訳されますか?

されません。記事では、Bogoは本文を自動翻訳しないため、公式手順で複製後に本文を翻訳し、両方のページを開いて確認します。Bogoが作るのは翻訳用の投稿と切り替えの仕組みで、本文やメニューを各言語に合わせる作業は別に行います。

導入前に、何を準備しますか?

投稿・設定のバックアップを取り、変更するウィジェット、メニュー、PHP・CSSの設置場所を控えます。まず日本語と英語の1組で、翻訳先の本文とリンクを確かめます。

英語版の記事は、どう作りますか?

日本語の記事を開き、右側の「言語」メニューから「英語の翻訳を作成」を押します。更新ボタンを押したことだけで、意図した言語になったと判断せず、元の記事と翻訳先の記事で、編集画面の言語と対応する翻訳先を確認します。

言語切り替えスイッチは、どこに置きますか?

記事では、グローバルメニューの右端に設定する例です。外観>ウィジェットで、利用中のテーマが用意するヘッダー用の領域に言語切り替えウィジェットを追加します。ブロックで設定する場合は、ショートコードブロックを使い、カスタムHTML欄ではショートコードが実行されるとは限りません。

切り替えスイッチの見た目は、どう変えますか?

記事では、日本語(ja)と英語(en-US)の言語メニューを横並びにするCSSと、表示中の言語を非表示にするCSS、国旗を非表示にして切り替え名を変更するPHPが紹介されています。PHPはバックアップした子テーマのfunctions.php末尾へ追加し、CSSは追加CSSへ貼り付けます。別のロケールや3言語以上の表示は、この指定だけで確認済みとしたものではありません。

翻訳ページを作ったあと、SEO SIMPLE PACKの設定で注意することは?

記事では、Bogo 3.9.3の翻訳作成処理は投稿メタもコピーするため、SEO SIMPLE PACKで記事ごとのタイトル・説明文・canonicalを指定していた場合、その値も翻訳用の下書きへ引き継がれます。本文だけを英訳して公開すると、SEOタイトルや説明文が元の言語のままになり、canonicalが元ページを指す場合があります。翻訳先の設定から必要な項目を変更してください。

REST APIで更新するときの注意点は?

記事では、REST APIで更新する場合も、元記事のIDではなく翻訳先のIDを指定します。

どこまで動作確認されていますか?

記事では、2026年10月2日にBogo 3.9.3で日本語・英語の切り替えとウィジェットの保存を確認したとされています。一方、投稿編集画面の複製ボタン操作は再検証しておらず、旧画面の画像も残っているため、現在の操作例は末尾の実画面を参照するよう案内しています。

  • URLをコピーしました!

プラグインの設定でお困りなら

プラグインの導入・カスタマイズ代行

プラグインの選定から設定、競合の解消、動作に合わせた追加実装まで承ります。1時間 ¥8,000〜(税込)。

WAZAの有料記事のサブスクリプションも開始しました。

サービス

Service

WordPressサイトのカスタマイズのサービスに関心がありましたら、ぜひ詳細をご覧ください。

目次