“bogo”言語スイッチャーの設置場所とカスタマイズ

今回の記事は英語ページから日本語を完全になくすために「言語スイッチャー」のカスタマイズと、日本語と英語のカテゴリーに分けたページを分離して表示する方法について紹介します。

なお、日本語と英語のページをカテゴリーに分けて記事群を作る方法は以下の記事を参考にしてください。

日本語と英語を完全に分離するサイト構造の計画

サイト構造の概要はヘッダーナビゲーションで選択できるページを制限し、”bogo”の言語スイッチャーを投稿ページのみとすることで日本語のページと英語のページを別サイトのように取り扱えるようにしました。

Header&Global Menu

Posted articles

【サイト構造の計画】

  • ヘッダーナビゲーションに、日本語と英語のホームページそれぞれに移動できるメニュー(Japanese home, English home)を設置
  • 上記以外のヘッダーナビゲーションに設置するメニュー(プロフィール、プライバシーポリシー、など)は同一言語のページのみのリンクにする
  • 投稿記事のタイトル上に「言語スイッチャー」を設置
  • 固定ページ、カテゴリーページ(インデックスリスト)には「言語スイッチャー」を設置しない
  • フッターには同一言語のページのみに移動できるメニューを設置
  • サイトマップは日本語ページのフッターに設置

言語スイッチャーを設置する方法

言語スイッチャーはショートコードを記述する方法と、ウィジェットを使う方法があります。ショートコードは固定ページや投稿記事の本文内にでも使用することができます。

例)記事内の2カ所にショートコードを記述してみました。

Short code

“bogo”をインストールしているとウィジェットに「言語切り替え」の項目ができているので、好みの場所に簡単に設置できます。また、「カスタムHTML」にショートコードを記述しても同様に言語スイッチャーが設置できます。

Widget -Language Switcher

言語スイッチャーの「表示」「非表示」を選択

“bogo”がインストールされている場合、ウィジェットに「次のページで表示」という項目が追加され、「日本語」と「英語」が選択できるようになっています。またデフォルト機能の「表示設定」ではカテゴリー、ページ、著者、投稿、固定ページ、タグなど詳細に「表示」「非表示」が設定できます。

言語スイッチャーの「表示」「非表示」を選択 “bogo”がインストールされている場合、ウィジェットに「次のページで表示」という項目が追加され、「日本語」と「英語」が選択できるようになっています。またデフォルト機能の「表示設定」ではカテゴリー、ページ、著者、投稿、固定ページ、タグなど詳細に「表示」「非表示」が設定できます。

言語スイッチャーをカスタマイズ

デフォルトの言語スイッチャーを以下のようにカスタマイズします。

Language switcher

【カスタマイズ】

  • 言語スイッチャーで国旗を表示しない
  • 言語スイッチャーの表記を変更
  • 閲覧中の言語への切り替えスイッチを表示しない

国旗を表示しない

国旗を非表示にしたい場合はfunction.phpに以下のコードを記述します。

<PHP>

//bogo 国旗アイコンを削除
add_filter( 'bogo_use_flags','bogo_use_flags_false');
function bogo_use_flags_false(){
 return false;
}

言語スイッチャーの表記を変更

英語記事に表示される「日本語 」を「 Japanese」に変更します。

<PHP>function.phpに以下のコードを記述

add_filter( 'bogo_language_switcher_links', function ( $links ) {
for ( $i = 0; $i < count( $links ); $i ++ ) {
// 日本語
if ( 'ja' === $links[ $i ]['locale'] ) {
$links[ $i ]['title'] = 'Japanese';
$links[ $i ]['native_name'] = 'Japanese';
}
// 英語
if ( 'en_US' === $links[ $i ]['locale'] || 'en' === $links[ $i ]['locale'] || 'en_NZ' === $links[ $i ]['locale'] ||'en_CA' === $links[ $i ]['locale'] ||'en_GB' === $links[ $i ]['locale'] ||'en_AU' === $links[ $i ]['locale'] ) {
$links[ $i ]['title'] = ' English ';
$links[ $i ]['native_name'] = ' English ';
}
}
return $links;
} );

※ 表示文字を変えたい場合は「native_name」の文字列を変更する

閲覧中の言語への切り替えスイッチを表示しない

【日本語と英語のページに表示する言語スイッチ】

  • 日本語の記事を閲覧中に日本語への切り替えは不要なので「言語切り替え|English」にする
  • 英語の記事を閲覧中に英語への切り替えは不要なので「言語切り替え| Japanese」にする

<CSS>

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

英語記事を単独で書く方法

日本語の記事を翻訳するのではなく、単独で英語の記事を書く場合の手順は以下の通りです。

【手順】

  1. 管理画面の「投稿」から「新規追加」で、通常通り記事を書く準備をする
  2. タイトルの欄に文字を書き込んでリターンキーを押すか、本文の欄に任意の文字を書き込み「下書き保存」すると、右側に表示されている「言語」欄の「翻訳を追加」が有効になる
  3. 「翻訳を追加」をクリック
  4. 管理画面に戻り「投稿一覧」を見るとロケールが「英語(アメリカ)」になっている記事が追加されている
  5. 下書きになっている日本語の記事を削除して、新たに追加された英語の記事を編集して投稿

※ 翻訳記事(日本語と英語の記事)の片方を削除するイメージです。

最後に

英語と日本語のページをカテゴリーに分けて整理しても、表示させる方法を決めないと煩雑なサイトになります。海外に向けて発信するのか、日本国内で英語翻訳として紹介するのか、目的によっても整理の方法が変わってきます。目的に応じて自分なりに整理してみてください。

発信する目的が違っても、英語ページに日本語が表示されるのは良くないと思っています。英語ページの完全英語化には、まだ少し手を加える必要があります。

「目次」と「パンくずリスト」の英語化については下記で紹介しています。

スポンサーリンク

タイトルとURLをコピーしました