サイト内検索

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

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

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

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

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

【ループビルダーの特徴】

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

Elementor Proのループビルダーの使い方を動画でご覧になりたい方はこちらから。

ループビルダーとは?

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

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

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

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

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

ループビルダーを有効化する方法

Elementor Proの『ループビルダー』をサイトでつかえるようにするためには、Elementor Proのバージョンやループビルダーの有効化など、いくつか重要な設定がありますので以下の手順に従い設定を完了させてください。

1. Elementor Proバージョン3.8以上に更新する

Elementor Pro v3.8.0にアップデート

まず、ループビルダーは『Elementor Pro バージョン3.8』以上から使用できる機能になりますので、アップデートがまだの方は必ず更新してください。

2. コンテナとループを有効化する

Elementorの『実験中』ページ
  1. ダッシュボードの左側の『Elementor』をクリック
  2. Elementorの設定ページの『実験中』をクリック

すると、Elementorのさまざまな機能を有効化または無効化に設定する画面が表示されます。

実験中の『Flexbox Container』と『Loop』が有効になっているかを確認

『Flexbox Container』と『Loop』の項目が有効化されているかどうかを確認しましょう。
※有効化になっている機能には緑色のマークがつきます。

実験中の機能を有効化をする方法

Elementorの実験中の機能を有効化

Elementorの『実験中』の機能が有効化されていない場合は機能名の横にあるプレイスホルダーを開き、『有効』を選択します。

『変更を保存』をクリック

最後に画面を一番下までスクロールし、『変更を保存』をクリックしましょう。

これでサイトでループビルダーの使用が可能になりました。

ループビルダーの開き方

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

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

『Loop Item』をクリック

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

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

『Add New』をクリック

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

Loop Itemの編集画面

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

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

ループビルダーでリストのテンプレートを作成

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

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

ループビルダーの動的なウィジェットは以下の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のループビルダーで自由なレイアウトの動的なリストの一覧表示を作成することができました!

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

以下でループビルダーの使い方をおさらいしていきましょう。

【ループビルダーでリストの一覧表示を作成する方法】

  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です

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

目次

コメントする

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

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

YouTubeライブでElementor 3.14の新機能を紹介中です!

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

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

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