質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

0回答

1633閲覧

Custom Field Suiteのプラグインを使用して、項目ごとに画像、名前、咲いている場所、咲き頃、花の説明を表示させたいです。

oyu

総合スコア48

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2020/05/20 00:51

編集2020/05/28 02:07

前提・実現したいこと

登録内容ですが

テキスト「名前」

セレクト 五十音「あ行/か行/さ行/た行/な行/は行/ま行/や行/ら行/わ行」

セレクト 咲いている場所「アルプスの庭/太陽の雫/風の香り/花の小径/いろりの広場/小鳥の園/天使の羽/バラのアーチ/愛の庭」

セレクト 咲き頃「春/秋/春と秋」

テキストエリア「花の説明」

を設定したいと思っております。

それぞれ選択内容に合わせて、絞り込みをかけるイメージです。

ユーザーが「さ行」を選ぶと、さ行だけのバラ一覧となり、

咲いている場所「太陽の雫」を選ぶと、「太陽の雫」に咲くバラだけの一覧、

「春」を選ぶと、春に咲くバラだけの一覧

といった具合です。

入れ子にする必要はなく、『ループ行』ひとつで、バラ名、咲いている場所、咲き頃、バラの説明 を考えています。

イメージ説明
こちらの画像のように項目を選択したら切り替わるイメージです。

イメージ説明
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(); ?>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問