Wordpress

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

記事内に商品プロモーションを含む場合があります
おなやみにゃん
おなやみにゃん
カスタムフィールドってどんなけ便利なの?出力が難しいイメージ。
にゃん花子
にゃん花子
はいはい、ACFの基本の出力を見ていきましょう。コピぺでOKにゃん

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

このブログで知れること
  1. ACFの無料版・有料版の違い
  2. 【メインテーマ】ACF基本の出力パターン
  3. 【こんなときどうする?】有料版の出力パターン
にゃん花子
にゃん花子
ACFの出力方法の便利帳としても使ってほしいにゃん。

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

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

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

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

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

にゃん花子
にゃん花子
にゃん花子は、Personalから使い始めました。使い慣れたら、お客様用サイトにも使えるFreelancerにアップグレードするにゃん
ACFの料金表

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

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

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

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

画像フィールド

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

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

投稿オブジェクト

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

<!-- オブジェクトの内容を変数にいれる -->
<?php
  $post_objects = get_field('投稿オブジェクトスラッグ');
?>
<!-- オブジェクトの内容を出力する -->
<!-- タイトル -->
<?php echo get_the_title($post_objects->ID); ?>

<!-- URL -->
<?php echo get_permalink($post_objects->ID); ?>

select(セレクト)

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

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

チェックボックス

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<?php if(have_rows('親フィールドのスラッグ')): ?>
    <?php while(have_rows('親フィールドのスラッグ')): the_row(); ?>
        <!-- 繰り返しフィールドの内容ここから -->
        <?php the_sub_field('親サブフィールドのスラッグ'); ?>
        <!-- 繰り返しフィールドの内容ここまで -->
        <div class="child_field">
        <?php if (have_rows('子フィールドのスラッグ')) : ?>
            <?php while (have_rows('子フィールドのスラッグ')) : the_row(); ?>
	            <!-- 繰り返しフィールドの内容ここから -->
	            <?php the_sub_field('子サブフィールドのスラッグ'); ?>
	            <!-- 繰り返しフィールドの内容ここまで -->
            <?php endwhile; ?>
        <?php endif; ?>
        </div>
    <?php endwhile; ?>
<?php endif; ?>

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

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

<?php if(have_rows('繰り返しフィールドのスラッグ')): ?>
    <?php $counter = count(get_field('繰り返しフィールドのスラッグ')); ?>
    <?php while(have_rows('繰り返しフィールドのスラッグ')): the_row(); $i++;?>
        <?php if( $i < 4 ): ?>
            <!-- 3件目までの処理 -->
            <!-- 繰り返しフィールドの内容ここから -->
            <?php the_sub_field('サブフィールドのスラッグ'); ?>
            <!-- 繰り返しフィールドの内容ここまで -->
        <?php endif; ?>
    <?php endwhile; ?>
    <?php if ( $counter > 4 ): ?>
        <!-- 4件目以降の処理 -->
        <?php while(have_rows('繰り返しフィールドのスラッグ')): the_row(); $t++;?>
            <?php if( $t < 4 ): ?>
            <?php else: ?>
            <!-- 繰り返しフィールドの内容ここから -->
            <?php the_sub_field('サブフィールドのスラッグ'); ?>
            <!-- 繰り返しフィールドの内容ここまで -->
            <?php endif; ?>
        <?php endwhile; ?>
    <?php endif; ?>
<?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コードが実行されます。

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

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

wp-puzzle.com logo