crftロゴ
検索
辞典アイコン

Elementor Proにベストマッチなカスタムフィールドプラグイン

ダイナミックタグに追加される!
Advanced Custom Field

Elementor Proにベストマッチなカスタムフィールドプラグイン

カスタムフィールドといえば

 Wordpressのカスタムフィールド用プラグインといえばカスタムフィールドテンプレートが有名です。

 カスタムフィールドテンプレートを使えば、Wordpressの投稿画面に自由に入力エリアを追加してショートコードを使って、そのカスタムフィールドの内容を表示することができるようになります。

 でもカスタムフィールドテンプレート だと少しhtmlやcssの知識が必要になります。

 そこで息子ver1.0てつろうに教えてもらったAdvanced Custom Fieldに注目です。

 Advanced Custom Fieldは完全ノーコードだけではなく、なんとElementor Proのダイナミックタグまで対応しているという、ノーコード派御用達のカスタムフィールド用のプラグインです。

 そのインストール数、実に200万以上!

Advanced Custom Fieldのインターフェイス

 Advanced Custom Fieldをインストールすると、Wordpressの管理画面にカスタムフィールドというメニューが追加されます。

 メニューはフィールドグループ、新規追加、ツールに分かれています。

 フィールドグループでは作成したフィールドグループを一覧で確認することができます。

 フィールドグループの中で指定できるフィールドタイプは、基本コンテンツ選択関連jQueryレイアウト に分かれていて、無料版でも実に31種類の入力フィールドを指定することが可能です。

 有料のProではギャラリー、リピーター、Flexible Content、複製が開放されます。

 ほとんどの場合無料版の機能で十分だと思います。

 ツールでは作成したフィールドグループのインポートとエキスポートが行なえます。

 全体的に無料版でもかなりの機能を利用することが可能な、気前のよいプラグインだといえます。

かゆいところに手が届きまくる高機能さ

 設置することができるカスタム入力フィールドですが、あり得ないレベルの高機能さです。

 すべてのフィールドタイプを説明するとサイトがひとつ出来上がってしまうくらいの機能の量ですので、ここでは基本的なテキストフィールドをみていきたいと思います。

 “投稿時に今日のひとことを定形で入力する”ことを前提とします。

カスタムフィールドを作成する

 Advanced Custom FieldのUIは非常にクリーンでわかりやすいものになっています。

 手順としては、フィールドグループ名を入力フィールドタイプを選択表示用のフィールドラベルを入力処理用のフィールド名を入力保存 といった流れです。

カスタムフィールドを利用する

投稿でカスタムフィールドを入力する

 Advanced Custom Fieldで正しくカスタムフィールドが設定できると、投稿入力画面にカスタムフィールド入力エリアが表示されます。

投稿でカスタムフィールドを表示する

 Advanced Custom FieldはElementorと非常に相性の良いカスタムフィールドプラグインです。

 Elementorでは投稿記事をSingle Postテンプレートというテンプレートで表示制御するのが一般的です。

 そのテンプレートにテキストウィジェットをドロップしてダイナミックタグでAdvanced Custom Fieldの内容を呼び出してみます。

ACF

 ダイナミックタグからACF Fieldを選択します。

 でも、もう少し設定が必要になります。

 スパナアイコンをクリックして、ACF Fieldのどのパラメータを表示するかを選択します。

 ここまでくればほぼ完成です。

 設定が正しければ行以下のような表示になります。

Picture of Minoru Nitta
Minoru Nitta
グラフィックデザイナー・フォトグラファー
このエントリーをはてなブックマークに追加
勝手マニュアル進捗 39%




PR