【ACF コンテンツフィールド編】WordPressカスタムフィールド徹底解説

前回の基本フィールド編に引き続き、実践編として
Advanced Custom Fields（以下略ACF）の「コンテンツ」フィールドを全て解説していきます。

コンテンツフィールドは以下４つになります。

• 画像
• ファイル
• Wysiwygエディタ
• oEmbed

※ACFの設定、基本フィールドについての記事はこちらです。

前提

カスタムフィールドを設置するページは、サンプルとしてカスタム投稿のお知らせ（news）とします。カスタム投稿の作成については割愛します。

テンプレートファイル（PHPファイル）への記述はindex.phpとします。コピペする場合は他のテンプレートでもOKです。

コンテンツフィールドその１「画像」

役割

画像を表示します。

管理画面側の設定

1. ①「フィールドラベル」と「フィールド名」を設定
2. ②「フィールドタイプ」のセレクトボックスから「画像」を選択
3. ③「返り値のフォーマット」を「画像URL」に変更する
4. ④更新（保存）する

補足

返り値のフォーマットを「画像URL」にするとアップロードした画像のパスが取得できますが、画像の代替テキストや、中サイズ、大サイズの画像のパス等画像に関する様々な情報を取得したい場合は「画像配列」を選択しましょう。

また、「最小」「最大」を設定することで画像の最小・最大アップロードサイズ、横幅・高さを制限することができます。大きいサイズの画像をアップロードすることを防ぐことでページの表示速度の向上を図ります。

編集画面で値を入力する

ページの編集画面に画像フィールドが追加されていることを確認し、画像を入力して更新（保存）します。

表示側にフィールドの内容を表示する

テンプレート（PHPファイル）にフィールドの内容を表示するコード

<?php
  $args = array(
    'posts_per_page' => 1, //投稿の表示件数。3件表示させるなら3にする。
    'post_type'      => 'news', //投稿タイプを指定。デフォルトの投稿なら「post」
    'orderby'        => 'post_date', //投稿日を基準に並び替える
    'order'          => 'DESC', //降順に並び替える
  );
  $news_query= new WP_Query( $args );
?>
<?php if($news_query->have_posts()): ?>
  <?php while($news_query->have_posts()): $news_query->the_post();?>
  <?php
		$test_img = get_field('test_img');
		if(isset($test_img)){
			echo $test_img;
		}
  ?>
  <?php endwhile; wp_reset_postdata();?>
<?php endif; ?>

コードの考え方は以下になります。

1. 表示する記事の投稿タイプ、記事の件数、並び順を指定する（2〜8行目）
2. 記事が１件でもあったらループを回して記事を表示（10〜11行目）
3. フィールドの値を変数に入れて、フィールドに値があったら（空欄以外だったら）表示する。（13〜16行目）

13行目の get_field(‘test_img’)の部分の「test_img」がフィールド名になります。カスタムフィールドを作成した際のフィールド名を入れます。

get_fieldを詳しく知りたい方はACFの公式サイトを参照してください。

表示側の確認

画像フィールドに入力した画像が出力されています。

コンテンツフィールドその２「ファイル」

役割

ファイルを表示します。画像フィールドと似ていますが、画像の他にPDFや文書系のファイルを選択することができます。

管理画面側の設定

1. ①「フィールドラベル」と「フィールド名」を設定
2. ②「フィールドタイプ」のセレクトボックスから「ファイル」を選択
3. ③「返り値」を「ファイルURL」に変更する
4. ④更新（保存）する

補足

返り値を「ファイルURL」にするとファイルのパスが取得できますが、IDや、ファイル名等ファイルに関する様々な情報を取得したい場合は「ファイル配列」を選択しましょう。

また、「最小」「最大」を設定することで画像の最小・最大アップロードサイズを制限することができます。大きいサイズの画像をアップロードすることを防ぐことでページの表示速度の向上を図ります。
また「許可するファイルタイプ」を設定する事で例えばPDFファイルのみ、excelファイルのみアップロードできるように制限が可能です。

編集画面で値を入力する

ページの編集画面にファイルフィールドが追加されていることを確認し、ファイルを追加して更新（保存）します。

表示側にフィールドの内容を表示する

テンプレート（PHPファイル）にフィールドの内容を表示するコード

今回はPDFを表示してみます。

<?php
  $args = array(
    'posts_per_page' => 1, //投稿の表示件数。3件表示させるなら3にする。
    'post_type'      => 'news', //投稿タイプを指定。デフォルトの投稿なら「post」
    'orderby'        => 'post_date', //投稿日を基準に並び替える
    'order'          => 'DESC', //降順に並び替える
  );
  $news_query= new WP_Query( $args );
?>
<?php if($news_query->have_posts()): ?>
  <?php while($news_query->have_posts()): $news_query->the_post();?>
  <?php
		$test_file = get_field('test_file');
		if(isset($test_file)){
			echo '<a href="'.$test_file.'" alt="">サンプルPDF</a>';
		}
  ?>
  <?php endwhile; wp_reset_postdata();?>
<?php endif; ?>

1. 表示する記事の投稿タイプ、記事の件数、並び順を指定する（2〜8行目）
2. 記事が１件でもあったらループを回して記事を表示（10〜11行目）
3. フィールドの値を変数に入れて、フィールドに値があったら（空欄以外だったら）表示する。（13〜16行目）

13行目のget_field('test_file')の部分の「test_file」がフィールド名になります。カスタムフィールドを作成した際のフィールド名を入れます。

表示側の確認

リンクテキストをクリックするとPDFが開くようになりました。

コンテンツフィールドその３「Wysiwygエディタ」

役割

エディタに記載した内容を表示します。

管理画面側の設定

1. ①「フィールドラベル」と「フィールド名」を設定
2. ②「フィールドタイプ」のセレクトボックスから「Wysiwygエディタ」を選択
3. ③更新（保存）する

補足

エディタの機能を制御するには「タブ」の３パターンから選択します。

「ビジュアル&テキスト」はビジュアルエディタ、テキストエディタ両方を表示します。

「ビジュアルのみ」はビジュアルエディタのみ表示します。

「テキストのみ」はテキストエディタのみ表示します。

「ツールバー」からを全機能を持ったエディタと、簡易的な機能を持ったエディタを選ぶことができます。編集者にあまり自由に編集してほしくない場合は簡易的な「Basic」を選ぶといいでしょう。

「メディアアップロードボタンを表示するか？」から「メディアを追加」ボタンを表示、非表示にすることができます。

編集画面で値を入力する

ページの編集画面にWysiwygエディタフィールドが追加されていることを確認し、内容を入力して更新（保存）します。

表示側にフィールドの内容を表示する

テンプレート（PHPファイル）にフィールドの内容を表示するコード

<?php
  $args = array(
    'posts_per_page' => 1, //投稿の表示件数。3件表示させるなら3にする。
    'post_type'      => 'news', //投稿タイプを指定。デフォルトの投稿なら「post」
    'orderby'        => 'post_date', //投稿日を基準に並び替える
    'order'          => 'DESC', //降順に並び替える
  );
  $news_query= new WP_Query( $args );
?>
<?php if($news_query->have_posts()): ?>
  <?php while($news_query->have_posts()): $news_query->the_post();?>
  <?php
    $test_wysiwyg = get_field('test_wysiwyg');
    if(isset($test_wysiwyg)){
      echo $test_wysiwyg;
    }
  ?>
  <?php endwhile; wp_reset_postdata();?>
<?php endif; ?>

コードの考え方は以下になります。

1. 表示する記事の投稿タイプ、記事の件数、並び順を指定する（2〜8行目）
2. 記事が１件でもあったらループを回して記事を表示（10〜11行目）
3. フィールドの値を変数に入れて、フィールドに値があったら（空欄以外だったら）表示する。（13〜16行目）

13行目のget_field('test_wysiwyg')の部分の「test_wysiwyg」がフィールド名になります。カスタムフィールドを作成した際のフィールド名を入れます。

表示側の確認

エディタに入力した内容が出力されています。

コンテンツフィールドその３「oEmbed」

役割

動画や音声ファイル、Twitterのツイートなどを埋め込むことができます。ただし、GoogleMapの埋め込みはできません。

管理画面側の設定

1. ①「フィールドラベル」と「フィールド名」を設定
2. ②「フィールドタイプ」のセレクトボックスから「oEmbed」を選択
3. ③更新（保存）する

補足

「埋め込みサイズ」で埋め込んだコンテンツのサイズを指定することができます。

編集画面で値を入力する

ページの編集画面にoEmbedフィールドが追加されていることを確認し、埋め込みたいページのURLを入力して更新（保存）します。今回はTwittterのツイートを埋め込んでみます。

表示側にフィールドの内容を表示する

テンプレート（PHPファイル）にフィールドの内容を表示するコード

<?php
  $args = array(
    'posts_per_page' => 1, //投稿の表示件数。3件表示させるなら3にする。
    'post_type'      => 'news', //投稿タイプを指定。デフォルトの投稿なら「post」
    'orderby'        => 'post_date', //投稿日を基準に並び替える
    'order'          => 'DESC', //降順に並び替える
  );
  $news_query= new WP_Query( $args );
?>
<?php if($news_query->have_posts()): ?>
  <?php while($news_query->have_posts()): $news_query->the_post();?>
  <?php
		$test_oembed = get_field('test_oembed');
		if(isset($test_oembed)){
			echo $test_oembed;
		}
  ?>
  <?php endwhile; wp_reset_postdata();?>
<?php endif; ?>

コードの考え方は以下になります。

1. 表示する記事の投稿タイプ、記事の件数、並び順を指定する（2〜8行目）
2. 記事が１件でもあったらループを回して記事を表示（10〜11行目）
3. フィールドの値を変数に入れて、フィールドに値があったら（空欄以外だったら）表示する。（13〜16行目）

13行目のget_field('test_oembed')の部分の「test_oembed」がフィールド名になります。カスタムフィールドを作成した際のフィールド名を入れます。

表示側の確認

oEmbedフィールドに入力した埋め込みコンテンツが出力されています。

まとめ

いかがだったでしょうか。実際の現場ではコンテンツフィールドの中では「画像」、「Wysiwyg エディタ」を良く使います。後日記事にする予定の「繰り返しフィールド」と組み合わせて使うと更に柔軟性のある強力な機能になります。