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

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

関連記事

DokuWiki

DokuWiki のプラグイン開発に関する情報

DokuWiki をなるべくスマートにカスタマイズしようとすると(設定変更以上のことをやりたい場合です)、テンプレートかプラグインを自作せざるを得ません。他の方法があまり用意されていないためです。 テ …

Web

rel=”preload” によってリソースを先読みさせる

目次1. rel=”preload” について読み込みは非同期に実行され、レンダリングをブロックしない通常の読み込み処理の記述が別に必要2. デモページ3. その他の特徴as …

DokuWiki

DokuWiki の Tips

DokuWiki の設定やカスタマイズなどの細かい Tips をここにまとめておきます。 目次きれいな URL にするデザインを変えるファビコンを変更する(ファイル名や拡張子を変更する場合)外部リンク …

Web

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

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

Chrome

Chrome で複数のユーザーを使い分ける方法

目次1. Chrome のユーザー(プロフィール)について2. ユーザー(プロフィールお)毎に管理できるもの3. ユーザーのデータ(プロフィール)がある場所4. ユーザーの管理ユーザー管理ユーザー名と …