Wordpress

ACFを使って画像の表示を出し分ける方法【Advance Custom Fileds】

記事内に商品プロモーションを含む場合があります
おなやみにゃん
おなやみにゃん
アイコン画像をいちいち、classで指定するのが面倒にゃん
にゃん花子
にゃん花子
はいはい、ACFのチェックボックスを使って、簡単に表示するにゃん。コピぺでOKにゃん

今回は、「Advance Custom Fileds(ACF)アドバンスカスタムフィールド」のチェックボックスを使って、画像の出し分けする方法をご紹介します!

このブログで知れること
  1. ACFのセレクトボックス、チェックボックスの使い方
  2. ACFのセレクトボックス、チェックボックスの出力方法
  3. ACFを使った画像出し分け用のHTMLとCSS例

ご紹介する出来上がりのイメージ

ACFの入力画面はこのようなイメージです。
強度(星の数)はセレクトボックス、選ぶ個数によって表示される星の数が変わります
初心者マークやニコちゃんマークは、チェックボックスを使います。チェックが入っている場合だけ、表示されます

セレクトボックスやチェックボックスを選ぶと、任意のclass名が出力されます。

こちらが、表示されるアイコン画像のイメージです。
上記では強度「1」初心者・にこちゃんマークにチェックが入っているため、全てのアイコンが表示されている状態です。

任意のclass名がある場合に、contentで画像を表示するようにしています。

にゃん花子
にゃん花子
アイコンの出し分けにも便利!今回はセレクトボックスと、チェックボックスの2つの例をご紹介するにゃん

ACFの設定

今回は、同様の出し分けを複数繰り返したかったので、「繰り返しフィールド」の中に、チェックボックスとセレクトボックスのフィールドを追加しました。

曜日ごとに繰り返したいため、「フィールドタイプ → 繰り返し」にし、ラベルを「月曜日」「フィールド名 → lesson」としています。ラベルやフィールド名は適宜ご変更ください。

繰り返すためのフィールドを作ります。ここでは、セレクトボックスと、チェックボックスを使用します。

セレクトボックスは「選択」を使用します。フィールドラベルとフィールド名は、ご自身で適宜変更してください。

チェックボックスも同様に設定していきます。今回はチェックボックスを2つ使用して、初心者マーク、ニコちゃんマークを出しています。

ACFの出力

繰り返しと、セレクトボックス・チェックボックスの出力方法です。

<?php if( have_rows('lesson') ): ?>
  <?php while( have_rows('lesson') ): the_row();  ?>
  <!-- ここに繰り返したい処理を入れる -->
  <?php endwhile; ?>
<?php endif; ?>

セレクトボックスを使った、星の数の出し分け

こちらはACFの基本の呼び出し方と同じです。ただし、繰り返しフィールドの中なので、the_sub_filedになっています。

<?php the_sub_field('level'); ?>​

チェックボックスを使った、マークの出し分け

こちらも、同じくACFの基本の呼び出し方と同じです。ただし、繰り返しフィールドの中なので、the_sub_filedになっています。

<?php the_sub_field('other1'); ?>

繰り返し、セレクトボックス、チェックボックス呼び出し全文

画像だし分けのためのHTMLとCSS

先ほどの呼び出しフィールドを、htmlとcssを使って、画像を呼び出すように変更します。

<ul>
	<?php if( have_rows('lesson') ): ?>
		<?php while( have_rows('lesson') ): the_row();  ?>
		<li class="p-plan__item">
			<span class="star-l <?php the_sub_field('level'); ?>"></span><span class="<?php the_sub_field('other1'); ?>"></span><span class="<?php the_sub_field('nikochan'); ?>"></span>
		</li>
		<?php endwhile; ?>
	<?php endif; ?>
</ul>

HTML(PHPのテーマファイル)

<span class="star-l <?php the_sub_field('level'); ?>"></span><!--星-->
<span class="<?php the_sub_field('other1'); ?>"></span><!--初心者マーク-->
<span class="<?php the_sub_field('nikochan'); ?>"></span><!--ニコちゃん-->

CSS

CSSは、ACFで該当のclass名が入った場合のみ、contentで指定した画像が表示されます。

/*星出し分け*/
.s1{
	content: url(https://xxxxxx.com/wp/wp-content/uploads/2023/12/icon_star1-1.png);
	   vertical-align: middle;
	   padding-right: 5px;
    height: 16px;
}
.s12{
	content: url(https://xxxxxx.com/wp/wp-content/uploads/2023/12/icon_star1-2-1.png);
	   vertical-align: middle;
	   padding-right: 5px;
    height: 16px;
}
.s13{
	content: url(https://xxxxxx.com/wp/wp-content/uploads/2024/01/icon_star1-3.png);
	   vertical-align: middle;
	   padding-right: 5px;
    height: 16px;
}
.s2{
	content: url(https://xxxxxx.com/wp/wp-content/uploads/2023/12/icon_star2-1.png);
	   vertical-align: middle;
	   padding-right: 5px;
    height: 16px;
}
.s23{
	content: url(https://xxxxxx.com/wp/wp-content/uploads/2023/12/icon_star2-3.png);
	   vertical-align: middle;
	   padding-right: 5px;
    height: 16px;
}
.s3{
	content: url(https://xxxxxx.com/wp/wp-content/uploads/2023/12/icon_star3-1.png);
	   vertical-align: middle;
	   padding-right: 5px;
    height: 16px;
}
/*初心者マーク*/
.bigner-l{
	content: url(https://xxxxxx.com/wp/wp-content/uploads/2023/12/icon_beginer-1.png);
	   vertical-align: middle;
	   padding-right: 5px;
    height: 16px;
}
/*ニコちゃん*/
.nikochan{
	content: url(https://xxxxxx.com/wp/wp-content/uploads/2023/12/icon_trial-1.png);
	   vertical-align: middle;
	   padding-right: 5px;
    height: 16px;
}

以上で、ACFを使った画像出し分け完了です。

アイコン・マークなどを、出したり・出さなかったりしたい時に便利かと思います。「いちいち、CSSのclassを書くのは面倒」「htmlをさわれないクライアントに」など、案外使えるのでぜひ!

ABOUT ME
にゃん花子
「コード書くには苦手」「コピペで動けば、それでOK」な、ノンプログラマー向け | マニアック・ピンポイントなWordpress TIPSが多め|文系から独学でWeb屋さんになった人|インフラ分野のわかるWebディレクター|主にWordpressのサイト立ち上げ、リプレイス、運用をしています|PC画面にブツブツ呟きながら、制作するのが好きです|坐骨神経痛とぎっくり腰経験済 | ブログ収益を保護猫活動に使いたいので、頑張る人 | 夜型人間から朝方に切り替え中|小学1年生の壁に負けじと2024年も奮闘します

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

wp-puzzle.com logo