「タグクラウド」ウィジェットをタグ数で折りたたみ表示する方法

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

jQuery(function ($) {
  // 折りたたみ対象とするタグの項目数を設定
  const n = 10;

  // もっと見るボタンのHTMLを設定
  const button = '<div class="tag-cloud__more"></div>';

  // サイドバー内にあるタグクラウドを取得
  $('.sidebar .widget_tag_cloud').each(function () {
    const $items = $('.tagcloud a', this);

    // タグの項目数が指定した制限を超えていない場合は処理対象外
    if ($items.length <= n) {
      return;
    }

    // 制限数以降のタグを取得
    const $targets = $items.slice(n);

    // 折りたたみ対象を初期状態で非表示に設定
    $targets.hide();

    // タグクラウドの末尾にもっと見るボタンを登録
    const $btn = $(button).appendTo($('.tagcloud', this));

    // もっと見るボタンのクリックイベントを登録
    $btn.on('click', function () {
      // ボタンの開閉状態を active クラスで変更
      $btn.toggleClass('active');

      // active の状態に合わせて対象項目を表示・非表示
      $targets.toggle($btn.hasClass('active'));
    });
  });
});

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

.tagcloud {
  .tag-cloud-link {
    width: 100%;
  }

  .tag-cloud__more {
    border: 1px solid #ccc;
    cursor: pointer;
    display: grid;
    height: 20px;
    margin: 2px;
    place-content: center;
    width: 100%;

    &::before {
      color: #ccc;
      content: '\f078';
      display: block;
      font-family: 'Font Awesome 5 Free';
      font-size: 5px;
      font-weight: bold;
    }

    &.active::before {
      content: '\f077';
    }
  }
}