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

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

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

“Bogo”英語記事をカテゴリー分けして完全英語化

英語記事に専用のカテゴリーを作ることで日本語ページと英語ページの分離が簡単になります。

Contents

日本語と英語を完全に分離するサイト構造の計画
言語スイッチャーを設置する方法
1. 言語スイッチャーの「表示」「非表示」を選択
言語スイッチャーをカスタマイズ
英語記事を単独で書く方法
最後に

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

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

【サイト構造の計画】

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

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

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

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

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

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

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

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

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

【カスタマイズ】

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

国旗を表示しない

国旗を非表示にしたい場合は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;
}

“bogo”言語スイッチャーの表示文字をCSSでカスタマイズ

言語スイッチャーを設置した際に表示される「日本語」や「English」などの文字をCSSだけでカスタマイズする方法。一連の方法を理解しておくと、組み合わせ応用することでオリジナルの言語スイッチに装飾できます。

“bogo”言語スイッチャー｜特定のページだけ表示させないようにカスタマズ

記事内の「カスタムCSS」に数行書き込むだけで、bogoの言語スイッチを非表示にする方法。Chromeデベロッパーツールでセレクターを見つけて仮編集する方法。

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

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

【手順】

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

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