【解決】TablePressで作った表の並べ替え・検索等が機能しない時の対処法【Cocoon】

CocoonでTablePressが動かない
表プラグインTablePress

本記事はCocoonテーマを利用している人向けです。

TablePressの「DataTables JavaScriptライブラリ機能」にあたる検索や並べ替えなどがうまく動かない問題を解消したので備忘録を残します。

結論書いちゃうと

  • JavaScript縮小化設定がプラグインの挙動に影響していた
  • 除外プラグイン設定して問題解消

って感じでした!画像付きで説明するので参考にしてください。

発生したエラー

発生したエラーは、表やデータは表示されるが検索や並び替え・横スクロールが機能しないというもの。

tablepressエラー
検索枠や並び替えボタンがない

わざわざ表プラグインを使うのは「並べ替えや検索をしたかったから」

これでは本末転倒。

ちなみに正常に表示される場合はこのようになる↓

tablepres表のデモ画像
引用:https://ja.wordpress.org/plugins/tablepress/

TablePressの設定をいじってもうんともすんともだったのでとりあえずCocoonのフォーラムで同じ現象で困っている人がいないか、解決策がないか検索…

しようと思ったんですけどその前に答え見つけました!

そう、フォーラムの注意書き2「高速化を無効に」です。

cocoonフォーラム
引用:https://wp-cocoon.com/community/

プラグインの問題はCocoonの高速化機能を解除することで解決する場合があるので、早速設定をいじってみるとあっという間に解決!

解決方法

私の場合はこの手順↓で解決しました。

Cocoon設定→高速化→JavaScript縮小化設定のチェックを外す→保存

ここから画像付きでさらに細かく説明していきます。

まずはCocoon設定内の高速化の画面に移動。

JavaScript縮小化を外す
JavaScript縮小化

おそらく「JavaScriptを縮小化する」にチェックが入っているので、これを外します。

JavaScript縮小化を外す
チェックを外す

この状態で保存。

TablePressを使っているページを更新してみると…

検索枠・並び替えが表示された
検索枠・並び替えが表示された

ほいきた!件数、検索枠、並び替えが表示されました!

JavaScriptを縮小化しなければTablePressの機能を使えることがわかりました。

ここからもうワンポイント!

プラグインJavaScriptを除外する

せっかくある機能「JavaScriptを縮小化」を完全に無効化するのはもったいないので、

私はプラグイン単体(TablePressのみ)除外する方法にしました。

Cocoon設定JavaScript縮小化の除外
縮小化の除外設定

「JavaScriptを縮小化する」のチェックを入れる。

TablePressのみJavaScriptを縮小化したくないので、除外するためにファイルパス「/plugins/tablepress/」を入力。

設定を保存しテーブルのプレビューを確認。

検索、並べ替えボタンなど全て表示されたらOK!

素敵なブログライフを〜!

コメント

タイトルとURLをコピーしました