tablesorterを使ってみる
価格比較サイトができたのですが、dataTablesがイマイチ、価格などをちゃんとソートしてくれないのと複数ページに勝手に分けられてしまうので使いにくいので他のプラグインを探してみました。
こちらのJavascriptを使ってテーブルをソートしてみます。
tablesorter本体はDownload見出しのFull releaseの部分のjquery.tablesorter.zipからダウンロードしてその中のjquery.tablesorter.jsが本体のようです。
CSSは少ないのでそのままワードプレスの使用しているテーマのstyles.cssに入れてみます。
上・下矢印の画像はドメイントップのimagesディレクトリにいれてCSSを/images/asc.gifなどに書き換えました。
header.phpを以下のようにして（抜粋）
<?php wp_head(); ?>
<?php wp_enqueue_script('jquery');//jQueryの読み込み?>
<?php wp_enqueue_script('tablesorter', get_template_directory_uri().'/js/jquery.tablesorter.js'); ?>
<script>
jQuery(document).ready(function(){
$("#myTable").tablesorter();
});
</script>
実行すると、tablesorterが最後のほうで読み込まれるので・・・ワードプレスの読み込み順というか仕組みをよく理解してない（汗）
function.phpからtablesorterを読み込むようにします。
function.php追加
function theme_name_scripts() {
wp_enqueue_script('tablesorter', get_template_directory_uri().'/js/jquery.tablesorter.js');
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
header.php
<?php wp_enqueue_script('jquery');//jQueryの読み込み?>
<?php wp_head();//ここでフックが読みこまれる ?>
<script>
jQuery(document).ready(function(){
$("#myTable").tablesorter();
});
</script>
目的のテーブルに
<table id="myTable" class="tablesorter">
とすれば表示されました。
一応できましたが・・・価格のソートがおかしい(TOT) 円とか入ってるからか？桁が一桁違うとうまくソートしてくれない。
やはりprototype.js+tablekit.jsのほうがうまくソートしてくれます。
結論！WPでJavascriptソートは使わない
価格比較表なので値段をソートしてもしなくてもいいかな？と思えてきた。高い順に並べても利点はあまりないし、名前順や、ショップの名前順に並べても意味ないかもしれない。
それより余計な機能がない分、ページを速く表示させたほうがよさそう。
完全自作サイトだったら自由が効くけどワードプレスだとなにかと理解できていない部分があるので不具合が起きかねない。
そもそもワードプレスに自作PHPスクリプトを挿入した時点で不具合があるかもしれないので、ソート機能は無くてもよしとします。
とりあえず価格の安い順に並んでれば良いでしょう。
コメント