ACFの画像フィールドを使用して、アップした画像が固定ページに反映されるようにする方法

先日、CW（Crowd Works）で、「現在はCSSで背景画像が設定されているが、管理画面から画像を差し替えできるようにしたい」というご要望を受けました。

6月25日の締め切りで進めていくということに決まったので、事前準備として記事を書いていこうと思います。

使用したプラグイン

ACF（Advanced Custom Field）のバージョン6.0.4を使用しました。

ACF | Advanced Custom Fields Plugin for WordPress

全体の流れ

1. 固定ページの作成
2. ACFのフィールドグループの作成
3. ACFのフィールドグループの反映

固定ページの作成

画像をアップしたいページを作成していきます。

管理画面から新規固定ページを作成した後に、

個別の固定ページテンプレートファイルを作成します。

まずは新規固定ページの作成から始めていきましょう。

WP（WordPress）の管理画面から固定ページを新規作成して、

パーマリンクを追加します。

次に、特定の固定ページのテンプレファイルを作成していきます。

ファイル名は、page-[特定の固定ページのパーマリンク]となります。

今回の例では、page-sample-acf-image.phpです。

このPHPファイルを作成することで、管理画面で新規作成した、パーマリンクが sample-acf-image の固定ページでこのテンプレートファイルが使用されるようになりました。

福岡県北九州市のマスコットキャラクター「じーも」の写真がアップされているのが確認できます。

ACFのフィールドグループの作成

Advanced Custom Fieldで、フィールドグループを作成していきます。

以下のような設定にしました。

設定項目	値
フィールドグループ名	ACF 画像フィールド
ラベル	画像
ルールの「このフィールドグループを表示する条件」	【サンプルサイト】ACFの画像フィールドを使用して、アップした画像が固定ページに反映されるようにする方法 | ki-hi-ro.com と等しい

ラベルが画像の部分を詳しくみていきましょう。

以下のように設定しました。

ACFのフィールドグループの反映

まずは固定ページの投稿画面で、反映させたい画像のアップロードを行います。

テンプレートファイル（今回は、page-sample-acf-image.php）に以下の記述を行うことで、

<?php $jimo_img = get_field('画像');
      if( !empty( $jimo_img ) ): ?>
        <img src="<?php echo esc_url($jimo_img['url']); ?>" alt="<?php echo esc_url($jimo_img['alt']); ?>" class="jimo_img" />
<?php endif; ?>

管理画面からアップロードした画像を反映させましょう。

コードの説明をすると、

get_field('画像')で、フィールド名が画像の値を取得しています。

戻り値の形式は以下のようにフィールドグループの編集画面で、選択する事が出来ます。

今回は、画像配列を選択しました。

画像配列を選択した場合は、get_field('フィールド名')をすると、配列形式で値が返ってきます。

そのため、$jimo_img['url']で画像のURLが、$jimo_img['alt']で画像の代替テキストが取得できます。

<?php echo esc_url($jimo_img['url']); ?>で、urlを出力することが出来ています。

esc_urlは調べてみると、urlを無害化するとありましたが、よく分からないので、またの機会に調べたいと思います。

if(!empty($jimo_img)): ?>と<?php endif; ?>で囲まれた部分は、管理画面からアップされた画像が無かった場合には読み込まれません。

管理画面で画像をアップした場合のみ、画像が反映されるような仕組みです。

まとめ

WordPressのサイトで、ユーザーがアップした画像を特定のページに反映させるためには、

プラグインAdvanced Custom Fieldを使用して、管理画面からアップを行います。

そのために以下の作業を行います。

• ACFで画像のフィールドを作成する
• 特定の固定ページを管理画面で新規作成し、PHPテンプレートファイルを作成する
• 作成したPHPファイルに固定ページからアップした画像が反映されるような記述を行う