仲間機能情報を掲載しました!

WordPressのTablePressで並べ替え(ソート)や検索機能が使えない場合の対処法

WordPressのTablePressで並べ替え(ソート)や検索機能が使えない場合の対処法

TablePressプラグイン

WordPressには「TablePress」というプラグインがあります。これは、様々な機能の付いたテーブルを、タグなどを使わずに簡単に作成することが出来るものです。

TablePressの問題

TablePressを導入して、基本的には無事に動いていたのですが、表の並び替えや検索などが出来る「機能」の部分が、表示されたりされなかったりしていました。

Advertisement

それが毎回では無く、リロードをして5回に1回表示されなかったり、スマホでリンクを辿って閲覧した時だけ表示されず、リロードしたら直ったりと、不安定なものでした。
この様なイメージです。

前提として

この様な、機能が表示されたりされなかったりする症状の時の、対処法を紹介します。

既にTablePressが(ほぼ)正常に動いている場合を前提とするので、テーブルしか表示されず、「機能」の部分が動いていない、上記のキャプチャ画像の様な表示が毎回続く場合は、別の記事の解説を参考にして下さい。

ただ、恐らく、ヘッダー部分で「jQuery」を読み込んでいないことが考えられる原因の1つなので、デフォルトで「jQuery」を読み込んでいないテーマの場合は、

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

をヘッダーに記述するなどして対処して下さい。その辺りの細かい解説は省きます。

また、プラグインが競合して、動かない場合もあるようです。特に「Head Cleaner」というプラグインが原因になることが多いようです。今回は、「プラグインが原因では無い」場合の対処法です。

Advertisement

対処法

以下コードを記述する。

<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

固定ページでTablePressを展開している場合、先頭にこちらを記述してみて下さい。

たくさんあって1つずつの記述が大変な場合は、スラッグを利用すると良いかもしれません。

スラッグについてはこちらなどをご覧下さい。
WordPressブログ管理者必見! 『スラッグ』を活用しよう

Advertisement

<?php if(is_page( array( 'companion' ) ) ): ?>
<script type="text/javascript" src="../../../../wp-content/themes/テーマ名/js/jquery.dataTables.js"></script>
<?php endif; ?>

自分の場合は、header.phpにこの様な記述をしています。「companion」の部分はスラッグ名で、「../../../../wp-content/themes/テーマ名/js/jquery.dataTables.js」の部分は「jquery.dataTables.js」のJavaScriptファイルが置かれている場所です。

この様に記述することで、「companion」のスラッグ名を指定しているページのみ、「jquery.dataTables.js」のJavaScriptが適用されます。

適用したいページを増やしたい場合は、

<?php if(is_page( array( 'ページ1','ページ2','ページ3' ) ) ): ?>

の様にします。「ページ1」や「ページ2」や「ページ3」の部分にはスラッグ名が入ります。

../../../../wp-content/themes/テーマ名/js/jquery.dataTables.js

の部分は

https://nightly.datatables.net/js/jquery.dataTables.js

でも問題ありません。むしろこっちの方が手っ取り早いです。

外部から読み込むのが個人的に気持ち悪くて、使っているテーマ内の「js」ディレクトリにぶち込んでいるだけです。

この1行を追加するだけで、TablePressの機能が毎回しっかり表示されるようになりました。


Advertisement

こちらの記事も参考にしました。
Installing Editor in WordPress