ACF 基本の出力とよく使う出力パターンを紹介【Advance Custom Fileds】
カスタムフィールドってどんなけ便利なの?出力が難しいイメージ。
はいはい、ACFの基本の出力を見ていきましょう。コピぺでOK!
ACFの出力方法の便利帳としても使ってほしいにゃん。
ワードプレスの投稿や固定ページに、任意の項目を追加できる便利な機能「カスタムフィールド」を、プラグインで簡単に利用できるようにしたものが「Advance Custom Fileds(ACF)アドバンスカスタムフィールド」です。
- ACFの無料版・有料版の違い
- 【メインテーマ】ACF基本の出力パターン
- 【こんなときどうする?】有料版の出力パターン
- ACFを投稿や固定ページ内で出力したい
- ACFでショートコードを呼び出したい
ACFの無料版・有料版の違い
ACF有料版は、入力フォームの機能が増える
ACFは無料で利用可能ですが、一部の機能は有料版を購入する必要があります。有料版には、以下のような特定の機能が含まれています。(私は特に繰り返しが便利すぎて…神!)
- 繰り返しフィールド (The Repeater Field)
- 柔軟コンテンツ (The Flexible Content Field)
- オプションページ (Options Pages)
有料版はサブスクリプション方式で提供されており、1年間のライセンスを購入する形態となっています。
有料プランはどれがいいか悩みますよね。まずは、Personalから使い始め、使い慣れたら、お客様用サイトにも使えるFreelancerにアップグレードするのがおすすめにゃん!
サブスクって必要?!)
サブスクリプション登録すると、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
文を使用したループの中に記述します。
※通常の出力がthe_field
なのに対し、the_sub_field
で出力をするため注意が必要です。
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; ?>
【こんなときどうする?】チェックに応じて条件分岐
例えばチェックボックスの有無に応じて表示したい時などに。(条件分岐の箇所が複数チェックに対応していないので、ラジオボタンなどの方がいいかもしれません)
1<?php if(have_rows('繰り返しフィールドのスラッグ')): ?>
2<?php while(have_rows('繰り返しフィールドのスラッグ')): the_row(); ?>
3
4<!--********チェックボックス条件分岐**********-->
5<?php
6// 選択したチェックボックスの情報を取得
7$genres = get_sub_field('チェックボックスのスラッグ');
8?>
9<?php
10foreach( $genres as $genre ):
11$genreValue = $genre['value'];
12?>
13<?php if($genreValue === 'チェックボックスのvalue1'): ?>
14 <div>
15 <h3><?php echo $genre['value']; ?></h3>
16 <p>選択肢1についての説明文を記述します。</p>
17 </div>
18 <?php elseif($genreValue === 'チェックボックスのvalue2'): ?>
19 <div>
20 <h3><?php echo $genre['value']; ?></h3>
21 <p>選択肢2についての説明文を記述します。</p>
22 </div>
23 <?php elseif($genreValue === 'チェックボックスのvalue3'): ?>
24 <div>
25 <h3><?php echo $genre['value']; ?></h3>
26 <p>選択肢3についての説明文を記述します。</p>
27 </div>
28 <?php else: ?>
29<?php endif; ?>
30<?php endforeach; ?>
31<!--//********チェックボックス条件分岐********-->
32
33<?php endwhile; ?>
34<?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?>
こちらのように記載いただければ、ショートコードが実行されるかと思います!