WordPressを会員サイトにする為にログインページを作ってみる

一か月半位ですかね。
ひたすらWEB作りに向かって、そろそろ飽きてきました。
もっとも飽きてる原因はメイン部分はほぼ終わって、僕個人にはどーでも良いようなトコロを仕上げてるからですが・・・。

メンバー用のログインページを作るよ

WordPressを会員サイトにする為のプラグインは多々存在しますね。
ですので、そーいったもの使ってしまうのが手っ取り早いのですが、機能が豊富なプラグイン程 データベースに新しいテーブルを増やす感じです。

現在制作中のAmazonのマーケティングサイトは、会員と非会員の分岐をさせたい程度なので大した機能は必要ありません。

それだけの為にテーブルが増えたり、wp-cronが動くのは嫌だな・・・　と思ったので自作で行きます。

オリジナルの機能を利用する

手っ取り早く会員機能を付けるなら、オリジナルのメンバー機能を利用するのが良いと思う。

wordpressの関数も利用できるので、とても便利。

ただ、お馴染みのWPログイン画面からログインさせるのは なんとういか微妙な気がするので別ページを作ります。

必要なのは
ログインページ、
ロストパスワードページ、
リセットパスワードページ。

ログアウトページは、URL踏ませればOKなので必要なし。

ページを用意する

固定ページを使って専用ページを用意して、POST又はGETで分岐させる。

まずログインページ

ログインページは簡単。

wp_login_form( $args )

この関数使ってリダイレクト先とか設定すれば、formを作ってくれる。
と言っても、少しやる事があったので専用の関数にしちゃったけど・・・。

ロストログインページ

次はパスワードを忘れた人の為のページ。

まずはログインミスってる人にメッセージを出してあげる為にパラメーターを使う。

function my_login_fail( $username ) {
    
   $referrer = $_SERVER['HTTP_REFERER'];
    if ( !empty($referrer) && !strstr($referrer,'wp-login') && !strstr($referrer,'wp-admin') ) {
        wp_redirect( '****リダイレクト先?login=failed' );
        exit;
    }
}
add_action( 'wp_login_failed', 'my_login_fail' );

wp_login_failedにフックして、デフォルトのページに飛ばないようにする。
そんで、パラメータ付けておいてメッセージとリンクを表示してあげる。

あとは、パスワードをロストした人の為のformを作ってあげれば良い。

<form name="lostpasswordform" id="lostpasswordform" data="<?php echo wp_lostpassword_url(); ?>" method="post">
    <div class="form-group">
        <label for="user_login">ユーザー名またはメールアドレス</label><br>
        <input type="text" name="user_login" id="user_login" value="" size="20" tabindex="10" required>
    </div>
    <div class="text-right">
        <input type="hidden" name="redirect_to" value="<?php echo esc_url( home_url( '/' ) ); ?>">
        <input type="submit" name="wp-submit" id="wp-submit" value="新しいパスワードを取得" tabindex="100">
    </div>
</form>

デフォルトと見てほぼ同様にしてあるけど、formのactionを消して、dataにしてあるのはajaxでやる為。
ロストとリセットの動きを調べるのが面倒で、試しにAjaxで送ってみたら返ってきた値で分岐させられそうだったので、ajaxにしちゃった。

Javascript必須になるけど、無効化してる人には『必須です』のメッセージ出せば分るでしょう。

リセットパスワードページ

実はこのリセットパスワードページの動きを調べるの面倒で、Ajax化したワケですよ。
情報少ないし、コアの部分追うの大変だし・・・。

で、リセットパスワードページは まずはメールの書き換えから。

function my_retrieve_password_message( $message, $key, $user_login, $user_data ) {
    
    $message = str_replace('wp-login.php', '*任意のスラッグとか*', $message);
    return $message;
    
}
add_filter( 'retrieve_password_message', 'my_retrieve_password_message', 10, 4 );

retrieve_password_messageとかいうトコロにフックして、ユーザーに送るメールをいじれる。
そこでwp-login.php以外の任意なページに飛ばしてやれば良い。

あとは、ロストパスワードと同様にデフォルトのページに近いモノを用意してあげればOKなんだけど、
パラメーターをwp-login.phpに送らないとリセットさせるスイッチが入らないようなので、ここもAjax(笑)

そんで完成www

スパム防止も

wp-login.phpにpostさせるので、ブルートフォースアタックとかチョット嫌だなーと思ったのでCAPTCHAを使おうかと思ったのですが、色々読んでたらCAPTCHAに嫌悪感のある人も多いらしくてトラップ式にしました。

確かにあまりに難解なCAPTCHAが出てくるとムカつく。

トラップ式はハニーポットと言うらしいのですが、見えない空欄を作っておいてロボットに空欄を埋めさせるテクニックのようです。
人間なら見えてないから埋めないけど、ロボットなら埋めてくるのを狙ったトラップ。

トラップに引っかかったIPアドレスは登録しておいてアクセス禁止にでもすれば良い。

といっても、ロボットが学習して埋めなくなるらしいけど、CAPTCHAも突破されるらしいし結局イタチごっこなのでしょうな。

というワケで、かなり雑だけど自作ログインページのメモでした。

---

---