ピンタレスト風のMasonryレイアウトを作成できるWordPressプラグイン「Masonry Layout」

ピンタレストはMasonryレイアウトといって、画像を積み重ねるように表示させるレイアウトになっています。

画像や写真などを表現させたいサイトの場合、このレイアウト構成を使いたいですよね。

Masonry Layoutは、そんなピンタレスト風のレイアウトをショートコードで簡単に作成できるプラグインです。

プラグインの特徴

  • Masonryレイアウトをショートコードで簡単に作成できる

プラグインのダウンロード

プラグインのダウンロードは下記のリンク先からもできますしWordPress内で「Masonry Layout」と検索してもダウンロードが可能です。現在のバージョンは「1.8」。

プラグインの使い方

管理画面の場所

「メインサイドメニュー」>「WP Masonry」から設定ができます。

wp-masonry1

プラグインの設定

プラグインを導入したら、「WP Masonry」をクリックして次の画面から基本設定を行います。その後にショートコードで貼り付けるという流れです。

wp-masonry2

Create Shortcodes

Reference Name : レイアウトの名前を任意で設定します。(5文字以上必要です。)

Generic Shortcode : 無料版の場合はここのチェックは出来ません。

Layout Theme : 無料版はDefaultレイアウトのみ利用可能です。

Columns : カラム数を選択できます。

Post Type : 投稿タイプを「投稿」か「固定ページ」から選択します。(投稿を選択するとカテゴリー選択が表示されてそちらも設定できます。固定ページを選択すると任意の固定ページを選択できます。)

Thumbnail Image Size : 表示されるサムネイル画像のサイズを設定します。

Post Per Load : 最初に画面を開いた時に何枚の画像を表示させるかの選択です。

Order By : どの順番で画像を並べるかの設定です。defaultは投稿日時順に並べます。

Order : 昇降の設定です。

Responsive : レスポンシブの設定です。ここは「YES」にしましょう。

Pagination Style : 「Post Per Load」で設定した枚数以上に画像を読み込みたい場合に「Ajax Lord More Button」は読み込みボタンを押すことで次の画像を読み込ませることが出来ます。プロ版を利用すると「infinity Scroll」が選択でき、自動で読み込みができる無限スクロールの設定ができます。

Use Lazy Loading : Lightboxを使うかどうかの選択ですが、プロ版のみ使用可能です。

Custom Query : 「Lazy Loading(画像の遅延読み込み設定」ですが、これもプロ版のみ使用可能です。


設定が終わったら「Save」をして、次のショートコードを投稿したいページに貼り付けて完成です。

wp-masonry3

設定完了

ショートコードを貼り付けて表示させると次のようにちゃんと表示されました。

wp-masonry4

使ってみた感想のまとめ

僕の画面サイズだと2カラムぐらいがちょうどいいですね。

おもったより簡単に設定できたし、表示もちゃんとされたので良かったです。

テーマに区切った画像を一覧で表示したい時に使えるなって思いました。

是非試してみてください。

最新の更新を
プッシュ通知で購読しよう

【WordPressの最適な初期設定をすべて解説した動画78個を今だけ無料プレゼント】

 

 

あなたがもしこれからWordPressをはじめようとしているならこのプレゼントをぜひお受け取りください。

 

最初の初期設定を間違えてしまうと、あとから変更することができず、せっかくのWordPressの効果を最大限に活かすことができなくなってしまいます。

 

「長時間かけて作ったブログがあとから間違っていてすべて作り直し」

 

なんてことにならないために、このプレゼントを受け取って正しい設定をしてからスタートしてください。

 


コメントを残す

メールアドレスが公開されることはありません。