【一瞬で完成】WordPressで投稿をPinterest風グリッドレイアウトを作る方法

PinterestはPin止めできるピンボードのようなウェブサイトです。 WordPressでPinterest風グリッドレイアウトを実現する方法をご紹介いたします。

Pinterestはイベントだったり写真だったりお気に入りをピンしていくことであなたのコレクションを作ることができますが、ここではとりあえず投稿をグリッドレイアウトをする方法を解説したいと思います。

前まではPinterest風のグリッドレイアウトを表示させようと思ったら、自分でJQueryのJavascriptコードを書くか、グリッドレイアウトできるプラグインを利用する方法でした。

だが、しかし！

WordPress5.0から導入された新エディタのGutenbergとそのプラグインを利用することで、めちゃくちゃ簡単に実現できるようになりました。

あー、Wordpressってほんと進化しました。出たての1.xから使ってる身としてはこの進化には驚きですね。

ただ、標準のGutenbergではピンタレスとのようなグリッドレイアウト表示はできませんので、プラグインを使います！

おすすめは、
【Ultimate Addons for Gutenberg】になります。

まずは、Gutenbergの機能を強化するプラグイン「Gutenberg Blocks – Ultimate Addons for Gutenberg」をインストールしましょう。紫でUGとなっているプラグインです。

インストールすると、ブロック追加のところで、Ultimate Addons Blocksという項目が現れます。

クリックすると使用できる機能がアイコンで表示されます。

ブロックを作成するのに＋マークを利用しますが、＋マークをクリックして、Ultimate Addons Blocksを開きます。

このようにいろいろなメニューが出てきますね。

ここで、Post(投稿)の表示に

・Post Grid
・Post Masonry
・Post Carousel

という3つのメニューがあります。

それぞれ下記の通りの表示になります。

Pinterest風グリッドにするには、「Post Masonry」を選びます。ポストメイソンリーと呼びます。Masonryとは石積みとか、ブロック工事という意味があります。記事投稿が石のように積まれていく様子がイメージできますね！！

折角なので、実際にいろいろ試して見ましょう。ただし記事に表示しているので横幅が狭いため、あまりピンタレスト風に見えないかもしれません。あしからず。。。

サムネイルとタイトルだけで、横2列でMasonry表示してみました。

サムネイルなし、抜粋(Excerpt)ありでグリッド表示してみました。Gridだとすべてが同じ高さや幅で整列された形になります。

記事がスライドするカルーセルで表示してみました。すべてデフォルト設定です。

書いた人や日付、コメント、抜粋などすべてWordpress記事投稿時の右側のメニューから設定することができます。カルーセルの場合は、自動でスライド、何秒でスライドするかなども指定することができます。

投稿画面の右側にブロックを詳細を設定するところがあります。はい、あると思います。

ここでいろいろ細かく設定することができます。ざーっとですか以下のようなものが設定可能です。是非いろいろ弄ってみてください。

• Post Type (何を表示するか)
• タクソノミー(カテゴリーかタグか)
• カテゴリーorタグ(どの項目を表示するか)
• 項目数(表示する投稿の数)
• Order by (何順に並べるか)
• 並び順(昇順、降順)
• カラム(何列にするか(最大4まで)、高さを揃えるか)
• Crousel(カルーセルの設定、表示や送りスピードなど)
• 画像(サムネイル、アイキャッチ画像は表示するか)
• Content(日付や抜粋などのメタを表示するか)
• Read More Link(Read moreの表示を変える、新しいタブにするか)
• Typography(文字の設定)
• Colors(色の設定)
• Spacing(グリッドのマージンやパディング設定(余白設定))

設定次第で写真ギャラリーやポートフォリオサイトにすることもできます。

これは写真ギャラリーのように見えますが、ContentをすべてOFF、タイトルの文字サイズを０、READ MOREも表示オフ、パディングもすべて０、 Blog Background Colorの色を白にして、以下のように表示することができます。

投稿、固定ページ、メディアと表示するものを選ぶことができて、メディアを選ぶと同様のことができると思うのですが、なぜかメディアの画像名が表示されるので(こういう仕様？ほんとに？)、投稿や固定ページのアイキャッチを表示する形で実現しています。

アイキャッチだけを追加して、本文には大きな画像を載せたページを作り、ギャラリーというカテゴリを作ってあげてそれだけを表示すれば、写真ギャラリーページを作ることができそうです！

個人の写真販売サイトだって作れるし、カメラマンの実績などにも使うことができますよね！

容易にあんなことやこんなことができてしまうGugenbergは創造力を掻き立てるすごいエディタだと思っています。

Pinterestのようにハートマークを付けてあなたの好みに表示させる機能はありませんが、そのようにMasonryの形で表示しました。

好みの表示にするには全く別の仕組みが必要になりますのでこれは別で記事にしたいと思います。