woocommerceの新規登録ページにあるパスワード強度を表示させるJSは、パスワードが弱いのにボタンが押せてしまったり、なにかと使い勝手が悪いので自前のパスワードチェックにする方法です。

デフォルトのパスワードチェックを無効化

いつもどおり、functions.phpに記述してデフォルトのパスワードチェックを無効化します。

//* デフォルトのパスワードチェックを無効化 *//

 function remove_password_strength() {
wp_dequeue_script( 'wc-password-strength-meter' );
}
 add_action( 'wp_print_scripts', 'iconic_remove_password_strength', 10 );

新規登録ページなどにJSとCSSを追加

まずはJS。

//パスワード強度チェック - 日本
$(function() {
    $('#reg_password').on('keyup', function() {
        // パスワードの入力値を取得     
        const value = $(this).val();
        // 入力値から強度を確認して結果を取得
        const result = checkStrength($('#reg_password').val());
        // 結果を出力する
        $('#result').html(result);
        //↑ボタン自体に出力もできるね
    });

    function checkStrength(password) {
        let strength = 0 // 強さ
        if (password.length < 6) {
            $('#result').removeClass()
            $('#result').addClass('short')
            return 'パスワードが短すぎます'
        }
        // 文字数が7より大きければ+1
        if (password.length > 7) strength += 1

        // 英字の大文字と小文字を含んでいれば+1
        if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1

        // 英字と数字を含んでいれば+1
        if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1

        // 記号を含んでいれば+1
        if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1

        // 記号を2つ含んでいれば+1
        if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1

        // 強度点数を元に計算してクラスをつけたり消したり
        if (strength < 2) {
            $('#result').removeClass()
            $('#result').addClass('weak')
            $('#regme').removeClass()
            $('#regme').addClass('damenano')
            return '記号や大文字を入れてみましょう'
        } else if (strength == 2) {
            $('#result').removeClass()
            $('#regme').removeClass()
            $('#result').addClass('good')
            $('#regme').addClass('goodie')
            return '登録可能です!'
        } else {
            $('#result').removeClass()
            $('#regme').removeClass()
            $('#result').addClass('strong')
            $('#regme').addClass('goodie')
            return '登録可能です!'
        }
    }
});

新規登録ページ(form-login.phpなど)のPHPにid=”result”を追加して強度表示をさせるところを追加したり、新規登録ボタンを#regmeでくくったり。

パスワードinputあたり

<p class="passwords woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
    <label for="reg_password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required"> * </span></label>
    <input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" id="reg_password" autocomplete="new-password" />
<!-- ↓パスワード強度を表示するところ -->
<p id="result"></p>

ボタンあたり

<div id="regme"><!-- ←ここにクラスが付与されるのでCSSでカスタマイズ -->
<button id="regregbutton" type="submit" class="yubi woocommerce-Button woocommerce-button button woocommerce-form-register__submit" name="register" value="<?php esc_attr_e( 'Register', 'woocommerce' ); ?>"> <?php esc_html_e( 'Register', 'woocommerce' ); ?></button>
</div>

CSS (かなり参考レベル)

#regme #regregbutton {
    background: gainsboro;
    pointer-events: none; /* パスワード強度が満たないときは薄灰色な上、クリック不可 */
    border-radius: 1rem;
}

#regme .goodie button#regregbutton {
    background: blue;
    border-radius: 0.5rem;
    pointer-events: all;
}

#regme .goodie button#regregbutton:hover {
    background: #174f9e;
}

実装された画面の流れ

新規登録画面のパスワード入力欄の下に#resultを赤背景で表示しています。

赤いラインみたいなのでそのまま使っても良いかもね
まだ1文字しか入れてないのに警告するな

入力開始直後に「パスワードが短すぎます」って警告するのもどうかと思うのでそのあたりも調整してみましょう。

パスワードに記号や大文字を入れてみたらどうか提案できる

数字ばっかり設定してると記号や大文字などを混ぜるような指示をしてくれるのは親切。

登録ボタンが押せるようになる

パスワード強度がOKになると、CSSで押せなかった登録ボタンが押せるようになります。JSで制御するのもいいですが、CSSのほうが格段に楽です。

woocommerceのカスタマイズは店舗それぞれ

woocommerceの新規登録画面を別の方法で表示させたり、別PHPで運用している場合はこの限りじゃないかもしれません。といいますか、woocommerceのカスタマイズをしている時点でネットに掲載されているようなカスタマイズがコピペで適用できると思っていないという方な気がします。

woocommerceはJSをきれいに、きっちりとまとめ上げるよりもそれぞれのPHPの付近にJSを直書きしておいたほうがあとから忘れずに修正ができる気がするのですが、これはやっぱり邪道なのでしょうかね(汗)

執筆者

Posted by zipless

Leave a comment

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

Related Posts

墨田区
ウェブデザイン作りたくない
Menu