Elementor ProのLoop Gridが便利すぎ！

投稿のループ表示が自由自在

Wordpress
作成日 2022年11月12日
更新日2022年11月12日
Elementor, Elementor Pro, ウィジェット, 投稿, 新機能
1008 views

Minoru Nitta

グラフィックデザイナー・フォトグラファー

次世代Elementorはもうすぐそこ

　CSSのFlexboxに対応したレイアウトコンセプト、コンテナがベータに昇格して正式リリースまで間近になっている気配満載のElementor Proですが、合わせて新たな投稿ループ表示システムLoop Gridも柔軟なダイナミック投稿表示を可能にするものです！

　Loop Gridを使うにはまずコンテナを使えるように設定をする必要があります。

Elementorの設定を調節

　WordPressの設定画面＞Elementor＞設定＞実験中タブへ進み、Flexbox Containerを有効、Loopを有効にします。

　ページをコンテナで作成したあとにコンテナ機能を無効にすると、そのコンテナを使ったページの内容は表示されなくなってしまいます。

　内部セクションウィジェットは表示されなくなりますが、ページ自体は以前のように表示されます。

　ただしこの記事を書いている時点でコンテナはベータなので今後仕様が変更になる可能性もあります。

Loop Gridとは？

　簡単にいうとプロウィジェットのポストの中身を自由自在にすることができるフレームウィジェットのようなものといった感じです。

　つまりポストウィジェットは、投稿記事のフィーチャーイメージ、見出し、抜粋、本文、執筆者、投稿日などの表示したい要素を選択して、表示のスタイルを調節できるようなウィジェットです。

　投稿記事をずらっと並べたいときなどに非常に便利なウィジェットですが、表示のスタイルはある程度限られていて、ちょっと制限が多いのが欠点でした。

　Loop Gridではそれらの要素を自由に配置できるボックスのようなウィジェットです。

Loop Gridで投稿記事のリストを作ってみる

　こんな感じの投稿記事のループを作成したいとします。

　フィーチャー画像があって、その投稿のタイトル、抜粋文章があって、投稿日、タグが続くイメージです。

　Loop Gridウィジェットをページの空のエリアへドロップします。

　黄色く囲まれた部分に繰り返し処理したい投稿の要素を並べていきます。

　アラートは”Loop Gridはテンプレートから始めます。 すでにあるテンプレートか新しくテンプレートを作成して繰り返し処理を行います”と書かれています。

　すでにあるテンプレートを選ぶにはウィジェットの内容を編集する編集パネルから選択することが可能です。

　ここではCreate a templateボタンで新たにテンプレートを作成します。

新たなLoop Gridを設置するたびにテンプレートが作成されていくので、気づくととんでもない数になっています。さらにテンプレートの名前は”Elementor Loop Item #51274 ”のようなファイル名が自動的に作られるので、デザインの作業が終わったらテーマビルダーからテンプレートの名前を編集しておくとよいでしょう。