WordPressで、ユーザー向けサイトのオリジナルログイン画面を構築する

WordPressでデフォルトのログイン画面を使わずに、テーマのメインインデックステンプレート（index.php）に、オリジナルデザインのログイン画面を構築しサイトトップとして使用する機会があったのでご紹介します。

仕様意図

• ログインしないと閲覧できないサイトにする必要があった
• ユーザ権限によって、遷移パターンを分ける必要があった
  1.ログイン成功後、通常通り管理画面に遷移
  2.ログイン成功後、サイト内別ページに遷移

今回は上記挙動の基本的なところをご紹介します。

ご紹介する挙動

• サイト全体リダイレクト対象となっており、ログインしないとサイトトップ（ログイン画面）以外閲覧できない
• ログアウト画面と、パスワードを忘れた際にメールアドレスを入力する画面は、デフォルトの画面を流用する

index.php

次のようなHTMLを用意し、お好みで装飾してください。
※ POST先はあくまでもデフォルトの『wp-login.php』になりますので注意が必要

<form class="form-signin form" name="loginform" id="loginform" action="/wp-login.php" method="post">
    <div class="form-group">
        <label for="loginID" class="login-label">ユーザ名</label>
        <input id="loginID" name="log" id="user_login" type="text" placeholder="ID" class="form-control login-input" size="20">
    </div>
    <div class="form-group form-section">
        <label for="password" class="login-label">パスワード</label>
        <input id="password" name="pwd" id="user_pass" type="password" placeholder="PASSWORD" class="form-control login-input" size="20">
    </div>
    <div class="btn-horizon">
        <input type="submit" name="wp-submit" id="wp-submit" class="btn btn-primary btn-lg" value="ログイン">
    </div>
    <p class="text-center"><a href="/wp-login.php?action=lostpassword">PASSWORDを忘れた方はこちらから</a></p>
</form>

functions.php

次のような内容を記述し、お好みで機能追加してください。

<?php
    function loggedin_check() {
        // ログインしていないことを確認
        if ( !is_user_logged_in() ) {
            // REQUEST_URIに『lostpassword』『logout』という文字列が含まれていないか判定
            $dir_name = $_SERVER['REQUEST_URI'];
            if( preg_match( '/lostpassword|logout/', $dir_name) || $_POST['wp-submit'] == 'ログイン' ) {
                return;
            }
            wp_redirect( '/', 301 );
            exit;
        }
    }
    add_filter( 'init', 'loggedin_check' );

    // ログイン失敗したら
    function login_fail() {
        $referrer =$_SERVER['HTTP_REFERER'];
        if ( !empty($referrer) && !preg_match( '/wp-login|wp-admin/', $referrer) ) {
            wp_redirect( '/', 301 );
            exit;
        }
    }
    add_action( 'wp_login_failed', 'login_fail' );

wp_redirect( '/', 301 );

サイトトップ、オリジナルのログイン画面にリダイレクトします。

preg_match( '/lostpassword|logout/', $dir_name)
!preg_match( '/wp-login|wp-admin/', $referrer)

WordPressがもともと用意している
・パスワードを忘れた際にメールアドレスを入力する画面 = lostpassword
・ログアウト画面 = logout
・ログイン画面 = wp-login
・管理画面 = wp-admin
ではないことを調べています。

つまりログインしていない状態で、上記画面以外にアクセスしようとする場合には、
オリジナルのログイン画面にリダイレクトします。これはログインに失敗した場合も同様です。

逆に、上記画面にアクセスした場合はリダイレクト対象にならないので、
通常通り表示されることになります。

※ 今回ご紹介した内容には含んでませんが、以上の処理に加えて
・sessionを使用してログインに失敗した場合は、
　リダイレクト先のログイン画面にエラー文言を描画し、再表示する
・ユーザ権限によって、リダイレクト先を変える
・管理画面にアクセスできるユーザを限定する
など、カスタマイズ可能かと思います。