WordPressサイトで任意のページにログインフォームを設置する方法をご紹介いたします。
また、任意のページにログインフォームを設置したとしても、そのままだとログイン失敗時にログイン画面(wp-login.php)に遷移してしまうので、ログイン画面に遷移するのを防いでその場に留まる方法も併せてご紹介いたします。
今回設置するログインフォームの要件
- 任意のページにログインフォームを表示
- ログインユーザーにのみコンテンツを表示
- ログイン失敗時にログイン画面に遷移しない
- ログイン失敗時はエラーメッセージを表示する
- 通常のログイン画面(wp-login.php)も機能させる
任意の場所にログインフォームを設置する
任意の場所にログインフォームを設置するには、wp_login_form関数を利用します。ログインフォームを設置したい箇所に、以下のようなコードを追加しましょう。
<?php if (is_user_logged_in()) : ?>
※ログインユーザーに表示するコンテンツ
<?php else : ?>
<div class="loginform">
<h2 class="loginform__title">ユーザーログイン</h2>
<div class="loginform__content">
<?php wp_login_form(); ?>
</div>
<?php if (!empty($_GET['login']) && $_GET['login'] === 'failed') : ?>
<p class="loginform__error">ユーザー名もしくはパスワードが間違っています</p>
<?php endif; ?>
</div>
<?php endif; ?>
「wp_login_form()」の部分にログインフォームが表示されます。.loginform__errorの部分は、ログイン失敗時に表示されるエラーメッセージです。
wp_login_form関数にはパラメータも用意されています。詳細については公式ドキュメントをご参照ください。
ログイン失敗時の処理を追加する
上記のままでもユーザーログイン自体は機能しますが、ログイン失敗時の処理を追加していきます。
適用しているテーマのfunctions.phpに以下コードを追加します。コピペでOKです。
function my_authenticate($user, $username, $password) {
if (empty($username) || empty($password)) {
do_action('wp_login_failed', $user);
}
return $user;
}
add_filter('authenticate', 'my_authenticate', 10, 3);
function my_login_failed($username) {
if (!isset($username) || is_wp_error($username) || !isset($password) || is_wp_error($password)) {
if (isset($_REQUEST['redirect_to']) && isset($_SERVER['HTTP_REFERER'])) {
$page = $_SERVER['HTTP_REFERER'];
$failed = '?login=failed';
if (!empty($page) && !preg_match('/wp-admin/', $page) && !preg_match('/wp-login/', $page)) {
if (!preg_match('/login=failed/', $page)) {
$page .= $failed;
}
wp_redirect($page);
exit;
}
}
}
}
add_action('wp_login_failed', 'my_login_failed');
上記を追加することで、ログイン失敗時にログイン画面に遷移せずその場に留まるようになります。
ログイン失敗時は、URLに「?login=failed」というパラメータが追加されます。これにより、ログイン失敗を判別してエラーメッセージを表示しています。ちなみに、「if (!preg_match(‘/login=failed/’, $page))」の部分で、連続してログイン失敗した時にパラメータが多重に追加されるのを防いでいます。
なお、通常のログイン画面(wp-login.php)では、ログイン失敗時に「?login=failed」は追加されません。
番外編:管理画面へのアクセスを制限する
上述した内容でログインフォームの設置は完了なのですが、特定の権限ではログイン画面にアクセスできないようにする方法もご紹介いたします。
ログインしないと閲覧できないページがあるけど管理画面は必要ない、といったケースもあるかと思います。そういったケースでは、権限グループによって管理画面へのアクセスを制限することで実現できます。
以下のコードをfunctions.phpに追加すると、購読者権限のユーザーは管理画面へアクセスしようとしてもトップページにリダイレクトされます。
//購読者は管理画面にアクセス不可
function my_auth_redirect() {
if (current_user_can('subscriber')) {
wp_redirect(home_url());
exit();
}
}
add_action('auth_redirect', 'my_auth_redirect');
current_user_canの部分で指定できる権限グループの種類は以下の通りです。
administrator | 管理者 |
editor | 編集者 |
author | 投稿者 |
contributor | 寄稿者 |
subscriber | 購読者 |
あとがき
任意のページにログインフォームを設置するケースはそんなにないかもしれませんが、上述した方法を覚えておくといざという時に便利です。参考になれば幸いです。