スタッフブログ


Theme my login-3つのちょこっとカスタマイズ

Theme my login-3つのちょこっとカスタマイズ

夏になるとよく「海行った?」と聞かれます。
いいえ、行っていません。これは通勤焼けです。
夏も冬も自転車通勤のウェブクリエイター中井です。

ユーザー登録、ログインページをフロント側に表示できるTheme my login

会員制サイトを制作する際にTheme my loginというプラグインをよく使用しています。
使い方は簡単、WordPressの管理画面からTheme my loginを検索してインストールするだけです。

 

ただそのままの状態だと痒いところに手が届かないというか、
日本語環境でも違和感なく使えるような、3つのちょっとしたカスタマイズを紹介します。

カスタマイズの環境

カスタマイズは下記の環境で行なっています。

  • WordPress バージョン 5.2.2–ja
  • Theme my login バージョン 7.0.14
  • 使用テーマ:Twenty Nineteen

カスタマイズ内容

主にご紹介するのは下記の3点です。

  • アクション名の変更
  • フォームへのコンテンツ追加
  • フィールドの追加

※Theme my loginのドキュメントページを参考にしています。

アクション名の変更

Theme my loginのアクション名の変更

p>Theme my loginをインストールすると下記のページが使用できるようになります。
各スラッグは任意のものに変更できるようです。

 

各スラッグは任意のものに変更できます

 

  • ログイン
  • ログアウト
  • 登録
  • パスワード紛失
  • パスワードをリセット

 

この中で登録やパスワード紛失は会員登録、パスワード再設定ののような わかりやすい表現に変更してみます。

function.phpなどに下記のコードを記載します。 コードの追加はCode Snippetsなどのプラグインを使用しても良いでしょう。

 

参考ページはこちら
Changing Action Titles


<?php

/***
 *
 * Theme my login アクション名の変更
 *
 * @param string $action
 * @param object $action_obj
 *
 */
add_action( 'tml_registered_action', 'modify_tml_actions', 10, 2 );
function modify_tml_actions( $action, $action_obj ) {
    if ( 'register' === $action ) {
        $action_obj->set_title( '会員登録' );
        $action_obj->show_on_forms = true;
    } elseif( 'lostpassword' === $action ) {
        $action_obj->set_title( 'パスワード再設定' );
        $action_obj->show_on_forms = true;
    }
}

?>

tml_registered_actionというフックを利用します。
$actionに初期設定されているアクション名(登録ページであればregisterなど)が設定されているので、 変更したいアクション名の場合任意のタイトル名に変更するようにします。

それぞれのページでタイトルが変更されていることが確認できます。

 

会員登録 パスワード再設定

フォームへのコンテンツ追加

登録やログインページはフォームが表示されているだけで、ちょっぴり寂しいです。
Theme my loginにはフォームの前後にコンテンツが追加できるような仕組みも用意されています。

試しにログインページにコンテンツを追加してみます。

 

参考ページはこちら
Adding Content to Forms


<?php

/***
 *
 * Theme my login フォームにコンテンツを追加
 *
 */
add_action( 'init', 'modify_tml_forms' );

function modify_tml_forms() {

    if( $login_form = tml_get_form( 'login' ) ) {

        $login_form->render_args['before'] = '<p style="color:red;border:1px solid red;padding: 10px;">下記フォームよりログインしてください</p>';

        $login_form->render_args['after'] = '<p style="color:red;border:1px solid red;padding: 10px;">※注意事項</p>';

    }

}

?>

 

※わかりやすいようにスタイルをつけています。

タイトルの下部と、フォームリンクの下部にコンテンツが追加されたことが確認できます。

 

タイトルの下部と、フォームリンクの下部にコンテンツが追加されました

フィールドの追加

続いて、会員登録ページです。
Theme my loginをインストールしたばかりだと、シンプルな画面構成です。

 

シンプルな画面構成

 

ここでよくある、メールアドレスとパスワードを入力して登録できる画面にしてみます。

 

メールアドレスとパスワード

 

Registration TypeをEmail onlyにして、 Passwordsにチェックを入れます。

 

設定完了

 

これだけではまだ寂しいので、見出しとお名前という項目を足してみます。

参考ページはこちら
Adding Extra Registration Fields

 

<?php
/***
 *
 * フィールドの追加
 *
 */
add_action( 'init', 'add_tml_register_fields' );

function add_tml_register_fields() {

    // 見出し
    tml_add_form_field( 'register', 'register_section_header1', array(
        'type' => 'custom',
        'content' => '<h2 class="entry-title">お客様情報</h2>',
        'priority' => 20,
    ) );

    // お名前
    tml_add_form_field( 'register', 'customer_name', array(
        'type'     => 'text',
        'label'    => 'お名前',
        'value'    => tml_get_request_value( 'customer_name', 'post' ),
        'id'       => 'customer_name',
        'priority' => 25,
    ) );

}

/***
 *
 * エラーメッセージ
 *
 */
add_filter( 'registration_errors', 'validate_tml_registration_form_fields' );

function validate_tml_registration_form_fields( $errors ) {

    if ( empty( $_POST['customer_name'] ) ) {
        $errors->add( 'empty_customer_name', '<strong>エラー</strong>: お名前を入力してください。' );
    }

    return $errors;

}

/***
 *
 * ユーザー情報の保存
 *
 */
add_action( 'user_register', 'save_tml_registration_form_fields' );

function save_tml_registration_form_fields( $user_id ) {

    $set_keys = array(
        'customer_name',
    );

    foreach( $set_keys as $key ) {
        $$key = filter_input( INPUT_POST, $key, FILTER_SANITIZE_SPECIAL_CHARS );

        if ( ! empty( $$key ) ) {
            update_user_meta( $user_id, $key, $$key );
        } else {
            update_user_meta( $user_id, $key, '' );
        }
    }

}

?>

 

項目の追加、エラーメッセージの表示、値の保存までできるようになりました。
テキストエリアやラジオボタンも登録できるようです。

 

お名前項目の追加

 

次回(?)予告!

ここまでできると他にも色々試したくなってきました。
次回は、複数チェックボックスを作ったり、プロフィールページの追加なんかもしてみたいと思います。

この記事を書いたのは…

 
Webクリエイター 中井 誠也

Webクリエイター

中井 誠也

Seiya Nakai

詳しく知りたい!