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

2022.1.23 更新

皆さまこんにちは。
本日は前回の続き、Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみます。

〜その壱〜を読んでいただくと理解が深まりますので、ぜひ目を通してみてくださいませ

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

さて、前回の設定だけでうまくいった方もいらっしゃるかも知れません。しかし私はこの後、投稿した画像が重なって表示されてしまうという現象に悩まされました。

そこで今回は、画像をきちんと読み込んでから表示させるような設定を追加します。

masonryで画像が重なって表示されてしまう場合の対処法

前回までの設定だけではPC、スマホ共に、galleryをクリックすると画像が重なって表示されてしまいました。

リロードすると直るのですが、これでは自分以外見ることが出来ません。こんな感じに表示されていました。

masonryのサイトによると、読み込まれていない画像はレイアウトを崩し、要素が重なってしまうことがあるそうなんです。

そこで登場するのが jQueryプラグインimagesloadedです。これは画像の読み込みが完了したら、その後の処理を実行する、というものです。

まずこちらから→imagesloadedプラグインをダウンロードします。

imagesloaded.pkgd.min.jsを右クリック → 名前をつけてリンク先を保存 で、前回作ったjsフォルダに保存します。（これで今、jsフォルダには3つのファイルが入っている状態です）

次に前回と同じように、対応する固定ページのphpファイル(ここではpage-gallery.php)のget_header();の上に、imagesloaded.pkgd.min.jsを呼び出す一行を書き足します。
こんな感じです。

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

get_header(); ?>

さらに、FTPへ行って前回作ったgallery用のjsファイル（ここではmasongallery.js）を以下のように書き直します。

var masonry;
    function init() {
      var container = document.querySelector('#masonrycontainer');
      imagesLoaded(container, function() {
        masonry = new Masonry(container, {
           "gutter": ".gutter-sizer",
           itemSelector: ".gallery",
           "stamp": ".w2",
           "percentPosition": true
        });
      });
    }
    jQuery(function() {
      init();
      jQuery('.gallery').click(function(){
        jQuery(this).toggleClass('w2');
        masonry.layout();
      });
    });

これで、きちんと画像が読み込まれるようになりました。

新たに書き足した内容について少し解説しますと、

●gutter-sizer は、画像の右横の隙間の幅
●w2 は画像に付けるクラス名。jQueryのtoggleClass()で、画像をクリックすると.galleryに.w2が適用され画像が拡大し、再度クリックすると.w2が外れ元の大きさに戻る。

参考までに私のgalleryのcssの一部です。

/* gallery */

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

.gutter-sizer {
width: 1%;/* 各画像の右横の隙間の幅 */
}

.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);
}

.gallery h1{/* 画像のタイトル部分 */
font:1em bold;
margin:0;
padding-top:0.4em;
}

.w2 {
width: 37%;/* 画像クリックで、widthが23.5%から37％に拡大する */
}

後は、タブレットやスマホ用にそれぞれ @media screen で width の％を調整しています。

masonryのこちらの解説も参考にしてください。

固定ページにサイドバーウィジェットなどを表示させたくない場合

ちなみに、固定ページにサイドバーウィジェットなどを表示させたくない場合は、その固定ページのphpファイルの中にある

get_sidebar(); をコメントアウトすればokです。

このgalleryのページでは、page-gallery.phpの中のget_sidebar();をコメントアウトして非表示にしています。
こんな感じ↓

<?php
//get_sidebar();
get_footer(); ?>

最後に、子テーマではなく親のテンプレートファイルをいじる際は必ずバックアップを取っておいて下さいね！

以上、masonryでピンタレスト風レイアウトでした！
それではまた次回まで、ごきげんよう(^^)ノ