カスタムフィールドを使用して、
編集が容易なウェブサイトを構築しましょう。
ACFプラグイン-基礎編

2023.08.18 ACFプラグインで編集しやすいサイトを構築

はじめに

概要

プラグインACFとCPTを使用して、編集しやすいウェブサイトを作成しましょう。今回はメインビジュアルのテキストカラーの編集と画像の入れ替えを行います。

目的

テキストの編集
画像の編集
まとめ

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

テキストの編集

手順①:CPT UI
まずは、カスタム投稿タイプのパーツ(名前は何でも良い)を作成します。

メインビジュアルという投稿を作成しました。投稿をホバーした際のID（ここでは54。数値は違っても問題ありません）は後ほど使いますので、メモしておきましょう。

手順②:ACF

設定のルールで、投稿を選択しカスタム投稿タイプパーツのメインビジュアルを選択します。動画のようにカラーピッカーが表示されていれば成功です。紛らわしいため、使わないカスタムフィールドは表示させないのも重要です。

手順③:テキストエディタ

ACFプラグインには、値を表示するためのthe_filesd()関数があります。この関数は、第一引数にフィールド名、第二引数に投稿IDを指定して、表示したい値を明確に紐づけます。また、スタイルを適用するために、htmlタグの中にインラインスタイルで記述し、ACFのカスタムフィールドと関連付けています。

動作確認