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

2022.1.23 更新

皆様こんにちは。

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

前回の記事「ワードプレスプラグインCustom Post Type UIの使い方」の続きになります。こちらを読んでいただくとより理解が深まりますので、ぜひ目を通してみてくださいませ。

さて、前回はカスタム投稿タイプでgalleryという投稿ページを新たに作ってみましたが、今回はそれをJSライブラリ「Masonry」を使って、コンテンツをレンガ状に並べて表示させてみようと思います。

ちなみにmasonryとは石工［れんが工］職、石［れんが］造りの建造物、石造建築っていう意味なんですね。

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

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

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のwidthの％ です。例えばwidthを48％くらいにすると、一つの画像の幅がコンテナ全体の幅の約2分の１になりますから、画面には２つの画像が並ぶことになります。

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でピンタレスト風レイアウトその弐”

それでは次回まで、ごきげんよう(^^)ノ

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

目次

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

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

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

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

いいね: