はじめに。

WordPressを会員制サイトにするプラグインとして、WP-Members があります。

ja.wordpress.org

これの入力フィールドが多すぎるのでタブ分けしたい、という案件がありました。 jQueryを使って実装しました。

スクリプトの設置に関しては、サーバーへのアクセスが今回許可されなかったので、WordPress にカスタムCSSまたはJSを設置する、Simple Custom CSS and JS を使いました。

ja.wordpress.org

コード作成

まず構造をチェック

WP-Membersが作るフォーム構造はこんな感じ。

<div id="wpmem_reg">
    <a name="register"></a>
    <form name="form" method="post" enctype="multipart/form-data" action="[url]" id="" class="form">
        <fieldset>
            <legend>[ページタイトル]</legend>
            <label for="[field-name]" class="text ">[text-name]<span class="req">*</span></label>
            <div class="div_text">
                <input name="first_name" type="text" id="[field-name]" value class="textbox" required="">
            </div>
           
            <!-- 中略 -->

            <div class="button_div">
                <input name="submit" type="submit" value="[Submit]" class="buttons">
            </div>
        </fieldset>
    </form>
</div>

<div id="wpmem_reg">のあたりをセレクタとして考えると良さそう。

タブナビゲーションを挿入。

今回は、タブ部分のHTMLはULで作成。<legend>の下に挿入しました。 jQueryは、タブが増減してもいいようにnumを定義する形で。

// button
     
    var btnnum = 6;
     
// set html

    var setli = "";
     
     for (var i=1; i<=btnnum; i++) {
        setli = setli + "<li class='btn-" + i + "'>書式" + i + "</li>";
     }
     $(baseclass + ' legend').after('<ul class="tablelist">' + setli + '</ul>');

タブ分けのために、任意のタグに任意のクラスをjQueryで差し込む。

WP-membersで付与されるnameなどをあてにしてもよかったのですが、コードが煩雑になるため、単純に「タグの並び順」でクラスを差し込みました。

tab01 loop では、「fieldsetの中の任意の順番のlabel、および、そのラベルの次のdiv」を「最初から16個」選択して、「tab01」「tab-all」というクラスを付与しています。

// base class
    
var baseclass ="#wpmem_reg";
    
// tab01 loop

    for (var i=1; i<=16; i++) {
        $(baseclass + ' fieldset label:nth-of-type(' + i + '),' + baseclass + ' fieldset label:nth-of-type(' + i + ')+div').addClass("tab1 tab-all");
    }

 // tab02 loop

    for (var i=17; i<=40; i++) {
        $(baseclass + ' fieldset label:nth-of-type(' + i + '),' + baseclass + ' fieldset label:nth-of-type(' + i + ')+div').addClass("tab2 tab-all");
    }

// tab03 loop

    for (var i=41; i<=51; i++) {
        $(baseclass + ' fieldset label:nth-of-type(' + i + '),' + baseclass + ' fieldset label:nth-of-type(' + i + ')+div').addClass("tab3 tab-all");
    }

// tab04 loop

    for (var i=52; i<=56; i++) {
        $(baseclass + ' fieldset label:nth-of-type(' + i + '),' + baseclass + ' fieldset label:nth-of-type(' + i + ')+div').addClass("tab4 tab-all");
    }

// tab05 loop

    for (var i=57; i<=66; i++) {
        $(baseclass + ' fieldset label:nth-of-type(' + i + '),' + baseclass + ' fieldset label:nth-of-type(' + i + ')+div').addClass("tab5 tab-all");
    }

// tab06 loop
    for (var i=67; i<=76; i++) {
        $(baseclass + ' fieldset label:nth-of-type(' + i + '),' + baseclass + ' fieldset label:nth-of-type(' + i + ')+div').addClass("tab6 tab-all");
    }

切り替えの動作

    // セレクタ、tab2以降を隠す。
     for (var i=2; i<=btnnum; i++) {
        $(baseclass + ' .tab' + i ).hide();
     }
     
    // タブボタン、btn-1のスタイル
     $(baseclass + ' .tablelist .btn-1').css("background-color", "#eee");
     $(baseclass + ' .tablelist').css("list-style","none")

     // タブボタン全般のスタイル
     $(baseclass + ' li').css({ "display":"inline-block", "padding":"5px 0", "width":"13%", "border":"1px solid #eee", "text-align":"center", "border-radius":"3px", "margin-right":".5%", "cursor":"pointer" })
    
     // タブボタンがクリックされた時の動作
    $(baseclass + ' .tablelist li').on("click", function(){

        // クリックされたボタンのクラスを取得
        var s = '.' + $(this).attr('class');

        // クリックされたボタンのクラスから数字を拾って「.tab」に文字列連結。操作したいタブのクラスを取得
        var t = '.tab' + s.replace(".btn-", "");

        // 「.tab-all」クラスがついたタグを全部隠す。
        $(baseclass + ' fieldset .tab-all').hide();

        // 操作したいタブをfadeinさせる。
        $(baseclass + ' fieldset ' + t).fadeIn();

        // タブボタン全ての背景色を透明にする。
        $(baseclass + ' .tablelist li').css("background-color", "transparent");

        // クリックされたタブボタンの背景色を「#eee」とする。
        $(baseclass + ' .tablelist ' + s).css("background-color", "#eee");

    });

以上です。全部をつなげてjQuery(document).ready(function( $ ){...});に収めればOK。

WordPressなので書き出しは、 $functionとかではなく、 jQuery で始めるようにかく。

おわりに。

きっとかならずもっと良い書き方があると思います。

Code Fan 49

中年で開発に目覚めたおじさんの技術ブログ。WordPress・Rails・Cloud9などなど。

WP-Members登録ページをjQueryでタブ分けする。