【wordpress最新版】ソート・絞り込み機能のMixItUpを導入方法に苦戦した話

ここ最近、WordPressをいじり倒すのにハマっています。

特に投稿ページや固定ページ内に直接HTMLでガリガリコードを書けるようになってきたので、サイトの見た目を自分の思った通りの形に出来るようになってきたかなって。

本格的にいじりだすと、今度はJavaScript、PHPやjQueryなんかも使い出してきますが、
この辺は今まで使ってきたHTMLやCSSとは次元が違う難しさで、時にはかなりの時間を要する時も・・・。

今回のソート機能の導入も、例によってなかなか苦戦したので、一応記録として残しておきたいと思います。

1 ソート機能が使えるMixItUpとは？
2 MixItUpの導入方法と使い方
3 jQueryでソート・絞り込み機能を作る

ソート機能が使えるMixItUpとは？

このMixItUpっていうのは、他で紹介されているような記事一覧を並び替えたりするものではなく、記事内にあるコンテンツやdiv要素自体を、並び替えたり、フィルタリングしたりする機能を付けるアイテムになります。

ちなみに普段使っているプラグインとはちょっと違って、
直接JSファイルを読み込ませる形で使うライブラリっていうモノになります。

なので、WordPress初心者にとってはこれの導入は少々ハードルが高めになっているかと。

MixItUpの導入方法と使い方

環境はMac OS。
ざっくりと手順を解説すると、以下のような感じ。

① MixItUpダウンロード
② mixitup.min.jsをワードプレス内のフォルダに入れる
③ どっかでJSファイルを呼び出す

MixItUpのダウンロード

まずは公式サイトへ行って「download latest」からダウンロード。
mixitup公式

もしくは「Get it on GitHub」からダウンロードできます。

ダウンロードしてして解凍すると、色んなものが大量に入ったファイルが展開されるのですが、
実際に使うのはdistファイル内にある2つのjsフォルダのどっちかです。

ちなみに”.min.js”と”.js”の違いは容量が違うってだけで、どっちを使っても問題ありません。
※ minの方はコメントや改行を削るだけ削って容量を減らしてるだけなので、特にこだわりがない限り、minでいいかと。

MixItUpのアップロード

で、このJSファイルをどうしたらいいか・・・？
まずここでちょっと時間を使いました。

僕の場合はWordPress内のテーマに導入するので、最初直接テーマ内に入れようかと思いましたが、WordPressファイル直下にご丁寧にJSファイルが置いてあったので、そこに入れることにしました。

この辺はWebサイトのディレクトリの仕組みをわかってないと、ちょっと苦戦します。

僕の場合はロリポップのサーバーを借りているので、「ロリポップ！FTPページ」からJSファイル内にアップロードしました。
ロリポップだと、ワードプレス自体のファイルを弄る場合はこのページから操作します。

この際に、あとで呼び出すために必要なパス(URL)をメモしておきます。

MixItUpの適応

ファイルに入れたら、あとは下のような感じで読み込みます。

このサイトの方法でファイルにアップロードしているなら以下のようなURLでOK。

<script src="/js/mixitup.js"></script>

記事内のテキスト編集画面に直接コピペしても良いですし、テーマ編集画面のヘッダーPHP等にコピペしても大丈夫です。

あと、念のために最新のjquery.jsをダウンロードしてJSファイルにアップロードするか、もしくは直リンクで同じようにリンクさせといたほうがいいかもしれないです。
jquery公式：jquery.com

読み込みはこんな感じで。

<script src="http://code.jquery.com/jquery-○.○.○.min.js"></script>

MixItUpの使い方

この辺もけっこう苦戦しました。
何しろ、公式は英語・・・。

色々サンプルコードを探して、ようやく安定して使えるものを発見したので、貼っておきます。

<head>

<!--JS読み込み-->
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="/js/mixitup.js"></script>

<script type="text/javascript">
//なにかの呪文・・・？
$(function() {
  var containerEl = document.querySelector('.job_list');
  var mixer = mixitup(containerEl);
});
</script>

</head>

<body>
<div class="job_list">
<div class="filter" data-filter="all">すべて表示</div>
<div class="filter" data-filter=".category-1">カテゴリー1</div>
<div class="filter" data-filter=".category-2">カテゴリー2</div>

<div id="Container">
	<div class="mix category-1">①カテゴリー1に属する</div>
	<div class="mix category-2">②カテゴリー2に属する</div>
	<div class="mix category-1">③カテゴリー1に属する</div>
	<div class="mix category-2">④カテゴリー2に属する</div>
</div>
</div>
</body>

参考にさせてもらったサイトです。
【jQuery】サイト内に今風な『ソート機能』を実装する方法
 かっこよくて気持ちいい！ページ内の要素を整列・抽出する「MixItUp3」がいい感じ

head内にある”なにかの呪文”を安定して動作させるのに色々と苦戦しました。
古いサイトに乗っているような変数代入方法ではうまく動作せず、謎のエラーが。
そのため、いろんなサイトを巡って発見したコードです。

コード内容としては、ざっくり以下のとおりです。

ボタン部
・ボタン内の「data-filter」でカテゴリー名を指定
・「class=”filter”」要素自体がボタンとなっていて、それを押すことでソート、フィルタリング

コンテンツ部
・「class=”mix category-1″」の名前「category-1」部分をMixItUp3で読み分けてソートしたり、フィルタリングしたり

後はこのコードを参考に自分で好きなようにカスタマイズすればOK。