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



【 最新の更新日は 2019年12月28日 です】

山田どうそんです。

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

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

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

プラグインの特徴

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

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

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

wp-masonry-layout
wp-masonry-layout
Developer: Dinesh Karki
Price: Free

プラグインの使い方

管理画面の場所

「メインサイドメニュー」>「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カラムぐらいがちょうどいいですね。

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

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

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

サブスクリプションモデルを構築し安定収入の仕組みを作りませんか?

自分の得意なスキルで会員サイトを作りサブスクリプションモデルを構築して安定収入を作りませんか?

もう、来月の売上を心配しなくてはならないビジネスモデルとはおさらばして、毎月安定的に収益を上げることができる新しいビジネスモデルを構築しませんか?

あなたが、サブスクリプションモデルを構築するために必要なリソースを学ぶことができる無料オンライントレーニングをご用意しました。

今回、この無料オンライントレーニングを視聴してくれた方に僕の有料コース2コース(合計4.8万円分)を無料でプレゼントさせていただきます。

今すぐ登録してプレゼントを受け取ってください。

それでは、無料オンライントレーニングでお待ちしております。

今すぐサブスクリプションモデルで安定収入を作る男の「無料オンライントレーニング」を視聴する>>>

ABOUT US

山田 どうそん
Udemy受講生2万人以上の自動化マーケティング講師。ビジネスはオンラインで完全に自動化させることが最も重要だと思っている。偽の自動化ではなく本物の自動化しか興味がない。Udemy→海外ツールを使ったマーケティングファネル→サブスク。自動化にはこの3つのスキルが重要でそれ以外のスキルは不要。何より優先すべきは時間。