Web技術 WordPressのトップページを雑誌や新聞のような段組にする方法

WordPressのブログは一般的に記事タイトルと記事の概要が単純に縦に並ぶだけですが、jQuery Masonry という jQuery プラグインを使用すると、このブログのトップページのように雑誌や新聞のような段組で記事一覧を並べることができます。

jQuery Masonry は WordPress 用に作られたわけではありませんが、WordPress テーマに組み込んでトップページ等で使用することができます。
ただ、公式のドキュメント通りに JavaScript を書いただけでは WordPress テーマではうまく動かないので、やり方をここにまとめておきます。

ここでは、WordPress 3.3 のデフォルトテーマ「TwentyEleven」をベースに解説します。

準備

まず jQuery Masonry 公式サイト のページ中央にある「Download the script jquery.​masonry.​min.js」をクリックしてファイル一式をダウンロードします。

テーマのカスタマイズ

WordPress テーマフォルダ内のjsフォルダ（/wp-content/themes/twentyeleven/js/）に、ダウンロードした jquery.masonry.min.js と以下の sample.js を入れておきます。

sample.js

1
2
3
4
5
6

jQuery(function(){
	jQuery( '.home #content' ).masonry({
		itemSelector: '.post',
		columnWidth: 190
	});
});

次にテーマの function.php を開き、最後に以下の3行を追加すると、テーマの <header> 内でJSが読み込まれるようになります。

function.php

1
2
3

wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'masonry', '/wp-content/themes/twentyeleven/js/jquery.masonry.min.js', array( 'jquery' ), '2.1.01');
wp_enqueue_script( 'sample', '/wp-content/themes/twentyeleven/js/sample.js', array( 'jquery' ), '1.0');

※’2.1.01′ 等の数字は、スクリプトのバージョンを表しています。

最後にテーマの style.css を開き、以下の CSS を追加しておきます。

style.css

1
2
3

.post {
	width: 170px;
}

これで、以下のように TwentyEleven テーマのトップページが3段組になります。