「テーブル」ブロックにソート機能を追加する方法

以下の手順で設定します。

1. 「テーブル」ブロックを配置します。
2. 「ヘッダーセクション」をオンにし、列の見出しを入力します。
   「ヘッダーセクション」を設定しないと正しく動作しません。
3. 高度な設定→追加CSSクラスにmy-sortと入力します。

以下のコードをfunctions.phpに追加します。

add_action('wp_enqueue_scripts', function () {
  ob_start();
  ?>
  jQuery(function ($) {
    $('.my-sort table').DataTable({
      paging: false,        // ページネーションを非表示
      info: false,          // 下部の情報を非表示
      lengthChange: false,  // 表示件数の選択を非表示
      searching: false,     // 検索ボックスを非表示
      ordering: true        // 並び替え機能を有効
    });
  });
  <?php

  $handle = "datatables";

  wp_enqueue_style($handle, 'https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css');
  wp_enqueue_script($handle, 'https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js', ['jquery'], null, true);
  wp_add_inline_script($handle, ob_get_clean());
});

「DataTables」と同様です。

以下のコードをfunctions.phpに追加します。

add_action('wp_enqueue_scripts', function () {
  ob_start();
  ?>
  .my-sort th div {
    display: inline-block;
  }

  .tablesorter-headerUnSorted::after,
  .tablesorter-headerAsc::after,
  .tablesorter-headerDesc::after {
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 3px;
  }

  .tablesorter-headerUnSorted::after {
    content: '\f0dc';
  }

  .tablesorter-headerAsc::after {
    content: '\f0de';
  }

  .tablesorter-headerDesc::after {
    content: '\f0dd';
  }
  <?php

  $handle = 'tablesorter';

  wp_register_style($handle, false);
  wp_enqueue_style($handle);
  wp_add_inline_style($handle, ob_get_clean());

  ob_start();
  ?>
  jQuery(function ($) {
    $('.my-sort table').tablesorter();
  });
  <?php

  wp_enqueue_script($handle, 'https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/jquery.tablesorter.min.js', ['jquery'], null, true);
  wp_add_inline_script($handle, ob_get_clean());
});