【WordPress】ACFで設定したカスタムフィールドを表示するPHPコード

WEB制作(基礎)

ACF(Advanced Custom Fields)の詳細・インストールはこちら(ACFの公式ページへ飛びます)。

HTMLでコーディングしたページをWordPress用のPHPへ書き換えたいときに使えるコードをまとめました。

以下「カスタムフィールド名」と示している部分にはACFで設定した「フィールド名」を入力してください。

↓一覧の「名前」にカーソルを合わせてクリックするとコピーできて便利です。

画像用のコード

いくつか方法はありますが、一番シンプルなのはこちら。

<img src="<?php the_field('カスタムフィールド名'); ?>" alt="">

ALTもカスタムフィールドで入力したい時は以下のようにしても良いかもしれません。

<img src="<?php the_field('画像のカスタムフィールド名'); ?>" alt="<?php the_field('ALTのカスタムフィールド名'); ?>">

なお、このコードで書き出す際には画像のカスタムフィールドについて「戻り値の形式」を「画像URL」に設定しておく必要があります。

「画像配列」や「画像ID」だとエラーが出るのでご注意を。

テキスト用のコード

改行を反映しない場合

<p><?php the_field('カスタムフィールド名'); ?></p>

シンプルにこれだけでOKです。

改行を反映したい場合

phpで反映する場合

<p>
    <?php
    $任意の値 = get_field('カスタムフィールド名');
    if ($任意の値) {
        echo nl2br(esc_html($任意の値));
    }
    ?>
</p>

※「任意の値」はカスタムフィールド名と同じでよいと思います。アンダーバーは使えません。

ACFの設定で反映する場合

ACFのカスタムフィールドから「プレゼンテーション」タブを開き、「改行」の項目を「自動的に<br>を追加」にします。

コメント

タイトルとURLをコピーしました