OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

プラグイン【Advanced Custom Fields】でカスタムフィールドを出力するときによく使うメモ

最終更新日:2019.1.14 Update!!
WordPressでサイトを構築していると、要件によってはカスタムフィールドを使うケースも多々あります。カスタムフィールドではスクラッチで実装することも可能ですが、現在では無料で使える優秀なプラグインも揃っていますので、手間などを考えるとプラグインを選択するケースになるのではないでしょうか。   その中でも、今回は評価も高く最もメジャーなカスタムフィールドのプラグインである「Advanced Custom Fields」を採用する場合に、カスタムフィールドを扱う時によく使うTipsを備忘録として残しておきたいと思います。 【Advanced Custom Fields - WordPress】 https://ja.wordpress.org/plugins/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ではこれ以外にもいろんな使い方ができます。カスタムフィールドによってサイトの運用がかなり捗るので、ぜひ積極的に使っていきたいですね。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram