Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その壱〜

インターネッツの皆様こんにちは!
各地で猛暑記録更新ですね〜(++); こう毎日毎日暑いと、もはや出掛ける気力も無いのでブログが捗ります(笑)

本日は、ワードプレスでピンタレスト風レイアウトに挑戦してみよう!の巻です。

ちょっと間が空いてしまいましたが、前回の記事「ワードプレスプラグインCustom Post Type UIの使い方」の続きになります。こちらを読んでからの方がより分かりやすいと思いますので、ぜひ目を通してみてくださいませ(^^)ゞ

さて、前回はカスタム投稿タイプでgalleryという投稿ページを新たに作ってみましたが、今回はそれをJSライブラリ「Masonry」を使って、コンテンツをレンガ状に並べて表示させてみようと思います。
masonryって石工[れんが工]職、石[れんが]造りの建造物、石造建築っていう意味なんですね。

目次
1.masonryの公式サイトからjsファイルをダウンロードする
2.htmlにmasonryを呼び出す記述を書く
3.masonryでレンガ状に並べたい箇所のcontainerを作る
4.cssで見た目をデザインする

1.masonryの公式サイトからjsファイルをダウンロードする

それではまず、masonryの公式サイトでjsファイルをダウンロードしましょう。

masonry-dl

Download masonry.pkgd.min.js と書かれた箇所を右クリックして 別名でリンク先を保存 で、適当な場所に保存してください。

ご自分のFTPへ行きます。お使いのテーマファイルの中にjsフォルダの無い方は、新たにjsというフォルダを作り、先ほどダウンロードしたmasonry.pkgd.min.jsファイルをアップロードします。
私の場合、パスはこんな感じです。↓

…wp-content/themes/twentyfourteen-child/js/masonry.pkgd.min.js

そのjsフォルダ内に、任意の名前をつけたjsファイルを一つ作ります。私の場合はmasonryで作ったgalleryページということでmasongallery.jsとしました。
(今、jsフォルダの中にはふたつのファイルが入っている状態ですね。)

パスはこんな感じです。↓

…wp-content/themes/twentyfourteen-child/js/masongallery.js

今後このファイルにに必要な設定を書いていきます。

2.htmlにmasonryを呼び出す記述を書く

次にhtmlへmasonryを呼び出す記述をしますが、今回はワードプレスでの説明になりますので、該当するphpファイルに記述をします。
前回はgalleryという、画像を並べて表示する固定ページをワードプレスプラグインCustom Post Type UIを使って作成しました。

この固定ページのphpファイルはpage-gallery.phpですので、下記のコードをコピーして、

wp_enqueue_script( 'masonry', 'http://xxxx.com/wp-content/themes/twentyfourteen-child/js/masonry.pkgd.min.js', array( 'jquery' ));
wp_enqueue_script( 'masongallery', 'http://xxxx.com/wp-content/themes/twentyfourteen-child/js/masongallery.js?ver=4.1.1', array( 'jquery' ));

page-gallery.phpファイルの、get_header(); ?> の上に記述します。
http以下〜のパスはご自分のftpで確認して差し替えてくださいね!

3.masonryでレンガ状に並べたいコンテンツ用のコンテナを作る

サイトのレイアウトをfirebugなどで見てみると、headerの下のコンテンツエリア全体のdivが id=”main” でしたので、この直下にmasonryでレンガ状に並べたいコンテンツ用のdivを作りたいと思います。ここではdiv id=”masonrycontainer”とし、先ほどのpage-gallery.phpの中から、id=”main” を探してその直下に作ります。

<div id="primary" class="content-area gallery">
		<main role="main" class="site-main site-content" id="main">
                 <div id="masonrycontainer">
           
<?php query_posts('post_type=gallery'); ?>

		<?php
		// Start the loop.

		/* 省略 */

		// End the loop.
		endwhile;
		?>
                 </div><!-- #masonrycontainer -->
		</main><!-- .site-main -->
	</div><!-- .content-area -->

FTPへ行き、先ほど作ったjsファイルに以下のように記述します。

jQuery(function(){
	jQuery( '#masonrycontainer' ).masonry({
		itemSelector: '.gallery',
                isAnimated:true,
	});
});

↑ここでitemSelector(表示させる画像)にクラス名を付けます。ここでは.galleryとしました。
#masonrycontainer、.galleryの部分はご自分で付けたID名、クラス名にそれぞれ差し替えてくださいね。

4.cssで見た目をデザインする

PC、スマホ、タブレットでの表示をfirebugなどで確認しながらcssで整えていきます。↓下記はPC用の記述例になります。並べる画像(.gallery)にCSSで枠などを装飾しました。出来上がりのイメージはメニューからgalleryをクリックしてみてください。
ポイントは.galleryのwidthの%です。例えばwidthを48%くらいにすると、一つの画像の幅がコンテナ全体の幅の約2分の1になりますから、画面には2つの画像が並ぶことになります。

#masonrycontainer {
width:96%; /*コンテナ全体の幅*/
margin:0 auto;
}

.gallery {
width:23.5%; /*コンテナの中で一つの画像の占める幅。この%だと4つの画像が並べて表示できる。%を変えてためしてみよう。*/
background: #fdfdfd; /*以下、装飾なのでお好きなように〜*/
padding:0.1em;
margin:1% 0 0 0;
border:solid 1px #ddd;
border-radius:0.2em;
box-shadow: 0.1em 0.1em 0.1em rgba(0,0,0,0.2);
}

ここまでの設定で、まだうまく画像が表示されない場合があります。
ということで次回は、masonryで画像が重なって表示されてしまう場合の対処法についてです。もう少々お待ちくださいませ!

以上、masonryでピンタレスト風レイアウトその壱でした。
続きはこちら“masonryでピンタレスト風レイアウトその弐”

それでは皆さま、夏バテなどされませぬようお気をつけて!ごきげんよう(^^)ノ

コメントを残す