Plus WordPress ワードプレスの基本・応用テクニックを紹介

大きさの違う画像を綺麗に並べ替える

画像やコンテンツを隙間なく自動でアニメーションしながら並べ替えてくれます。

↓デモ：大きさの違う画像ですが、隙間なく自動でレイアウトしてくれます。ブラウザの幅を狭くし動きを体験してみてください。

設定

https://masonry.desandro.com/　まずここからmasonry.jsをダウンロードします。

masonry.jsとは別に（例）masonry_sub.jsを作成します。

↓例）対象幅 px 固定バージョン(columnWidth: 200にし、スタイルシートは.boxにマージンを適当に付けます)

  $(function(){
  $('.demo_masonry').masonry({ //外側の要素を.demo_masonry
  itemSelector: '.box', //並べ替える対象を.boxとしました。
  columnWidth: 200,     //一列の幅(px)
  isAnimated:true,      //アニメーション trueまたは、false
  });
  });

$(function(){

$('.demo_masonry').masonry({ //外側の要素を.demo_masonry

itemSelector: '.box', //並べ替える対象を.boxとしました。

columnWidth: 200, //一列の幅(px)

isAnimated:true, //アニメーション trueまたは、false

});

↓例）上のデモが対象幅 % バージョンです(columnWidthを削除し、スタイルシートで.boxをwidth: 32%）

  $(function(){
  $('.demo_masonry').masonry({ //外側の要素を.demo_masonry
  itemSelector: '.box', //並べ替える対象を.boxとしました。
  　　　　　　　　　　  //一列の幅(px)
  isAnimated:true,      //アニメーション trueまたは、false
  });
  });

$(function(){

$('.demo_masonry').masonry({ //外側の要素を.demo_masonry

itemSelector: '.box', //並べ替える対象を.boxとしました。

　　　　　　　　　　 //一列の幅(px)

isAnimated:true, //アニメーション trueまたは、false

});

ダウンロードしたmasonry.jsと、作成したmasonry_sub.jsを外部から読み込ませます。

サイト全体　外部JavaScriptを読み込ませる
ページ単体　プラグイン　Custom CSS and JS
最新のjQueryを読み込ませるため header.phpに↓を挿入

<?php wp_deregister_script( 'jquery' ); wp_enqueue_script('jquery','https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'); ?>

1
2
3
4

<?php
wp_deregister_script( 'jquery' );
wp_enqueue_script('jquery','https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
?>

設置

基本は↓このような感じになります。

<div class="demo_masonry">

  <div class="box">wordpress</div>
  <div class="box">masonry</div>
  <div class="box">jQuery</div>  
  <div class="box">並べ替え</div>
  <div class="box">コンテンツ</div>
  <div class="box">画像</div>
    
</div>