先日、会員制サイトを WordPress の theme my login プラグインと MW WP Form プラグインを連携して構築いたしました。既存システムの改修と違い、要件に沿って新規にシステムを構築する場合は、やはり時間がかかってしまいますね。割と簡単にいくだろうと思っていたのですが、いろいろとハマってしまいました・・・。
Theme My Login と Contact Form 7 の連携は割と検索すると情報がでてきますが、MW WP Form との連携は情報があまりなく、なかなか難儀いたしました。
今回から、そんなハマりポイントを少しずつ紹介します！
そうです、情報小出し型の新連載なのです。
MW WP Form にて、ラジオボタンのチェック状況により要素の表示・非表示を切り替える
ラジオボタンによって、要素の表示・非表示を切り替えたい時ってありますよね。
タグがそのまま打てるなら、切り替え用の js を作成して、onclick 属性にて実行させることが多いです。
MW WP Form のフォームタグでラジオボタンを挿入すると、以下のようなタグが入りますね。
[mwform_radio name="趣味" id="hobby" children="ゲーム,格闘ゲーム,シューティングゲーム,RPG" vertically="true"]
このタグに onclick 属性を無理やり入れ込もうとしたり、公式サイトの このあたり を参考にしてショートコードの HTML 出力時のタグをそのまま入れてみたりしましたが、思うように動いてくれませんでした。
こういうとき、なんとしても onclick 属性を埋め込もうと試行錯誤しても、ハマりから抜け出せず、無為に時間がすぎていくことを経験から知っています。
ハマったときは、別の角度で他のやり方を考えることが大事です。
仕事をしているのに成果物があがるのが遅くなるのを回避する方法が、だんだん身についてきた・・・のかな？
JQuery の click()メソッドを使う
ラジオボタンのタグに onclick 属性を仕込むのでなく、JQuery の click() メソッドでラジオボタンクリック時に要素の表示・非表示を切り替えるようにします。
HTMLコード
[mwform_radio name="趣味" id="hobby" children="ゲーム,格闘ゲーム,シューティングゲーム,RPG" vertically="true"]
JQuery
解説
JQuery ではまず最初に、クリックされたときに表示したい要素を全て id 指定で非表示にします。
MW WP Form のフォームタグでラジオボタンを生成すると、children に指定された各ラジオボタンには “(id名)-1″、”(id名)-2″、”(id名)-3” ・・・というふうに id が割り当てられます。上記の場合ですと、hobby-1、hobby-2、hobby-3、hobby-4 ですね。
それらの id がクリックされた場合に、指定した id の要素のスタイルを display:block と none; で切り替えています。
いま振り返ると疑問に思うこと
基本的に私は同じ処理なら短いコードの方を好みます。
on(‘click’, function()) ではなく click() を採用したのも、今回はどちらでも要件を満たせて、click() の方が単純にコードが短くなるからです。
HTMLコードで onclick 属性を利用できる際はいつも show() メソッド、hide() メソッド、toggle() メソッドを利用していましたが、今回は css(“display”, “none”) などにしていますね・・・。これはなにか理由があったんだっけか・・・。
振り返るととても不思議です。納期に追われてそこまで頭が回らなかったのかなぁ・・・。
