【wordpress】登録・ログインフォームをプラグインなし・キャプチャありで実装する

【wordpress】登録・ログインフォームをプラグインなし・キャプチャありで実装する

wordpressにデフォルトである会員登録・ログインフォーム(/wp-admin)を一切使わないで、会員登録・ログインフォームを自作しました。プラグインは使わず、尚且つキャプチャもつけました。

ログイン・会員登録機能を実装する

functions.phpにコードを貼り付ける

まずは、会員登録・ログイン機能を作ります。キャプチャは次でつけるのでお待ちを。
下の四つ全てをお使いのテーマのfunctions.phpに追記してください。

ちなみにHTMLのフォームはショートコードで表示する形にしてあります。そうすればログイン時にログインページ・会員登録ページをそれぞれ非表示にできるからです。当サイトは代わりにユーザー名を表示するようにしました。


もしショートコードを使わず直接htmlで貼りたいようでしたら、会員登録・ログインフォーム(下の2、4つめ)の

<<<HTML

から

HTML;

までをカスタムHTMLで貼ってください。

functions.php
/**
  会員登録の処理をまとめた関数
  */
function my_user_signup() {
    $user_name = isset( $_POST['user_name'] ) ? $_POST['user_name'] : '';
    $user_pass = isset( $_POST['user_pass'] ) ? $_POST['user_pass'] : '';
    $user_email = isset( $_POST['user_email'] ) ? $_POST['user_email'] : '';
    $user_cap = isset( $_POST['capcha_code'] ) ? $_POST['capcha_code'] : '';
    //空じゃないかチェック
    if ( empty( $user_name ) || empty( $user_pass ) ) {
        echo 'full blanks';
          exit;
     }
    //すでにユーザー名が使われていないかチェック
    $user_id = username_exists( $user_name );
     if ( $user_id !== false ) {
        echo 'name「'. $user_name .'」is already used';
          exit;
     }
     //すでにメールアドレスが使われていないかチェック
     $user_id = email_exists( $user_email );
     if ( $user_id !== false ) {
          echo 'mailaddress「'. $user_email .'」is already used';
          exit;
     }
     //メールの文字列確認
     if ( ! (preg_match("/^([a-z0-9+_-]+)(.[a-z0-9+_-]+)*@([a-z0-9-]+.)+[a-z]{2,6}$/iD", $user_email)) ) {
          echo 'not good email';
          exit;
     }
    //キャプチャの確認
    include_once $_SERVER['DOCUMENT_ROOT'] . '/securimage/securimage.php';
    $securimage = new Securimage();
    if ($securimage->check($user_cap) == false){
        echo 'not good chapcha';
        exit;
    }
    //問題がなければユーザーを登録する処理を開始
    $userdata = array(
        'user_login' => $user_name, // ログイン名
        'user_pass' => $user_pass, // パスワード
        'user_email' => $user_email, // メールアドレス
    );
    $user_id = wp_insert_user( $userdata );
    // ユーザーの作成に失敗した場合
    if ( is_wp_error( $user_id ) ) {
        echo $user_id -> get_error_code(); // WP_Error() の第一引数
        echo $user_id -> get_error_message(); // WP_Error() の第二引数
        exit;
    }
    //登録完了後、そのままログインさせる( 任意 )
    wp_set_auth_cookie( $user_id, false, is_ssl() );
    //登録完了ページへ
    wp_redirect( 'https://sukiburo.jp/member' );
    exit;
    return;
}
/**
 after_setup_theme に処理をフック
 */
add_action('after_setup_theme', function() {
if ( isset( $_POST['my_submit'] ) && $_POST['my_submit'] === 'signup') {
    // 会員登録フォームからの送信があれば、登録処理を開始
    my_user_signup();
    }
});
functions.php
//registar form
function register() {
    $body = <<
    Agree/ 同意する
    user name mail address password capcha <img id="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image"> Different Image register
    HTML;
    $user = wp_get_current_user();
    if(is_user_logged_in()){
        echo 'Hi, '.$user->display_name;
    } else {
        echo $body;
    }
}
add_shortcode('register', 'register');

軽い説明

会員登録でユーザーid、メールアドレス、パスワードを登録してもらうようにしています。
メールアドレスに関しては変な形式にされると登録されないようなのでバリデーションをつけました。
調べると色々あるようなので自由に変更してください。

ログインではユーザーid、パスワードでログインできます。

また、会員登録・ログインそれぞれキャプチャ認証を付けてあります。

ショートコードを使って導入する

あとはもう簡単です!任意の場所にショートコードで[login][register]を貼り付けるだけです!

  1. 先ほど貼り付けた
    add_shortcode('register', 'register');
    add_shortcode('login', 'login');

    add_shortcode('registers', 'register');
    add_shortcode('logins', 'login');
    と一度変える。
    二つあるうちの前を変えてください。変えれば文字は何でもいいです。
  2. ショートコードで[]の中でlogin, registerをはる。記事、固定ページ保存。
  3. add_shortcode('register', 'register');
    add_shortcode('login', 'login');
    に戻す

とりあえず先にショートコードの文字列を決定して、そのあとにコードの文字を変えればいいみたいです。

キャプチャを実装する

キャプチャは「securimage」を使います。(「secureimage」ではないですよ!!)

securimageはphpで動作する 画像認証ライブラリです。かなり簡単に設定することができます。

「securimage」をダウンロード

ここからダウンロードできます。

人によってやり方は違うかもしれませんが、ダウンロードしたら、wp-adminやwp-content, wp-imcludeがある階層に「securimage」の名前で保存してください。
私はパソコンにzipで保存して、Cyberduckを使ってFTPS経由で保存しました。
もちろん階層、名前は自由ですが、自分が載せたコードでは/securimageでアクセスするようにしています。
なのでそこを変えれば任意の階層、名前でも動きます。

関係する記事

ここでは説明していないことが書いてあります。ぜひ参考にしてください。

ログアウト機能をつけたい

ログアウト機能をつけたウィジェットがあります。参考にしてみてください。

wordpressの会員登録・ログインフォームをプラグインなし・キャプチャありで実装する
wordpressの会員登録・ログインフォームをプラグインなし・キャプチャありで実装する

securimageをカスタマイズしたい

カスタマイズできるところをのせました。

securimageの使い方・カスタマイズ方法
securimageの使い方・カスタマイズ方法

参考サイト

https://wemo.tech/2338
(フォームの大枠を参考にしました。)

https://helog.jp/php/securimage/
(securimageの導入の基本を参考にしました。)

以上です。ご覧いただきありがとうございました。

関連記事

【wordpress】ウィジェットにログインフォームをプラグインなしキャプチャありで設置する

【wordpress】ウィジェットにログインフォームをプラグインなしキャプチャありで設置する

【wordpress】ユーザーのダッシュボードアクセスを制限するプラグイン【Remove Dashboard Access】

【wordpress】ユーザーのダッシュボードアクセスを制限するプラグイン【Remove Dashboard Access】

【wordpress】プラブインなしで管理バーを権限別に表示・非表示にする

【wordpress】プラブインなしで管理バーを権限別に表示・非表示にする

Javascript/Typescript(+react等)開発環境を簡単に構築するスクリプト作った

Javascript/Typescript(+react等)開発環境を簡単に構築するスクリプト作った

【wordpress】ログイン・非ログイン時で表示する内容を変える方法

【wordpress】ログイン・非ログイン時で表示する内容を変える方法

【泣けるほど簡単】投稿内に自分しか見えないメモをプラグインなしで実装する方法

【泣けるほど簡単】投稿内に自分しか見えないメモをプラグインなしで実装する方法

【失敗談アリ】テックアカデミーのAIコースを徹底レビューする

【失敗談アリ】テックアカデミーのAIコースを徹底レビューする