WordPress Advanced Custom Fields の3つの便利なフィールド


Advanced Custom Fields の使い方

カスタムフィールドのプラグイン「Advanced Custom Fields」は、WordPressを実装する時によくお世話になっています。

以前にブログで、入門編を紹介させていただきました。
WordPress Advanced Custom Fields の使い方(入門編)

今回は実際に使ってみて、私が便利だと感じたフィールドを紹介させていただきます。

 

Advanced Custom Fields について

価格

金額は、以前紹介した時と変わっていませんでしたが

  • 有償アドオン 各1つ(複数サイト使用可):$25

の販売は現在していない様です。

追加されていた機能

4つの有償アドオンで紹介していた機能に、以下の機能が追加されていました。

  • Clone field(既存のフィールドを選択して表示できる)

公式サイトでは現在フィールドの紹介は26個あります。
(ちなみに管理画面で選択フィールドを数えたら33個ありました)
※2017/9/1現在

よく使う便利フィールド

Repeater Field(サブフィールドの登録ができ、繰り返しの項目が可能)

ACF | Repeater

ここに画像を入れたいけど、もしかしたら2枚! いや、3枚!? という様に同じ構成のフィールドを繰り返し使いたい時に適しています。
オリジナルの組み合わせのフィールドグループが作り放題です!

作業の流れ

  1. Repeaterフィールド用のカスタムフィールドグループを作成し、Repeaterフィールドを使用しサブフィールドも追加します。
  2. 使用したいページやタイプをカスタムフィールドグループのルールで設定します。
  3. PHP(表示テーマ)に表示したいRepeaterフィールドとサブフィールド記述します。

フィールドの構成

repeater_field(繰り返しフィールド)
・image(画像)
・content(テキストエリア)
・link(URL)

PHP(表示テーマ)記述

<?php if( have_rows(‘repeater_field’) ): ?><?php if( have_rows(‘repeater_field’) ): ?>
<ul class=”slides”>
<?php while( have_rows(‘repeater_field’) ): the_row();
// vars $image = get_sub_field(‘image’); $content = get_sub_field(‘content’); $link = get_sub_field(‘link’);
?>
<li class=”slide”>
<?php if( $image ): ?> <?php if( $link ): ?> <a href=”<?php echo $link; ?>”> <?php endif; ?>
<img src=”<?php echo $image[‘url’]; ?>” alt=”<?php echo $image[‘alt’] ?>” />
<?php if( $link ): ?> </a> <?php endif; ?> <?php endif; ?>
<?php if( $content ): ?> <div><?php echo $content; ?></div> <?php endif; ?>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>

追記

Advanced Custom Fields(以下ACF)で値を取得する時、”get_field”や”the_field”を使用しますが
repeater_fieldの下に登録したフィールドは”get_sub_field”や”the_sub_field”を使用します。

 

Options Page(オプションページの作成可能)

ACF | Options Page

投稿や固定ページ、カスタム投稿タイプ等、どれにも属さないけれど管理画面で変更したい! そんな時に便利です。
共通用のkeywordやdescriptionやヘッダ・フッタの項目、トップページのスライド画像に使用したりと、
ページごとに持っておく必要がない(1度しか登場しない)情報に使用する事が多いです。

作業の流れ

  1. functions.phpにオプションページの追加を記述します。
  2. オプションページに表示するカスタムフィールドグループを作成し、ルールを以下に設定します。
    ”オプションページ” ”等しい” ”オプションページ名(functions.phpに記述した’menu_title’)”

フィールドの構成

options_field(繰り返しフィールド)
・options_name(テキスト)
・options_age(テキスト)

PHP(functions.php)設定

<?php<?phpif( function_exists(‘acf_add_options_page’) ):  acf_add_options_page(array( ‘page_title’ => ‘Options Page サンプル’, ‘menu_title’ => ‘サンプル’, ‘menu_slug’ => ‘options-page’, ‘capability’ => ‘edit_posts’, ‘redirect’ => false ));endif;?>

追記

Options Pageはフィールドではないので、他のフィールドと流れが異なります。
functions.php への追加を先に行わないと、カスタムフィールドグループのルールで選択するオプションページ名が表示されないので注意してください。

 

Flexible Content Field(入力画面にてカスタムフィールドの項目を無制限に追加可能)

ACF | Flexible Content

作業の流れ

  1. Flexible コンテンツ用のカスタムフィールドグループを作成し、柔軟コンテンツを使用し、レイアウトを追加します。
  2. 使用したいページやタイプをカスタムフィールドグループのルールで設定します。

フィールドの構成

flexible_content_field(柔軟コンテンツ)
・title_set(レイアウト)
title(テキスト)
subtitle(テキスト)
・image_set(レイアウト)
clone(Clone)
(上記で使用したrepeater_fieldをclone)
・image(画像)
・content(テキストエリア)
・link(URL)

追記

設定後はルールで指定したページを確認してください。
入力画面に選択可能でフィードが表示されます。

まとめ

フィールドにも色々便利な機能が追加されているので、実装を始める前の仕様を考える時点でどの項目をどんな組み合わせでつくるかを考えて設計をすることが大切だと思います。