Advanced Custom Fieldsで背景色

  • beeesty

    (@beeesty)


    8年、 4ヶ月前

    Advanced Custom Fieldsを使用して、
    http://beauty.hotpepper.jp/slnH000042674/style/L002284941.html

    の「おすすめタイプ」箇所のようなテーブル実装を希望しています。

    髪の量（フィールド名：volume）
    □少ない
    □普通
    □多い
    というチェックボックスを作り、チェックされた場合に背景色を付ける・・
    ということは可能なのでしょうか。

    アドバイスだけでも結構なのでお力お貸しいただけたら助かります。
    よろしくお願いいたします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • ishitaka

    (@ishitaka)

    8年、 4ヶ月前

    get_field( ‘volume’ ) でチェックされた項目の値を配列で取得できます。
    配列に値が存在する場合は hair-on クラスを、存在しない場合は hair-off クラスを追加し、スタイルで背景色を設定する方法ではどうでしょうか？

    テンプレート等に

    <?php $volumes = get_field( 'volume' ); ?>
<dl class="hear-type">
<dt>髪の量</dt>
<dd><span class="<?php echo in_array( 'short', $volumes ) ? 'hair-on' : 'hair-off'; ?>">少ない<span></dd>
<dd><span class="<?php echo in_array( 'middle', $volumes ) ? 'hair-on' : 'hair-off'; ?>">普通<span></dd>
<dd><span class="<?php echo in_array( 'long', $volumes ) ? 'hair-on' : 'hair-off'; ?>">多い<span></dd>
</dl>

    style.css 等に

    dl.hair-type dt,
dl.hair-type dd { display: inline-block; margin-right: 1.0rem; }
.hair-type .hair-on { background-color: #ff6666; }
    トピック投稿者 beeesty

    (@beeesty)

    8年、 4ヶ月前

    すごい！！！！希望通りの実装をすることができました！本当にありがとうございます。
    ウェブサイトもまた覗かせていただきます^^

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「Advanced Custom Fieldsで背景色」には新たに返信することはできません。