サポート » 使い方全般 » カスタムフィールドでセレクト項目に色を付けて表示したい

  • 解決済 takita

    (@takita)


    皆様、よろしくお願いします。

    advanced custom fieldsを利用し、セレクトボックスで、10代/20代/30代・・・と選択できるようにします。
    表示される結果として、10代を赤色、20代を青色・・と、色を付けたいと思っています。

    選択しの設定項目のところに、

    10代:10代
    20代:20代
    30代:30代

    と設定しますが、何らかの方法で、classか何かを設定して、選択されたセレクト情報に、付加されないか・・と思っています。

    例えば、

    <span class=”color1″>10代</span>
    <span class=”color2″>20代</span>
    <span class=”color3″>30代</span>

    と、class情報が付加されていれば、CSSで色付けできるんだけど・・と思っているのですが、こういうことっていうのは、無理でしょうか?

    よろしくお願いします。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • こんばんわ、takitaさん

    AFCではフォームの部品に任意のクラスを付与する事ができなかったような…記憶があります。ベストな方法ではないかもしれませんが、いくつかご提案。

    1. Chrome などのデベロッパーツールで該当の部品の id なり class を調べ装飾
    2. JavaScript で任意の class を付与し装飾

    選択肢を

    teens : 10代
    twenties : 20代
    tirties : 30代

    のようにすれば、普通に class で使えると思いますが?

    スペルミス

    teens : 10代
    twenties : 20代
    thirties : 30代

    です。

    皆様、ご返事ありがとうございます。

    選択しの項目に、

    teens : 10代
    twenties : 20代
    thirties : 30代

    で、テスト的に、下記のようにadvanced custom fieldsに登録しました。

    フィールドラベル:年齢
    フィールド名:nenrei
    フィールドタイプ:セレクトボックス

    表示させる箇所に、
    <p><?php the_field(‘nenrei’); ?></p>
    と設定しました。

    予想としては、20代を選択した場合、
    <p class=”twenties”>20代</span>
    と入るのかな・・と思っておりましたが、

    表示されている箇所のソースを見ると、

    <p>twenties</p>

    となっており、classがつきません。
    また、20代という表示ではなく、twentiesと表示されます。

    何度もやってみたのですが、思い通りに行かず、申し訳ないですが、私が何か記述間違いか勘違いをしているのでしょうか?

    KUCKLUさんに投稿していただ部分は、チャレンジしてみたのですが、私のレベルでは追いつかず、何を質問していいのか・・で、立ち往生しております。

    すみませんが、よろしくお願いします。

    モデレーター gatespace

    (@gatespace)

    KUCKLUさんのもKaitoさんも、投稿画面のフォームの話をしているのでは?

    takitaさんがやりたいのはテーマで出力するときの話?

    gatespaceさん、ご返信ありがとうございます。

    はい、最終的に、下記のようにテーマに出力できるような方法があれば・・と思っております。

    <span class=”color1″>10代</span>
    <span class=”color2″>20代</span>
    <span class=”color3″>30代</span>

    分かりにくい文章ですみません。

    <span class=&quot;color1&quot;>10代</span>
    <span class=&quot;color2&quot;>20代</span>
    <span class=&quot;color3&quot;>30代</span>

    Advanced Custom Fieldsでこのように登録すればclassが付与されます。

    すみません、ちょっと、書き方が悪かったようで、これ以上、表現することが出来ませんので、テンプレートにclass属性がついたセレクト情報を出力する方法(記述)に関しては、ちょっと断念します。

    ご返答いただきました皆様、ありがとうございました。

    すみません、解決済みをチェックしてませんでした。

    モデレーター gatespace

    (@gatespace)

    Select

    カスタムフィールドの設定

    teens : 10代
    twenties : 20代
    thirties : 30代

    出力コード

    <?php
    $field = get_field_object( 'field_name' );
    $value = get_field( 'field_name' );
    $label = $field['choices'][ $value ];
    
    echo '<p class="' .  esc_attr( $value ) . '">' . esc_html( $label ) . '</p>';
    ?>

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • トピック「カスタムフィールドでセレクト項目に色を付けて表示したい」には新たに返信することはできません。