ElementorのLoop Gridの使い方 – 拡張プラグイン無しでリストの中身を編集できる

「Elementorのポストウイジェットのレイアウトを変換したいけど、そこまで自由度がない・・・」
そんなこと思ったことありませんか?

Elementor Proバージョン3.8で登場した新機能の『ループビルダー』で、リスト表示したいもののテンプレートを自由にスタイル・作成できるようになりました!

この機能は今までは拡張プラグイン(CrocoblockのJetEngine)がなければElementorではできないことでした。

ぜひElementor ProのLoop Gridの使い方を覚えて、デザイン性に優れた動的に一覧表示するリストをサイトに導入してみましょう!

【Loop Gridの特徴】

  • Elementor Proバージョン3.8から出た新機能
  • 動的なリストのテンプレートが作れる
  • 動的にリストが一覧表示するページを作成できる

Elementor ProのLoop Gridの使い方を動画でご覧になりたい方はこちらから。

Loop Gridとは?

Loop Gridとは、投稿タイプを動的にリスト表示させたいときにつかいます。

それなら、Elementor Proの『ポストウィジェット』をつかえばよくない?と思われるかもしれませんが、ポストウィジェットのフォーマットはレイアウトが決まっており、大きくデザインの変更ができませんでした。

ポストウィジェットのリスト例
ループビルダーで作成したリスト例

しかしLoop Gridは自分でリストのテンプレートのレイアウトを作成し、それをポストウィジェットのように動的に変化するリストを表示をさせることができます。

ちなみに、CrocoblockのJetEngineを知っている方はピンとくるかと思いますが、JetEngineのListings機能とLoop Gridの仕組みはまったく同じです。

Loop Itemの作り方

Elementor Proのテーマビルダーを開く

ダッシュボードの『テンプレート』の中の『Theme Builder』(テーマビルダー)を開きます。

『Loop Item』をクリック

テーマビルダーのダッシュボードの『Loop Item』をクリックしましょう。

すると画面が以下のように切り替わります。

『Add New』をクリック

画面右上の『Add New』をクリックしましょう。

Loop Itemの編集画面

するとこのようにLoop ItemのElementorの編集画面が表示されます。

ここでLoop Itemを作成していきましょう!

Loopのテンプレートを作成

ループビルダーの動的なウィジェット

Loop Itemの編集画面でリストのテンプレートを作成していきますが、動的なウィジェットをつかい、いつものようにElementorの編集画面でレイアウトをしていくだけです。

Loop用の動的なウィジェットは以下の5つがあり、これはテーマビルダーのSingle Pageなどで使用されるものと同じです。

  • Post Title
  • Post Excerpt
  • Post Content
  • アイキャッチ画像
  • Post Info

これらのウィジェットの使い方を»Elementor Pro テーマビルダーSingleの5つの基本ウィジェットでくわしく説明しています。

動的ウィジェットでループアイテムのレイアウト

このサンプルでは、上記のように上から『アイキャッチ画像』『Post Info』『Post Title』の順でウィジェットを配置しました。

さらに自分好みにスタイルをし、ループアイテム(リストのテンプレート)を完成させましょう。

ループアイテムを公開

Elementorの編集機能でさらに背景色とボックスシャドウを追加してみました。

ループアイテムの編集が完了したら『公開』をクリックします。

これで動的なリストのテンプレートが完成しました!

ループアイテムのカラムを分ける方法

ループアイテムのカラムを複数に分けたいときは『コンテナ』をつかいましょう。

ウィジェット一覧に『コンテナ』がありますのでカ。ラムに挿入します。

ループアイテムのカラムを2つに分けたいときはコンテナを使用

するとこのようにコンテナの中にコンテナがもう一つ入りました!

Elementorのコンテナの使い方はリンクの記事からご確認いただけます。

ループアイテムでリストを一覧表示させる方法

ループアイテムを作成したら、ポストウィジェットのように投稿を一覧表示させてみましょう!

1. 固定ページを新規追加

固定ページの新規追加

ダッシュボードから『固定ページ』へいき、『新規追加』をしましょう。

Elementorで編集をクリック

タイトルをつけ、『Elementorで編集』をクリックし、Elementorの編集画面を表示させます。

3. Loop Gridウィジェットを挿入しリストを表示

『loop Grid』ウィジェットを挿入

Elementorの編集画面が開いたら、プロウィジェット一覧のところにある『Loop Grid』ウィジェットを挿入しましょう。

Loop Grid挿入後の表示画面

Loop Gridウィジェットを挿入すると上記のような画面表示になります。

『Choose a template』で作成したループアイテムを検索し選択

次にレイアウトの『Choose a template』で作成したループアイテムを検索し、選択しましょう。

ループビルダーで作成したリストの一覧

するとこのように、作成したループアイテム(リストのテンプレート)に沿ってリストが一覧表示されました!

リストの表示設定を編集

Loop Girdで一覧表示されたリストの表示数やQueryなどを編集しましょう。

Loop GridのQueryなどの編集方法は『ポストウィジェット』とまったく同じですので、ぜひリンクより使い方をご確認ください!

まとめ

Elementor ProのLoop Gridで自由なレイアウトの動的なリストの一覧表示を作成することができました!

今まではポストウィジェットでリストの一覧表示を作成する場合はリストのフォーマットが決まっていましたが、Loop Gridなら、自分好みにリストをデザインすることができるのが嬉しいですね。

以下でLoop Gridの使い方をおさらいしていきましょう。

【Loopでリストの一覧表示を作成する方法】

  1. Elementor Pro V3.8.0以上にアップデートする
  2. ダッシュボードのElementorの『実験中』で『Flexbox Container』と『Loop』を有効化する
  3. Elementor Proのテーマビルダーを開き、ダッシュボードの『Loop Item』をクリックする
  4. 『Loop Item』のページの右上の『Add New』をクリックする
  5. Elementorの編集画面でループアイテム(リストのテンプレート)を作成し『公開』する
  6. 固定ページで新規ページを作成し、『Loop Grid』ウィジェットを挿入する
  7. レイアウトの『Choose a template』で作成したループアイテムを検索し、選択する

この記事は『Elementorの使い方無料コース』を元に作っています。
動画でみたい方は是非この無料コースをチェックしてみてください。

ElementorやDiviやWooCommerceなどWordPressの質問がある方はTOFUラボで!

先週見つかったプラグインのセキュリティホール情報はこちらです。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料ウェブサイトテンプレート
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通