よろしくお願いいたします。
上記画像の赤枠で囲まれた部分のように、
wordpressで各項目の任意の項目だけハイライトさせる事は可能なのでしょうか?
画像上部の2枚の写真のようなカットをする場合
こういう髪質、髪の太さ、顔の形の方にオススメという参考にしていただくための
ものなので複数選択できる必要があります。
可能か不可能かだけでも結構ですので
よろしくお願いいたします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
WordPressを利用したことはありませんが、HTML/CSS、JavaScriptやjQueryさえ使える環境ならば可能ですよ。
HTML
1<p>髪質</p> 2 <input type="checkbox" name="hair_type" value="soft">やわらかい 3 <input type="checkbox" name="hair_type" value="normal">普通 4 <input type="checkbox" name="hair_type" value="stiff">かたい
これでまずname="hair_type"というジャンルで囲われたチェックボックスが完成します。
ただ、デフォルトのままではチェックボックスしか押せないですし、あまり格好がつきません。
HTML
1<p>髪質</p> 2 <input type="checkbox" name="hair_type" value="soft" id="hair_type_soft"> 3 <label for="hair_type_soft" class="label_soft">やわらかい</label> 4 <input type="checkbox" name="hair_type" value="normal" id="hair_type_normal"> 5 <label for="hair_type_normal" class="label_normal">普通</label> 6 <input type="checkbox" name="hair_type" value="stiff" id="hair_type_stiff"> 7 <label for="hair_type_stiff" class="label_stiff">かたい</label>
checkboxのid属性とlabelのfor属性に同じ名前をつけてやればそれぞれが紐付いてくれます。
これでlabelに囲われた領域をクリックしてもチェックがついたり外れたりするようになります。
あとはCSSやJavaScriptなどでチェックされたものにハイライトをつけたりしてやればOKです。
CSS
1input[name='hair_type'] { 2 display: none; /*チェックボックスを消します*/ 3} 4 5.label_soft, 6.label_normal, 7.label_stiff { 8 background: #ccc; /*labelの背景*/ 9}
チェックボックスが消えて、labelの領域のみが表示されました。
このままではチェックしても何も変化がありませんので、
JavaScript
1<script> 2$(function(){ 3 $("input[name='hair_type']").on("change",function(){ //チェックボックスの変化を検知 4 $(this).filter(":checked").next().css("background","red"); //チェックされている場合は赤 5 $(this).filter(":not(':checked')").next().css("background",""); //チェックが外れた場合は元の色 6 }); 7}); 8</script>
投稿2016/06/30 02:41
編集2016/06/30 02:51総合スコア328
0
ベストアンサー
項目に対応するカスタムフィールドを作るなどして対応することが可能です。
以前回答した記事ですが、参考になれば。
【WordPress - wordpressで簡単に追加削除出来るプラグイン(39400)|teratail】
https://teratail.com/questions/39400
カスタムフィールド用のプラグインが何種類かあるのでそれを試されてはいかがでしょうか。
投稿2016/06/30 05:25
総合スコア69364
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/30 04:01
2016/06/30 04:33