世界とつながる英語のブログ

英語でブログを書いていると海外からのアクセスがあります。英語は世界で一番多く使われている言語なので当たり前のことですが、自分のブログに世界中の人達が訪れていることに感動しています。

グーグルアナリティスクの国別のセッションを示した地図です。色の濃い所ほどアクセスが多い事を示しています。アクセスの数が少なくて地図に反映されていませんが、イギリス・フランス・ドイツ・中国・韓国・シンガポール等からもアクセスがあり、徐々に増えています。

英語が得意でもない私が英語ブログを始めたのは、”WordPress”のプラグイン「bogo」との出会いです。

「bogo」には自動翻訳の機能がないので自分が翻訳しなければなりません。英語の勉強を兼ねて元記事をリライトしているのですが、思ったより楽しいものです。そして何より「広い世界と繋がってる」と感じられる今、これからの可能性に胸が膨らみます。

世界と繋がるための英語ブログ。「bogo」の導入方法と使い方を解説します。

“WordPress”プラグイン「bogo」

サイトを多言語化するプラグインは数種類ありますが、テーマやその他のプラグインとの干渉が少ない「bogo」がおすすめです。

“WordPress”のプラグインと使用しているテーマには相性があるのですが、“Cocoon”と「bogo」は干渉することなく快適に動作しています。

プラグイン「bogo」導入の手順

プラグインのインストール方法は、「ダッシュボード」から「プラグイン」を選択。検索ボックスに「bogo」と入力すると下の画面が表示されます。

「インストール」をクリックして、インストールが完了したら「有効化」をクリックで完了です。

bogoの設定

bogoが有効になると、幾つかの機能が追加されるので順番に設定します。

使用する言語の設定

ダッシュボードの「言語」より設定します。

言語の有効化

ダッシュボードの「言語」から「言語パック」を選択して、使用する言語をを選択すると「有効化」のボタンが表示され、クリックすると有効になります。

テキストの翻訳

ダッシュボードの「言語」から「テキストの翻訳」を選択して、カテゴリー名・タグ名などを翻訳します。これは記事を英語（他国語）サイトに切り替えたときのカテゴリーやタグ名になります。なお、自動翻訳ではないので、自分で翻訳して書き換える必要があります。

言語切り替えの表示設定

ダッシュボード「外観」の「ウィジェット」で設定します。
「ウィジェット」を開くと「言語切り替え」が追加されているので、言語切り替えスイッチを表示させたい位置に追加します。

このサイトでは、投稿タイトル上に設置しています。

英語（その他の言語）記事の作成方法

公開している日本語の記事を編集モードにすると編集場面の右側に、下の要素が表示されています。
※ 要素が見当たらない場合は、最上部の表示オプションを確認してください。

言語を選択して「翻訳を追加」をクリックすると、日本語の記事名と翻訳する「言語」が表示されるので、確認してから再度クリックします。

これで英語（他国語）の記事が追加されました。ただし、追加された記事は「日本語」のままなので自分で翻訳しなければなりません。

記事の表示設定

記事によって「日本語の言語」のページにだけ表示したい、またその反対もあります。
例えば、ホームページやプロフィールなどは「日本語」と「英語」のページをそれぞれ固定ページで作成しているのですが、言語の違うページ毎に纏めて整理する必要があります。このような場合に使えるのが下図の「表示設定」です。「表示する言語のページ」で表示と非表示を選択することが出来ます。これはウィジェット全体に反映されているので個別の記事でも表示と非表示の選択ができます。

このサイトでは、「ホーム」「プロフィール」「プライバシーポリシー」「お問い合わせ」のページを「日本語」と「英語」で作成してあります。そして表示設定でそれぞれの言語に応じたページだけを表示できるようにしています。

「bogo」をカスタマイズ

bogoの言語スイッチャーはデフォルトでは下のように表示されます。

デフォルト表示を下のようなシンプルは表示にカスタマイズします。

国旗のアイコンを表示させない

下のコードを子テーマの”functions.php”に書き込めば国旗が表示されなくなります。

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

片方の言語スイッチのみを表示する

下のコードを子テーマの”style.css”に書き込めば片方（表示されていない言語）だけの言語スイッチが表示されるようになります。

/*片方の言語スイッチのみ表示する
.bogo-language-switcher{
.current{
display: none;
}
li{
text-align: right;
}
a:before{
content: "\f0ec";
font-family: FontAwesome;
padding-right: 8px;
}
}