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

ACF と Elementor Proの基本的使い方(ACF側編)

Share on facebook
Share on twitter
Share on pocket
Share on pinterest
acf_and_el_thumbnail

ACF とは?

ACF を知る前に、WordPressのカスタムフィールドってご存知でしょうか?WordPressの投稿で設定出来るのは、タイトル・本文・カテゴリー・タグ・アイキャッチ画像だけです。例えば、映画のレビューを中心としたブログを作りたいと考えた時に、毎回本文にいちいち「映画のタイトル」「監督」「出演者」と項目名を入れるのは面倒ですよね。そこで役立つのがカスタムフィールドです。

customfield

しかし、WordPress標準のカスタムフィールドは、新しくなった投稿作成画面では、オプションとして扱われ、デフォルトでは表示されず(オプション>カスタムフィールドにチェック)、結局投稿毎に設定が必要となるので、本文に書き込むのと同じレベルで面倒です。

そこで便利な「Advanced Custom Fields」

何かとご面倒なカスタムフィールドを使いやすく、より便利にしてくれるプラグイン、それがAdvanced Custom Fields(通称:ACF)です。このプラグインの凄い所は、例えば、投稿のカテゴリを「映画レビュー」に設定すると、映画レビュー記事用のカスタムフィールドを用意してくれ、いちいちカスタムフィールドの設定が不要になります。

acf_basic

いつでも映画のレビューを手軽に書き始める事が出来ます。例えば、同じ映画レビューだけど映画館で見たレビューと、DVDで見たレビューで項目を変えたいとします。その場合、カテゴリー「映画レビュー」+タグ「映画館」に設定したら「映画館レビュー用」のカスタムフィールドのパターンを表示させるという条件設定が出来るのです。

ノンプログラマーとしての不便

コンテンツを作る上ではとても便利なACFなのですが・・・いざ画面に表示させようとすると、PHPを追加したりと、ノンプログラマーとしては一気にハードルが上がります。

おじさん
おじさん
結局コードか・・・(はぁ〜)

安心して下さい(笑)そこで俺たちのElementor Proです!ACFで作られた項目に入力されたデータをElementorはドラッグ&ドロップで表示出来るのです!

おじさん
おじさん
やるな・・・Elementor・・・

そうですよーElementorは凄いんですよ〜(笑)これを解決してくれるのはElementor Proのダイナミック機能です。

ん?これって記事になってなかった?
おじさん
おじさん

そうですね、今までは「こんな事が出来るよ!」レベルで、詳しい使い方の説明はしてませんでした。そこで、今回はACFの使い方も含めてご紹介したいと思います。以前の記事をご覧になっていない方は下から是非ご覧下さい。

 

ACFの使い方

まず、ACFをインストールしましょう!

①WordPressのダッシュボードからプラグインをクリック

②新規追加をクリックし、検索欄に「Advanced Custom Fields」と入力

acf_plugin

③インストールからの有効化

④メニューに追加された事を確認して完了!

acf_icon

フィールドグループを作成

まず、フィールドグループを作成します。例えば、映画レビューと食事レビューと2種類の記事を書きたい場合、それぞれ必要な項目は異なります。その場合、○○用のカスタムフィールドの組み合わせを作っておくことが出来、それをフィールドグループと言います。

まず、メニューの下の方に追加された「カスタムフィールド」をクリックし、表示された上にある「新規追加」をクリックします。

acf_newgroup

まず、グループ名を決めておきます。「○○用」とか分かりやすい方が管理しやすいですね。

field_plus

早速、フィールドを追加(項目を追加)していきましょう!「+フィールドを追加」をクリックします。

フィールドの追加(項目の追加)

フィールドには色々なタイプがあり、これを「フィールドタイプ」と言います。例えば、テキストを入力する項目なのか、プルダウンで選択する項目にしたいのか、画像をアップする項目を作りたいのかは、このフィールドタイプで決まります。かなりの種類があるのですが、今回はElementorで使える項目に限ってご紹介したいと思います。

今から説明する内容は投稿の入力画面側のお話で、表側(Elementorでの表示方法)については、その後ご説明しますので、混乱しないように注意して下さい。

このフィールドタイプは「基本」「コンテンツ」「選択肢」「関連」「jQuery」「レイアウト」6グループに分かれています。それぞれ見てみましょう。

おじさん
おじさん
なるほど、投稿で記事書く時の画面の設定って事ですな。


フィールドタイプ「基本」

①テキスト

字のごとく、テキストを入れるフィールドタイプです。ただし1行です。複数行の場合は、②のテキストエリアを使います。

text_field

②テキストエリア

この様に2行以上の文章を入れられます。
ただ、注意しないといけない点としては、
Elementorで表示される場合、改行されません。

textarea

③数値

数字に特化した項目です。