WordPressで自作のログイン・ログアウト画面を設置する

WordPressで自作のログイン・ログアウト画面を設置する方法です。

CMSとして人気のWordPressですが、クライアントに対して管理画面のインターフェースはあまり使い勝手の評判がよくありません。使いやすいようにカスタマイズしてくれといった注文もしばしばありますが、その中でも、今回はログイン・ログアウト画面について考えてみます。

オリジナルのログイン画面を設置する

オリジナルのログイン画面について、まず、ログイン処理のしくみですが、単純にPOSTリクエストでログインを実行するだけです。

具体的にはユーザ名を「log」にセットして、パスワードを「pwd」にセットして、「wp-login.php」に対してPOSTでリクエストを送信すればログイン処理が行われます。
送信先のURLは関数「wp_login_url」で取得することができます。また、引数にリダイレクト先を設定すれば、ログイン成功後に表示する画面のURLを指定することができます。

これらをまとめて、最低限ログイン画面に必要な要素を設置すると、以下のようなソースになります。
ログイン後は「/login/」ページを表示する設定です。

<form method="post" action="<?php echo wp_login_url('/login/') ?>">
<label for="log">ユーザ名</label>
<input type="text" name="log" id="log">
<label for="pwd">パスワード</label>
<input type="password" name="pwd" id="pwd">
<button type="submit">ログイン</button>
</form>

ちなみに、パスワードなどに誤りがあり、ログインに失敗した場合のリダイレクト先は、WordPressデフォルトのログイン画面「wp-login.php」となっています。
このままではせっかく用意した自作のログイン画面の効果が薄くなってしまうので、以下のようにしてフックでリダイレクト先を変更します。

add_action('wp_login_failed', 'my_login_failed');
function my_login_failed(){
	wp_redirect('/login/?login=failed');
	exit;
}

こちらは「functions.php」に追記しましょう。
「?login=failed」を受け取ることで、ログイン失敗の旨をメッセージで表示することができますね。

オリジナルのログアウト画面を設置する

次にログアウト処理ですが、基本的には「wp-login.php?action=logout」にアクセスするだけでログアウト処理が実行されるので、リンクを設置したログアウトボタンなどを設置するだけでよいでしょう。

こちらもログイン関数と同様に、ログアウトURLは関数「wp_logout_url」で取得可能で、引数でリダイレクト先を指定します。

例えば、ログアウト処理後は「ログアウトしました」などの静的なページ「/logout/」を表示させる想定で、以下のようにログアウトボタンを設置することができます。

<a href="<?php echo wp_logout_url('/logout/') ?>">ログアウト</a>

その他に、関数「is_user_logged_in」を利用すれば、ログイン状態を判定することもできますし、ログイン中のユーザ情報などの取得も可能なので、これらのしくみを活用すれば、よりクライアントのニーズに近い管理画面がオリジナルで構築できそうです。