Bogoで多言語化ページを作る[WordPress]

bogo_eyecatch

とある案件で「英語に翻訳したバージョンも載せられないか?」と依頼を受けました。
その時の備忘録です。

使用環境

WordPress 4.1.1
テーマ:Enfold 3.0.4


プラグイン:Bogo 2.4.3

多言語化できるWordPressのプラグインはいくつもあります。
まずは無料で使える「qTranslate」に目を付けました。

*↑ Webクリエイターボックスさんの記事を参考にさせていただきました。

ただ、今回使用しているWordpressのテーマ「enfold」だと、問題が発生!

bogo_editor01

WordPressの標準エディタだと、「日本語」と「English」タブが増えます。
qTranslateは、1つの投稿内で複数言語の内容を記述するんですね。
「日本語」タブで日本語の内容、「English」タブに切り替えて、英語に翻訳した内容を書くという感じです。

ただし、テーマ「enfold」の「Advanced Layout Editor」を使うと、言語タブが出ないのです。
なんたるちや!!

bogo_editor02

…こんな感じでタブが出ません、隊長っ!
該当するphpやjavascriptをカスタマイズすれば何とかなるのかもしれませんが、悲しいかなそこまでの技量は持ち合わせておりません(涙)。

困りました。よわりました。弱り目にたたり目です。…嘘です。
まじめな話、「Advanced Layout Editor」を使えないのでは、「enfold」を使う意味ないと言っても過言ではないのであります、中隊長っ!。
…で、たどり着いたのが、「Bogo」でした。

*↑ プログラミング生放送さんの記事を参考にさせていただきました。

こちらは、各記事に対して翻訳バージョンを追加していく方法です。

bogo_pagelist

こういう感じで各言語ごとに固定ページや投稿が増えます。
なので、翻訳する言語が多かったり、ページ数や投稿が多い場合は、管理が大変だと思いますね。
(まあ、管理という点ではどんなプラグインを使っても大変は大変ですかね…)

今回の案件は、固定ページの数が少なく、投稿も翻訳の必要なかったので「Bogo」で間に合いました。
でも、サイトの規模や内容によっては、他のプラグインが有効な場合も多々あると思いますよ。
その時の状況に応じて臨機応変に対処できるようにならんといかんであります、調理長っ!


今回は、ヘッダーに言語切り替えのスイッチャーを配置したかったので、その時の備忘録です。

includes/helper-main-menu.php の
<div  id=’header_main’ class=’container_wrap container_wrap_logo’> の直後に次のコードを挿入しました。

そのままのスタイルだと、今回のサイトのデザインに合わないので、
id[langTrans]で囲んで、CSSで調整できるようにしておきます。

…で、こんな具合にしておきました。

bogo_eyecatch

CSSは、サイトに合わせた感じで適宜調整してください。