トップページの「カードタイプ切り替え」機能を追加する方法

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

jQuery(function ($) {
  const $list = $('.list');

  // カードタイプごとに適用するクラスの対応マップ
  const layoutMap = {
    'ect-entry-card'      : ['ect-entry-card'],
    'ect-big-card'        : ['ect-big-card'],
    'ect-vertical-card-2' : ['ect-vertical-card-2', 'ect-vertical-card', 'ect-2-columns']
  };

  if ($list.length) {
    const formHtml = `
      <form class="layout-switcher" id="layoutForm">
        <label class="layout-switcher__item">
          <input class="layout-switcher__input" type="radio" hidden name="layout" value="ect-entry-card">
          <span class="layout-switcher__icon dashicons dashicons-align-wide"></span>
        </label>
        <label class="layout-switcher__item">
          <input class="layout-switcher__input" type="radio" hidden name="layout" value="ect-vertical-card-2">
          <span class="layout-switcher__icon dashicons dashicons-screenoptions"></span>
        </label>
        <label class="layout-switcher__item">
          <input class="layout-switcher__input" type="radio" hidden name="layout" value="ect-big-card">
          <span class="layout-switcher__icon dashicons dashicons-align-full-width"></span>
        </label>
      </form>
    `;

    // 「カードタイプ切り替え」ボタンを追加
    $list.before(formHtml);

    // layoutMapに定義されているすべてのクラス名を重複なくリスト化
    const allLayoutClasses = Object.values(layoutMap).flat();

    // ローカルストレージから取得
    const savedKey = localStorage.getItem('my_layout_class') || 'ect-entry-card';
    const savedClasses = layoutMap[savedKey] || layoutMap['ect-entry-card'];

    // 保存されているレイアウトクラスを適用
    $list
      .removeClass(allLayoutClasses.join(' '))
      .addClass(savedClasses.join(' '));

    // 保存されているレイアウトを選択状態に設定
    $(`input[name="layout"][value="${savedKey}"]`).prop('checked', true);

    // レイアウトが変更された場合
    $('input[name="layout"]').on('change', function () {
      const selectedKey = $(this).val();
      const selectedClasses = layoutMap[selectedKey] || layoutMap['ect-entry-card'];

      // 選択したレイアウトのクラスを付与
      $list
        .removeClass(allLayoutClasses.join(' '))
        .addClass(selectedClasses.join(' '));

      // 選択されたレイアウトをローカルストレージに保存
      localStorage.setItem('my_layout_class', selectedKey);
    });
  }
});

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

.layout-switcher {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.layout-switcher__item {
  color: #ccc;
  cursor: pointer;
}

.layout-switcher__input:checked + .layout-switcher__icon {
  color: #333;
}