基本的な出力

自由で柔軟なカスタムフィールドを管理画面から構築できるWordPressプラグイン。通称ACF。

公式のドキュメントはこちら

基本的な出力

<?php
the_field('common_field');
echo get_field('common_field');

// 配列
$array_field = get_field('array_field');
if ( $array_field ) {
  foreach((array)$array_field as $value) {
    echo $value;
  }
}

?>

条件式の値として利用

$animal = get_field('animal');
if ( $animal === 'dog' ) {
    echo "あれは猫です。キャットです。";
}

【テキスト】フィールド

最も基本的なフィールド。出力等の記述はほかのフィールドにも当てはまる。

【テキストエリア】フィールド

テキストエリアフィールドでは、出力にいくつか種類がある。

・「フォーマットなし」：テキストフィールドと同様にプレーンなテキストとして出力。
・「自動的に段落を追加」：テキストを改行すると自動的に<br>タグが追加される。

「自動的に段落を追加」モードを選択した場合、<p>タグでテキストが囲まれるため出力するときは<p>タグで囲まないで大丈夫。

<h3>自動的に段落を追加</h3>
<?php the_field('area_field'); ?>

<h3>フォーマットなし</h3>
<p><?php the_field('area_field'); ?></p>

【真／偽】フィールド

いわゆるboolean型(true/false)。フロントへの出力というより出力の条件やカスタムフィールド自体の条件として扱うことが多い。（例：Aがtrueの場合Bというテキストフィールドの入力ができる）

当然ながら出力の値はtrueかfalse

【範囲】フィールド

RangeフィールドはRangeタイプのインプットを更新ページに出力し、数値で範囲を指定できる。
以下は公式の例。Rangeフィールドでh2タグのstyleを変更。

<?php

$h2_font_size = get_field('h2_font_size');
if( $h2_font_size ): ?>
<style type="text/css">
    h2 {
        font-size: <?php echo $h2_font_size; ?>px;
    }
</style>
<?php endif; ?>

【画像】フィールド

画像をアップロードできるフィールドが追加される。
返り値は「配列、ID、URL」のいずれかを選択する。

<?php
/**
 * 返り値：配列(Array)
 * 以下公式より抜粋(https://www.advancedcustomfields.com/resources/image/)
 */
// 画像フィールドを取得
$image = get_field('image');
if( $image ):

    // 画像フィールド（Array）の値
    $url = $image['url']; // 画像URL（デフォルト：/wp-content/upload/...）
    $title = $image['title'];
    $alt = $image['alt'];

    // 画像サイズ関係（サンプルはサムネイルサイズ）
    $size = 'thumbnail'; // (thumbnail, medium, large, full or custom size)
    $thumb = $image['sizes'][ $size ];
    $width = $image['sizes'][ $size . '-width' ];
    $height = $image['sizes'][ $size . '-height' ];
?>
    // リンク付き画像出力サンプル
    <a href="<?php echo esc_url($url); ?>" title="<?php echo esc_attr($title); ?>">
        <img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
    </a>
<?php endif; ?>
<?php 
/**
 * 返り値：ID
 * 以下公式より抜粋(https://www.advancedcustomfields.com/resources/image/)
 */
$image = get_field('image');
$size = 'full'; // (thumbnail, medium, large, full or custom size)
if( $image ) {
    echo wp_get_attachment_image( $image, $size );
}
<?php
/**
 * 返り値：URL
 * 以下公式より抜粋(https://www.advancedcustomfields.com/resources/image/)
 */
if( get_field('image') ): ?>
    <img src="<?php the_field('image'); ?>" />
<?php endif; ?>

配列で取得したほうがサイズや諸情報も取得できるため便利だが、IDを取得したほうが記述量は少ない。

【リピーター】フィールド

いくつかのカスタムフィールドをひとつのオブジェクトにまとめ、複数のオブジェクトを配列として出力できるフィールド。投稿画面からはオブジェクトの数を自由に増減できるなど非常に汎用性が高いフィールド。

出力方法はWordPressの投稿を出力するようにループさせる。

基本的なループ

<?php

// フィールドループが存在するかチェック
if( have_rows('repeater_field_name') ):

    // ループ出力
    while( have_rows('repeater_field_name') ) : the_row();

        // 通常のget_fieldではなくget_sub_fieldで値を取得
        $sub_value = get_sub_field('sub_field');

    // ループ終了
    endwhile;

// オブジェクトがない場合
else :
    // なにかする
endif;

foreachループ

<?php 
$rows = get_field('repeater_field_name');
if( $rows ) {
    echo '<ul class="slides">';
    foreach( $rows as $row ) {
        // 【画像】サブフィールドを取得
        $image = $row['image'];
        echo '<li>';
            echo wp_get_attachment_image( $image, 'full' );
        echo '</li>';
    }
    echo '</ul>';
}

個人的にはforeachループの方が記述量も少なく見やすく感じる。

Recent Posts

Recent Column