Masonryをwordpressで動作させる方法

最近多いタイル状に配置をするjQueryのプラグインにMasonryがありますね!
トップページなどでMasonryを配置する際に、
次のように設定をするとOKです!

まず、functions.phpに以下のコードを記述するとMasonryがつかえるようになります。
(最近のwordpressにはMasonryが内包されているそうです。)

function my_scripts() {
wp_enqueue_script('jquery-masonry');
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

加えて別で設定用に以下のようなjsファイルを作ります。

jQuery(window).load(function(){
  jQuery( '#wakugumi' ).masonry({
    itemSelector: '.parts'
  });
});

ポイントは$をjQueryに変更すること。
あと、ここで設定した#wakugumiと.partsはソースに記述する際に使います。
そして、header.phpで作成したjsファイルを読み込みます。

あとは、CSSでデザインを固めて、以下の様に記述すればOK!

<div id="wakugumi">
<div class="parts">
コンテンツ内容
</div>
・・・・・
<div class="parts">
コンテンツ内容
</div>
</div

ぜひお試しください。

「Masonryをwordpressで動作させる方法」への1件のフィードバック

コメントを残す