WEB制作、マーケティングに関する情報をお届けします。

少し制作のハードルが高い会員サイト。
ワードプレスの既存のロールである購読者機能を使用すれば比較的簡単に制作可能です。
今回はユーザーに任意で会員登録をしてもらうための機能の実装方法を解説します。

ワードプレスの管理画面での作業

固定ページを新規で作成します。
以下で会員登録ページを作成します。

• ページタイトル：会員登録(任意)
• スラッグ(パーマリング)：join

会員登録完了時の遷移先のサンクスページを作成します。

• ページタイトル：会員登録が完了しました。(任意)
• スラッグ(パーマリング)：thankyou

コードを紹介

ファイル名、page-join.phpでテンプレートを作成します。

page-join.phpへの記載内容

<?php get_header() ?>
<div class="content_wrap">
    <form method="post">
        <?php if ( isset($_SESSION['error_message']) ) : ?>
            <div class="error-message"><?php echo esc_html( $_SESSION['error_message'] ); ?></div>
        <?php endif; ?>
        
        <label for="nickname">お名前:</label>
        <input type="text" name="nickname" value="<?php echo isset( $_SESSION['form_data']['nickname'] ) ? esc_attr( $_SESSION['form_data']['nickname'] ) : ''; ?>" required>
        
        <label for="gender">性別:</label>
        <select name="gender" required>
            <option value="male" <?php echo ( isset($_SESSION['form_data']['gender']) && $_SESSION['form_data']['gender'] === 'male' ) ? 'selected' : ''; ?>>男性</option>
            <option value="female" <?php echo ( isset($_SESSION['form_data']['gender']) && $_SESSION['form_data']['gender'] === 'female' ) ? 'selected' : ''; ?>>女性</option>
        </select>
        
        <label for="birthday">生年月日:</label>
        <input type="text" name="birthday" value="<?php echo isset( $_SESSION['form_data']['birthday'] ) ? esc_attr( $_SESSION['form_data']['birthday'] ) : ''; ?>" required placeholder="YYYY-MM-DD">
        
        <label for="postcode">郵便番号:</label>
        <input type="text" name="postcode" value="<?php echo isset( $_SESSION['form_data']['postcode'] ) ? esc_attr( $_SESSION['form_data']['postcode'] ) : ''; ?>" required>
        
        <label for="address">住所:</label>
        <input type="text" name="address" value="<?php echo isset( $_SESSION['form_data']['address'] ) ? esc_attr( $_SESSION['form_data']['address'] ) : ''; ?>" required>
        
        <label for="email">メールアドレス:</label>
        <input type="email" name="email" value="<?php echo isset( $_SESSION['form_data']['email'] ) ? esc_attr( $_SESSION['form_data']['email'] ) : ''; ?>" required>
        
        <label for="phone">電話番号:</label>
        <input type="tel" name="phone" value="<?php echo isset( $_SESSION['form_data']['phone'] ) ? esc_attr( $_SESSION['form_data']['phone'] ) : ''; ?>" required>
        
        <label for="password">パスワード（8文字以上の半角英数字）:</label>
        <input type="password" name="password" required pattern=".{8,}" title="8文字以上の半角英数字を入力してください。">
        
        <input type="hidden" name="register_nonce" value="<?php echo wp_create_nonce('register_user'); ?>">
        <button type="submit">会員登録</button>
    </form>
</div>
<?php get_footer() ?>

page-thankyou.phpへの記載内容

<?php
/* Template Name: Join */
get_header();
?>
登録を受け付けました。
<?php get_footer(); ?>

functions.phpへの記載内容

function custom_register_form() {
    if ( isset( $_POST['register_nonce'] ) && wp_verify_nonce( $_POST['register_nonce'], 'register_user' ) ) {
        $_SESSION['form_data'] = $_POST;

        $nickname = sanitize_text_field( $_POST['nickname'] );
        $user_login = sanitize_user( $nickname, true );

        if ( empty( $user_login ) ) {
            $_SESSION['error_message'] = '無効なニックネームです。半角英数字で入力してください。';
            wp_redirect( home_url( '/join/' ) );
            exit;
        }

        $user_data = array(
            'user_login'    => $user_login,
            'user_pass'     => $_POST['password'],
            'user_email'    => sanitize_email( $_POST['email'] ),
            'role'          => 'subscriber',
        );

        $user_id = wp_insert_user( $user_data );

        if ( is_wp_error( $user_id ) ) {
            $_SESSION['error_message'] = $user_id->get_error_message();
            wp_redirect( home_url( '/join/' ) );
            exit;
        } else {
            unset($_SESSION['form_data']);
            unset($_SESSION['error_message']);
            wp_redirect( home_url( '/thank-you/' ) );
            exit;
        }
    }
}
add_action( 'template_redirect', 'custom_register_form' );

コードを解説

page-join.php

HTMLタグなどの細かい説明は省きます。
以下では会員登録時にエラーが出た際に表示するコードを設置しています。

<?php if ( isset($_SESSION['error_message']) ) : ?>
    <div class="error-message"><?php echo esc_html( $_SESSION['error_message'] ); ?></div>
<?php endif; ?>

これはfunctions.phpにis_wp_error()という関数を書いており、この関数では会員登録失敗時にエラーのオブジェクトが返ってきます。
そのほかのinput、selectタグなどじゃ入力値をそれぞれセッションに入れています。
また、以下のinputタグは隠し要素とし『wp_create_nonce(‘register_user’)』でCSRF対策の一つであるトークンをvalueに挿入しています。

<input type="hidden" name="register_nonce" value="<?php echo wp_create_nonce('register_user'); ?>">

functions.php

以下で会員登録の関数を作成します。

function custom_register_form() {}

入力フォームの隠しフィールドのregister_nonceにトークンを設定していますので値があるかどうかを確認します。

if ( isset( $_POST['register_nonce'] ) && wp_verify_nonce( $_POST['register_nonce'], 'register_user' ) ) {}

以下で入力値をセッションに保存します。

$_SESSION['form_data'] = $_POST;

以下はUTF-8の文字エンコードで使用できない文字やHTML要素の記述を取り除いています。

$nickname = sanitize_text_field( $_POST['nickname'] );
$user_login = sanitize_user( $nickname, true );

$user_loginが空の場合エラーメッセージを表示してリダイレクトさせます。

if ( empty( $user_login ) ) {
    $_SESSION['error_message'] = '無効なニックネームです。半角英数字で入力してください。';
    wp_redirect( home_url( '/join/' ) );
    exit;
}

配列にユーザー登録に必要なデータを挿入します。

$user_data = array(
    'user_login'    => $user_login,
    'user_pass'     => $_POST['password'],
    'user_email'    => sanitize_email( $_POST['email'] ),
    'role'          => 'subscriber',
);

ユーザーデータを挿入します。
登録できた場合はユーザーIDが挿入され、登録・更新できなかった場合は、エラー内容であるWP_Errorオブジェクトを返されます。

$user_id = wp_insert_user( $user_data );

is_wp_error($user_id)でもしエラーがあった場合はエラーメッセージを返したうえで会員登録ページにリダイレクトさせます。
正常に登録が完了したらthankyouにリダイレクトし完了させます。

if ( is_wp_error( $user_id ) ) {
    $_SESSION['error_message'] = $user_id->get_error_message(); // WP_Errorのメッセージを表示
    wp_redirect( home_url( '/join/' ) );
    exit;
} else {
    // メール送信処理（省略）
    
    // 正常に登録が完了したらセッションをクリア
    unset($_SESSION['form_data']);
    unset($_SESSION['error_message']);
    wp_redirect( home_url( '/thankyou/' ) );
    exit;
}

最後に呼び出し用のフックを追加します。

add_action( 'template_redirect', 'custom_register_form' );

まとめ

以上、『ワードプレスでプラグインを使用せずに会員登録機能を実装する方法』でした。