1RiDzain 2021年9月30日

今回の案件

  1. ワードプレスのお気に入り登録プラグイン「Favorites」を利用して会員（「Simple Membership」で実装）がお気に入り登録できるようにする
  2. 会員はログインすると、マイページで、登録したお気に入の一覧を閲覧できる
  3. お気に入りの一覧を、登録日順・年齢・名称などでソートさせたい

この③が今回の課題です。

今まで行ったことのない事例だったので、検索結果をどうやってソートさせればいいんだ？と悩んだのですが、何のことはない！テーブルの各列をそのままソートさせるだけで良かったのでした。要するに、ワードプレスと切り離してテーブルソートとして割り切ればいいだけでした。参考にさせていただいたのは下記のページです。

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>

これだけで、見事にソート機能が完成。悩んで損した！というくらい簡単でした。機能はシンプルな解決策が最も美しいですな・・弄りまわす必要のある解決策は、あまりいい解決策とはいえないことが多い、としみじみ思うのでした。