カスタムフィールドの値で条件分岐し、HTMLや画像を表示させる

radio_eyecatch

カスタムフィールドの値を取得し、条件分岐で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
score

フォーラムの以下のトピックを参考にさせていただきました。ありがとうございます。

参考サイト

カスタムフィールドの値によって条件分岐したい

コメントを残す

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

keyboard_control_keyTOP