「各テーブルごと」にソート機能を追加する方法（プラグインなし）【WordPress・jQuery】

テーブルに「ソート機能（項目並び替え）の機能を追加する方法を説明します。
プラグインは使いません。

こんな人向け！

「テーブルごと」にソート機能を付けたり、付けなかったりしたい
テーブルの「追加CSSクラス」の追記だけでソート機能のオンオフを制御したい
プラグインは使いたくない

ワードプレスのテーマ「Cocoon」を基にしたカスタマイズ手順を説明していきます。
ですが、他テーマをお使いの場合でも記述箇所はそんなに変わりないので、問題ありません。

どこから読む？

1 「並び替え機能付きのテーブル」の実装例
- 1.1 「各記事ごと」にソート機能をつけたい場合
2 テーブルソート機能の記述・実装方法

「並び替え機能付きのテーブル」の実装例

以下のような「ソート機能（並び替え操作）の付いたテーブル」を実装していきます。

食べ物	日本語名	ふりがな	個数
Apple	リンゴ	りんご	10個
Potato	ポテト	ぽてと	5個
Meat	肉	にく	1つ
Fish	魚	さかな	3匹

「各記事ごと」にソート機能をつけたい場合

ここでは「テーブルごと」にソート機能をつけるかつけないかを設定できる方法を説明していきます。

「各記事ごと」にソート機能をつける・つけないを設定したい場合は、こちらではなく以下の手順でテーブルのソート機能を実装してください。

「記事毎」にテーブルにソート機能を追加するWordPressカスタマイズのアイキャッチ画像

2024年10月28日「各記事ごと」にテーブルにソート機能を追加する方法（プラグインなし）【WordPress・jQuery】

テーブルソート機能の記述・実装方法

「テーブル毎」にソート機能をつけるためには、以下の4箇所に記述をする必要があります。

子テーマの「javascript.js」
子テーマの「style.css」（または「カスタマイズ＞追加CSS」内）
ウィジェットの「投稿本文下＞カスタムHTML」（または記事内「カスタムHTML」ブロック）
記事内「テーブル」ブロックの「追加CSSクラス」

この4箇所に、コードをコピペすれば完了です。

なお、「javascript.js」「style.css」「ウィジェット内のカスタムHTML」への記入は、1度記述を書いてしまえば、それっきりで大丈夫です。

つまり、今後は記事内のテーブルの「追加CSSクラス」にclass名を追記するだけで、テーブルのソートをオンオフにすることができるようになります。

ではさっそくやっていきましょう！

子テーマの「style.css」にコードをコピペする

お使いの子テーマの「style.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;
}

子テーマの「style.css」の場所

「外観＞テーマファイルエディター」
もしくは「外観＞カスタマイズ＞追加CSS」

上記どちらの場所にCSSをコピペしても大丈夫です。

ただし、どちらか一か所にしておきましょう。

コードの記述は必ず「子テーマ」にしましょう。
親テーマにコードを記入してしまうと、テーマのアップデート時に追記したコードが全て消えてしまいます。

子テーマの「javascript.js」にコードをコピペする

お使いの子テーマの「javascript.js」内に下記のコードをコピペします。

$(document).ready(function() {
    $('.has-fixed-layout').parents('.t-sort').find("table").tablesorter();
});

子テーマの「javascript.js」の場所

「外観＞テーマファイルエディター」

上記コードの「.t-sort」は、class名になります。
お好みの文字列に書き換えて大丈夫です。

今後テーブルにソート機能を実装したい場合は、「追加CSSクラス」の箇所に上記class名を同じものを追加することになります。

例：上記のコードの場合は「t-sort」を追加CSSクラスに記入することになります。

ウィジェットの「投稿本文下＞カスタムHTML」にコードをコピペする

まず、以下の手順でウィジェットの追加をしましょう。

「外観＞ウィジェット」からウィジェット画面を開く
「利用できるウィジェット」から「カスタムHTML」を選択
「カスタム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>

なお、「カスタムHTML」ウィジェットを追加する場所は以下の3箇所であれば、どこでも構いません。