ウェブサイトの多言語対応をするにあたり、同一のページ内で表示する言語を切り替えたいと思って、ボタンを押すと表示されるテキストが切り替わるjs作りました。
ChatGPTに相談しながら作ったコードで、まだ作り途中なので今後ブラッシュアップするとは思いますが、ひと段落したので備忘録がてら書き留めておきます。
今回の多言語対応の目的
本格的に多言語対応させるためには、結局は言語ごとにページを作るのが一番良いと思います。
headタグ内に書くべき情報なども言語によって変わりますし、それによってGoogleなどの検索エンジンに伝える情報も異なります。
とはいえ、「このページのこの箇所だけ日本語と英語の表記を用意したい」っていうこともあると思うので、そんな時に使えるコードです。
言語切り替えボタンのコード
まずはヘッダーあたりに置く「言語切り替えボタン」のコードです。HTMLとjsを併記しておくので、jsを別ファイルに移したい場合は適宜うまいことやってください。
HTML
<div class="lang-box">
<button id="switch-lang" data-current-lang="ja">
<span class="switch-lang-selected">ja</span> / <span class="switch-lang-not">en</span>
</button>
</div>
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
var button = document.getElementById(‘switch-lang’);
var storedLang = localStorage.getItem(‘selectedLang’); // LocalStorageから言語設定を取得
// 保存された言語設定に基づいてページの言語を設定
if (storedLang) {
setLanguage(storedLang);
}
// 言語切り替えボタンのクリックイベント
button.addEventListener(‘click’, function() {
var currentLang = button.getAttribute(‘data-current-lang’);
var newLang = currentLang === ‘en’ ? ‘ja’ : ‘en’;
setLanguage(newLang);
// 新しい言語設定をLocalStorageに保存
localStorage.setItem(‘selectedLang’, newLang);
});
});
function setLanguage(lang) {
var button = document.getElementById(‘switch-lang’);
var contentElements = document.querySelectorAll(‘[data-en], [data-ja]’);
var imageElements = document.querySelectorAll(‘.lang-img’); // 言語切り替え対象の画像要素を全て選択
contentElements.forEach(function(el) {
var newText = el.getAttribute(‘data-‘ + lang);
if (el.innerHTML === el.textContent) {
el.textContent = newText;
} else {
el.innerHTML = newText;
}
el.setAttribute(‘data-current-lang’, lang);
});
// すべての画像要素のsrc属性を更新
imageElements.forEach(function(img) {
img.src = img.getAttribute(‘data-‘ + lang);
});
// ボタンのテキストを更新
if (lang === ‘en’) {
button.innerHTML = ‘<span class="switch-lang-not">ja</span> / <span class="switch-lang-selected">en</span>’;
} else {
button.innerHTML = ‘<span class="switch-lang-selected">ja</span> / <span class="switch-lang-not">en</span>’;
}
button.setAttribute(‘data-current-lang’, lang);
}
</script>
表示するテキストのHTML記述例
表示するテキストのHTMLは下記の感じで書いてください。
HTML
<div id="content">
<h2 data-en="About website" data-ja="ウェブサイトの使い方">ウェブサイトの使い方</h2>
<div id="multilang-content" data-en="<?php echo esc_attr(wpautop(get_field(‘english_text’))); ?>" data-ja="<?php echo esc_attr(wpautop(get_field(‘japanese_text’))); ?>">
<?php echo wpautop(get_field(‘japanese_text’)); // 初期表示は日本語 ?>
</div>
<div class="about-img-box">
<img class="lang-img" src="<?php echo get_stylesheet_directory_uri(); ?>/images/japanese_image1.jpg" data-en="<?php echo get_stylesheet_directory_uri(); ?>/images/english_image1.jpg" data-ja="<?php echo get_stylesheet_directory_uri(); ?>/images/japanese_image1.jpg">
<img class="lang-img" src="<?php echo get_stylesheet_directory_uri(); ?>/images/japanese_image2.jpg" data-en="<?php echo get_stylesheet_directory_uri(); ?>/images/english_image2.jpg" data-ja="<?php echo get_stylesheet_directory_uri(); ?>/images/japanese_image2.jpg">
</div>
</div>
例として3パターン記載してます。
1つ目はシンプルにHTMLタグの中にdata-enとdata-jaの2つの言語のテキストを入れておくだけの簡単なものです。
2つ目はACFのカスタムフィールドを出し分けるコードで、テキストエリアにテキストを放り込むだけを想定しているので、wpautopをつけてます。
3つ目は画像を出力する例です。画像のパスはテーマフォルダを示すように書いてしまいましたが、uploadフォルダ内を設定した方が使い勝手が良いかもしれません。
最後に
雑な情報で恐縮ですが、詳細はコードをまるっとコピーしてChatGPTに送って解説してもらってください。
こういう使い方ができるのでChatGPTはやっぱり便利ですね。