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

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

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

Chrome

Google Chrome 68 で、HTTPS非対応のマークが変わりました

目次1. Chrome 68 がリリース2. 以前のマーク3. Chrome 68 以降のマーク4. ついでに、https にしてアクセスしてみる5. おわりに 1. Chrome 68 がリリース …

Web

テンプレートを使って無料でペラサイトが作成できる Strikingly

本ページでは、Strikingly というサービスを紹介します。 主に取り上げているのは 無料プラン です。 目次1. Strikingly とは?2. ウェブページの作成テンプレートを選ぶ雛形として …

Web

【HTML】img 要素の srcset 属性 と sizes 属性について

目次1. デバイスピクセル比2. img 要素の srcset 属性 と sizes 属性3. sizes 属性4. srcset 属性x 単位で画像ファイルのサイズを指定する場合w 単位で画像ファイ …

WordPress

【WordPress】JP Markdownプラグインが code タグの属性を削除する問題への対応方法

目次1. 現象2. 原因3. 対応方法 1. 現象 WordPress の JP Markdown プラグインを使っていると、以下のような (<pre> タグを伴わない単独の) <c …