タイル状にきれいに敷き詰めてくれるプラグイン「jQuery Masonry」をwordpressに設置しようとしたら、なかなかうまくいかず、やたらと時間がかかってしまったことがありました。
結論から言えば、ものすごく簡単な…というか、とてもシンプルなコードを書くだけでよかったんだけど、ネットで検索して出てきた設置の仕方の通りにやってるはずなのに…と、原因がなかなかつかめなかったのです。
で、そのとき調べたやり方でうまくいかなかった理由に、それが古いやり方だったから、というのがありました。
古いといっても2014年頭くらいの情報だったんですけどね。

というわけで、2015年5月現在のやり方を書いておこうと思います。

この時点でwordpressのバージョンは4.2です。
4.2の時点のwordpressにはjQuery Masonryが内包されています。
なのでわざわざDLして設置する必要がないのです。
このことを知らなかったために私は苦労しました。
jQuery Masonryがいつからwordpressに内包されたのか、ちょっと見つけきれなかったのですが、設置を最初に試みたのが2014年12月でその時はバージョン4.0でした。

設置の仕方

テンプレートファイル

例えば、フロントページやアーカイブページで投稿記事の一覧をタイル状に表示させるなら、下記のようなコードになります。

<div id="container">
<?php if( have_posts() ) : ?>
	<?php while( have_posts() ) : the_post(); ?>
	<div id="<?php the_ID(); ?>" <?php post_class("tile"); ?>>
		//コンテンツ
		<a href="<?php the_permalink(); ?>">
			<?php if( has_post_thumbnail() ) : ?>
			<div>
				<?php the_post_thumbnail('thumbnail','class=list-thumbnail'); ?>
			</div>
			<?php endif; ?>
			<div>
				<h2><?php the_title(); ?></h2>
			</div>
		</a>
		//コンテンツここまで
	</div>
	<?php endwhile; ?>
<?php endif; ?>
</div>

ここではタイルの中身にサムネイルとタイトルを表示し、全体に記事へのリンクを付けています。
ようするに、

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

のようなHTMLを出力するコードを記述します。
divに付けているidやclassは任意で構いません。

jsファイル

自分で設置しなければならないのはjQuery Masonryを自分用にカスタマイズするための下記のようなコードを書いたjsファイルのみ。

jQuery(window).load(function() {
	jQuery('#container').masonry({
		itemSelector: '.tile',
		columnWidth: 300,
		isAnimated:true,
		isFitWidth: true
	 });
});

知っている方にはわざわざ説明するまでもないでしょうが、wordpressでjQueryを使うときは、他のJavaScriptライブラリと衝突を防ぐため、$を使わずにjQueryと書く必要があります。
(window).loadは、画像を読み込む前にjQuery Masonryが作動すると要素が重なってしまうため、それを防ぐためのものです。画像の読み込みが終わってからjQuery Masonryを作動させます。
上記のjsファイルを使用するテーマの中に保存します。
場所はどこでもいいけど、今回はテーマフォルダ直下にjsというフォルダを作ってgrid.jsというファイル名で保存しました。

パラメータ

itemSelector 各タイルに付けたクラス名。必須
columnWidth は各タイルのサイズ。タイルの間にmarginやpadding、borderを入れたい場合はそれを全部足した数値を入れます。単位はpx。必須
※ウィンドウ幅によってタイルのサイズを可変にすることもできます(後述)
isAnimated ウィンドウサイズが変わった時にアニメーションで切替えてくれるオプション。
isFitWidth タイル全体を囲むボックスのサイズを合わせてくれるオプション。

あとは、functions.phpに下記のコードを加えて読み込ませればOK。

wp_enqueue_script('grid' , get_template_directory_uri().'/js/grid.js', array( 'jquery-masonry' ));

‘grid’ はスクリプトのハンドル名。任意でお好きなものを。
get_template_directory_uri().’/js/grid.js’ はファイルの場所を指定するURL。
array( ‘jquery-masonry’ ) は、このスクリプトはjQuery Masonryを元に動きますよ、というもの。これでjQuery Masonryとさらにその元のjQueryを読み込んでくれます。

タイルサイズを可変にする

テンプレートファイル

タイルのサイズを%で指定してウィンドウサイズに合わせて可変にすることもできます。
タイル状にならべたい要素の前に、任意の名前を付けたdivを挿入します。
出力されるHTMLが下記のようになるようにします。

<div id="container">
	<div class="grid-sizer"></div>
	<div class="tile">コンテンツ</div>
	<div class="tile">コンテンツ</div>
	<div class="tile">コンテンツ</div>
	</div>

jsファイル

jQuery(window).load(function() {
	jQuery('#container').masonry({
		itemSelector: '.tile',
		columnWidth: '.grid-width',
		isAnimated:true
	 });
});

columnWidthのパラメータに、先ほど挿入したdivを指定します。
また、可変の場合はisFitWidthは外してください。isFitWidthにtrueが指定されていると、コンテンツがすべて重なって表示されてしまいます。

css

タイル部分とcolumnWidthで指定した要素に共通の幅を指定してやればOKです。

.grid-sizer,
.tile{
	width:25%;
}
@media screen and (max-width: 880px){
 	.grid-sizer,
	.tile{
		 width:33.3%;
	}
}
@media screen and (max-width: 480px){
 	.grid-sizer,
	.tile{
		 width:50%;
	}
}

上記のようにMedia Queriesでウィンドウサイズに応じた横幅の指定をします。
この場合は通常は4カラム、ウィンドウサイズが880px以下になると3カラム、480px以下になると2カラムになります。

広告