WordPressでカスタムのユーザー登録、ログイン、ログアウト機能を実装する方法を解説します。今回は、固定ページテンプレートを作成し、フォームを使ってユーザー登録やログインを行う方法を紹介します。
1. ユーザー登録機能の実装
まず、ユーザーがサイト上で登録できるように、ユーザー登録ページのテンプレートを作成します。
1.1 ユーザー登録用テンプレートの作成
以下のコードを register.php という名前で theme フォルダ内に保存し、固定ページテンプレートとして使用します。
<?php
/**
* Template Name: ユーザー登録
*/
get_header();
?>
<div class="registration-form">
<h2>ユーザー登録</h2>
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST' && !empty($_POST['action']) && $_POST['action'] === 'register_user') {
$username = sanitize_user($_POST['username']);
$email = sanitize_email($_POST['email']);
$password = $_POST['password'];
$confirm_password = $_POST['confirm_password'];
$errors = array();
if (empty($username) || empty($email) || empty($password) || empty($confirm_password)) {
$errors[] = 'すべてのフィールドを入力してください。';
}
if ($password !== $confirm_password) {
$errors[] = 'パスワードが一致しません。';
}
if (!is_email($email)) {
$errors[] = '有効なメールアドレスを入力してください。';
}
if (username_exists($username)) {
$errors[] = 'このユーザー名は既に使用されています。';
}
if (email_exists($email)) {
$errors[] = 'このメールアドレスは既に使用されています。';
}
if (empty($errors)) {
$user_id = wp_create_user($username, $password, $email);
if (!is_wp_error($user_id)) {
echo '<p style="color:green;">ユーザー登録に成功しました。</p>';
} else {
$errors[] = 'ユーザー登録に失敗しました。';
}
}
if (!empty($errors)) {
foreach ($errors as $error) {
echo '<p style="color:red;">' . esc_html($error) . '</p>';
}
}
}
?>
<form method="post">
<p>
<label for="username">ユーザー名</label><br>
<input type="text" name="username" id="username" required>
</p>
<p>
<label for="email">メールアドレス</label><br>
<input type="email" name="email" id="email" required>
</p>
<p>
<label for="password">パスワード</label><br>
<input type="password" name="password" id="password" required>
</p>
<p>
<label for="confirm_password">パスワード確認</label><br>
<input type="password" name="confirm_password" id="confirm_password" required>
</p>
<input type="hidden" name="action" value="register_user">
<p>
<input type="submit" value="登録">
</p>
</form>
</div>
<?php
get_footer();
2. ログイン機能の実装
次に、ユーザーがログインできるページを作成します。
2.1 ログイン用テンプレートの作成
login.php という名前で、以下のコードを theme フォルダ内に保存します。
<?php
/**
* Template Name: ユーザーログイン
*/
get_header();
?>
<div class="login-container">
<?php
if (is_user_logged_in()) {
$user = wp_get_current_user();
?>
<h2>ようこそ, <?php echo esc_html($user->display_name); ?> さん</h2>
<form method="post">
<input type="hidden" name="action" value="logout">
<button type="submit" class='btn'>ログアウト</button>
</form>
<?php
} else {
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'login') {
$username = sanitize_user($_POST['username']);
$password = $_POST['password'];
$remember = isset($_POST['remember']);
$user = wp_signon(array(
'user_login' => $username,
'user_password' => $password,
'remember' => $remember,
), false);
if (is_wp_error($user)) {
echo '<p style="color:red;">ログインに失敗しました。ユーザー名またはパスワードが間違っています。</p>';
} else {
wp_redirect(get_permalink());
exit;
}
}
?>
<h2>ログイン</h2>
<form method="post">
<p>
<label for="username">ユーザー名</label><br>
<input type="text" name="username" id="username" required>
</p>
<p>
<label for="password">パスワード</label><br>
<input type="password" name="password" id="password" required>
</p>
<input type="hidden" name="action" value="login">
<p>
<input type="submit" value="ログイン">
</p>
</form>
<?php } ?>
</div>
<?php get_footer(); ?>
3. ログアウト機能の実装
以下のコードを functions.php に追加し、ログアウト処理を実装します。
function handle_user_logout() {
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'logout') {
wp_logout();
wp_redirect(home_url('/login/'));
exit;
}
}
add_action('init', 'handle_user_logout');
4. メニューにログイン・ログアウトを追加
ナビゲーションメニューにログイン・ログアウトのリンクを追加するには、functions.php に以下を追加します。
function add_login_logout_menu($items, $args) {
if (is_user_logged_in()) {
$items .= '<li><a href="' . esc_url(home_url('/login/')) . '">マイページ</a></li>';
$items .= '<li><a href="' . wp_logout_url(home_url()) . '">ログアウト</a></li>';
} else {
$items .= '<li><a href="' . esc_url(home_url('/login/')) . '">ログイン</a></li>';
}
return $items;
}
add_filter('wp_nav_menu_items', 'add_login_logout_menu', 10, 2);
これで、WordPressにユーザー登録・ログイン・ログアウト機能を実装できます！
