このサイトで言えば「テンプレート」の部分。

最初は6個のテンプレートを表示させ、「もっと見る」をクリックでさらに6個のテンプレートが表示される。で、最後まで開いたら「閉じる」になり、それをクリックすると最初の状態に戻る。

という挙動をさせたかったので、jQueryを使うことにしました。

いくつかの方法を試しましたが、思い通りに動いてくれたのは下記のサイト様のコードです。(完璧!)

【jQuery】「もっと見るボタン」を押して2個ずつ表示

この最後の「//全部表示したらボタン削除」以降の部分を少し変えて、コードをカスタマイズ。

そして忘れてはいけないのが、cssとphpファイルの書き直し。

まず、私の場合はsection.phpのテンプレートのサブループ部分、’posts_per_page’ => -1,　で全件表示させる必要がある。(全件表示ということで、_responsiv.scss記載のテンプレートのグリッドも書き換える必要があった)

それからcssは、is-hiddenというクラスにdisplay:none;を指定しなければならない。

つまり、全テンプレートをずらずらっと並べておいて、7番目以降は全て非表示にするというスタイルになりますね。

最後の「//全部表示したら」以降だけここに書いておきます。

var btn1 = $('.moreBtn');
var btn2 = $('.closeBtn');
 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
//全部表示したら
        if (hiddenLength === 1) {
          $(btn1).hide();//moreボタン削除
          $(btn2).show();//閉じるボタン表示
        }
      });
    });
    //「閉じる」ボタンで最初の6個表示に戻る
    $(btn2).on('click', function () {
      $(btn2).hide();//閉じるボタンを非表示
      $(btn1).show();//moreボタン表示に


      (function () {
        var addCount = 0;
  
        $(item).each(function () {
          if (addCount === 6) {
            $(this).addClass(className);
            return;
          }
          if (!$(this).hasClass(className)) {
            addCount++;
          }
        });
      }());
    });
  }());
});