![](https://cxg-design.jp/wp-content/uploads/2024/04/colorpickerbanner01.png)
ACFのカラーピッカーで背景色を変更
ACFは、ブロックエディターに新たに入力項目を増設することができます。以前のBLOGでは、テキストや画像の設定方法を紹介しましたが、今回はカラーピッカーで、背景色を変更できる設定を紹介します。これは、ギャラリーや、LPなど、背景色が変更する投稿タイプに有効です。
今回のDEMOは背景を赤色に変更しています。
見出しの上下にスペーサーを入れています。ブロックエディターのカラーピッカーで赤を指定するだけで背景色が変更するように設定しました。今回の設定では、カラーピッカーで背景色を指定しないとWebサイトの背景色になります。
なお、ACFからPHPまでは、Webサイト制作側の設定になり、一度設定すれば、毎回投稿編集画面にカラーピッカーが表示されます。なので、管理者側がACF設定や、PHPなどのコードを扱うことはありません。
ACFでカスタムフィールド作成
まず、ACFでカラーピッカーフィールドを作成します。ACF>フィールドグループから設置したいフィールドグループ(デモ)を選択します。
フィールドを追加ボタンをクリックし、フィールドタイプのセレクターからをカラーピッカーを選択します。フィールドラベルに任意の名前(背景色)、PHPに入力するフィールド名(add_colorpicker)を入力します。背景色なので、透明度は指定しないので、透明度の有効化はチェックしません。
設定>ロケーションルールが、設定したい投稿タイプ(DEMO)になっていることを確認し、変更内容を保存ボタンをクリックします。
これでACFの設定は終了です。
![](https://cxg-design.jp/wp-content/uploads/2024/04/a2323b1b761182fe5b276bb41e349646.png)
ACF>フィールドグループをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/04/c7166ccaf8579dba5b6cc98bad44ae3b.png)
フィールドを追加をクリックし、フィールドラベル、フィールド名などを設定。
![](https://cxg-design.jp/wp-content/uploads/2024/04/d5c3cc978d9c5f50edc4390cdcd479d8.png)
設定>ロケーションルールの投稿タイプを確認し、変更内容を保存ボタンをクリック
設定項目 | 設定値 |
---|---|
フィールドタイプ | カラーピッカー |
フィールドラベル | 背景色 |
フィールド名 | 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の設定は終了です。
背景色設定
編集画面で背景色を設定します。設定した投稿タイプのコンテンツの下にカラーピッカーが設置されています。指定したい背景色(今回はレッド)を設定し、保存します。
プレビューを確認すると背景色がレッドになっています。
![](https://cxg-design.jp/wp-content/uploads/2024/04/b4c8521ab6016b28edb80a340c7e3769.png)
カラーピッカーからレッド(#d61919)を設定。
![](https://cxg-design.jp/wp-content/uploads/2024/04/e2e431005b43dc16d8de7ddce73f1ddd.png)
プレビューを確認
カラーピッカーで背景色を変更する場合の注意点
カラーピッカーで選択した色は、ブロックエディターの編集画面には、反映されませんので、プレビューを確認しながらの制作になります。
また、背景を黒にして、白文字を使用する時、文字も白にすると文字が見えなくなります。LPを作成する場合は、公開まで段落やカバーブロックのバックに黒を入れたりするなど工夫が必要です。
以上で今回の説明は終了です。プロックごとに背景色を設定する必要がなくなるので、便利な機能だと思います。また、背景色を後から変更したい場合、カラーピッカーの変更のみで出来ます。