カスタムフィールドの値で条件分岐し、HTMLや画像を表示させる
カスタムフィールドの値を取得し、条件分岐でHTMLや画像を表示させる方法をメモします。
サンプルでは、ラジオボタンで選択したスコアから、カスタムフィールドの値を取得・条件分岐し、画像と数字をそれぞれ出力させています。また、画像はテーマフォルダの中の画像を取得しています。
ラジオボタンでなくても、セレクトメニュー(ドロップダウン)など、一つしか選択できないタイプのカスタムフィールドでは、すべて使えます。
カスタムフィールドの値で条件分岐し、画像とテキストを表示するサンプル
※当方が「Toolset Types」を利用していますので、その書き方になっています。
<?php
// カスタムフィールドの値を取得(Toolset Types用に頭に「wpcf-」が付いています)
$score = get_post_meta(get_the_ID(), 'wpcf-score', true);
// テーマディレクトリを取得
$temp_url = get_template_directory_uri();
// 条件分岐
if ($score == '5.0') {
$score_string = '<img src="' . $temp_url . '/img/star_5.png">';
} elseif ($score == '4.0') {
$score_string = '<img src="' . $temp_url . '/img/star_4.png">';
} elseif ($score == '3.0') {
$score_string = '<img src="' . $temp_url . '/img/star_3.png">';
} elseif ($score == '2.0') {
$score_string = '<img src="' . $temp_url . '/img/star_2.png">';
} elseif ($score == '1.0') {
$score_string = '<img src="' . $temp_url . '/img/star_1.png">';
} else {
$score_string = '<img src="' . $temp_url . '/img/star_0.png">';
}
// 画像を出力
echo $score_string;
// スコアを出力(Toolset Types APIで出力しています)
echo(types_render_field('score', []));
?>
▼ 出力結果
「5.0」を選択した場合、以下のように「star_5.png」という画像と、スコアの「5.0」が出力されます。
<img src="http://www.○○○○.com/wp-content/themes/テーマフォルダ名/img/star_5.png">5.0
フォーラムの以下のトピックを参考にさせていただきました。ありがとうございます。
- 参考サイト