jQuery MasonryをWordPressで使ったときのメモ

要素を隙間なく埋める、いわゆるPinterest風のレイアウトを作ることができるjQueryプラグインMasonryを使ってWordPressでサイトを作ったので手順などをメモして置きます。

jQueryファイルのダウンロード

設置自体は難しくなく下記のサイトからjquery.masonry.min.jsをダウンロードしてサイトフォルダに置きます。

jQuery Masonry

まずはデモを見やすくするためにWordPressではなくて普通のサイトで使う方法を説明します。

サンプルコード

HTMLは例として下記のようなものを用意します。

<div id="container">
	<div class="post">コンテンツ</div>
	<div class="post">コンテンツ</div>
	<div class="post">コンテンツ</div>
	<div class="post">コンテンツ</div>
	<div class="post">コンテンツ</div>
</div>

次にMasonryを動かすために下記のようなsample.jsを書きます。

$(function(){
	$('#container').masonry({
		itemSelector: '.post',
		columnWidth: 270,
		isAnimated:true,
	});
});

ここではMasonryを適用させるアイテムとして.postを指定し、それを包括する親要素として#containerを指定しています。

HTMLファイルにjsファイルを読み込む記述をしましょう。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript" src="jquery.masonry.min.js"></script>
<script type="text/javascript" src="sample.js"></script>

CSSはサンプルで下記のようなものにしました。

body {
	background: #CCC;
}
#container {
	width:80%;
	margin:0 auto;
}
.post {
	background: #FFF;
	width:230px;
	padding:10px;
	margin:10px;
}

.postについて、marginとpaddingとwidthをあわせた幅は先ほどのsample.jsで指定したcolumnWidthの値に収まるようにしましょう。

#containerのwidthは%指定することでリキッドレイアウトになり、ブラウザの幅にあわせてカラム数が変化してくれます。

あと、sample.jsでisAnimatedを有効にしておくことでカラム数が変わるときにアニメーションをさせることができます。デモサイトを作ったので参考にしてみてください。

デモサイト

WordPressへの実装

さて、このMasonryをWordPressで使えるようにします。
といっても難しいことはなく、テーマフォルダにjsファイルを置いて、下記のコードを<head></head>内に書けばいいだけです。

<?php wp_enqueue_script('masonry', '/wp-content/themes/テーマ名/js/jquery.masonry.min.js',array(jquery)); ?>
<?php wp_enqueue_script('sample', '/wp-content/themes/テーマ名/js/sample.js',array(jquery)); ?>
<?php wp_head(); ?>

あとは自分で作ったHTMLやデザインにあわせて前述したsample.jsやCSSを書き換えしてみてください。