ワードプレスでjQueryプラグインtablesorter導入してみる

tablesorterを使ってみる

価格比較サイトができたのですが、dataTablesがイマイチ、価格などをちゃんとソートしてくれないのと複数ページに勝手に分けられてしまうので使いにくいので他のプラグインを探してみました。

tablesorter

こちらのJavascriptを使ってテーブルをソートしてみます。

tablesorter本体はDownload見出しのFull releaseの部分のjquery.tablesorter.zipからダウンロードしてその中のjquery.tablesorter.jsが本体のようです。

CSSは少ないのでそのままワードプレスの使用しているテーマのstyles.cssに入れてみます。

tablesorter 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">

とすれば表示されました。

tablesorter 価格ソートが変

一応できましたが・・・価格のソートがおかしい(TOT) 円とか入ってるからか?桁が一桁違うとうまくソートしてくれない。

やはりprototype.js+tablekit.jsのほうがうまくソートしてくれます。

結論!WPでJavascriptソートは使わない

価格比較表なので値段をソートしてもしなくてもいいかな?と思えてきた。高い順に並べても利点はあまりないし、名前順や、ショップの名前順に並べても意味ないかもしれない。

それより余計な機能がない分、ページを速く表示させたほうがよさそう。

完全自作サイトだったら自由が効くけどワードプレスだとなにかと理解できていない部分があるので不具合が起きかねない。

そもそもワードプレスに自作PHPスクリプトを挿入した時点で不具合があるかもしれないので、ソート機能は無くてもよしとします。

とりあえず価格の安い順に並んでれば良いでしょう。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする