TablePressプラグイン
WordPressには「TablePress」というプラグインがあります。これは、様々な機能の付いたテーブルを、タグなどを使わずに簡単に作成することが出来るものです。
TablePressの問題
TablePressを導入して、基本的には無事に動いていたのですが、表の並び替えや検索などが出来る「機能」の部分が、表示されたりされなかったりしていました。
それが毎回では無く、リロードをして5回に1回表示されなかったり、スマホでリンクを辿って閲覧した時だけ表示されず、リロードしたら直ったりと、不安定なものでした。
この様なイメージです。
前提として
この様な、機能が表示されたりされなかったりする症状の時の、対処法を紹介します。
既にTablePressが（ほぼ）正常に動いている場合を前提とするので、テーブルしか表示されず、「機能」の部分が動いていない、上記のキャプチャ画像の様な表示が毎回続く場合は、別の記事の解説を参考にして下さい。
ただ、恐らく、ヘッダー部分で「jQuery」を読み込んでいないことが考えられる原因の1つなので、デフォルトで「jQuery」を読み込んでいないテーマの場合は、
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>をヘッダーに記述するなどして対処して下さい。その辺りの細かい解説は省きます。
また、プラグインが競合して、動かない場合もあるようです。特に「Head Cleaner」というプラグインが原因になることが多いようです。今回は、「プラグインが原因では無い」場合の対処法です。
対処法
以下コードを記述する。
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>固定ページでTablePressを展開している場合、先頭にこちらを記述してみて下さい。
たくさんあって1つずつの記述が大変な場合は、スラッグを利用すると良いかもしれません。
スラッグについてはこちらなどをご覧下さい。
WordPressブログ管理者必見！ 『スラッグ』を活用しよう
<?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の機能が毎回しっかり表示されるようになりました。
Installing Editor in WordPress