WordPressのサイトでトップページの画像や動画を管理画面から変更できるようにする方法を紹介します。WordPressを使ったサイトでもブログやニュース以外は、管理画面を介さずに固定ページで作ってしまうことも多いと思います。そのような場合でもACFを使えば部分的に管理画面から更新できるようになるため非常に便利です。

作業の概要

下記のような手順で作業をしていきます。

・ACFをインストールする
・固定ページを作成する
・ACFの設定画面からカスタムフィールドを設定する
・トップページに埋め込みコードを追記する

トップページ以外のページでも基本的な作業手順は同じですが、トップの場合のみ専用の固定ページを作成する必要があります。詳細は後述します。

ACFをインストールする

ACFのプラグインをインストールします。左メニュー「プラグイン」から「新規プラグインを追加」を選択し「ACF」を検索します。紛らわしい名前のプラグインが多数あると思います、「作者：WP Engine」となっているものをインストール＆有効化します。

通常はこのままカスタムフィールドの設定に入りますが、トップページの場合はひと手間必要となります。

固定ページを作成する

新しい固定ページを作成します。ここで作成するページは、この後にACFで設定するカスタムフィールドの受け皿となる専用ページです。このページそのものが表示されることはなく、トップページとACFとを繋ぐページとなります。

ページ名は任意で構いませんが、お客様が使用することが想定される場合はわかりやすいものにしましょう。ACFの存在を意識してもらう必要はないでしょうから「トップ」でも問題ありません。

スラッグは半角英数でわかりやすいものにします。ここではtop-img-acfとしています。

ACFでカスタムフィールドを作成する

左のメニューから「ACF」を選択します。「＋新規追加」を選択します。

ここでは例として画像の項目を追加します。

フィールドタイプ：画像
フィールドラベル：トップ 画像01 – 管理画面に表示された際にわかりやすいもの
フィールド名：top_img01
戻り値の形式：画像配列

「新規フィールドグループを追加」の右のボックスにフィールドグループの名称を入力します。この項目を入力しないと保存することができないので注意してください。

ページ下部の「設定」から対象ページを設定します。「固定ページ」を対象とし、さきほど作成した「トップ – ACF用ページ」を選択します。右上の「変更内容を保存」をクリックすると設定は完了です。

トップページに埋め込みコードを追記する

トップのテンプレートファイルにコードを追記します。通常はfront-page.php/home.php/index.phpなどのファイルですになります。

<?php
    $slug = get_page_by_path('top-img-acf'); //スラッグを取り出す
    $id = $page_slug->ID; //スラッグからIDを取り出す
    $img_field = get_field('top_img01', $id); //フィールド名とIDで画像を特定
    if (!empty($img_field)) { //画像の有無をチェックしてURLとALT要素を出力
        echo '<img src="' . esc_url($img_field['url']) . '" alt="' . $img_field['alt'] . '" class="media-flash__src this__for-PC">' . "\n"; //画像を表示
    }
?>

通常のACF埋め込みと異なるのは、今回作成した固定ページのスラッグからIDを取り出して、IDと画像のフィールド名でマッチさせる必要がある点です。

全ての作業が完了した後に固定ページからさきほどの「トップ – ACF用ページ」を開くと画像の選択画面が表示されます。こちらから選択した画像がトップに表示されます。

動画の場合の設定

画像ではなく動画の場合でも作業の大枠は変わりません。

mp4などの動画の場合

mp4などの動画を直接埋め込みたい場合は、フィールドタイプ「ファイル」を選択します。返り値は「ファイルのURL」を選択します。

埋め込んだページに「ファイルを追加」ボタンが表示されます。mp4などの動画ファイルを選択して完了です。

YouTube動画の場合

Youtubeの場合はフィールドタイプ「oEmbed」を選択します。

埋め込んだページにYouTubeのURLを入力項目が表示されます。YouTubeのURLを貼り付けて完了です。

まとめ

ACFを使用したトップページの画像・動画の編集機能について紹介しました。管理画面からWordPress標準のライブラリを使用して管理できることはお客様にとっても大きなメリットです。また既存サイトの部分改修にも有用な手段です。