The current article

Advanced Custom Fieldsのチェックボックスのチェック項目ごとに画像を付与する覚書

ACFのチェックボックスで、チェックした項目に対して画像を付けてみようと思います。
テキストだと収まりきらない時なんかに重宝しそうです。

acf_ck_img1

capture

準備

・フィールド名を「fruit」とする
・フィールドタイプ=チェックボックス
・選択肢(選択し?)を
    apple : りんご
    orange : みかん
    grape : ぶどう
・それぞれの画像を用意し、「img」フォルダに格納したとします。

PHP

下記のように記述すると、チェックを入れたそれぞれに画像が付きます。

<?php if( in_array( 'apple', get_field('fruit') ) ) {
    echo '<img src="'.get_template_directory_uri().'/img/apple.png" alt="りんご">';
} ?>
<?php if( in_array( 'orange', get_field('fruit') ) ) {
    echo '<img src="'.get_template_directory_uri().'/img/orange.png" alt="みかん">';
} ?>
<?php if( in_array( 'grape', get_field('fruit') ) ) {
    echo '<img src="'.get_template_directory_uri().'/img/grape.png" alt="ぶどう">';
} ?>

tableで使うと、こんな感じになりますかね

fruit

表とかでテキストを改行したくないのよって時にも使えますかね^^;
以上、チェックボックスのチェック項目に画像を付与する覚書でしたー


Category

Service

Guidance

Salutation

WPCは大阪を中心に、ホームページ制作、リニューアル、コーディング、更新業務、各種印刷物制作、スキルアップ出張講習・セミナー等取り扱っております。
どこの会社に作成を依頼しようかとお悩みの方、リニューアルしたいんだけど良いプランはないかなとお探しの方、本格派のデザイナーにデザインを依頼したい、 コーディングだけ頼みたい、更新だけ頼みたい、パソコンやソフトの使い方を教えて欲しいなど、どんな事でもWPCまでお気軽にご相談ください。