【クリックイベント】
Javascriptでテキストの変更

2023.12.02

はじめに

概要

このテキストは、ユーザーがクリックした際にテキストが変わるWebデザインの実装方法について説明しています。HTML, CSS, JavaScriptを用いて、タブをクリックすると関連するコンテンツが表示される仕組みを作る方法を示しています。また、WordPressでの応用方法や、具体的なコードの例が記載されており、WordPressでショートコードを使った実装方法も紹介していきます。

目的

実装のデザイン
応用編(WordPress)
まとめ

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

実装のデザイン

タイトル①
タイトル②
タイトル③

タイトル①テキスト

タブをクリックすると、それに関連するコンテンツに切り替わります。上記のようなデザインを実装していきます。

HTML

<section class="test">
  <div class="test__inner wrap flex-column">
    <div class="test__select">
      <ul class="flex-row">
        <li class="active">タイトル①</li>
        <li>タイトル②</li>
        <li>タイトル③</li>
      </ul>
      <div class="test__txt">
        <p>タイトル①テキスト</p>
      </div>
      <div class="test__txt d-none">
        <p>タイトル②テキスト</p>
      </div>
      <div class="test__txt d-none">
        <p>タイトル③テキスト</p>
      </div>
    </div>
  </div>
</section>

CSS

.d-none {
  display: none;
}

.flex-row {
  display: flex;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.test ul {
  color: #192653;
  line-height: 1.2;
  text-align: center;
  width: 100%;
  justify-content: space-between;
}

@media screen and (min-width: 1024px) {
  .test ul {
    font-size: 30px;
  }
}

.test li {
  background-color: #FDE948;
  border-radius: 20px 20px 0 0;
  display: flex;
  width: 30%;
  height: 50px;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 1024px) {
  .test li {
    height: 90px;
  }
}

.test li.active {
  color: #FFFFFF;
  background-color: #192653;
}

.test__select {
  margin-top: 27px;
}

@media screen and (min-width: 1024px) {
  .test__select {
    margin-top: 40px;
  }
}

.test__txt {
  padding: 20px;
  border: #192653 solid 1px;
  border-radius: 0 0 20px 20px;
  height: 458px;
}

@media screen and (min-width: 1024px) {
  .test__txt {
    border: #192653 solid 3px;
    font-size: 20px;
  }
}

実装のポイントは.d-none クラスの使用です。タイトル①を除く他のボックスにこのクラスを適用することで、それらを非表示にすることができます。そして、Javascriptを使用して、クリックした際に.activeクラスを付与しこれらを表示させるようにします。デザインを実装する際は、全体を通して記述するのではなく、ボタンとテキストの部分を別々にコード化することで、より簡単に記述することが可能です。

Javascript

class Onclick {
  constructor() {
    this._click();
  }

  _click() {
    // すべてのタブとコンテンツを取得し、変数に格納
    var testTabs = document.querySelectorAll(".test__select ul.flex-row li");
    var testContents = document.querySelectorAll(".test__txt");


    testTabs.forEach(function (tab, index) {
      tab.addEventListener("click", function () {
        // すべてのタブから "active" クラスを削除
        testTabs.forEach(function (tab) {
          tab.classList.remove("active");
        });
        // クリックされたタブに "active" クラスを追加
        this.classList.add("active");
        // すべてのコンテンツを非表示にする
        testContents.forEach(function (content) {
          content.classList.add("d-none");
        });
        // クリックされたタブに対応するコンテンツを表示する
        testContents[index].classList.remove("d-none");
      });
    });
  }
}
new Onclick();

上記で説明した内容をJavascriptで記述すると、このようになります。`.querySelectorAll`を使用してすべてのタブとコンテンツを取得し、`forEach`メソッドを利用して実装していることから、可読性が良く効率的なコードといえます。おすすめの方法としてはChatGTPを活用してコードを生成することです。

応用編

ここからはWordPress開発において、先述したコードをブロックエディタと連動させてコンテンツ部分をカスタム投稿タイプで編集する方法について解説します。カスタムHTML内でも使用できるようにショートコードに組み込んでいます。オリジナルテーマ開発を手掛けている方の参考になれば幸いです。

PHP

function my_custom_shortcode()
{
  ob_start();

  $args = array(
    'post_type' => 'test',
    'order' => 'ASC'
  );
  $my_query = new WP_Query($args);

  $post_counter = 0; // カウンター変数を初期化

  while ($my_query->have_posts()) : $my_query->the_post();
    $post_counter++; // 各投稿でカウンターをインクリメント

    // 最初の投稿以外に 'd-none' クラスを追加
    $class = $post_counter > 1 ? 'test__txt d-none' : 'test__txt';

    echo '<div class="' . $class . '">';
    the_content();
    echo '</div>';
  endwhile;

  wp_reset_postdata();

  return ob_get_clean();
}
add_shortcode('my_test_shortcode', 'my_custom_shortcode');

これは三項演算子（条件演算子）を使用して書かれています。三項演算子は一般的に条件 ? 真の場合の値 : 偽の場合の値の形で記述されます。このコードでは、$post_counter >1 が条件であり、この条件が真（true）ならば ‘test__txt d-none’ を、偽（false）ならば ‘test__txt’ を $class 変数に代入します。

$post_counterという変数の値が1より大きいかどうかをチェックしています。もし1より大きければ、$class変数に’test__txt d-none’という文字列を代入します。そうでなければ、’test__txt’という文字列を代入します。

まとめ