WCB - Wordpressテーマ「meets」で多言語化に苦労した話
こんにちは！
多摩地域初の地域密着型ホステル、Wild Cherry Blossom-Hostel, TOKYO KOGANEI です！
さて、突然ですが、私たちWild Cherry Blossom-Hostel, TOKYO KOGANEI-のホームページが完成しました！！！
下の画像はトップページのほんの一部です！
イイ感じに仕上がりました！！
WCBのスタッフが時間をかけて作ったのですが、誰もホームページの作成経験がなかったため途中で多くの壁にぶちあたり、そのたびに色々と試行錯誤して大変でした(*^-^*)
当初は本当に１からコードを書いて作ろうとしている学生がいた（この記事の筆者です）のですが、運用面やデザイン面等を考慮して結局Wordpress様のお力を借りることに...
みんなで話し合った結果、テーマは「meets」を採用！
お値段なんと25800円！！（2021/6現在）
少々お高い気もしましたが、SEOフレンドリーな点やとにかくかっこいい魅力的なデザインに惹かれて、これでいこう！ということに。
というわけで初めてのWordpressを利用したホームページ作成にとりかかったわけですが、とにかくわからないことが多く、調べながら頑張りました。
苦労したこと１つ１つを取り上げると長くなってしまうので、今回はタイトルにもある通り多言語化の話をしようと思います。
まず、前提として、わたしたちのホステルは、世界中の旅仲間やローカルコミュニティの交差点として、その魅力を皆さんと共に自由に表現、発信していきたいという思いで日々活動しています。
世界中の旅仲間とローカルコミュニティの接点として多摩地域に働きかけていきたい、そのためにホームページの多言語化（特に日本語+英語）は必須です。
Wordpressテーマ「meets」を選んだ際には、デモサイトが多言語対応していたため、勝手に多言語に対応しているものだと思っていました、、それが迂闊でした。
ここもよく見れば「管理画面の多言語対応」と書いてあるもののWebサイト自体の多言語化対応については一切言及されておらず、、
デモサイトもよくみれば、
日本語版：https://demo.tcd-theme.com/tcd086/
英語版：https://demo.tcd.cool/tcd086/
とドメインがそもそも違うんですよね。
以上の事実に、ホームページの英語版ができあがっていざ多言語対応しようと思ったその時に気が付きました、、遅いですよね。
一応、コードがあれば無理やりディレクトリをコピーして英語版を作れるかも、と考えたのですが、主にホームページを担当していた私は学生スタッフなのでコード自体にアクセスする権限がなかったこと、またコードをいじることでこれまで費やしてきたコストを台無しにしてしまうことも考慮して、諦めました。
そこで、どうにかして多言語化を達成しようといろいろと調べ、一旦プラグインを入れることにしました。採用したのは、有名な「Polylang」です。
これがなかなか使いやすくて、大変重宝しました。
ですが、これだけだと固定ページと投稿ページ、およびヘッダーそしてフッターメニューの多言語化しかできず、トップページ含むその他のページに関しては何もできませんでした。
つまり、トップページは、ディレクトリは違うものの、その中身については仕様上管理画面からは編集ができず、その他のページ（「meets」プラグインでいうと「Gallery」ページなど）についてはデフォルトの言語のページに遷移してしまうという状態になってしまったのです。
言語ボタン（例えば日本語）を押しても、トップページの中身は英語のままで、あるページに遷移すると勝手にすべてが英語になってしまう可能性がある、そんな状態です。
多言語化を諦めて英語/日本語を同一ページに両方表記することも考えたのですが、やはりできれば完全に日本語のページと英語のページを分けたい。
そこで見つけた最強のプラグインがこちらです。
Javascriptで動的に表示を変更してしまおう、そういう暴挙にでました。（ちなみにJavascriptはほぼ初めて触ったのでもっといいやり方やコードの書き方があるかもしれません）
先ほども申し上げた通り、Polylangのおかげで新しいディレクトリに別の言語のページを作ることができました。ただページの中身が変わらないだけで、ディレクトリは違うので当然URIも違ったものになっています。
従って、JavascriptでURIを取得し、別言語ページのURIだった場合にtextContentで表示を変えてしまえばいいのです。実際のコードがこちら。（私たちのホームページはデフォルトが英語なため、コードで日本語化しています）
jQuery(window).on('load',function(){
var path = location.pathname;
if (path == "【日本語ページの相対パス名】"){
var target1 = document.getElementById("【変えたい箇所のID名】");
var target2 = document.getElementById("【変えたい箇所のID名】");
target1.href = "【日本語ページへ遷移させたいため、日本語ページの相対パス名】";
target2.textContent = "【和訳したもの】";
}
}jQueryが必要なのでそこは注意してください。「meets」にはデフォルトで入っていました。
どうでもいいのですが、innerHTMLだとDOM-Based XXS脆弱性につながる可能性があると考えて（この程度では脆弱性にならないのですが）どちらも使えるときはなるべくtextContentを使うようにしています。余談です。
Google ChromeであればF12キーでそのページのHTMLファイルがみれます。そこで変えたい部分のタグのid属性をみつけてこのコードに突っ込みます。
ちなみにid属性が設定されていないときは無理やりねじ込みます。
var id = "【ID名】";
var tmp = document.getElementsByClassName("【変えたい箇所のclass名】");
for(var i=0;i<=tmp.length-1;i++){
//id追加
tmp[i].setAttribute("id",id+i);
}クラス名を取得してそこにid属性をねじ込むコードです。
ちなみにクラス名すらない場合は親要素のクラスまたはidを取得してinnerHTMLでhtmlを少し書くしかないですかね、、
Javascript触るのがはじめてで簡単なコードしか書けませんでしたが、たったこの程度でトップページの日本語化ができました！
ただ、これではSEO対策面で大丈夫なのかといわれると正直大丈夫ではない気がしますね...ですがそこはもう知りません！(笑)
トップページができたので次の問題は日本語化ができないページです。例えばGalleryのアーカイブページ。ここにアクセスしようとすると、英語のページに遷移してしまうので、ヘッダーからフッターにいたるまですべて英語になってしまうんですね。今まで日本語でみていたのに、急に英語になられたら、利用者としても困りますよね。
まず、Galleryページ１つ１つは日本語/英語両方表記することで対応しました。こればかりはもう仕方がないです。
問題はヘッダーやフッター、リンク先がすべて英語になってしまうことで、これはなんとかしなければなりません。中身を日本語/英語両方表記にしたところで、そのページ自体が完全に英語になってしまっていたら、不便ですよね。
そこで、苦肉の策でRefererを使うことにしました。
Refererというのはそのページの遷移前にいたページのURIの情報が載っているHTTPヘッダのことです。
例えば重要情報がURIを通じて受け渡されていると（そのようなことをしているサイトはほとんどないか、あるにしても別途セキュリティ面で対策をしているはずです）Refererを通じて漏洩してしまう可能性があるため、ブラウザの設定でRefererをオフにしている方もいらっしゃるかもしれません。その方たちにとってはごっちゃごちゃのサイトになってしまいます。だからこその苦肉の策です。
if (path == "【英語・日本語で共通のページの相対パス】"){
var referrer = document.referrer;
if(referrer.indexOf("【日本語ページが属するディレクトリ名】") != -1) {
// ホスト名などがリファラーに該当している場合
// 日本語ページにする処理
}
}このコードで、「日本語のページから遷移してきた場合」の処理を書くことで英語版ページに手を加えることなく英語版のページを日本語化することができました。めちゃくちゃ強引です。
以上でなんとかホームページの多言語化を達成できましたが、あまり真似することはおすすめできません。その理由は以下の二つです。
①先述した通り、SEOフレンドリーかが怪しい点。
②完全には多言語化が達成できていない点。
①についてはSEO関連の知識が筆者にないので詳しくお話しすることができないのですが、やはり整然としていてAIからみても形式等がきっちりしているサイトのほうがSEOフレンドリーなんだと思っています（たぶん）。今回は強引にサイトの表示を捻じ曲げただけなのでお世辞にも綺麗なサイトとは言えないかなと。ホントに知識がないので全然関係ないのかもしれませんが、、これはSEOに関しての勉強が必要そうです。
②については、実際にホームページに訪問して探してみてください(笑)。突然ヘッダーメニューが英語になってしまっているかも、、！ですがブラウザの戻るボタンを押せば日本語に戻りますし利便性という点ではあまり気にならなかった/コードではどうしようもなかった（ほんとはやり方があるのかもしれませんが、Javascript初心者には限界でした）ことから放置しています。今回はユーザの利便性を考慮した日本語化だったため、そこはほんとに問題ないかなと判断しました。これまでの説明がうまく伝わっていればどこが不完全がすぐわかるかと思います！ですが僕の説明が下手なので是非探してみてください(笑)
さて、以上が多言語化への道のりだったわけですが、「meets」のデモサイトのように綺麗に多言語化するにはどうするのが正解だったのでしょう？やはりWordpressやテーマ本体のコードをいじるのか、はたまた「meets」を複数個購入して言語ごとに別々の管理画面からサイトを構築し、言語ボタンで遷移させるのが正解だったのか、、
「meets」購入時にマニュアルが配られるのですが、そこでは一切多言語化のフローが記述されておらず、何が正解なのかがわからなかったです、、
良いやり方を知っている方がいらっしゃったら是非教えてください！
最後までお付き合いいただきありがとうございました！
改めましてホームページの閲覧よろしくお願いいたします！
私たちWCBについてまとめた記事もあるのでそちらも是非！
この記事が気に入ったらサポートをしてみませんか？