Web

「Build a Custom WordPress User Flow」を試してみました

投稿日:2017年12月19日 更新日:

1. はじめに

WordPress のログインページ周りを独自に実装する方法が説明されている

という記事を試してみましたので、やっていることを簡単にまとめておきます。

ソースコード

2. 全体

  • 1つのプラグインとして機能を実装しています。
  • 主に、wp-login.php でやっていることを、フックを使って独自に実装しています。
  • wp-includes/user.php でやっている処理も一部取り入れています。

3. Part 1: Replace the Login Page

Build a Custom WordPress User Flow — Part 1: Replace the Login Page

使用している関数

  • register_activation_hook()
    • このプラグインを有効にした時に、固定ページをいくつか追加しています。
  • wp_insert_post()
    • 固定ページを追加する関数です。
  • add_shortcode()
    • 追加した固定ページの本文に記述しているショートコードタグ用のフックを追加しています。
  • wp_login_form()
    • ログインフォームを表示するのに使用しています。

アクション

  • add_action( 'login_form_login', array( $this, 'redirect_to_custom_login' ) );
    • ログインページにアクセス時に、wp-login.php ではなく独自追加したページに遷移するため。
  • add_action( 'wp_logout', array( $this, 'redirect_after_logout' ) );
    • ログアウト時に、独自追加したページに遷移するため。

フィルタ

  • add_filter( 'authenticate', array( $this, 'maybe_redirect_at_authenticate' ), 101, 3 );
    • エラー発生時に、遷移するURLを独自追加したページにするため。
  • add_filter( 'login_redirect', array( $this, 'redirect_after_login' ), 10, 3 );
    • ログイン直後、条件によっては独自追加したページに遷移するため。

4. Part 2: New User Registration

Build a Custom WordPress User Flow — Part 2: New User Registration

使用している関数

  • add_shortcode( 'custom-register-form', array( $this, 'render_register_form' ) );
    • カスタム登録フォームページのショートコードタグ用フックを追加しています。

アクション

  • add_action( 'login_form_register', array( $this, 'redirect_to_custom_register' ) );
    • 登録ページアクセス時に、独自のページに遷移させるため。
  • add_action( 'login_form_register', array( $this, 'do_register_user' ) );
    • 登録フォームのsubmit時に、ユーザーを登録する。
    • その後、条件によっては独自追加ページに遷移させるため。
  • add_action( 'wp_print_footer_scripts', array( $this, 'add_captcha_js_to_footer' ) );
    • ReCaptchaのJavaScriptファイルを読み込ませるため。

フィルタ

  • add_filter( 'admin_init' , array( $this, 'register_settings_fields' ) );
    • General設定画面にキーなどのフィールドを追加するため。

5. Part 3: Password Reset

Build a Custom WordPress User Flow — Part 3: Password Reset

使用している関数

  • add_shortcode( 'custom-password-lost-form', array( $this, 'render_password_lost_form' ) );
    • パスワードを忘れた時のページを独自に描画する。(Emailアドレスを入力して貰うページ)
  • add_shortcode( 'custom-password-reset-form', array( $this, 'render_password_reset_form' ) );
    • 独自のパスワードリセットページを描画するため。

アクション

  • add_action( 'login_form_lostpassword', array( $this, 'redirect_to_custom_lostpassword' ) );
    • パスワードを忘れた時のページにアクセスした時に、独自追加ページに遷移させるため。
  • add_action( 'login_form_lostpassword', array( $this, 'do_password_lost' ) );
    • パスワードを忘れた時のページに、Emailアドレスを入力して submitした時に、条件によっては独自追加ページに遷移させるため。
  • add_action( 'login_form_rp', array( $this, 'redirect_to_custom_password_reset' ) );
    • Email本文内のURLにアクセスしてきた時に、独自追加のページに遷移させるため。
  • add_action( 'login_form_resetpass', array( $this, 'redirect_to_custom_password_reset' ) );
    • 同上
  • “add_action( ‘login_form_rp’, array( $this, ‘do_password_reset’ ) );`
    • パスワードリセットページから submit された時の処理
    • 条件によっては、独自追加ページに遷移させる。
  • add_action( 'login_form_resetpass', array( $this, 'do_password_reset' ) );
    • 同上

フィルタ

  • add_filter( 'retrieve_password_message', array( $this, 'replace_retrieve_password_message' ), 10, 4 );
    • パスワードリセット通知メールの本文を書き換えるため。

📂-Web
-

執筆者:labo


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

Web

HTTP/3での接続を強制的に止める方法 (Chrome)

HTTP/3での接続を強制的に止める方法 (Chrome)を紹介します。

Web

Uptime Robot を使ってウェブサイトの死活監視を行う

Uptime Robot というウェブサイトの死活監視サービスの使い方を説明します。

Web

Flexbox を使ってページ全体を中央寄せにする

目次1. はじめに2. やり方3. デモページ4. おわりに参考 1. はじめに CSS(スタイルシート) の Flexbox を使って ウェブページ全体を中央寄せにする例を紹介します。 2. やり方 …

Google App Engine

GAE (PHP 7) で Cloud Firestore を使う手順

Google App Engine で Firestore を使う手順について説明します。

Web

未ログイン状態で Facebook を開いた時に表示されるログインウィンドウを消す

目次1. Facebook の仕様変更?2. ブックマークレットの使い方3. 仕組み4. 注意点5. おわりに 1. Facebook の仕様変更? 未ログイン状態で Facebook のページを開く …