Wordpress

ACF 基本の出力とよく使う出力パターンを紹介【Advance Custom Fileds】

にゃん花子

カスタムフィールドってどんなけ便利なの?出力が難しいイメージ。

はいはい、ACFの基本の出力を見ていきましょう。コピぺでOK!

ACFの出力方法の便利帳としても使ってほしいにゃん。

ワードプレスの投稿や固定ページに、任意の項目を追加できる便利な機能「カスタムフィールド」を、プラグインで簡単に利用できるようにしたものが「Advance Custom Fileds(ACF)アドバンスカスタムフィールド」です。

このblogで知れること
  1. ACFの無料版・有料版の違い
  2. 【メインテーマ】ACF基本の出力パターン
  3. 【こんなときどうする?】有料版の出力パターン
  4. ACFを投稿や固定ページ内で出力したい
  5. ACFでショートコードを呼び出したい

ACFの無料版・有料版の違い

ACF有料版は、入力フォームの機能が増える

ACFは無料で利用可能ですが、一部の機能は有料版を購入する必要があります。有料版には、以下のような特定の機能が含まれています。(私は特に繰り返しが便利すぎて…神!)

  1. 繰り返しフィールド (The Repeater Field)
  2. 柔軟コンテンツ (The Flexible Content Field)
  3. オプションページ (Options Pages)

有料版はサブスクリプション方式で提供されており、1年間のライセンスを購入する形態となっています。

有料プランはどれがいいか悩みますよね。まずは、Personalから使い始め、使い慣れたら、お客様用サイトにも使えるFreelancerにアップグレードするのがおすすめにゃん!

ACFの料金表

サブスクって必要?!)
サブスクリプション登録すると、ACFのアップデートを受けられます。そのため、サブスクを解約すると、ACFを使い続けることはできても、アップデートはされなくなります。

【メインテーマ】基本の出力

基本の出力はとってもシンプルです!

1<!-- 入力内容を表示 -->
2<div class="item"><?php the_field('フィールドのスラッグ'); ?></div>
<!-- 入力内容を表示 -->
<div class="item"><?php the_field('フィールドのスラッグ'); ?></div>

画像フィールド

URLであれば基本出力でOKなのですが、返り値を「オブジェクト」や「ID」を選択した場合です。

1<?php
2// プロフィールページで設定した画像を取得
3$profileImage = get_field('画像のスラッグ');
4if( !empty( $profileImage ) ): ?>
5  // 画像のURLとaltを取得
6  <img src="<?php echo esc_url($profileImage['url']); ?>" alt="<?php echo esc_attr($profileImage['alt']); ?>" />
7<?php endif; ?>

投稿オブジェクト

投稿オブジェクトは、ワードプレスの投稿を選ぶことができます。選択した投稿のURL・タイトル・アイキャッチ画像などを出力することができます。

1<!-- オブジェクトの内容を変数にいれる -->
2<?php
3  $post_objects = get_field('投稿オブジェクトスラッグ');
4?>
5<!-- オブジェクトの内容を出力する -->
6<!-- タイトル -->
7<?php echo get_the_title($post_objects->ID); ?>
8
9<!-- URL -->
10<?php echo get_permalink($post_objects->ID); ?>

select(セレクト)

選択肢を入力項目として追加できます。値とlabelを設定します。

1<?php
2  // 選択したセレクトボックスの情報を取得
3  $prefecture = get_field('セレクトのスラッグ');
4  // 選択したセレクトボックスの情報を元にラベルを取得
5  $prefectureLabel = $prefecture['label'];
6  // 選択したセレクトボックスの情報を元に値を取得
7  $prefectureValue = $prefecture['value'];
8  ?>
9  <p class="<?php echo $prefectureValue ?>"> //class名として出す例
10    <?php echo $prefectureLabel ?></p>  //テキストとして出す

チェックボックス

チェックボックスを入力項目として追加できます。値とlabelを設定します。

1<?php
2// 選択したチェックボックスの情報を取得
3$checkbox = get_field('チェックボックスのスラッグ');
4if($checkbox): ?>
5  <?php foreach( $checkbox as $check ): ?>
6      <?php
7      // チェックボックスのラベルを出力
8      echo $check['label']; 
9?>
10  <?php endforeach; ?>
11<?php endif; ?>

【メインテーマ】繰り返しの出力

同じパターンのカスタムフィールドを、繰り返して入力することができ、とっても便利!(この繰り返しのために、サブスク契約したといっても過言じゃないにゃん)

繰り返しフィールドの基本の出力方法はwhile文を使用したループの中に記述します。

1<?php if(have_rows('繰り返しフィールドのスラッグ')): ?>
2	<?php while(have_rows('繰り返しフィールドのスラッグ')): the_row(); ?>
3		<!-- 繰り返しフィールドの内容ここから -->
4		<?php the_sub_field('サブフィールドスラッグ'); ?>
5		<!-- 繰り返しフィールドの内容ここまで -->
6	<?php endwhile; ?>
7<?php endif; ?>

投稿オブジェクトを、繰り返し出力する

1<!-- オブジェクトの内容を変数にいれる -->
2<?php
3  $post_objects = get_sub_field('sub_custom_field');
4?>

【メインテーマ】グループの出力

カスタムフィールドを沢山作る場合は、入力欄が多く並びすぎて、「管理し辛い」「管理ページが見辛い」などの、お悩みも。そこれ役立つのが、「グループ」です!
複数のカスタムフィールドを、グループ名を付けて、グループ分けして管理することができます。

1<?php
2$group_name = get_field('グループのスラッグ');	
3if( $group_name ): ?>
4		<!-- グループの内容ここから -->
5		<?php echo $group_name['グループ内のフィールドのスラッグ']; ?>
6		<!-- グループの内容ここまで -->
7<?php endif; ?>

【こんなときどうする?】入力の有無を判別する

if分で、フィールドの入力値があったときだけ表示するようにします!

1<!-- 入力があったときだけ、表示 -->
2<?php if(get_field('フィールドのスラッグ')): ?>
3	<div class="item"><?php the_field('フィールドのスラッグ'); ?></div>
4<?php endif; ?>

【こんなときどうする?】他のページのACF入力値を出力したい

カスタムフィールドの内容を、作成したページではない「他のページに出力」をさせることができます。固定ページや投稿の出力はもちろん、ヘッダーやフッターに、カスタムフィールドの入力値を出力したい場合にも使えます!

基本出力の例はこちら。
※投稿や固定ページのスラッグを指定します!

1<!-- 入力内容を表示 -->
2<div class="item"><?php the_field('フィールドのスラッグ','固定ページのスラッグ'); ?></div>

繰り返しフィールドの出力方法もご紹介しておきます!
※投稿や固定ページのスラッグを指定します!

1<?php
2$page_id = get_page_by_path('固定ページのスラッグ');
3$page_id = $page_id->ID;
4?>
5<?php if(have_rows('繰り返しフィールドのスラッグ', $page_id)): ?>
6	<?php while(have_rows('繰り返しフィールドのスラッグ', $page_id)): the_row(); ?>
7		<!-- 繰り返しフィールドの内容ここから -->
8		<?php the_sub_field('サブフィールドのスラッグ'); ?>
9		<!-- 繰り返しフィールドの内容ここまで -->
10	<?php endwhile; ?>
11<?php endif; ?>

【こんなときどうする?】繰り返しの入れ子の出力

繰り返しの中に、さらに繰り返しフィールドを作りたい場合に。こちらもよく使う例です!入れ子に制限はないそうですが、子・・・使っても孫くらいかと思います。

1<?php if(have_rows('親フィールドのスラッグ')): ?>
2    <?php while(have_rows('親フィールドのスラッグ')): the_row(); ?>
3        <!-- 繰り返しフィールドの内容ここから -->
4        <?php the_sub_field('親サブフィールドのスラッグ'); ?>
5        <!-- 繰り返しフィールドの内容ここまで -->
6        <div class="child_field">
7        <?php if (have_rows('子フィールドのスラッグ')) : ?>
8            <?php while (have_rows('子フィールドのスラッグ')) : the_row(); ?>
9	            <!-- 繰り返しフィールドの内容ここから -->
10	            <?php the_sub_field('子サブフィールドのスラッグ'); ?>
11	            <!-- 繰り返しフィールドの内容ここまで -->
12            <?php endwhile; ?>
13        <?php endif; ?>
14        </div>
15    <?php endwhile; ?>
16<?php endif; ?>

【こんなときどうする?】条件分岐で出力

例えばランキング形式で、1〜3の3つは大きく表示、その後4〜9までは小さく表示したい時などに。

1<?php if(have_rows('繰り返しフィールドのスラッグ')): ?>
2    <?php $counter = count(get_field('繰り返しフィールドのスラッグ')); ?>
3    <?php while(have_rows('繰り返しフィールドのスラッグ')): the_row(); $i++;?>
4        <?php if( $i < 4 ): ?>
5            <!-- 3件目までの処理 -->
6            <!-- 繰り返しフィールドの内容ここから -->
7            <?php the_sub_field('サブフィールドのスラッグ'); ?>
8            <!-- 繰り返しフィールドの内容ここまで -->
9        <?php endif; ?>
10    <?php endwhile; ?>
11    <?php if ( $counter > 4 ): ?>
12        <!-- 4件目以降の処理 -->
13        <?php while(have_rows('繰り返しフィールドのスラッグ')): the_row(); $t++;?>
14            <?php if( $t < 4 ): ?>
15            <?php else: ?>
16            <!-- 繰り返しフィールドの内容ここから -->
17            <?php the_sub_field('サブフィールドのスラッグ'); ?>
18            <!-- 繰り返しフィールドの内容ここまで -->
19            <?php endif; ?>
20        <?php endwhile; ?>
21    <?php endif; ?>
22<?php endif; ?>

【こんなときどうする?】コンテンツ内でACFを出力したい

ACFはphpコードで呼び出すため、Wordpressのテーマファイルに出力コードを記載します。が、投稿や固定ページのコンテンツ内に記載したい場合はあります。

その場合は、「コンテンツ内にphpを記載する」or「ショートコードで呼び出す」の2択になります。今回は、ACFの出力をショートコードにして、コンテンツ内に呼び出す方法をご紹介します!

PHPをショートコードにする「Insert PHP Code Snippet」

ショートコードは、function.phpに記載する方法と、プラグインを利用する方法があります。今回はプラグインを利用していきます。

WordPressプラグイン「Insert PHP Code Snippet」を使うと、PHPの処理を部品として保存し、そのPHPコードをショートコードとして記事や固定ページに挿入できるようになります。ショートコードにすることで、WordPressのページや記事内で、簡単にPHPコードを埋め込むことができます。

Insert PHP Code Snippetの使い方はとても簡単。

ダッシュボード > XYZ PHP Codeをクリックし、「Create」から新しいショートコードを追加します。

Create後は、ショートコードのコードを、固定ページや投稿に埋め込むことにより、PHPコードが実行されます。

1[xyz-ips snippet="test-get"] 

【こんなときどうする?】ACFでショートコードを実行したい

続いてショートコードを、ACFに入力して実行したい場合の方法です。

ちなみに、ショートコードをそのままACFに入力しても実行されません…
試しにやってもらうと、[ショートコードの記載のまんま]が表示されます。

こちら、決まり文句のような書き方がありますので、そちらをコピペするだけでOKです。

1<?php
2echo apply_filters('the_content', get_post_meta($post->ID, 'カスタムフィールド名', true));
3?>

こちらのように記載いただければ、ショートコードが実行されるかと思います!

ABOUT ME
にゃん花子
にゃん花子
「コード書くには苦手」「コピペで動けば、それでOK」な、ノンプログラマー向け | マニアック・ピンポイントなWordpress TIPSが多め|文系から独学でWeb屋さんになった人|インフラ分野のわかるWebディレクター|主にWordpressのサイト立ち上げ、リプレイス、運用をしています|PC画面にブツブツ呟きながら、制作するのが好きです|坐骨神経痛とぎっくり腰経験済 | ブログ収益を保護猫活動に使いたいので、頑張る人 | 夜型人間から朝方に切り替え中|小学1年生の壁に負けじと2024年も奮闘します
記事URLをコピーしました