プラグイン【Advanced Custom Fields】でカスタムフィールドを出力するときによく使うメモ
最終更新日: Update!!
WordPressでサイトを構築していると、要件によってはカスタムフィールドを使うケースも多々あります。カスタムフィールドではスクラッチで実装することも可能ですが、現在では無料で使える優秀なプラグインも揃っていますので、手間などを考えるとプラグインを選択するケースになるのではないでしょうか。
その中でも、今回は評価も高く最もメジャーなカスタムフィールドのプラグインである「Advanced Custom Fields」を採用する場合に、カスタムフィールドを扱う時によく使うTipsを備忘録として残しておきたいと思います。
【Advanced Custom Fields - WordPress】
https://ja.wordpress.org/plugins/advanced-custom-fields/
Advanced Custom Fieldsではこれ以外にもいろんな使い方ができます。カスタムフィールドによってサイトの運用がかなり捗るので、ぜひ積極的に使っていきたいですね。
1. カスタムフィールドの値を出力する
<?php the_field('FIELDS_NAME'); ?>登録したカスタムフィールドの値をそのまま出力する時に使います。最もよく使う基本的なケースになります。引数には設定したフィールド名を指定します。
2. カスタムフィールドの値を取得する
<?php get_field('FIELDS_NAME'); ?>登録したカスタムフィールドの値を取得する場合に使います。このままではHTML上では出力できません。同じく引数には設定したフィールド名を指定します。
3. カスタムフィールドの値が入っている時だけ出力する
<?php $arg = get_field('FIELDS_NAME'); if (!empty($arg)) : ?> <?php the_field('FIELDS_NAME'); ?> <?php endif; ?>カスタムフィールドの値が入っている時のみ出力するケースです。カスタムフィールドの値が空の場合は項目ごと表示しないなどに使えますね。カスタムフィールドの値を取得して、中身があるかどうかで分岐させます。
4. リピーターフィールドで繰り返しカスタムフィールドの値を出力する
<?php if(have_rows('FIELDS_NAME')): ?> <?php while(have_rows('FIELDS_NAME')): the_row(); ?> <?php the_sub_field('SUB_FIELDS_NAME'); ?> <?php endwhile; ?> <?php endif; ?>Advanced Custom Fieldsの拡張プラグインである「Repeater Field」で使える機能です。または有料版の「Advanced Custom Fields Pro」でも使えます。このリピーターフィールドでは、投稿ごとにカスタムフィールドを繰り返しで増やすことが可能になります。 【ACF | Pro】 https://www.advancedcustomfields.com/pro/ 【Add-ons The Repeater Field】 https://www.advancedcustomfields.com/add-ons/repeater-field/ まずはhave_rows()でカスタムフィールドに繰り返されるサブカスタムフィールドが含まれているかで条件分岐させて、サブカスタムフィールドの数だけ繰り返して出力する形になります。それぞれの引数にカスタムフィールド名とサブカスタムフィールド名を指定しますが、間違えないように注意しましょう。
Advanced Custom Fieldsではこれ以外にもいろんな使い方ができます。カスタムフィールドによってサイトの運用がかなり捗るので、ぜひ積極的に使っていきたいですね。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories