前提・実現したいこと
登録内容ですが
テキスト「名前」
セレクト 五十音「あ行/か行/さ行/た行/な行/は行/ま行/や行/ら行/わ行」
セレクト 咲いている場所「アルプスの庭/太陽の雫/風の香り/花の小径/いろりの広場/小鳥の園/天使の羽/バラのアーチ/愛の庭」
セレクト 咲き頃「春/秋/春と秋」
テキストエリア「花の説明」
を設定したいと思っております。
それぞれ選択内容に合わせて、絞り込みをかけるイメージです。
ユーザーが「さ行」を選ぶと、さ行だけのバラ一覧となり、
咲いている場所「太陽の雫」を選ぶと、「太陽の雫」に咲くバラだけの一覧、
「春」を選ぶと、春に咲くバラだけの一覧
といった具合です。
入れ子にする必要はなく、『ループ行』ひとつで、バラ名、咲いている場所、咲き頃、バラの説明 を考えています。
こちらの画像のように項目を選択したら切り替わるイメージです。
Custom Field Suiteのプラグインを使用してフィールドグループで項目ごと作りました。
固定ページでcustom field suiteのループ内容を取得したいです。
https://www.itti.jp/web-design/how-to-display-custom-field-suite/#chapter-7
こちらのサイトを元にドロップダウンを表示させるための
PHPコードを打ち込んだのですが表示されません。
詳しい方教えていただけませんでしょうか?
五十音 フィールド名 gojyuon
季節 フィールド名 season
場所 フィールド名 place
<?php $values = CFS()->get( 'season' ); foreach ( $values as $key => $label ): ?><span><?php echo $label; ?></span>
<?php endforeach; ?>該当のソースコード
php
1<?php get_header(); ?> 2 <div class="page-mainvisual"> 3 <figure class="page-img"> 4 <img src="<?php echo get_template_directory_uri(); ?>/images/encyclopedia/header_img.jpg" alt=""> 5 <h2 class="pagetitle"> 6 ENCYCLOPEDIAofROSES 7 </h2> 8 </figure> 9 </div> 10 <main class="rosegarden-container"> 11 <section id="rosegarden"> 12 <div class="inner"> 13 <h2 class="title">バラ図鑑</h2> 14 <ul class="item"> 15 <li> 16 <p class="txt">五十音</p> 17 <select name="gyou"> 18 <option value=""></option> 19 <option value="agyou">あ行</option> 20 <option value="kagyou">か行</option> 21 <option value="sagyou">さ行</option> 22 <option value="tagyou">た行</option> 23 <option value="nagyou">な行</option> 24 </select> 25 </li> 26 <li> 27 <p class="txt">場所</p> 28 <select name="place"> 29 <option value=""></option> 30 <option value="ai">愛の庭</option> 31 <option value="tensi">天使の羽</option> 32 <option value="kotori">小鳥の園</option> 33 <option value="taiyou">太陽の雫</option> 34 <option value="kaze">風の香り</option> 35 <option value="hana">花の小径</option> 36 <option value="irori">いろりの広場</option> 37 <option value="arupusu">アルプスの庭</option> 38 </select> 39 </li> 40 <li> 41 <p class="txt">季節</p> 42 <select name="season"> 43 <option value=""></option> 44 <option value="spring">春</option> 45 <option value="autumn">秋</option> 46 <option value="spaut">春と秋</option> 47 </select> 48 </li> 49 </ul> 50 51 <ul class="bara"> 52 <li> 53 <div class="js-modal-open" data-target="modal01"> 54 <figure class="img"></figure> 55 <div class="ttl"> 56 <h3 class="ai">愛の庭</h3> 57 <p class="txt">バラの名前バラの名前</p> 58 </div> 59 <div id="modal01" class="modal js-modal"> 60 <div class="modal__bg js-modal-close"> 61 <div class="modal__content"> 62 <figure class="img"></figure> 63 <h4 class="name">愛の庭</h4> 64 <p class="txt"> 65 咲いている場所:愛の庭<br> 66 期間:5月~6月/9月<br> 67 名所<br> 68 <span> 69 テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、 70 </span> 71 </p> 72 <div class="batsu js-modal-close">×</div> 73 </div> 74 </div> 75 </div> 76 </div> 77 </li> 78 <li> 79 <div class="js-modal-open" data-target="modal02"> 80 <figure class="img"></figure> 81 <div class="ttl"> 82 <h3 class="tensi">天使の羽</h3> 83 <p class="txt">バラの名前バラの名前</p> 84 </div> 85 <div id="modal02" class="modal js-modal"> 86 <div class="modal__bg js-modal-close"> 87 <div class="modal__content"> 88 <figure class="img"></figure> 89 <h4 class="name">天使の羽</h4> 90 <p class="txt"> 91 咲いている場所:天使の羽<br> 92 期間:5月~6月/9月<br> 93 名所<br> 94 <span> 95 テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、 96 </span> 97 </p> 98 <div class="batsu js-modal-close">×</div> 99 </div> 100 </div> 101 </div> 102 </div> 103 </li> 104 <li> 105 <div class="js-modal-open" data-target="modal03"> 106 <figure class="img"></figure> 107 <div class="ttl"> 108 <h3 class="kotori">小鳥の園</h3> 109 <p class="txt">バラの名前バラの名前</p> 110 </div> 111 <div id="modal03" class="modal js-modal"> 112 <div class="modal__bg js-modal-close"> 113 <div class="modal__content"> 114 <figure class="img"></figure> 115 <h4 class="name">小鳥の園</h4> 116 <p class="txt"> 117 咲いている場所:小鳥の園<br> 118 期間:5月~6月/9月<br> 119 名所<br> 120 <span> 121 テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、 122 </span> 123 </p> 124 <div class="batsu js-modal-close">×</div> 125 </div> 126 </div> 127 </div> 128 </div> 129 </li> 130 <li> 131 <div class="js-modal-open" data-target="modal04"> 132 <figure class="img"></figure> 133 <div class="ttl"> 134 <h3 class="taiyou">太陽の雫</h3> 135 <p class="txt">バラの名前バラの名前</p> 136 </div> 137 <div id="modal04" class="modal js-modal"> 138 <div class="modal__bg js-modal-close"> 139 <div class="modal__content"> 140 <figure class="img"></figure> 141 <h4 class="name">太陽の雫</h4> 142 <p class="txt"> 143 咲いている場所:太陽の雫<br> 144 期間:5月~6月/9月<br> 145 名所<br> 146 <span> 147 テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、 148 </span> 149 </p> 150 <div class="batsu js-modal-close">×</div> 151 </div> 152 </div> 153 </div> 154 </div> 155 </li> 156 </ul> 157 </div> 158 </section> 159 </main> 160<?php get_footer(); ?>
あなたの回答
tips
プレビュー