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

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

関連記事

Chrome

Chrome: ツールバー上の拡張機能アイコンをメニューに移動させる方法

Chromeで、ツールバー上の拡張機能アイコンをメニューに移動させる方法について説明します。

Web

Cookie使用の同意を求めるポップアップを表示する (Cookie Consent by Osano)

Cookie Consent by Osano の使い方について説明します。

Chrome

ブロックされた Cookie を確認する方法 (Chrome の場合)

Chrome ブラウザにおいて、ブロックされた Cookie を確認する方法について説明します。

Chrome

Chrome の「ピクチャー イン ピクチャー」機能を使って、YouTube の動画を最前面で再生する

目次1. Chrome の「ピクチャー イン ピクチャー」機能2. ピクチャー イン ピクチャーを行う方法3. プレイヤーの操作など3. おわりに 1. Chrome の「ピクチャー イン ピクチャー …

Web

WordPressの記事ページ (それ以外でも多分OK) に、Google Charts を使って生成したグラフを表示する方法

目次1. はじめに2. やりたいこと3. やり方(1) Google Charts の JavaScript ファイルを読み込ませる(2) グラフを表示させたい箇所に div タグを記述する(3) グ …