【WordPress】レンガ、ブロック状に画像を並べるMasonryを賢威テンプレートで実装

過去のセットリストやフライヤーが一目で見られるギャラリー風のページ

頻度の少ないGigですが、過去のセットリストやフライヤーが一目で見られるギャラリー風のページが欲しいなと思っていました。
最近は、フライヤーもFacebookとお店用に毎回自分で作るようになりましたし、セットリストもそれなりに毎回考えるし、
せっかくなので残しておきたいところです。
ミュージシャンならTOPページにしてもかっこいいと思います。

そこでレンガ状、ブロック状に自動でコンテンツを並べてくれる、おしゃれなjQueryプラグインMasonryを入れてみることにしました。

賢威でカスタマイズ

私のこのブログは賢威で作られています。
1カラムの固定ページを作って、そのページでのみ、MasonryJSを読み込ませるカスマイズを行います。
賢威は簡単に「このページだけ1カラム」にできるから本当に便利・・・もちろんレスポンシブ

それではカスタマイズを始めます。

1カラムの固定ページを作成

ダッシュボードの「固定ページ」ｰ「新規追加」からページを追加します。

次に右サイドバーのカラム選択で1カラムを選択し、
私の場合はサブコンテンツも表示したくなかったので「コンテンツエリア」で
どちらも「表示しない」にしました。

001

あとで必要なのでアドレスバーに表示されている記事IDとなる数字をメモっておいてください。

この場合なら記事IDは「873」です。

Masonryの公式サイトからJSをダウンロードして自サーバーにアップロード

Maosonryの公式サイトからJSをダウンロードします。

「masonry.pkgd.min.js」という名前のファイルです。
そのままサーバーにアップロードします。
アップロード先は「賢威テーマフォルダ」の「js」フォルダです。

masonry3

Masonry実行JSを書いて自サーバーにアップロード

下記のコードを書いて、masonryt.jsというファイル名で保存します。
それからさきほどと同じ、「賢威のテーマフォルダ」の「js」フォルダにアップロードします。
ファイル名ですが、こちらもあとで読み込み指定のときに合っていればなんでもいいです。

jQuery(window).load(function(){
  jQuery( '#container_msnry' ).masonry({
    itemSelector: '.post',
    columnWidth: 50,
    isAnimated: true
  });
});

ちょっと説明

上記コードのハイライト部分、#container_msnryというクラス名が、ここからMasonryにするよ、というマーキングになります。
私のページでいうと、この大きな赤い枠線のdivがMasonryになります。

masonry5

それで、「itemSelector: ‘.post’,」がMasonryで並べる、画像とかpタグとか、各部品用のクラス名になります。
このクラス名で指定していない部品は、レンガ状に並べられない、ということですね。

「columnWidth」の次の数字は、任意で変える必要があります。各部品の横幅サイズの指定です。

あとでCSS設定するときに合わせれば、このクラス名はなんでもいいです。

Masonryを動かすために固定ページ用の設定を入れる

MasonryのJSを実際動かす設定を入れていきます。
賢威のテーマフォルダ直下の「footer.php」の、「この行は削除しないでください」の直前の行に次のハイライトされたコードを追記します。

<?php

	if( get_the_ID() == "873" ) { ?>
	<script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/masonry.pkgd.min.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/masonryt.js"></script>
<?php 	}?>


<?php wp_footer(); //この行は削除しないでください。 ?>

ちょっと説明

もうお察しかと思いますが、「get_the_ID」のあとの数字は手順1でメモった記事IDに置き換えます。
ただJSを読み込んでるだけですが、Masonryを使わないページではまったく不必要なコードで、ページ表示が遅くなるだけですので、
Masonryの固定ページでだけ読み込ませます。
実装はただ、これだけです（笑）

固定ページの記事に並べたいコンテンツを書く

いよいよ固定ページに記事で、レンガ状に並べたい部品を書いて行きます。
並べたいものは、pタグで囲んで、class=”post”を書いたらMasonryのJSが勝手に並べてくれます。

ダッシュボードで固定ページの編集ページに行き、まずはMasonryの囲いとなるdivを記載します。

<div class="container_msnry"></div>

それから並べたい部品を

で書いていきます。

<div class="container_msnry">
    <p class="post">部品1</p>
    <p class="post">部品2</p>
    <p class="post">部品3</p>
</div>

と言う具合です。

私の場合は画像とセットリストの文字が各部品なので、こんなかんじになっています。

各部品の横幅サイズについて

私の場合、各部品の横幅はだいたい200~380pxです。手順3のコードの「itemSelector」が100とか200とかの数字だと、
うまく並びませんでした。
各行1個だけ部品がぽつんと置かれたりして、「敷き詰められる」かんじがしませんでした。
それでこの「itemselector」の数字をどんどん小さくしていって、最終的に「50」だと、
現在のように敷き詰められるようになりました。

例）itemSelectorを200にするとこんなかんじ。横幅980pxに対して余白だらけ。
konna

1カラムにすると、サイトの横幅サイズが980pxです。なので、330px以上のサイズの部品は3つは並びません。
記述方法としてはただpタグを羅列しているだけですが、
改行などそのへんはMasonryが自動で判断して、
1行に3つ部品を敷き詰めたり、2つにしたりしてくれています。

そんなわけで「itemSelector」の数字は任意で調整してくださいね。

CSSでデザイン調整

私のサイトでは、各部品に枠線を付けてカラフルなかんじに、かつ、部品同士のマージンを多めにとって見やすいようにしています。
（Masonryにするとそもそも見にくいのですが）

各部品を囲むpタグにクラスを追加しています。

<p class="post msn_pink">部品</p>
<p class="post msn_green">部品</p>
<p class="post msn_violet">部品</p>

賢威テンプレートのスタイルシートdesign.cssに下記を追記しました。

 #container_msnry {
    margin:0 auto;
}
#container_msnry .post {
    background: #FFF;
    padding:15px;
    margin:5px ;
    
}
#container_msnry .msn_pink {
    background: #FFF;
    border:2px solid #ffa29c;
}
#container_msnry .msn_green {
    background: #FFF;
    border:2px solid #d2ed8b;
}

#container_msnry .msn_violet {
    background: #FFF;
    border:2px solid #ed8bd2;
}