ウェブサイトの多言語対応をするにあたり、同一のページ内で表示する言語を切り替えたいと思って、ボタンを押すと表示されるテキストが切り替わるjs作りました。
ChatGPTに相談しながら作ったコードで、まだ作り途中なので今後ブラッシュアップするとは思いますが、ひと段落したので備忘録がてら書き留めておきます。
今回の多言語対応の目的
本格的に多言語対応させるためには、結局は言語ごとにページを作るのが一番良いと思います。
headタグ内に書くべき情報なども言語によって変わりますし、それによってGoogleなどの検索エンジンに伝える情報も異なります。
とはいえ、「このページのこの箇所だけ日本語と英語の表記を用意したい」っていうこともあると思うので、そんな時に使えるコードです。
言語切り替えボタンのコード
まずはヘッダーあたりに置く「言語切り替えボタン」のコードです。HTMLとjsを併記しておくので、jsを別ファイルに移したい場合は適宜うまいことやってください。
<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は下記の感じで書いてください。
<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はやっぱり便利ですね。