「トップページにACFを適用させたい！」
こんな方に向けて。
投稿にカスタムフィールドを取り入れたいときに使用する「Advanced Costom Fields（ACF）」
プログラミングやコードの知識がなくてもWebサイトを更新できる（料金表やメニュー表などで大活躍！）ので、サイト運営者ならぜひとも取り入れたいプラグインです。
固定ページで使用するパターンが多いですが、トップページにも適用することもできます。
しかし、この方法を解説する記事や動画が意外と少なくて困ったので、今回はその解決方法を解説します。
完成形がこちら
上記は「front-page.php」です（見にくくてスイマセン）。
赤で囲まれた部分の文章をカスタムフィールド化して、随時変更できるようにしていきます。
全体の流れ
- その１：固定ページを作成する
- その２：カスタムフィールドを作成する
- その３：PHPのコードを書く
ACFがインストール&有効化されていることが前提となります。まだの方は下記からどうぞ。
Advanced Costom Fields（ACF）をインストールする
その１：固定ページを作成する
まずは、WordPressで固定ページを作成します。
front-page.phpだけの専用ページを作成してもいいですが、header.phpやfooter.phpなど、すべてのページでも使えるほうが便利です。
なので、全ページに適用できる固定ページを作ります。
スラッグを“custom_field” とする
WordPressの管理画面から固定ページを作成し、ページ名を「カスタムフィールド」とします（ご自身がわかりやすい任意の名前でよし）。
そして、固定ページでスラッグを、"custom_field" とします。
その２：カスタムフィールドを作成する
次は、ACFでの作業になります。
下のほうにある「設定」にきたら、ルールを下記のとおりにします。
- 「固定ページ」
- 「等しい」
- 「カスタムフィールド」
その３：PHPのコードを書く
front-page.phpにある事例の文章に、カスタムフィールドのテキストを適用させます。
そこで、コードエディター（この解説ではVScode）でfront-page.phpを開いてください。
<p class="case__card-desc">
<?php
$slug = 'custom_field'; // 取得するスラッグ名
$page = get_page_by_path($slug); // スラッグ名からページを取得
$id = $page->ID; // ページのIDを取得
$get_field = get_field_object('case-text', $id); // フィールドオブジェクトを取得
echo esc_html($get_field['value']); // フィールドの値をエスケープして出力
?>
</p>ひとつ注意点です。
上記コード内６行目にある「$get_field = get_field_object(‘case-text’, $id);」こちらのコード。
$get_field = get_field_object(‘case-text‘, $id);に入るclass名は、ACFで設定したフィールド名をいれます。
※画像の場合はこちら
<figure class="case__card-image">
<?php
$slug = 'custom_field'; // 取得するスラッグ名
$page = get_page_by_path($slug); // スラッグ名からページを取得
$id = $page->ID; // ページのIDを取得
$image_url = get_field('case-image1', $id); // カスタムフィールド 'case-image1' の値を取得
if ($image_url) {
echo '<img src="' . esc_url($image_url) . '" alt="" />';
}
?>
</figure>仕上げに、先ほど作成した固定ページを開き、該当部分を変更して更新をクリックすればOKです。
冒頭でお示ししたとおり、赤の部分が変更できます！
この方法で「うまくできなかった(;_;)」という方は、私のTwitterのDMまでご連絡ください。
また、この他にも解説してほしいものがありましたら、あわせてご連絡いただければ解説いたします！
最後までありがとうございました！
コメント