WP-Membersでログインウィジェットのフォームをカスタマイズする

WP-Membersのサイドバーログインウィジェットの文言やスタイルを変更するカスタマイズ方法のメモです。サンプルではウィジェットを使ってヘッダにログイン/ログアウトフォームを設置します。

WP-MembersはWordPressで会員制サイトを構築する際に便利なプラグインです。

wpmem_sb_login_args – RocketGeek Interactive

今回はこういうやつを作りたいと思います。

サイドバーに設置することを想定されたウィジェットですが、表示をカスタマイズしていい感じにヘッダに設置していきます。

※ウィジェットじゃないフォームのカスタマイズについては以下の記事をご参照ください↓↓

    ウィジェットの設置

    まずはWP-Members Loginウィジェットをヘッダに設置します。ふつうにウィジェットを追加するだけなのでWP-Members特有のなんらかは無いです。

    サンプルコード

    functions.php

    PHP
    register_sidebar(array(
    'name'=>'ヘッダー',
    'before_widget' => '<div id="header-widget">',
    'after_widget' => '</div>',
    ));

    ヘッダーのフォームを設置したい場所

    PHP
    <?php dynamic_sidebar( 'ヘッダー' ); ?>

    表示結果

    ここから、文言やスタイルを整えていきます。

    ログインフォームのカスタマイズ

    このような表示に変更したいと思います。ここでのポイントは文言の変更まわりなので、デザインはサイトに合わせて宜しくやってください。

    元の出力

    このようなHTMLが出力されるところを

    HTML
    <div id="wp-members">
    	<h2 class="widgettitle"></h2>
    	ログインしていません。<br>
    	<form name="form" method="post" action="http://example/login/">
    		<fieldset>
    			<label for="username">ユーザー名</label><div class="div_texbox"><input type="text" name="log" class="username" id="username"></div>
    			<label for="password">パスワード</label><div class="div_texbox"><input type="password" name="pwd" class="password" id="password"></div>
    			/* 中略 */
    			<div class="button_div">
    				<input type="submit" name="Submit" class="buttons" value="ログイン"> <a href="http://example/mypage/?a=pwdreset">パスワードをお忘れですか?</a>&nbsp;
    			</div>
    		</fieldset>
    	</form>
    </div>

    カスタマイズ後の出力

    このようにしていきます。

    HTML
    <div id="wp-members">
    	<h2 class="widgettitle"></h2>
    	<p>ふっかつの じゅもんを いれて ください</p>
    	<form name="form" method="post" action="http://example/login/">
    		<fieldset>
    			<label for="username">ユーザー名</label><div class="div_texbox"><input type="text" name="log" class="username" id="username"></div>
    			<label for="password">パスワード</label><div class="div_texbox"><input type="password" name="pwd" class="password" id="password"></div>
    			/* 中略 */
    			<input type="submit" name="Submit" class="buttons" value="ログイン">
    		</fieldset>
    		<a href="http://example/mypage/?a=pwdreset" id="forgot_link">パスワードを わすれた おろかものは こちら ≫</a>&nbsp;
    	</form>
    </div>

    サンプルコード

    公式のドキュメントを参考にメッセージを変えてみます。「パスワードをお忘れですか」の文言も変更してありますが、これは公式に載ってないのでソースを見つつ雰囲気でやります。

    wpmem_sb_login_args – RocketGeek Interactive
    PHP
    add_filter( 'wpmem_sb_login_args', 'my_sidebar_args' );
    function my_sidebar_args( $args ) {
        $args = array(
    		// ログインフォームのメッセージを変更
            'status_msg' => '<p>ふっかつの じゅもんを いれて ください</p>',
    		
    		// ログインボタンと「パスワードをお忘れですか?」のリンクを囲むdivを削除
    		'buttons_before'  => '',
    		'buttons_after'   => '',
    		
    		// 「パスワードをお忘れですか?」のリンクをfieldsetの外に出すため閉じタグを削除
    		'fieldset_after'  => '',
        );
        return $args;
    }
    
    // 「パスワードをお忘れですか」のリンクを変更
    
    add_filter( 'wpmem_sb_forgot_link_str', 'my_forgot_link_str' );
    function my_forgot_link_str( $str ) {
    	global $user_login, $wpmem;
    	return ' </fieldset><a href="' . add_query_arg( 'a', 'pwdreset', $wpmem->user_pages['profile'] ) . '" id="forgot_link">パスワードを わすれた おろかものは こちら ≫</a>';
    }

    上記をfunctions.phpとかに書きます。

    CSSは、まあよしなにやって頂いたらよいのですが、せっかくなのでいちおう載せます。スタイルシートの設定は「以下のURLを使用してください」にしてあります。

    CSS
    #wp-members {
    	text-align: right;
    }
    #wp-members form {
    	display: inline-block;
    }
    #wp-members form fieldset {
    	padding: 10px;
    	border: solid 1px #ddd;
    	text-align: left;
    }
    #wp-members form label {
    	padding-right: 1em;
    }
    #wp-members form .div_texbox {
    	display: inline-block;
    	padding-right: 1em;
    }
    #wp-members form #forgot_link {
    	display: inline-block;
    }

    ログアウトフォームのカスタマイズ

    これを

    このような表示に変更したいと思います。

    サンプルコード

    公式のドキュメントを参考に表示内容を変更して改行タグも消します。

    wpmem_sidebar_status_args – RocketGeek Interactive
    PHP
    add_filter('wpmem_sidebar_status_args','my_sidebar_status');
    function my_sidebar_status( $args ){
    	$current_user = wp_get_current_user();
    	$user_info = get_userdata( $current_user->id );
    	$args['wrapper_before'] = '<p id="wpmem_logout_link">';
    	$args['status_text'] = '<span>おお ゆうしゃ ' . $user_info->user_login . ' よ! そなたが くるのを まっておった。</span>';
    	return $args;
    }

    注意点としては、公式のドキュメントではwp_get_current_user関数からfirst_nameやlast_nameといったプロパティを呼び出していますが、最新版(4.6.1で確認)ではプロパティがなくなっているので、そのままでは使えませぬ。今回はget_userdataを使用しました。パラメータは以下をご参照ください。

    関数リファレンス/get userdata – WordPress Codex 日本語版

    リンクだけ置くパターン

    ヘッダへの設置の場合はこのパターンの方が多い気もするので書いておきます。ウィジェットは使いまへん。

    ログインページは固定ページでアレする想定です。

    サンプルコード

    PHP
    <?php if(is_user_logged_in()) : ?>
    	<a href="/?a=logout">ログアウト</a>
    <?php else : ?>
    	<a href="http://example/login/(ログインページのURL)">ログイン</a>
    <?php endif; ?>

    以上。シンプル。

    その他、Wp-Membersについては過去の記事もあるので宜しければご参照ください。

    サポートが必要ですか?

    ご質問・お見積り依頼はお気軽にどうぞ

    お問い合わせはこちら
    シェア
    野良人 代表
    新免祥太
    1988年岡山生まれ。外食企業のWEB・EC担当を経験したのち、2013年12月より「野良人(のらんど)」の屋号で独立しWEBデザイン・プログラミングなどWEBサイト制作の工程全般を請け負っています。お気軽にご相談ください。
    広告
    次の記事(2016/12/04)
    3周年を迎えました
    前の記事(2016/11/15)
    【読んだ】新書太閤記(吉川英治)
    記事一覧