言語切り替えボタンを押すと表示されるテキストが切り替わるjs作ったのでコードを紹介

ウェブサイトの多言語対応をするにあたり、同一のページ内で表示する言語を切り替えたいと思って、ボタンを押すと表示されるテキストが切り替わる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はやっぱり便利ですね。