ブログBlog

HOME
ブログ
Wordpress
モーダルダイアログのログイン処理実装ではまる。

2023年7月30日 / 最終更新日時 : 2023年7月30日 info@rishuntrading.co.jp

モーダルダイアログのログイン処理実装ではまる。

所沢市でWebサイト制作や欧州輸入品を販売しているRishunTradingです。今回は、Wordpressのログイン処理を流用した会員制サイトを制作した際に、モーダルダイアログにてログイン処理を実装した際にはまった時のお話です。Bootstrapのフレームワークなどを読み込んでいるテーマをカスタマイズするような場合には注意した方が良いかなと思い、備忘録です。

モーダルダイアログによるログイン処理を実装

以下のような形でモーダルダイアログ形式のログイン処理を実装しました。未ログインの時には、本ダイアログが開き、ログイン処理が求められるイメージです。

<?php if (!is_user_logged_in()): //login	?>
  <div class="window-wrap">
    <div class="window-box">
      <div class="modal-dialog">
        <div>
          <form method="post" action="<?php echo wp_login_url(); ?>">
<?php
if(!empty($_GET)){
  $login = isset($_POST['login']) ? $_POST['login'] : ''; //post by canvas data
  if(!empty($login)){
?>
          <div class="errmsg">
            <p>ログインに失敗しました。もう一度入力してください。</p>
          </div>
<?php
  }
}
?>
            <div class="login-field">
              <label for="log">アカウント</label>
              <input type="text" name="log" id="log">
            </div>
            <div class="login-field">
              <label for="pwd">パスワード</label>
              <input type="password" name="pwd" id="pwd">
            </div>
            <div class="submit-btn">
              <button type="submit">ログイン</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
<?php endif; ?>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<?php if (!is_user_logged_in()): //login ?>

<div>

<?php

if(!empty($_GET)){

$login = isset($_POST['login']) ? $_POST['login'] : ''; //post by canvas data

if(!empty($login)){

?>

<p>ログインに失敗しました。もう一度入力してください。</p>

</div>

<?php

}

?>

<label for="log">アカウント</label>

</div>

<label for="pwd">パスワード</label>

</div>

</div>

</form>

</div>

<?php endif; ?>

ところが、なぜか入力フォームに入力ができない事象が発生。結構はまりました。

原因判明

class名に、”modal-dialog“(上記ソースの4行目)という名前を使っていたのですが、こちらのclassは、Bootstrapのフレームワークで使用されており、これが原因でした。とほほ。

ちなみにbootstrapとは

Bootstrapは、HTML、CSS、JavaScriptのフレームワークで、ウェブサイトのデザイン開発を容易にさせるもの。レスポンシブデザインや、カスタマイズ可能なスタイル、再利用可能なコンポーネント、ブラウザ間の一貫性などが特長で、開発者が効率的に開発できるような仕組みが設けられています。
オープンソースなので、Wordpressの多くのテーマでは、このbootstrapを取り込んでいます。

だいたいはまった時というのは単純な原因で、もっと早くDeveloper Toolなどで見ておけばすぐわかる原因でした(泣)。