WordPressのテーマビルダープラグイン「Elementor」のファンブログ

検索
Close this search box.

Elementor Pro(ダイナミック機能)× Advanced Custom Fields=神化

Elementor Pro(ダイナミック機能)× Advanced Custom Fields=神化とは?

ElementorProとAdvanced Custom Fieldsプラグインを入れる事で、無敵と言える機能を手に入れる事が出来ます。

おじさん
おじさん
おぃおぃ・・・頭大丈夫か?
何言ってるかさっぱりわからんよ。

失礼しました。この話題というか、この機能が一番好きなので力が入ってしまいました(汗)

それでは説明する前にまず知っておいて頂きたい事がありますので、説明していきます。

(事前理解①)ダイナミック機能

この記事をご覧頂く上で、3点知っておかないといけない事があります。そのうちの1つ「ダイナミック機能」です。これはElementor Pro版にある機能で、投稿や固定ページ等からコンテンツを引っ張ってくる事が出来ます。小難しく言えば「静的コンテンツを動的コンテンツ」にしてくれるのです。

この時点でダイナミック機能のイメージが無い方は、こちらの記事を是非ご覧下さい。

プロ版ってなんだよ?!って方はこちら

(事前理解②)カスタムフィールド

次に理解しておかないといけないのが、WordPressの機能の1つ「カスタムフィールド」です。これは投稿や固定ページにコンテンツ項目を設定追加する事が出来る機能です。

おじさん
おじさん
おいていかないで下さい!(怒)

失礼しました。
では、投稿編集画面を思い出して下さい。自由に設定出来るコンテンツ項目としては、「タイトル」「本文」「アイキャッチ画像」くらいではないでしょうか?それに対し、カスタムフィールドは入力出来るコンテンツを追加する事が出来ます。

例えば、映画のレビューサイトを作るとします。WordPressのタイトルには「映画のタイトル」、本文には「レビュー内容や感想」を入れる他に、良くある「☆☆★★★」みたいな評価や、監督・キャストと、入力項目がデフォルトのWordPressの投稿エディターでは足りません。そこで活躍するのがカスタムフィルターです。
amazon_dvd
例えばこんな感じです。(引用元:amazon

カスタムフィールドを使う事で、様々な情報を分けて管理(入力)し、色々な場所に配置出来たりします。

しかし、このカスタムフィールドを使うにはちょっとしたタグコードが必要になるのです。さらにデザインを変更するにはCSSの知識も・・・(汗)ここでは使い方の説明はしませんが、カスタムフィールドの機能を理解しておいて下さい。

(事前理解③)Advanced Custom Fieldsというプラグイン

先ほどちょっとしたコードが必要と言った部分をとても簡単にしてくれるのがAdvanced Custom Fieldsです。項目の設定や入力項目タイプなど、カスタムフィールドの面倒な設定をものすごく簡単にしてくれます。

今はこの程度の理解で大丈夫です。

おじさん
おじさん
ぉぃぉぃ・・・手抜きか?!

違います。今は使い方よりも、どんな事が出来るかを知って頂こうと思います。

ElementorのdynamicとAdvanced Custom Fields

まずAdvanced Custom Fields(以下ACFと呼びます)で作ったカスタムフィールド項目を使って投稿を作成します。
post_screen
post_screen2
こんな感じでACFを使うと好きな項目を投稿画面に設定する事が出来ます。この投稿のデータを元にページを作成してみます。

samplepage
適当に作ったのでデザイン性はさておき・・・この様な投稿のテンプレートとして作りました。
samplepage2

各コンテンツが投稿のデータのどの部分かの説明を加えてみました。わかりずらいですかね?どのコンテンツが投稿のどのデータで、どの用に表示しているかを説明してみました。

ここで知って欲しいのは、dynamic機能でACFの項目が使える事と、この用に投稿テンプレートとして作ってしまえば、他の映画のレビュー記事を書いても同じように表示されるという事です。

おじさん
おじさん
わかったようでわかってないというか・・・つまりはすごいって事でよろしいでしょうか?

あっ・・・はい・・・すごいんです!これが出来るという事は、色々なタイプのサイトが制作可能になる事を意味しています。

アイデア次第で?!

例えば投稿で商品を管理するECサイトも可能ですね。(カート機能などはおいておいて)会社のスタッフ紹介ページやメンバー紹介ページ、先ほどみたいなレビューサイトなど、色々なタイプのサイトを構築出来ます。

また、投稿テンプレート以外にもトップページの1コーナーとしての「お知らせ」などを投稿で管理したり、WordPressに慣れてない人向けの管理画面的なものとして作れてしまいます。

まとめ

今回は使い方の紹介まではかなりの長文になってしまう恐れがあるので、控えさせて頂きました。でも必ず別の記事でダイナミック機能とACFの使い方をレビューしたいと思います。

実はこの組み合わせは仕事でも大いに活躍しています。WordPressどころかパソコンが苦手なクライアント様向けに導入する事で、更新作業を投稿だけで完結出来るようにしてしており、非常に評価頂いております。「ブログを更新するみたいにホームページを管理できて助かる!」というお言葉も頂いております。

実はElementorと他のプラグインの組み合わせで神化する機能はまだまだあるので、随時紹介していきたいと思います!

いずれも、クライアントや依頼者からの要望から生まれる事が多く、この記事をご覧のみなさまの中に「〜みたいにしたい!」「〜の様な事出来るの?」など、ご質問頂けたら課題解決に向けて研究してみたいと思いますので、お気軽にボイスボックスより投稿お願い致します!

この記事の関連講座

Elementorのレスポンシブモード 講座
Elementorを使うためのWordPress講座
ブログの作り方講座

author

Picture of ITKA / 加藤 誠

ITKA / 加藤 誠

Elementorを使い始めて6年目、好き過ぎてファンブログを始めて4年。Elementorを使って年間約30サイトを制作しております。主にWebマーケティング支援事業を中心とし、現在5社の顧問・コンサルティングとして携らさせて頂いております。Elementorのご相談からWeb集客のご相談はお気軽にお問い合わせ下さい。

こちらもご覧下さい

ポップアップ!

こんな感じで横スライドイン!
なんてことも出来ます。