カスタムフィールドのチェックボックス全選択肢を表示しつつ、選択項目と非選択項目の文字色を変える

カスタムフィールドでチェックボックスを設けて、チャックした項目をページに表示することは簡単ですが、チェックしていない項目も含めて全項目を表示させ、かつチェックした項目は黒字で、チェックしていない項目は灰色で表示する、なんてケースの場合は少し面倒なので、今回はその方法についてご案内しようと思います。

たとえば、複数のホテルを運営する企業のホテル情報ページとかで、オプションとして
（海が近い，山が近い，アクティビティーあり，最寄り駅から徒歩10分以内，レンタカーあり，送迎あり，露天風呂，喫煙スペースあり，・・・）
みたいな項目があって、そのホテルが該当する項目を黒字で、該当しない項目は灰色字で表示する、なんてことありますよね。そういうシーンを想定してください。
　
なお、カスタムフィールドを管理する標準プラグインとして、100ウェブでは「アドバンストカスタムフィールド」を使っていますので、今回の事例も「アドバンストカスタムフィールド」でカスタムフィールドを管理する前提で話を進めます。
　
まず、カスタムフィールドの登録から。
チェックボックスのカスタムフィールド名を「hotel_label」とし、「選択肢」欄に
near_mountain : 山が近い
near_sea : 海が近い
activity : アクティビティーあり
near_station : 最寄り駅から徒歩10分以内
・・・
という具合に、値とラベルを登録します。
そして「返り値」欄は「Value」を選択します。
これでカスタムフィールドの登録は完了です。
　
次に該当のページを表示するテンプレートに以下のように記述します。

<?php
if (have_posts()) {
  while (have_posts()) : the_post();
    $hotel_label_obj = get_field_object('hotel_label');
    $hotel_label_choices = $hotel_label_obj['choices'];
    $hotel_labels = $hotel_label_obj['value'];

    echo '<ul>';

    foreach ($hotel_label_choices as $key => $value) {
      $is_selected = 'not_selected';
      if (in_array($key, $hotel_labels)) {
        $is_selected = '';
      }
      echo '<li><p class="' . $is_selected . '">' . $value . '</p></li>';
    }

    echo '</ul>
  endwhile;
}

処理の流れを説明すると、①チェックボックス全項目を取得するために get_field_object でチェックボックスのオブジェクトを取得してforeachで回して各項目を出力しつつ、②チェックされていない項目にはpタグに not_selected のクラスを付与、チェックされている項目にはクラスを付与しない、ということをやっています。

あとはcssで文字色を変えればいいだけです。

.not_selected {
  color: #ccc;
}

お試しください。

---