[wp]wp-membersのフォームデザイン改造

前にも書いた気がしないでもないけど

改造目的

久しぶりに会員制サイトを作ることになって、WPだからプラグインを使う。

WP-Members Membership プラグイン
WP-Members Membership プラグインは、WordPress サイトをメンバーシップサイトに変えます。プレミアムコンテンツの制限、カスタム登録フィールドの作成など。

で、会員登録とか登録内容変更フォームはこんな感じで生成される。

<div id="wpmem_reg">
    <a id="register"></a>
    <form name="form" method="post" action="https://kjc-group.com/user/register" id="wpmem_register_form" class="form">
        <input type="hidden" id="_wpmem_register_nonce" name="_wpmem_register_nonce" value="a187b7c77f" />
        <input type="hidden" name="_wp_http_referer" value="/user/register" />
        <fieldset>
            <legend>新規ユーザー登録</legend>
            <label for="username" class="text">ユーザー名<span class="req">*</span></label>
            <div class="div_text"><input name="username" type="text" id="username" value="" class="textbox" required  /></div>
            <label for="last_name" class="text">姓<span class="req">*</span></label>
            <div class="div_text"><input name="last_name" type="text" id="last_name" value="" class="textbox" required  /></div>
            <label for="first_name" class="text">名<span class="req">*</span></label>
            <div class="div_text"><input name="first_name" type="text" id="first_name" value="" class="textbox" required  /></div>
            <label for="billing_phone" class="text">Phone<span class="req">*</span></label>
            <div class="div_text"><input name="billing_phone" type="text" id="billing_phone" value="" class="textbox" required  /></div>
            <label for="user_email" class="text">メール<span class="req">*</span></label>
            <div class="div_text"><input name="user_email" type="email" id="user_email" value="" class="textbox" required  /></div>
            ~略~
            <input name="a" type="hidden" value="register" />
            <input name="wpmem_reg_page" type="hidden" value="https://kjc-group.com/user/register" />
            <div class="button_div"><input name="submit" type="submit" value="登録" class="buttons" /></div>
            <div class="req-text"><span class="req">*</span>必須項目</div></fieldset>
    </form>
</div>

登録項目はいじれるけど、順番も変えられるけど、グループ分けができない。
しかも生成がこんな感じだから非常にめんどくさい。
どうにかして頑張ろうという話。

jsでやっていくしかない

<div>に突っ込むにせよ<ul>にまとめるにせよ、プラグイン自体を改造する手間は更新時にリセットされて無駄になる可能性もあるし、jsでフォローしていくしかないと考える。
やることといえばこんな感じ。

  1. 各グループ毎の<div>を用意する
  2. 各グループの<div>に該当する項目を突っ込む

言うのは簡単だけどやるのがアホほどめんどくさい。

グループ毎に振り分け

今回の肝に当たる部分。
<label>と<div>が連続してるだけで、それらにはユニークな要素がついてない。
指定の仕方としては以下の通りになる。

  1. <input>のidを基準に親の<div>を拾って.prev()で手前の<label>を指定
  2. <input>のidを基準に親の<div>を指定

これで1セット。
<label>を先に指定して移動させないと詰むのがネック。
んで、項目の数だけ書き込む必要がある。

こんな感じ

$(function(){
    //グループ作成
    $('#wpmem_reg legend').after('<div class="group_02">');
    $('#wpmem_reg legend').after('<div class="group_01">');
    //group_01
    $('#username').parent('div').prev('label').appendTo('.group_01');
    $('#username').parent('div').appendTo('.group_01');
    //group_02
    $('#last_name').parent('div').prev('label').appendTo('.group_02');
    $('#last_name').parent('div').appendTo('.group_02');
    $('#first_name').parent('div').prev('label').appendTo('.group_02');
    $('#first_name').parent('div').appendTo('.group_02');
})

forで回すとしたらこんな感じ。
内容が理解できていればこっちのほうがシンプルに済ませられて楽ではある。

$(function(){
    //グループ作成
    $('#wpmem_reg legend').after('<div class="group_02">');
    $('#wpmem_reg legend').after('<div class="group_01">');
    startNum = 4;//:nth-child()で指定する数
    group01Num = 5;//group1の項目数
    group02Num = 4;//group2の項目数
    countNum01 = group01Num * 2;//group1で移動させる数
    countNum02 = group02Num * 2;//group2で移動させる数
    //group01移動
    for(var i=0; i<countNum01; i++){
        $('#wpmem_reg fieldset > *:nth-child('+ startNum +')').appendTo('.group_01');
    }
    //group02移動
    for(var i=0; i<countNum02; i++){
        $('#wpmem_reg fieldset > *:nth-child('+ startNum +')').appendTo('.group_02');
    }
})

<fieldset>直下の内容を:nth-child()で指定するから最初の<legend>で1枠、グループ用の<div>を2つ作ったから2枠、ということで入力項目は4番目から始まるんで:nth-child(4)になる。
<label>と<div>で1セットだからforの回数は2倍になる。

どっちも項目変更時にめんどくさいんだけど、個別にappendToした方が後任にも分かりやすいっちゃ分かりやすい。好き好きですね。

.after()のところが逆順になってるけどこれは仕様だから。書き間違いじゃない。
一括で書いちゃえばよかった気もするけど、まあ、分かりやすいかなって。

HTMLのバリデーションでやってるっぽいからエラー文のことは考えなくていいかも。

ボツ案

inputのidから<label>と<div>は指定できる。ってことは、各グループの最初と最後にグループ用の開始タグと終了タグを追加すればいいんじゃない?って発想もあるんだけど、これはダメ。
開始タグだけ書き込んでも終了タグが自動挿入されるし、終了タグだけ書き込んでも自動削除される。仕様として受け入れましょう。

コメント

タイトルとURLをコピーしました