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

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

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

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

add_action('wp_enqueue_scripts', function() {
  // ライブラリを追加
  wp_enqueue_style(
    'datatables-css',
    'https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css',
    [],
    null
  );

  wp_enqueue_script(
    'datatables-js',
    'https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js',
    ['jquery'],
    null,
    true
  );

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

「DataTables」と同様です。

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

add_action('wp_enqueue_scripts', function() {
  // ライブラリを追加
  wp_enqueue_script(
    'jquery-tablesorter',
    'https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/jquery.tablesorter.min.js',
    ['jquery'],
    null,
    true
  );

  // JavaScriptを追加
  wp_add_inline_script(
    'jquery-tablesorter',
    "jQuery(function($) {
       $('.my-sort table').tablesorter();
    });"
  );
});

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

.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';
  margin-left: 3px;
}

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

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

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