WP-membersのログインフォームなどにバリデーションをつけたい。

Question

wordpressで会員制のサイトを構築しようとしています。
構築するにあたっって、wp-membersというプラグインを使用しようと考えているのですが、

1.ログイン画面など、フォームがうまく編集できない。
2.編集できたとしても、ログインボタンなど、簡単に押せてしまう。
上記2点の問題にぶち当たっています。

まずフォーム画面を編集したいです。

function my_login_form_filter( $form, $action ) {
  $user_info = wp_get_current_user();
  if (is_user_logged_in()) {
        return '
        <div id="wpmem_login">
        <a id="pwdchange"></a>
        <form action="" method="POST" id="wpmem_pwdchange_form" class="form">
          <input type="hidden" id="_wpmem_pwdchange_nonce" name="_wpmem_pwdchange_nonce" value="2952ee5e05">
          <input type="hidden" name="_wp_http_referer" value="/form/edit/"><fieldset><legend>パスワード変更</legend>
          <label for="pass1">新しいパスワード</label>
          <div class="div_text"><input name="pass1" type="password" id="pass1" class="password" required=""></div>
          <label for="pass2">新しいパスワード (再入力)</label><div class="div_text"><input name="pass2" type="password" id="pass2" class="password" required=""></div>
          <input name="redirect_to" type="hidden" value="/form/edit/"><input name="a" type="hidden" value="pwdchange"><input name="formsubmit" type="hidden" value="1">
          <div class="button_div"><input type="submit" name="Submit" value="パスワードの変更" class="buttons"></div></fieldset></form></div>
  ';

  }else{
        return '
  <div id="wpmem_login">
  <form class="my_form" name="my_login_form" id="my_login_form" action="/mypage/" method="post">
  <fieldset>
  <div>
    <label for="log">メールアドレス</label>
    <input class="col-12 l-mgb20" id="login_user_name" name="log" type="text" required>
  </div>
  <div class="l-mgb30">
    <label for="pwd">パスワード</label>
    <input class="col-12 l-mgb30" id=" login_password" name="pwd" id="user_pass" type="password" required>
  </div>

  <div class="l-justifyCenter row l-mgb20">
  <div class=""><input name="rememberme" type="checkbox" id="rememberme" value="forever" />&nbsp;<label for="rememberme">ログイン状態を保存する</label></div>
  </div>

  <input name="redirect_to" type="hidden" value="/mypage/" /><input name="a" type="hidden" value="login" />
  <div class="row l-justifyCenter l-mgb40">
    <button type="submit" name="my_submit" class="my_submit_btn c-link__mainColor c-btnA-2" value="login">ログイン</button>
  </div>

  <div class="text-right"><p>はじめての方はこちら</p><a href="/form/registration/">新規会員登録<i class="fas fa-angle-right l-pdl10">
  <div class="icon-circle"></div>
</i></a></div>
<div class="text-right">
<a href="/form/password-edit/">パスワードをお忘れの方<i class="fas fa-angle-right l-pdl10">
  <div class="icon-circle"></div>
</i></a></div>
  </fieldset></form></div>
  ';
  }
  }

  
  add_filter( 'wpmem_login_form', 'my_login_form_filter', 10, 2 );

このようなコードで、ログイン画面など、編集できます。と書いてあったので、試してみたのですが、
他のフォームにも反映されてしまい、うまくいきません。

フォームとして、
・ログインフォーム
・登録情報の編集
・パスワードのリセット

この3つのフォームを利用する予定です。

また、フォームを編集できたとしても、ログイン時のバリデーションなどが機能せず、
どのようなパスワードや、ユーザー名でも、ログインボタンを押せる状況になってしまいます。

ログインできませんでした。など、ボタンを押した際に、バリデーション的な表示を出力することはできるのでしょうか？

とにかくやりたいことは、
・フォームレイアウトの編集（cssでボタンなどもかえたい）
・ログイン失敗時にバリデーション的なものを起動させる
です。

近い内容でも構わないので、何かご教授いただけましたら、幸いです。
よろしくお願いいたします。

Answer 1

他のフォームにも反映されてしまい、うまくいきません。

他のフォームとは、サイドバーのフォームなどのことですか？
そうであればwpmem_login_formというアクションフックがすべてのフォームの変更を担うアクションフックだからだと思います。
例えばサイドバーのフォームだけを変えるフックはwpmem_sidebar_formですし、登録フォームはwpmem_register_formだと思います。

なのでご自身が変更したいフォームにあったフックを使ってあげてください。

・ログイン失敗時にバリデーション的なものを起動させる

WP-membersのフォームをそのままコピペしたHTMLを、my_login_form_filterでreturnしてみたらいかがでしょうか？
問題なくバリデーションは効くのでは？

もしそうであれば、
Aご自身で作成したフォームの値がWP-membersの検証対象にひっかかっていない
B検証対象にはなっているが、検証結果を表示するHTMLがご自身のフォームに存在しない
のいずれかだと思います。

まずAの場合

ご自身のフォームの送信値も「これはWP-membersの送信値ですよ」というお知らせとともに送ってあげればよさそうです。

そういったお知らせは、formタグのidだったり、inputタグのnameだったりします。

というわけで、ご自身のフォームのHTMLのformタグやinputタグを、WP-membersのそれと同値にしてみてはいかがでしょうか。

次にBの場合

WP-membersによる「ログインできませんでした」などが、どのようなHTMLに出力されているか確認してみてください。
それと同じHTMLをご自身のフォームに書いてあげましょう。
そうすればおそらくそのHTMLに出力できると思います。

・フォームレイアウトの編集（cssでボタンなどもかえたい）

普通にCSSファイルで編集できると思うのですが、CSSファイルのどこをどう編集してみた結果、効果がみられませんでしたか？
それをおっしゃっていただければ助かります。

それともCSSファイルの編集自体わからない感じでしょうか？
もしそうであれば、WordPressの管理画面から下記リンクの方法で変更できると思います。
https://techacademy.jp/magazine/7750#:~:text=%E7%AE%A1%E7%90%86%E7%94%BB%E9%9D%A2%E3%81%8B%E3%82%89%E7%B7%A8%E9%9B%86%E3%81%99%E3%82%8B,%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82

またはのフォームを直接いじる方法も用意されていますので下記リンクをご参考にしていただければと思います。
https://www.butlerblog.com/2011/07/25/customize-the-wp-members-stylesheet/

Comments

[arraky]

すごい詳しく説明してくださり、ありがとうございます！
wp-membersが初めてなもので、色々戸惑ってました！
アクションフックが全てにかかっていたのは納得です。試してみようと思います！

あと、もう一点なのですが、ログイン失敗時のバリデーションなのですが、ボタンを押した瞬間に、ボタン下にバリデーションを出すか、元々のバリデーションの文言を変える。どちらかを実装したいのですが、これって可能なのでしょうか？

[mossbarger]

まず押した瞬間の件ですが、「ログイン結果」は通信の時間が必要ですから押した瞬間というのは難しいですね。というか本当におっしゃりたいのは「入力結果」ではないでしょうか。
それならば入力値のバリデーション機能をJavaScriptで実装する必要があります。たぶんwp-membersにはないと思いますので自作しましょう。すこし骨が折れそうですが、検索すれば望みのコードは転がっていそうな予感がします。
たとえばメールアドレスのバリデーションならこちらなど見つかりますね。
https://kantaro-cgi.com/blog/javascript/javascript_mailaddress_check.html

次に文言ですが、これはプラグインの翻訳ファイルを書き換えるだけでいけるでしょう。

[arraky]

早々のご回答ありがとうございます！

何度も申し訳ないのですが、押した瞬間に、ログインに失敗しました。というHTMLが出力されることには成功したのですが、その文言は翻訳ファイルというもので変更できるのでしょうか？

また、「他のフォームにも反映されてしまう」というのは、ログインと、パスワードリセットが反映されてしまうということなのですが、これって別々にアクションフックで解決できるものなのでしょうか？

[mossbarger]

すみませんフックの件誤解がありました。
パスワードリセットはお使いのフックでOKです。
以下のように第二引数でいけると思います。
function my_login_form_filter( $form, $action ) {
if ( $action == 'login' ){
$form = 'ログインのフォーム'
}elseif ( $action == 'pwdreset' ){
$form = 'パスワードリセットのフォーム'
}
return $form;
}

翻訳ファイル何か問題ありましたか？

[arraky]

あー！そういうことですね！ありがとうございます！！
コードまで...ありがとうございます...

文言を変更しようと、ダイヤログのあたりを探していたのですが、変化がみられずでした...
「ログインに失敗しました。
メールアドレスが無効です。
引き続き〜するならクリック。」
みたいに出てくる文言を変更したいのですが...

[mossbarger]

こちらの一番下のExportをクリックして得られるのがwp-membersの翻訳ファイルですが、そこに目的の文言はございませんか？
https://translate.wordpress.org/projects/wp-plugins/wp-members/stable/ja/default/?page=1
あればそこを変えてサーバーにアップしてください。
なければちょっとわからないです。

[arraky]

ご返信が遅くなり誠に申し訳ございませんでした！
なんとか会員制サイトを実装できました！
本当にありがとうございました！