Lightning WordPress プラグイン ブログ

【Lightning】一覧をグリッド表示させたい!を実現したプラグイン「Post Grid」

更新日:

Lightningでクライアントさんのサイトを制作。

一覧をタイル状に並べるグリッド表示にしたいな〜と思い、いろいろ調べていたら、便利なプラグインがあるということを知り、さっそく使ってみることに。

Post Grid

Lightningでは、一覧は以下のように表示されます。

Lightning一覧表示

 

制作しているのがお教室のサイトなので、教室の開催案内とブログ一覧をトップページに表示させたく、同じようなスタイルで一覧が並ぶのでは芸がない!

というわけで、教室の開催案内をグリッド表示させる方法を探していたところ、「Post Grid」というプラグインがあることを知りました。

そのサイトがこちら↓

どうやら、コンタクトフォームのように、生成されたショートコードを記事の好きな場所に貼り付けるだけで良いらしい!

PostGridの設定

グリッド表示させたいのは、「教室開催案内」のみ。

なので、「Query Post」でカテゴリーを選択。

Post Grid

 

ショートコードが生成されますので、コピーします。

Post Grid

 

トップページに「カスタムHTML」ウィジェットを追加し、生成したショートコードを貼り付けると、このようにグリッド表示ができました。

Post Grid

Post Grid詳細設定

上記のように表示させるのに、もう少し細かい設定をしております。

「 Layout settings」で、写真の幅と高さを指定しました。

Post Grid

 

幅は、横に4つグリッドが並ぶように設定。

高さは、デフォルトでは「Auto height」になっているので、「Fixed height」に変更して数値を指定。

表示される写真は記事で設定したアイキャッチ画像。なのd、指定していないと高さがバラバラになってしまったのです。

ブログ一覧と教室開催案内の表示が違う形に

これで、やりたかったトップページの一覧表示を、「ブログ記事」と「教室案内」を別のスタイルで表示させることができました。

Post Grid

 

記事内にもPost Grid

Post Gridはいくつでも作れます。

こちらは記事内に表示させたもの。

Post Grid

記事の下部に「ギャラリー」として表示させた部分がそうです。

これもカテゴリーを指定して表示させています。

まとめ

プラグインを使って、比較的簡単にグリッド表示させることができました。

Lightning以外のテーマでも使えるのか・・・

また試してみたいと思います。

 

投稿者プロフィール

七星 奈津子
七星 奈津子

ブログ集客プロデューサー/ライター/コラムニスト


読者(消費者)との関係をつくり、集客や販売につなげる発信で5年10年後もお客様に愛される会社・お店づくりのためのメディアづくりをサポートしている。


これまで発信してきたもの、持っているコンテンツをわかりやすく見やすい形に編集してコーディネイトすることを得意とする。またコミュニケーションの中で、その人の中にある光るもの・強みを引き出すことも得意。


講座や個別サポートでは、その人ならではの魅力を引き出し、わかりやすく伝わりやすい言葉にして発信するお手伝いをしている。


▶︎詳しいプロフィールはこちらから

この記事が気に入ったら
いいね ! しよう

Twitter で

-Lightning, WordPress, プラグイン, ブログ

Copyright© 7stars725.com , 2018 All Rights Reserved.