ACFのカラーピッカーで背景色を変更
ACFは、ブロックエディターに新たに入力項目を増設することができます。以前のBLOGでは、テキストや画像の設定方法を紹介しましたが、今回はカラーピッカーで、背景色を変更できる設定を紹介します。これは、ギャラリーや、LPなど、背景色が変更する投稿タイプに有効です。
今回のDEMOは背景を赤色に変更しています。
見出しの上下にスペーサーを入れています。ブロックエディターのカラーピッカーで赤を指定するだけで背景色が変更するように設定しました。今回の設定では、カラーピッカーで背景色を指定しないとWebサイトの背景色になります。
なお、ACFからPHPまでは、Webサイト制作側の設定になり、一度設定すれば、毎回投稿編集画面にカラーピッカーが表示されます。なので、管理者側がACF設定や、PHPなどのコードを扱うことはありません。
ACFでカスタムフィールド作成
まず、ACFでカラーピッカーフィールドを作成します。ACF＞フィールドグループから設置したいフィールドグループ（デモ）を選択します。
フィールドを追加ボタンをクリックし、フィールドタイプのセレクターからをカラーピッカーを選択します。フィールドラベルに任意の名前（背景色）、PHPに入力するフィールド名（add_colorpicker）を入力します。背景色なので、透明度は指定しないので、透明度の有効化はチェックしません。
設定＞ロケーションルールが、設定したい投稿タイプ（DEMO）になっていることを確認し、変更内容を保存ボタンをクリックします。
これでACFの設定は終了です。
ACF＞フィールドグループをクリック
フィールドを追加をクリックし、フィールドラベル、フィールド名などを設定。
設定＞ロケーションルールの投稿タイプを確認し、変更内容を保存ボタンをクリック
| 設定項目 | 設定値 |
|---|---|
| フィールドタイプ | カラーピッカー |
| フィールドラベル | 背景色 |
| フィールド名 | add_colorpicker |
| 初期値 | 空欄 |
| 透明度の有効化 | チェック有 |
| 戻り値の形式 | 16進値文字列 |
PHP
設定したいシングルページの、コンテンツのタグにACFのカラーピッカーの値を反映させるため、PHPを書き換えます。今回は、投稿内容を囲むタグに背景色を設定します。
<div class="content" style="background-color: <?php the_field('add_colorpicker'); ?>;">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>以上でPHPの設定は終了です。
背景色設定
編集画面で背景色を設定します。設定した投稿タイプのコンテンツの下にカラーピッカーが設置されています。指定したい背景色（今回はレッド）を設定し、保存します。
プレビューを確認すると背景色がレッドになっています。
カラーピッカーからレッド(#d61919)を設定。
プレビューを確認
カラーピッカーで背景色を変更する場合の注意点
カラーピッカーで選択した色は、ブロックエディターの編集画面には、反映されませんので、プレビューを確認しながらの制作になります。
また、背景を黒にして、白文字を使用する時、文字も白にすると文字が見えなくなります。LPを作成する場合は、公開まで段落やカバーブロックのバックに黒を入れたりするなど工夫が必要です。
以上で今回の説明は終了です。プロックごとに背景色を設定する必要がなくなるので、便利な機能だと思います。また、背景色を後から変更したい場合、カラーピッカーの変更のみで出来ます。
