検索キーワードを入力
カテゴリーを選択

WordPressのログイン機能や会員登録・マイページ機能等を自作する方法を徹底解説(プラグインなし)

投稿日:2025年02月15日(土) 更新日:2025年02月21日(金)
WordPressのログイン機能や会員登録・マイページ機能等を自作する方法を徹底解説(プラグインなし)|UMENOKI|すぐに仕事で使えるIT技術情報メディア

みなさんこんにちは!エンジニアの高澤です!

WordPressのログイン機能やマイページ機能などを自作で実装する方法を徹底解説していきたいと思います。

当記事を読んでいただければ、ログイン機能や会員登録・マイページ機能などを自作で実装できるようになります。

自作することができれば、WordPressを使って会員登録サイトを開発する際や、そもそものWordPressのログイン処理やユーザー機能などについて理解することができます。

お仕事などで問題なく使える構成で執筆いたしましたので、よろしければぜひ当記事をご活用いただけましたら幸いです。

ログインページの作り方

独自に自作でログインページの作り方について解説いたします。

WordPressにはデフォルトでログイン機能が備わっていますが、デザインや操作性を独自に実装したい場合、自作のログイン画面を作成することができます。

それでは早速実装していきます。

周りくどい解説は後にして、まずは以下のコードをfunctions.phpにコピー&ペーストしてください。

以下のコードは、ログインフォームで送信ボタンをクリックした時のログイン処理の内容になります。

/**
 * ユーザーログイン処理を行う関数
 */
function my_user_login() {
    // フォームから送信されたユーザー名とパスワードを取得し、サニタイズ処理
    $user_name = isset( $_POST['user_name'] ) ? sanitize_text_field( $_POST['user_name'] ) : '';
    $user_pass = isset( $_POST['user_pass'] ) ? sanitize_text_field( $_POST['user_pass'] ) : '';

    // WordPressのログイン認証処理
    $creds = array(
        'user_login'    => $user_name, // ユーザー名
        'user_password' => $user_pass, // パスワード
    );
    $user = wp_signon( $creds ); // 認証処理を実行

    // ログイン失敗時のエラーハンドリング
    if ( is_wp_error( $user ) ) {
        echo $user->get_error_message(); // エラーメッセージを表示
        exit;
    }

    // ログイン成功時の処理(トップページへリダイレクト)
    wp_redirect( home_url() );
    exit;

    return;
}

/**
 * after_setup_theme にフックしてログイン処理を実行
 */
add_action('after_setup_theme', function() {
    // フォームが送信されたか確認
    if ( isset( $_POST['my_submit'] ) && $_POST['my_submit'] === 'login') {

        // nonceチェック(セキュリティ対策)
        if ( !isset( $_POST['my_nonce_name'] ) ) return; // nonceがセットされていない場合は処理を中止
        if ( !wp_verify_nonce( $_POST['my_nonce_name'], 'my_nonce_action' ) ) return; // nonce検証に失敗した場合も中止

        // ログイン処理を実行
        my_user_login();
    }
});

次に、テーマファイル内にpage-login.phpというファイル名でPHPファイルを作成していただき、page-login.phpに以下のコードをコピー&ペーストしてください。

<?php
/* Template Name: ログインページ */
get_header();
if (is_user_logged_in()) {
    wp_redirect(home_url('/login'));
    exit;
}
?>
<form class="user-login-form" name="user_login_form" id="user_login_form" action="" method="post">
    <div class="user-form-group">
        <label for="user_login_user_name">ユーザー名</label>
        <input id="user_login_user_name" name="user_name" type="text" class="user-form-control" required>
    </div>
    <div class="user-form-group">
        <label for="user_login_password">パスワード</label>
        <input id="user_login_password" name="user_pass" type="password" class="user-form-control" required>
    </div>
    <button type="submit" name="my_submit" class="user-submit-btn" value="login">ログイン</button>
    <p class="user-forgot-pass">
        <a href="/wp-login.php?action=lostpassword">パスワードを忘れた方はこちら</a>
    </p>
    <?php wp_nonce_field( 'my_nonce_action', 'my_nonce_name' ); // nonceフィールド設置 ?>
</form>
<?php get_footer(); ?>

今作成したpage-login.phpをページとして機能させるために、固定ページを作成しましょう。

固定ページ編集画面にて、タイトルを「ログイン」と入力し、画面右側の設定パネルにてリンクを「login」で設定してください。

テンプレートは「ログインページ」が選択できるようになっているはずなので、「ログインページ」を選択してください。

選択したら、固定ページを公開しましょう。

固定ページのログインページを公開したら、WordPress管理画面上のツールバー右側にあるユーザー名をホバーして、「ログアウト」をクリックしてログアウトしてください。

ログアウトできたら、「https://【サイトのドメイン名】/login/」でブラウザからアクセスしてください。

すると、下図のようにログインページが表示されるかと思います。

上図のログインページから、いつもログインしている管理者ログイン情報のユーザー名とパスワードを入力してログインしてみてください。

すると、ログインできて管理画面が表示されるかと思います。(下図は管理者権限が「購読者」の場合の例です)

これでログインページの実装は完了です。お疲れ様でした!

マイページの作り方

独自のマイページを作成する方法を解説します。

マイページでは、ユーザー情報の編集、登録した投稿の一覧表示、注文履歴や特定のサービスへのアクセスといった、個別ユーザー専用の情報を表示することが可能です。

ここでは、ログインユーザーの情報を取得するというシンプルなページ構成で解説します。今回の内容を応用次第で、サイトを訪れるユーザーごとに適した情報を提供するマイページを構築できます。

周りくどい解説は後にして、早速作ってしまいます。

テーマファイル内にpage-mypage.phpというファイル名でPHPファイルを作成していただき、page-mypage.phpに以下のコードをコピー&ペーストしてください。

以下のコードは、マイページを表示した時の内容になります。

<?php
/* Template Name: マイページ */
get_header();
if (!is_user_logged_in()) {
    wp_redirect(home_url('/login'));
    exit;
}
$current_user = wp_get_current_user();
?>
<div class="mypage">
    <h2>ようこそ, <?php echo esc_html($current_user->display_name); ?> さん</h2>
    <p>メールアドレス: <?php echo esc_html($current_user->user_email); ?></p>
    <p><?php echo esc_html($current_user->user_status); ?></p>
    <a href="<?php echo wp_logout_url(home_url('/login')); ?>">ログアウト</a>
</div>
<?php get_footer(); ?>

今作成したpage-mypage.phpをページとして機能させるために、固定ページを作成しましょう。

固定ページ編集画面にて、タイトルを「マイページ」と入力し、画面右側の設定パネルにてリンクを「mypage」で設定してください。

テンプレートは「ログインページ」が選択できるようになっているはずなので、「ログインページ」を選択してください。

選択したら、固定ページを公開しましょう。

公開できたら、「https://【サイトのドメイン名】/mypage/」でブラウザからアクセスしてください。

すると、下図のようにマイページが表示されるかと思います。ご自身のユーザー情報が表示されていたら成功です。

これでマイページの実装は完了です。お疲れ様でした!

会員登録ページの作り方

会員登録ページを自作で実装する方法について解説します。

WordPressには、会員登録ページが標準で搭載されていないため、作り方がわかっていれば会員サイトを作る際に非常に便利です。

周りくどい解説は後にして、早速作ってしまいます。

テーマファイル内にpage-register.phpというファイル名でPHPファイルを作成していただき、page-register.phpに以下のコードをコピー&ペーストしてください。

以下のコードは、会員登録ページで送信ボタンをクリックした時の会員登録処理の内容になります。

<?php
/**
 * ユーザーの会員登録を処理する関数
 */
function my_user_signup() {
    // フォームから送信された値を取得し、サニタイズ処理を実施
    $user_name  = isset( $_POST['user_name'] ) ? sanitize_text_field( $_POST['user_name'] ) : '';
    $user_pass  = isset( $_POST['user_pass'] ) ? sanitize_text_field( $_POST['user_pass'] ) : '';
    $user_email = isset( $_POST['user_email'] ) ? sanitize_text_field( $_POST['user_email'] ) : '';

    // 必須項目が空でないかをチェック
    if ( empty( $user_name ) || empty( $user_pass ) || empty( $user_email ) ) {
        echo '情報が不足しています。';
        exit;
    }

    // ユーザー名が既に存在しているかをチェック
    $user_id = username_exists( $user_name );
    if ( $user_id !== false ) {
        echo 'すでにユーザー名「'. $user_name .'」は登録されています';
        exit;
    }

    // メールアドレスが既に登録されていないかをチェック
    $user_id = email_exists( $user_email );
    if ( $user_id !== false ) {
        echo 'すでにメールアドレス「'. $user_email .'」は登録されています';
        exit;
    }

    // ユーザー情報の配列を作成
    $userdata = array(
        'user_login' => $user_name,       // ユーザー名(ログインID)
        'user_pass'  => $user_pass,       // パスワード
        'user_email' => $user_email,      // メールアドレス
    );

    // WordPressのユーザー登録関数を使用して新規ユーザーを作成
    $user_id = wp_insert_user( $userdata );

    // ユーザーの作成に失敗した場合のエラーハンドリング
    if ( is_wp_error( $user_id ) ) {
        echo 'エラーコード: ' . $user_id->get_error_code(); // エラーコードを表示
        echo 'エラーメッセージ: ' . $user_id->get_error_message(); // エラーメッセージを表示
        exit;
    }

    // ユーザー登録後、そのままログインさせる(オプション機能)
    wp_set_auth_cookie( $user_id, false, is_ssl() );

    // 登録完了後、(トップページへリダイレクト)
    wp_redirect( home_url() );
    exit;
}

/**
 * テーマがセットアップされた際に実行する処理をフック
 */
add_action('after_setup_theme', function() {

    // フォームが送信され、会員登録のリクエストがあるかどうかを確認
    if ( isset( $_POST['my_submit'] ) && $_POST['my_submit'] === 'signup') {

        // nonce(ワンタイムトークン)チェック(CSRF対策)
        if ( !isset( $_POST['my_nonce_name'] ) ) return; // nonceが未設定の場合は処理を終了
        if ( !wp_verify_nonce( $_POST['my_nonce_name'], 'my_nonce_action' ) ) return; // nonceが正しくない場合は処理を終了

        // ユーザー登録処理を実行
        my_user_signup();
    }
});

次に、テーマファイル内にpage-register.phpというファイル名でPHPファイルを作成していただき、page-register.phpに以下のコードをコピー&ペーストしてください。

<?php
/* Template Name: 会員登録ページ */
get_header();
if (is_user_logged_in()) {
    wp_redirect(home_url('/login'));
    exit;
}
?>
<form class="user-signup-form" name="user_signup_form" id="user_signup_form" action="" method="post">
    <div class="form-group">
        <label for="user_signup_name">ユーザー名</label>
        <input id="user_signup_name" name="user_name" type="text" required>
    </div>
    <div class="form-group">
        <label for="user_signup_password">パスワード</label>
        <input id="user_signup_password" name="user_pass" type="password" required>
    </div>
    <div class="form-group">
        <label for="user_signup_email">メールアドレス</label>
        <input id="user_signup_email" name="user_email" type="email" required>
    </div>
    <button type="submit" name="my_submit" class="signup-btn" value="signup">会員登録</button>
    <?php wp_nonce_field( 'my_nonce_action', 'my_nonce_name' ); // CSRF対策のnonceフィールド ?>
</form>
<?php get_footer(); ?>

今作成したpage-register.phpをページとして機能させるために、固定ページを作成しましょう。

固定ページ編集画面にて、タイトルを「会員登録」と入力し、画面右側の設定パネルにてリンクを「register」で設定してください。

テンプレートは「会員登録ページ」が選択できるようになっているはずなので、「ログインページ」を選択してください。

選択したら、固定ページを公開しましょう。

固定ページの会員登録ページを公開したら、WordPress管理画面上のツールバー右側にあるユーザー名をホバーして、「ログアウト」をクリックしてログアウトしてください。

ログアウトできたら、「https://【サイトのドメイン名】/register/」でブラウザからアクセスしてください。

すると、下図のように会員登録ページが表示されるかと思います。

上図の会員登録ページから、適当に「ユーザ名(例:user)」「パスワード(例:pass)」「メールアドレス(例:user@gmail.com)」を入力して、「会員登録」ボタンをクリックしてください。

会員登録後にトップページへリダイレクトされるかと思います。

ログインされた状態で画面上にツールバーが表示されるかと思います。ツールバーのサイト名をクリックして管理画面を確認してください。

すると、管理者権限が「購読者」の状態で閲覧できるのがわかるかと思います。

「購読者」の権限で登録されているのは、先ほどのコードの処理にて「購読者」で登録されるようにしているためです。

もし会員登録時に登録するユーザーの権限を「購読者」以外にしたい場合は、WordPress管理画面左メニュー「設定」の「一般」にある「新規ユーザーのデフォルト権限グループ」にて変更できます。

ちなみに、「管理者」権限以外だとユーザーに関する編集はできないので、ユーザー情報のあれこれを編集するには「管理者」権限が付与されたユーザーでログインし直して編集してください。

ユーザー一覧画面をご確認いただくと、下図のように登録されているのが確認できるかと思います。

これで会員登録ページの実装は完了です。お疲れ様でした!

パスワード変更画面の作り方

WordPressでは、デフォルトでパスワード変更機能が提供されております。

そのため、ログインページや会員登録ページのように0から作ってもいいのですが、工数をかけて作る意味があるのか?というと、筆者的には理由がない限りは、できるだけすでにあるモノをカスタマイズする形で実装するのがベストかと思っております。

そのため、フックを使ってカスタマイズする方法について、以下の記事にて解説いたしましたので、よろしければこちらからご確認いただき、カスタマイズしてみてください。

WordPressユーザーの権限について

WordPressでは、ユーザーに対して特定の権限を割り当てることで、サイトの管理や投稿に関する操作を制御できます。

WordPressにはデフォルトで 6種類のユーザー権限(ロール)が用意されており、それぞれ異なる権限を持っています。

このユーザー権限をユーザーごとに設定することで、ユーザーのできることを制限することができ、サイト運用を安全かつ適切にすることが可能です。

まとめると、WordPressでは以下の6種類のユーザー権限を使い分けることで、 ユーザーごとの操作範囲を制限できます。

  • 管理者 → すべての機能を利用可能
  • 編集者 → 記事とコメントを管理できるが、プラグインやテーマは操作不可
  • 投稿者 → 自分の記事のみ作成・公開可能
  • 寄稿者 → 記事作成はできるが、公開は不可(管理者の承認が必要)
  • 購読者 → 記事の閲覧とプロフィール編集のみ可能
  • 特権管理者 → マルチサイト全体の管理が可能

基本的には「特権管理者」以外の5つの権限を扱うことになるかと思います。マルチサイトでない限りは「特権管理者」は無視していただいて問題ありません。

以下の表は、WordPressの各ユーザー権限がどのような役割を持ち、どの操作が可能かを示したものです。

ユーザー権限記事の作成記事の公開他人の記事編集コメント管理プラグイン管理テーマ変更ユーザー管理
管理者(Administrator)
編集者(Editor)
投稿者(Author)
寄稿者(Contributor)
購読者(Subscriber)
特権管理者(Super Admin)※マルチサイトのみ

また、以下の表はプログラム処理上で必要なデータ名(ロールスラッグ)をまとめたものになります。

ログイン回りのカスタマイズや実装では必ず必要になる場面があるので、ご確認いただくと良いでしょう。

権限(日本語)権限(英語)プログラム上のデータ名(ロールスラッグ)
特権管理者Super Adminsuper_admin
管理者Administratoradministrator
編集者Editoreditor
投稿者Authorauthor
寄稿者Contributorcontributor
購読者Subscribersubscriber

適切な権限設定をすることで、 サイトのセキュリティ向上や管理の効率化につながりますので、ぜひここで理解しておきましょう。

便利な実装コードサンプル

ここではログイン周りの実装に便利な実装コードサンプルをご紹介します。

筆者的に実装でよく使いそうなものを厳選したので、よろしければご活用いただけましたらと思います。

ログイン中のみ表示

以下のコードは、ログイン中のみ表示したいコンテンツがある場合は、こちらのコードが便利です。

使用する場合は、テーマを構成するPHPファイルの表示したい箇所にコピー&ペーストしてください。

<?php if (is_user_logged_in()): ?>
    <p>ログイン中のユーザーにのみ表示されるコンテンツです。</p>
<?php endif; ?>

ログイン中のみ表示(特定の権限で絞り込み)

以下のコードは、ログイン中でかつ特定の権限で絞り込んだ上で表示したいコンテンツがある場合は、こちらのコードが便利です。

使用する場合は、テーマを構成するPHPファイルの表示したい箇所にコピー&ペーストしてください。

<?php if (is_user_logged_in()): 
    $current_user = wp_get_current_user();
    if (in_array('editor', $current_user->roles)): ?>
        <p>編集者(Editor)の権限を持つログインユーザーにのみ表示されるコンテンツです。</p>
    <?php endif; ?>
<?php endif; ?>

ログインしていないユーザーにのみ表示

以下のコードは、ログインしていない場合のみ表示したいコンテンツがある場合は、こちらのコードが便利です。

使用する場合は、テーマを構成するPHPファイルの表示したい箇所にコピー&ペーストしてください。

<?php if (!is_user_logged_in()): ?>
    <p>ログインしていないユーザーにのみ表示されるコンテンツです。</p>
<?php endif; ?>

〇〇さんログイン中の表示

以下のコードは、よくあるログイン中にサイト上で「〇〇さんログイン中」のように表示させたい場合は、こちらのコードが便利です。

使用する場合は、テーマを構成するPHPファイルの表示したい箇所にコピー&ペーストしてください。

<?php if ( is_user_logged_in() ) : ?>
    <?php 
    $current_user = wp_get_current_user();
    ?>
    <ul>
        <li>「<?php echo esc_html( $current_user->user_login ); ?>」ログイン中(ユーザー名)</li>
        <li>「<?php echo esc_html( $current_user->display_name ); ?>」ログイン中(表示名)</li>
        <li>メールアドレス: <?php echo esc_html( $current_user->user_email ); ?></li>
        <li>権限: <?php echo implode(', ', $current_user->roles ); ?></li>
    </ul>
<?php else : ?>
    <p>ログインしていません。</p>
<?php endif; ?>

ショートコードを使った「ログイン中のみ表示」

以下のコードは、ページの本文中でログイン中のみ表示したいコンテンツがある場合は、こちらのコードが便利です。

使用する場合は、functions.phpにコピー&ペーストしてください。

<?php
function logged_in_content_shortcode($atts, $content = null) {
    if (is_user_logged_in()) {
        return '<div class="logged-in-content">' . $content . '</div>';
    }
    return '';
}
add_shortcode('logged_in_only', 'logged_in_content_shortcode');

投稿エディタにて、以下のようにlogged_in_onlyを括弧で囲ったショートコードで、ログイン中のみ表示したいコンテンツを包みます。

[logged_in_only]このコンテンツはログイン中のユーザーのみ表示されます。[/logged_in_only]

ブロックエディタのショートコードブロックで以下のように入力してください。

これで本文中にログイン中のみ表示したいコンテンツを設置することができます。

ユーザーが投稿者(権限)の場合、自分の投稿のみ表示

例えば、会員サイトを作って登録したユーザーが管理画面へログインでき、記事を投稿できるというサイトを想定した場合、そのユーザーが投稿一覧を開いたときに、他のユーザーの記事が閲覧できてしまいます。

そういった場面を想定して、他のユーザーの投稿を見れなくして、自分の投稿記事のみ一覧で表示されるようにできると便利ですよね?

以下のコードがそれを実現してくれます。

使用する場合は、functions.phpにコピー&ペーストしてください。

<?php
function restrict_posts_to_own($query) {
    // 管理画面かつ投稿一覧ページの場合に適用
    if (is_admin() && $query->is_main_query() && $query->get('post_type') === 'post') {
        // 現在のユーザー情報を取得
        $current_user = wp_get_current_user();

        // ユーザーが寄稿者(Contributor)の場合、自分の投稿のみ表示
        if (in_array('author', $current_user->roles)) { // 「author」を変更すれば他のユーザーロールも指定可能
            $query->set('author', $current_user->ID);
        }
    }
}
add_action('pre_get_posts', 'restrict_posts_to_own');

ペーストできたら、投稿一覧をご確認ください。

もともと下図のように記事が表示されているのが…

下図のように、他のユーザーの記事は表示されなくできました。

WordPressで購読者がダッシュボードにアクセスできないようにする

会員サイトをイメージした場合、一般ユーザーもWordPress管理画面にアクセスできるようになってしまうとセキュリティ面で困ることがあります。

下手したらサイト管理者によって運用されている投稿ページの内容やサイトの設定などを勝手に改ざんされてしまう可能性があります。

そんな時に便利なのが、WordPressで購読者がダッシュボードにアクセスできないようにする実装です。

以下の記事で詳しく解説しておりますので、よろしければご確認ください。

便利なコード集は以上になりますが、どれも実際のお仕事などで活躍できるものかと思いますので、ぜひご活用ください!

まとめ

本記事では、WordPressのログイン機能や会員登録、マイページ機能を自作する方法について詳しく解説しました。

自作することで、会員サイトの開発やWordPressのユーザー管理機能への理解が深まり、より柔軟なカスタマイズが可能になります。

今回紹介した内容を活用すれば、実際の制作現場でも応用できる構成で実装できますので、ぜひご活用ください。

執筆者

UMENOKI編集部 高澤 翔汰

歴5年目(2024年8月以降から5年目です)のエンジニアです!
CMSでのサイト構築とWebデザイン制作を兼任して5年目になります。
自作のiOSアプリ(iPhoneアプリ)やWordPressプラグインを開発することもあり、まだまだ現在進行形で勉強中です!

お気軽に皆さんのご要望をお聞かせください!

どんなに些細なことでも構いません!よろしければ記事や当サイトへの「こんな記事があったら仕事とかで役に立つな〜」や「こうだったらもっと役に立つのに!」といったようなご要望等をお気軽にお聞かせください!今後のサービス改善にお役立てさせていただきます!

例1)Reactの技術記事を書いてほしい!
例2)WordPressの使い方とかを初心者向けに解説してほしい!...など

送信と同時にプライバシーポリシーに同意したものとします。