Illustration, Graphic design & クライアントのリクエストがあり、超クールなjQueryプラグイン・Isotope（アイソトープ）をWordPressに導入できないかを調べましたので覚え書きです。
まず結論から言うと、『Isotope for WordPress』という素晴らしいWPプラグインがあり、これを利用してWordPressにIsotopeを組み込むことが可能です。（完全に検証できてないけど～）
まずはIsotopeを入手し、サーバーへアップロード
本体はjQuery Isotopeからダウンロードできます。個人使用は無料ですが、個人でも商用やデベロッパーは有料ライセンスを購入します。
基本的に必要なのは本体ファイルのみです。ダウンロードしたら、今度は利用中のWPテーマのフォルダ内にアップロードします。
../テーマファイル名/js/isotope.pkgd.min.js
のような感じです。
WPプラグインIsotope for WordPress（MP Isotopesをインストール
プラグインMP Isotopesを『Isotope for WordPress』からダウンロードし、WPにインストールします。
その際に、MP Coreというプラグインもインストールを求められるので、言うことを大人しく聞きます。
MP Isotopesでは、デフォルトのCSSを使うかーとか、カスタムタクソノノミーも使えるぞーとかごにょごにょできますが、とくにいじらなくても大丈夫です。
WordPressのヘッダーに読み込みコードを追記
今度はテンプレート内に読み込ませるためのコードを書き込みます。
header.phpの<head></head>タグ内で、かつ<?php wp_head(); ?>タグの後に
<script type="text/javascript" src="<?php bloginfo(template_url);?>/js/isotope.pkgd.min.js"></script>
とします。このように書くと、ちゃんと外部Javascriptが読み込めますね。
<?php wp_head(); ?>タグの後に書くのは、WordPressのデフォルトで用意されるjQueryをそのまま利用するためです。
テンプレートファイルにコードを追記
使えるテンプレートはarchive.php, tag.php, または category.php です。このいずれかの、ループ内のテンプレート読み込み直前に
<?php moveplugins_isotopes(); ?>
と記入します。
そうしたら、あらすてき！
ソート用のボタンは「タグ」から勝手に生成されて、「ループ」が表示されるエリアは勝手にDIVで囲まれちゃって、細かいJavascriptの設定なんて何もせずにIsotopeなダイナミックアニメーションでソートが出来るようになっちゃいました！
で、デモをお見せできなくて申し訳ないですが、プラグイン配布元にデモページがありますのでそちらをご覧ください。
日本語タグはスラッグを英語に
日本語タグはそのままだとフィルターとして正しく機能しません。日本語タグを使っている場合は必ずダッシュボードの「タグ」からそれぞれ英数字のスラッグを与えましょう。
使うタグはよく考えて
このプラグイン、タグが全て自動でソートボタン化するのが素晴らしいのですが、タグとメタキーワードと連動させてたりして、コンテンツの多いブログサイトなどではタグが沢山あると思います。 そうするとやたらソートボタンが生成されてしまうので、使いどころを考えて最初から構築しないと難しいですね。 言ってみれば「タグ」が「カテゴリー」代わりになるわけです・・・「カテゴリー」でソートしたかったら、自前で設定するしかなさそうです。
