「新着記事」ブロックに「もっと見る」ボタンを追加する方法

以下に手順を示します。

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

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

jQuery(function ($) {
  contents = '.widget-entry-cards a';

  // 初期表示するカードの数
  var show = 3;

  // クリックで表示するカードの追加数
  var num  = 3;

  // 初期表示数を超えるカードを非表示にする
  $(contents + ':nth-of-type(n+' + (show + 1) + ')').addClass('is-hidden');

  $('.my-btn').on('click', function () {
    // クリックされたボタンの直前のカードをnum個表示
    var $target = $(this).prev('.new-list-box').find(contents + '.is-hidden').slice(0, num);

    // 直前のカードを表示
    $target.removeClass('is-hidden');

    // 全てのカードが表示された場合、ボタンを非表示
    if ($(this).prev('.new-list-box').find(contents + '.is-hidden').length == 0) {
      $(this).fadeOut();
    }
  });
});

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

.widget-entry-cards a.is-hidden {
  display: none;
}