【Cocoon】表(テーブル)のソート(並び替え)機能を実装【WORDPRESS】

ソート（並び替え）機能について

表の一番上の項目にあたる所をクリックすると、列の並び替えが出来ます。

名前	ふりがな	出身地	年齢
John	ジョン	青森県	22
Mary	メアリー	東京都	14
Charlie	チャーリー	福岡県	35

数字、アルファベット、カタカナは並び替えが正しく出来ますよが、漢字は並び替えが出来ませんのでご了承ください。

ソート（並び替え）機能の実装方法

CSSにコードを記入

投稿画面の下にあるカスタムCSSの欄に下記のコードを記入して下さい。

table th div {
    display: inline-block;
}

table th::after {
    content: '▶';
}

th.tablesorter-headerAsc {
    color: lightpink;
}

th.tablesorter-headerAsc:after {
    content: '▲';
    color: lightpink;
}

th.tablesorter-headerDesc {
    color: aqua;
}

th.tablesorter-headerDesc::after {
    content: '▼';
    color: aqua;
}

カスタムJavascriptにコードを記入

投稿画面の下にあるカスタムJavascriptの欄に下記のコードを記入して下さい。

ここの table-sort については、次の表に追記する id となります。この table-sort については、任意の名前で構いません。

$(document).ready(function() {
    $('#table-sort').tablesorter();
});

表に id を追加

テーブルを追加したあと、ブロックメニューのHTMLとして編集を選択します。

最初の行の<table>に id=”table-sort” というコードを追記します。先ほどの id に別の名前を付けられた方は、その名前にして下さい。

<table id="table-sort">

HTMLコードを追加

カスタムHTMLのブロックを追加し、下記のコードを入力します。カスタムHTMLのブロックは任意の場所で構いません。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>

jquery.min.js の前の数字『3.6.0』、jquery.tablesorter.min.js の前の数字『2.31.3』はバージョンの数字になります。

下記のサイトで最新バージョンを確認出来ますが、古いバージョンも常にあるので、特に気にされなくてもいいと思います。

おわりに

CocoonにはカスタムCSS、カスタムJavascriptの欄があるので、簡単にソート機能が導入できると思います。

是非、試してみて下さいね。