Masonryを使ってスタイリッシュにHTMLで画像を並べたい

サイト作成で画像を綺麗に並べる必要が出てきたので良さそうなサービスがないか調べています。

そんななか画像を隙間なく並べてくれるJavascriptがあるというのでダウンロードしてワードプレスで使ってみました。

今後の備忘録的に書き留めておきます。

Masonryとは？
Masorny 使ってみる
1. Masorny ダウンロード、WPサイトにアップロード
2. WPからJSファイルを読み込む
  1. 失敗したやり方
  2. うまくいったやり方
Masonryをこのページで使ってみる
1. Masonry基本形
2. Masonryのオプション
Masonry 現状の問題点
1. Masonry+テーマSimplicityの謎の縦8pxのスペース

Masonryとは？

Masonry

Cascading grid layout library

画像やテキストを大きさを判別してタイル状に並べてくれる便利なJSです。

早速、このサイトで設定してみてどんな感じに表示されるのかやってみます。

Masorny 使ってみる

Masorny ダウンロード、WPサイトにアップロード

上記サイトにアクセスして右上のほうにある「Download」のリンクを右クリックして「名前を付けてリンク先を保存」を選びます。

以下のようなファイルがダウンロードできました。

ダウンロードするのはこのJSファイルのみ

JSファイルはワードプレスのテーマの中にあるJSファルダに保存します。

/bey.jp/public_html/wp-content/themes/simplicity/js

のパスにアップロードします。

WPからJSファイルを読み込む

masonry.pkgd.min.jsファイルをワードプレスから読み込む設定をします。

失敗したやり方

functions.php

こちらに以下のように記述しましたがなぜか？違うsmasonry.min.js（ワードプレスにもともと入っているみたい。）を読み込んだようで・・・

function theme_name_scripts() {
wp_enqueue_script('masonry', get_template_directory_uri().'/js/masonry.pkgd.min.js');
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

ページのソースを見ると以下の行が追加されていて、バージョンの違うMasonryファイルを読み込んでいる様子。

（ダウンロードしたのは3.3で、wp-includes/jsにあるファイルは3.1.4だった。ファイルがあるか見てみると実在していた。）

なのでfunctions.phpに書くのは諦めてheader.phpに直接書く。

header.php

<? echo get_template_directory_uri().'/js/masonry.pkgd.min.js'; ?>

これをやっても”https://bey.jp/wp-includes/js/masonry.min.js”のファイルを読み込んでしまう・・・・どういうことだ？

どうやら、wp_enqueue_scriptの1番目の引数に’masonry’があるとwp-includes/jsのファイルを読み込んでしまうみたい。

名前を変えたらあっさり読み込んだ。

うまくいったやり方

fundtions.php

function theme_name_scripts() {
wp_enqueue_script('pkge-masonry', get_template_directory_uri().'/js/masonry.pkgd.min.js');
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

これで準備OK

Masonryをこのページで使ってみる

Masonry基本形

基本的に以下のようにclassに”js-masonry”,”item”の記述があれば良いみたい。

<div class="js-masonry">
<div class="item">画像1+テキスト</div>
<div class="item">画像2+テキスト</div>
<div class="item">画像3+テキスト</div>
<div class="item">画像4+テキスト</div>
<div class="item">画像5+テキスト</div>
<div class="item">画像6+テキスト</div>
<div class="item">画像7+テキスト</div>
<div class="item">画像8+テキスト</div>
<div class="item">画像9+テキスト</div>
</div>