jQueryで、テーブルにソート機能を簡単に追加する方法を説明します。
プラグインは使いません。
WordPressテーマ「Cocoon」を使っている人向けのカスタマイズ記事です。
ですが、各投稿記事毎に「カスタムCSS」「カスタムJavascript」の設定ができるテーマをお使いの場合も同じ手順んでソート付きテーブルを実装することができます。（SANGOなど）
どこから読む？
「並び替え機能付きのテーブル」の実装例
ここで紹介する記述を追加することで、以下のような「ソート機能（並び替え操作）の付いたテーブル」を実装することができます。
| 食べ物 | 日本語名 | ふりがな | 個数 |
|---|---|---|---|
| Apple | リンゴ | りんご | 10個 |
| Potato | ポテト | ぽてと | 5個 |
| Meat | 肉 | にく | 1つ |
| Fish | 魚 | さかな | 3匹 |
テーブルにソート機能をつけるプラグインとして有名な「TablePress」というものがあります。
「TablePress」では、表の内容に「数字+他の言葉」というような書き方をした場合、正確にソートを行うことができなります。
例：「数字+他の言葉」・・・「10（大きい）」「25（もっと大きい）」 のような書き方
一方で、これから紹介する記述でテーブルにソート機能を実装した場合は、上記のように「数字+他の言葉」といった書き方をしてもちゃんと数字順に並び替えをすることができます。
JQuery「tablesorter」を使って、テーブルソート機能の実装をしています。
「各テーブルごと」にソート機能をつけたい場合
ここで紹介するのは「各記事ごと」にテーブルにソート機能を実装する手順になります。
記事まるごとではなく、「各テーブルごと」にソート機能を付けたい場合は、こちらではなく以下のページの手順でテーブルにソート機能を付けてください。
テーブルソート機能の記述・実装方法
テーブルにソート機能を実装するために、以下の4箇所に記述をする必要があります。
- 「カスタムCSS」
- 「カスタムJavascript」
- 記事本文内の「カスタムHTML」ブロック
- 記事本文内の「テーブル」のHTML
上記全て、ソート機能を実装したいテーブルを使う予定の「記事投稿画面」内で行っていきます。
「カスタマイズ」や「テーマファイルエディター」などには追記しません
4箇所と聞くとやることは多く見えるかもしれないですが、コピペでサクッと済んでしまうのでご安心ください。
「カスタムCSS」にコードをコピペする
投稿画面の下部にある「カスタムCSS」内に下記のコードをコピペします。
table th div {
display: inline-block;
}
table th::after {
content: '▶';
}
th.tablesorter-headerAsc {
color: #3ecbeb;
}
th.tablesorter-headerAsc:after {
content: '▲';
color: #3ecbeb;
}
th.tablesorter-headerDesc {
color: #178ba5;
}
th.tablesorter-headerDesc::after {
content: '▼';
color: #178ba5;
}「カスタムJavascript」にコードをコピペする
投稿画面の下部にある「カスタムJavascript」内に下記のコードをコピペします。
$(document).ready(function() {
$('#t-sort').tablesorter();
});上記コードの「#t-sort」は、id名になります。
お好みの文字列に書き換えて大丈夫です。
自分の分かりやすいid名を付けちゃいましょう。
「テーブル」のHTMLコードに追記する
「記事本文内に設置したテーブル」のHTMLにちょこっと追記します。
まずは以下の手順で、テーブルのHTMLの編集画面を表示させましょう。
- 記事本文内にテーブルブロックを追加
- ブロックメニューの「HTMLとして編集」を選択
HTMLが表示されたら、元々あるHTMLコードを以下のように編集してください。
<table id="t-sort">HTMLコード編集の具体例・手順
どういうことだってばよ！な人向けに、もっと詳しくHTMLコードの編集のやり方を説明していきます。
分かるよ！な方は次の手順「カスタムHTMLブロックにコードをコピペする」まで読み飛ばしてくださいませ。
例えば、元々のテーブルHTMLが以下のようなコードだった場合……。
<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>食べ物</th><th>日本語名</th><th>ふりがな</th><th>個数</th></tr></thead><tbody><tr><td>Apple</td><td>リンゴ</td><td>りんご</td><td>10個</td></tr><tr><td>Potato</td><td>ポテト</td><td>ぽてと</td><td>5個</td></tr><tr><td>Meat</td><td>肉</td><td>にく</td><td>1つ</td></tr><tr><td>Fish</td><td>魚</td><td>さかな</td><td>3匹</td></tr></tbody></table></figure>このコード内の「<table class=”has-fixed-layout”>」という部分を見つけてください。
かなり冒頭の方にあります。
そして、この「<table class=”has-fixed-layout”>」という部分を、以下のように編集します。
<table id="t-sort" class="has-fixed-layout">「<table class=”has-fixed-layout”>」という部分だけを上記のように書きかえるだけでOKです。
他のHTMLの記述は、触らずにそのまま置いておきます。
「このブロックには、想定されていないか無効なコンテンツが含まれています」について
HTMLコードの編集をしたあと、「ビジュアル編集」に戻すと「このブロックには、想定されていないか無効なコンテンツが含まれています」というエラーが表示されます。
これはそういう仕様ですので大丈夫です。ご安心ください。
ただ、この状態ではテーブルを編集することができなくなります。
ですので、テーブルを編集したい場合は、「ブロックのリカバリーを試行」するをクリックして編集することになります。
「ブロックのリカバリーを試行」をしてテーブルを編集したあとは、また「<table class=”has-fixed-layout”>」の部分を上記のように書き換えておく手順を行ってください。
「カスタム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>「カスタムHTML」ブロックを追加する場所はどこでも構いません。
テーブルより上でも下でも、本文の一番下でもお好みで。
迷う場合は、とりあえずテーブルブロックの上に設置しておくといいのではないでしょうか。
下記の「数字部分」は、jqueryのバージョン情報の数字となっています。
・「/3.6.0/jquery.min.js」
・「/2.31.3/js/jquery.tablesorter.min.js」
jqueryのバージョン
上記のバージョンでも、問題なくテーブルのソート機能を実装することができます。
ただ、もしも最新バージョンが良いという場合には、以下のサイトから最新のバージョン情報を確認することもできます。
参考 Hosted Libraries | Google for DevelopersGoogle for Developers
