どうか解決の糸口をご教示いただきたいです。
WordPressのプラグイン「WP Customer Reviews」で、サイト内にレビューを表示させる機能を組み込んでいます。
このプラグインのデフォルトでは、レビュー投稿部分のフォームにはテキストフォームが表示されます。
カスタムフィールドで項目を追加し、「性別」や「年代」を入力できるようにしたいのですが、ユーザビリティを考慮し、ラジオボタンで回答を得られるようにしたいと考えています。
起こっている問題
カスタムフィールドの項目は、作成した項目の数だけ自動的に作成されているようで、元のコードを書き換えてしまうと、「性別」や「年代」など内容の違う項目を作成することができません。
おそらくループで以下PHPコードを出しています。
そこで、ラジオボタンの設置は、JavaScriptで差し込むことにして、表示自体はできたのですが、ラジオボタンでチェックが入っているデータを受け取ることができず、同じnameの一番最後にあるvalueを拾ってしまいます。
以下のコードの場合、"男性"にcheckedが入っていても、データで飛んでくるのは"女性"になってしまいます。
また、生成されたHTMLを見ても、<form>タグがなく、どういった仕組みでフォームが動いているのかがわかりませんでした。
該当のソースコード
JavaScript
1//JavaScript(プラグイン外から差し込んだもの) 2jQuery(function ($) { 3 4 gendHTML = 5 '<label><input type="radio" class="text-input" name="wpcr3_f2" value="男性" autocomplete="off" checked>男性</label><label><input type="radio" class="text-input" name="wpcr3_f2" value="女性" autocomplete="off">女性</label>'; 6 7 $(".wpcr3_review_form_text_field:nth-child(4)").find("td:nth-child(2)").html(gendHTML); 8 9});
PHP
1//プラグイン内のカスタムフィールドを表示させているコード 2<tr class="wpcr3_review_form_text_field"> 3 <td> 4 <label for="{{name}}" class="comment-field">{{label}}: </label> 5 </td> 6 {{#test}} 7 test only 8 {{/test}} 9 <td> 10 <input maxlength="150" class="text-input {{class}}" type="text" id="{{name}}" name="{{name}}" value="{{value}}" /> 11 </td> 12</tr> 13
HTML
1<!-- 生成されたHTMLのフォーム部分 --> 2 3<div data-wpcr3-content="176"><div class='wpcr3_respond_1 ' data-ajaxurl='["http:||kefran","local|wp-admin|admin-ajax","php?action=wpcr3-ajax"]' data-on-postid='176' data-postid='176'> 4 <div class="pps-r_middle anct"> 5 <div class="pps-r_middle-mrbtn prodRateShow"><a href="#">レビューを見る</a></div> 6 <div class="wpcr3_respond_3"> 7 <div class="wpcr3_button_1 wpcr3_show_btn pps-r_middle-wtbtn"><span>レビューを書く</span></div> 8 </div> 9 <div class="wpcr3_respond_2"> 10 <div class="wpcr3_div_2"> 11 <table class="wpcr3_table_2"> 12 <tbody> 13 <tr> 14 <td colspan="2"><div class="wpcr3_leave_text">レビューを書く</div></td></tr> 15 <tr class="wpcr3_review_form_text_field"> 16 <td><label for="wpcr3_fname" class="comment-field">レビューのタイトル: </label></td> 17 <td><input maxlength="150" class="text-input wpcr3_required" type="text" id="wpcr3_fname" name="wpcr3_fname" value="" /></td> 18 </tr> 19 <tr class="wpcr3_review_form_text_field"> 20 <td><label for="wpcr3_f1" class="comment-field">年代: </label></td> 21 <td><input maxlength="150" class="text-input " type="text" id="wpcr3_f1" name="wpcr3_f1" value="" /></td> 22 </tr> 23 <tr class="wpcr3_review_form_text_field"> 24 <td><label for="wpcr3_f2" class="comment-field">性別: </label></td> 25 <td><input maxlength="150" class="text-input " type="text" id="wpcr3_f2" name="wpcr3_f2" value="" /></td> 26 </tr> 27 <tr class="wpcr3_review_form_rating_field"> 28 <td><label for="id_wpcr3_frating" class="comment-field">評価:</label></td> 29 <td> 30 <div class="wpcr3_rating_stars"> 31 <div class="wpcr3_rating_style1"> 32 <div class="wpcr3_rating_style1_status"> 33 <div class="wpcr3_rating_style1_score"> 34 <div class="wpcr3_rating_style1_score1">1</div> 35 <div class="wpcr3_rating_style1_score2">2</div> 36 <div class="wpcr3_rating_style1_score3">3</div> 37 <div class="wpcr3_rating_style1_score4">4</div> 38 <div class="wpcr3_rating_style1_score5">5</div> 39 </div> 40 </div> 41 <div class="wpcr3_rating_style1_base wpcr3_hide"> 42 <div class="wpcr3_rating_style1_average" style="width:0%;"></div> 43 </div> 44 </div> 45 </div> 46 <input style="display:none;" type="hidden" class="wpcr3_required wpcr3_frating" id="id_wpcr3_frating" name="wpcr3_frating" /> 47 </td> 48 </tr> 49 <tr class="wpcr3_review_form_review_field_label"><td colspan="2"><label for="id_wpcr3_ftext" class="comment-field">レビュー内容:</label></td></tr> 50 <tr class="wpcr3_review_form_review_field_textarea"><td colspan="2"><textarea class="wpcr3_required wpcr3_ftext" id="id_wpcr3_ftext" name="wpcr3_ftext" rows="8" cols="50"></textarea></td></tr> 51 <tr><td colspan="2" class="wpcr3_check_confirm"> 52 <div class="wpcr3_clear"></div> 53 <input type="hidden" name="wpcr3_postid" value="176" /> 54 <input type="text" class="wpcr3_fakehide wpcr3_fake_website" name="website" /> 55 <input type="text" class="wpcr3_fakehide wpcr3_fake_url" name="url" /> 56 <input type="checkbox" class="wpcr3_fakehide wpcr3_fconfirm1" name="wpcr3_fconfirm1" value="1" /> 57 <label><input type="checkbox" name="wpcr3_fconfirm2" class="wpcr3_fconfirm2" value="1" /> チェックを入れて投稿してください。</label> 58 <input type="checkbox" class="wpcr3_fakehide wpcr3_fconfirm3" name="wpcr3_fconfirm3" checked="checked" value="1" /> 59 </td></tr> 60 <tr><td colspan="2"> 61 <div class="wpcr3_button_1 wpcr3_submit_btn">送信</div> 62 <div class="wpcr3_button_1 wpcr3_cancel_btn">キャンセル</div></td> 63 </tr> 64 </tbody> 65 </table> 66
試したこと
checkedを外したりつけたりしましたが、あるなしに関わらず最後のデータが渡されます。
フォームをラジオボタンでなくセレクトフォームにすると、valueのデータ自体が渡されません。
動作を管理していると思われるwp-customer-reviews-3.phpのコードを変更すれば良いのかもしれませんが、PHPの専門的な知識がなく、どの部分を見て良いわからない状態です。
また、プラグイン内でProバージョンを推奨されるのですが、公式サイトを見るとProバージョンの開発は現在行っておらず、より発展的なカスタマイズの方法を探るも、フォームのスタイル変更について手掛かりになる方法を見つけられませんでした。
セレクトフォームやラジオボタンを使用できるようなプラグインを探したのですが、レビューに星でレーティングができるものが他に見つからず、このプラグインをカスタマイズして行きたいと思っています。
補足情報(FW/ツールのバージョンなど)
プラグインのバージョンは3.4.2です。
あなたの回答
tips
プレビュー