質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.36%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 649

arraky

score 16

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でボタンなどもかえたい)
・ログイン失敗時にバリデーション的なものを起動させる
です。

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

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

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

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

もしそうであれば、
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/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/06/24 13:55 編集

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

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

    キャンセル

  • 2020/06/24 14:16

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

    キャンセル

  • 2020/07/09 20:20

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る