今回の案件
- ワードプレスのお気に入り登録プラグイン「Favorites」を利用して会員（「Simple Membership」で実装）がお気に入り登録できるようにする
- 会員はログインすると、マイページで、登録したお気に入の一覧を閲覧できる
- お気に入りの一覧を、登録日順・年齢・名称などでソートさせたい
この③が今回の課題です。
今まで行ったことのない事例だったので、検索結果をどうやってソートさせればいいんだ？と悩んだのですが、何のことはない！テーブルの各列をそのままソートさせるだけで良かったのでした。要するに、ワードプレスと切り離してテーブルソートとして割り切ればいいだけでした。参考にさせていただいたのは下記のページです。
https://kinocolog.com/tablesorter/
table-sorterを導入する
下記で導入できます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.min.js"></script>
利用方法は下記にあります。
https://mottie.github.io/tablesorter/docs/
ソートしたいテーブルにクラス名（例えばsort-table）をつけてJSを設置します。
$('.sort-table').tablesorter({
textExtraction: function(node){
var attr = $(node).attr('data-value');
if(typeof attr !== 'undefined' && attr !== false){
return attr;
}
return $(node).text();
}
}); あとはCSSでデザインを整えます。一例として以下のような形です。
table.sort-table thead th{
position: relative;
cursor: pointer;
border:2px solid #666;
background:#f4f4f4;
}
table.sort-table tbody td{
border:1px solid #CCC;
}
table.sort-table th::before, table.sort-table th::after{
content: '';
position: absolute;
z-index: 2;
right: 7px;
width: 0;
height: 0;
border: 5px dashed;
border-color: #116535 transparent;
pointer-events: none;
}
table.sort-table th::before{
border-bottom-style: solid;
border-top: none;
top: 30%;
}
table.sort-table th::after{
border-top-style: solid;
border-bottom: none;
bottom: 30%;
}
table.sort-table th.tablesorter-headerAsc:after{
border: none;
}
table.sort-table th.tablesorter-headerAsc:before{
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
table.sort-table th.tablesorter-headerDesc:before{
border: none;
}
table.sort-table th.tablesorter-headerDesc:after{
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
table.sort-table th.sorter-false:before, table.sort-table th.sorter-false:after{
border: none;
}これでソート機能の導入は完了です。
Favoritesで読みこまれた情報にアクセスする
ユーザーがお気入り登録した投稿は、投稿タイトルが「名前」、「サムネイル」はアイキャッチ画像、他にACF（Advanced Custom Fields）のフィールドで「性別」「誕生日」「価格」が設定されています。
取得は簡単です。
アイキャッチ画像なら
<?php echo get_the_post_thumbnail($favorite,array(150,100,true)); ?>で取得できますし、投稿タイトルは
<?php echo get_the_title($favorite); ?>のように、引数に$favoriteを設定すればOK。ACFのフィールドも同様です。
<?php the_field('post-price',$favorite); ?>ソートが必要な列のthead内のthに「data-sorter=”true”」、ソート不要場合は「data-sorter=”false”」のデータ属性をつけます。
<table class="sort-table">
<thead>
<tr>
<th data-sorter="false">サムネイル</th>
<th data-sorter="true">名前</th>
<th data-sorter="true">性別</th>
<th data-sorter="true">誕生日</th>
<th data-sorter="true">価格</th>
<th data-sorter="false">削除</th>
</tr>
</thead>
<tbody>
<?php foreach ($favorites as $favorite) : ?>
<tr>
<td><?php echo get_the_post_thumbnail($favorite,array(150,100,true)); ?></td>
<td><h5><?php echo get_the_title($favorite); ?></h5></td>
<td><?php the_field('post-sex',$favorite); ?></td>
<td><?php the_field('post-birthday',$favorite); ?></td>
<td><?php the_field('post-price',$favorite); ?></td>
<td><?php echo get_favorites_button($favorite); ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>これだけで、見事にソート機能が完成。悩んで損した！というくらい簡単でした。機能はシンプルな解決策が最も美しいですな・・弄りまわす必要のある解決策は、あまりいい解決策とはいえないことが多い、としみじみ思うのでした。