【Cocoonカスタマイズ】「新着記事」ブロックに「もっと見る」ボタンを追加する方法

はじめに

以下をCocoonで実現します。

【SWELL】投稿リストブロックにページャー（もっと見るボタン）を設定するカスタマイズ方法｜かんた🌊SWELLマニア

WordPressテーマSWELLのカスタマイズ作業メモです。固定ページに新着情報を表示させるときに便利な投稿リストブロックのカスタマイズです。投稿リストブロックは、指定の数だけ投稿を表示させることができますが、その他の記事へのページャー...

「新着記事」のカードを初めに3件表示し、ボタンをクリックすると、追加で3件表示されるようにします。

この記事では、この方法について説明します。

完成イメージ

最初からカードは6枚表示されており、ボタンをクリックすると、単に隠れていたカードが表示されるだけです。

実装手順

以下の手順で実装します。

ラベル
Gutenbergエディターでの設定
Gutenbergエディター

以下に手順を示します。
1. 「新着記事」ブロックを配置します。
  このとき、表示する記事の数を6とします。
2. 「段落」ブロックに「ボタン」と入力し、インラインタグを「ボタン」に設定します。
  高度な設定→追加CSSクラスにmy-btnと入力します。

ラベル

JavaScirptを追加

以下のコードをjavascript.jsに追加します。

jQuery(function ($) {
  $('.my-btn').on('click', function () {
    const $target = $(this).prev('.new-list-box');

    // 全てのカードが表示されている場合
    if ($target.hasClass('is-visible')) {
      $('span', this).text('もっと見る');
      $target.removeClass('is-visible');
    } else {
      $('span', this).text('折りたたむ');
      $target.addClass('is-visible');
    }
  });
});

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

.new-list-box {
  /* 初期表示は4個目以降を非表示 */
  & .a-wrap:nth-child(n+4) {
    display: none;
  }

  /* 4個目以降を表示 */
  &.is-visible .a-wrap:nth-child(n+4) {
    display: block;
  }
}