WordPressで画面移動せずにログイン/ログアウトでき、新規登録もできるようになるプラグイン「Login With Ajax」

Wordpressに限らずどこかのサイトでユーザーログインしたとき、そのサイトのトップページや別のページへ勝手に?移動してしまったという経験はありませんか?

そして元に戻そうとブラウザの「戻る」ボタンをクリックしたら「有効期限が切れています・・」や「フォームの再送信・・・」などという文字が表れて戻れないなんて経験ありませんか?

慣れた方ならログイン前にタグを複製してログインしてから元の画面をリロード・・なんてことができるようになるんでしょうけどそうでなかったらどうでしょうか??中には不親切なサイトだと感じて2度と訪問してくれなかったり、今流行りのSNSなんかで悪い噂をささやかれたりしたら・・困りますよね?

こうしたサイトはおそらく環境だけ用意して「これで大丈夫」って制作側から見た目線で作っているんだと思うんです。サイトを制作する人は最初は初心に戻って検証していても妥協や惰性がつきもの?ですからね。

今回紹介する【Login With Ajax】はページの移動なしでユーザーのログイン/ログアウトが行えるプラグイン。実際に動かしてみると「こんなふうにしたかった!!」と感動すら覚えるプラグインだと思います。

スポンサーリンク

【Login With Ajax】プラグインの基本的な機能・できること

  1. 画面移動なしでログイン/ログアウトの処理ができる
  2. ユーザー登録/パスワードの再発行ができる
  3. プロフィールの編集(バックエンド)/表示ができる
  4. ログイン後、ログアウト後ユーザー権限に応じてリダイレクトできる
  5. ユーザー登録時にユーザーへ送信されるメールの内容を変更できる
この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. 閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. テストは原則無料版のみで実施しています
  4. テスト環境については文末に記載しています

【Login With Ajax】プラグインの設定画面や表示の日本語化と翻訳

【Login With Ajax】プラグインは有効化すると日本語で使用できるようになっていますので、英語が分からない方でも安心して使えますが、バージョンアップによって完全に翻訳できていない部分があることと、内容が直訳的で個人的にわかりにくい部分があったので再翻訳しました。

私が翻訳した【Login With Ajax】プラグインの日本語化ファイルを配布していますので使ってみてくださいね。

翻訳ファイルは

「Login With Ajax」プラグインの日本語化ファイルを作りました。...

からダウンロードできます(ダウンロードの方法や日本語の適用方法なども解説しています)

翻訳することで設定が容易になり、重要な項目の設定漏れも少なくなりますから日本語化をお勧めします。

【Login With Ajax】プラグインのインストールと設定

インストールと設定方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

Wordpressと言えばさまざまな追加機能を使って思い通りの表現や動作ができるのがブログやHTMLで作ったサイトと違って楽しいところですね。ここでは基本的なプラグインの導入の仕方とトラブルが発生した場合の対処方法について解説します。
を参照ください

【Login With Ajax】プラグインの基本的な使い方

設定はダッシュボードから「設定」→「Login With Ajax」で行います

項目は大きく

  • ログイン/ログアウト後の画面移動をしないようにするか
  • 画面移動する場合は権限別にどのページへリダイレクトさせるか
  • ユーザー登録時の標準のメール設定を無効にする(別の文章にする)かどうか
  • の3つです。ちなみにWordpressのログイン画面から「新規」をクリックしてユーザー登録したときにどんなメールが届くかご存知ですか?

    【件名】サイト名 ユーザー名とパスワード情報

    ユーザー名: testuser

    パスワードを設定するには以下のアドレスへ移動してください。

    <パスワード変更リンク>

    こんな感じなんです。業務連絡でもあるまいし・・・って感じで何も知らない本当のユーザーさんは何が何だかわからないですよね?このメールの文章を変えることができるんです。

    ただし、このプラグインを使って行うのは最初の登録情報(ユーザー名とメールアドレス)の入力後の送信までで、そのあとの2重認証はWordpress標準のパスワード変更を使うことになるので、ユーザー登録を実装する場合は工夫が必要かもしれません。

    設定が終わったらあとはウィジェットを追加して表示するだけです。

    ウィジェットの表示項目は

    1. 未ログイン時に表示するタイトル
    2. ログイン中に表示するタイトル
    3. プロフィールへのリンクを表示するか
    4. 新規登録の処理を行うリンクを表示するか
    5. パスワード再発行のリンクを表示するか

    というもの。私が設定を経験した他のプラグインと比べて設定はしやすいと思います。

    画面のイメージ(公式サイトからの引用なので英語です)はこんな感じです

    またショートコードを使って本文内などへ挿入することも可能です(おそらくウィジェットで使うことが多いでしょう)。

    【Login With Ajax】プラグインの便利な使い方・カスタマイズ方法など

    より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、Wordpressのプラグイン公式配布ページには書かれていない事柄などを紹介します。

    スパマーの登録対策をする方法

    サイトにユーザー登録してもらう機会は何もコミュニティサイトだけではありません。例えば

    1. 会員になった人だけが見れる部分があるコンテンツを作っているサイト
    2. 会員になった人だけがダウンロードできるコンテンツを作っているサイト
    3. 会員専用(会員しか見れない)サイト

    などがあると思います。有効なメールアドレスで登録されているかを確認するために2重認証という方法があるものの、最近増えている短時間や短い日数だけ利用できる「使い捨てメール」を使って登録しても2重認証はクリアできてしまいます。そういう方は「今このコンテンツだけ利用できればいい」と思っている方であり、管理側からすれば2度とログインされることのないユーザーが増えていく原因になります。

    すると・・・ユーザーの件数だけが増えていきデータベースを圧迫したり、他の方がログインするときに照合に時間がかかるようになったりして不都合が生じます。特にユーザー向けにメールマガジンなどを発行しているサイトでは送信した途端にエラーメールの嵐・・・管理も大変ですけど心が折れますね。

    今回はそんなスパマー(迷惑な)から登録を拒否する方法を紹介します。門前払いなので特に管理も必要なくて便利だと思います。

    この機能を実装するには1つプラグインを追加します

    【Ban Hammer】は特定のメールアドレスやドメイン、特定の文字列を含むメールアドレスを使ったユーザー登録そのものを拒否し、使い捨てアドレスなどでのユーザー登録ができないようにするプラグインです。

    です。有効化したら拒否するメールアドレスやドメイン、キーフレーズを設定するだけで、登録しようとすると「ダメ!!」と門前払いしてくれます(リンク先のページで有名どころはリストにしてあります)。

    このプラグインは説明を見るとWordpress標準のログイン画面や「Buddypress」でしか動作は確認されていませんが、テスト環境では【Login With Ajax】では動作しました。

    このプラグインを使った「メールアドレスによる拒否」と「2重認証」、これでスパム対策は万全だと思いますのでぜひ試してみてくださいね。

    ログイン後にバックエンドへ行かせないようにする方法

    【Login With Ajax】からユーザー登録を行っても最終的にはWordpress標準のログイン画面で初回ログインという流れになってしまいます。ログインすると次の画面は・・・購読者ならプロフィール編集画面が表示されます。そして管理バーが表示されてしまうこともあります。これを強制的に非表示にできるプラグインがあります

    【Admin Bar & Dashboard Control】はユーザー権限に応じて管理画面の表示と管理バーの表示をコントロールする単純だけど便利なプラグインです。

    です。有効化して簡単な設定をするだけで、管理者以外(特定の権限以外)は管理バーを非表示にしたりバックエンドへ行けなくしたりすることができるようになります。

    ウィジェットに表示される「ユーザー名」を「メールアドレス」に変更する方法

    このプラグインは「ユーザー名」の項目に「ユーザー名」を入力しても「メールアドレス」を入力しても認識されるようになっています。実用的にはメールアドレスを入力してもらう形にしたほうがいいのではないかと思われます。

    どちらを入力してもログインはできますが、デフォルトで「ユーザー名」と表示されるラベルを「メールアドレス」に変更しておくことで、忘れやすい「ユーザー名」ではなくメールアドレスでログインしてくれるようになります。

    方法は、プラグインのソースを直接編集して行います

    「login-with-ajax」の編集を開き、「widget」→「default」→「widget_out.php」を開きます(defaultテンプレートの場合)

    15行目付近にある

    <label><?php esc_html_e( 'username','login-with-ajax' ) ?></label>

    <label><?php esc_html_e( 'E-mail','login-with-ajax' ) ?></label>

    に書き換えます(ソース中のUsernameをE-mailに変更するだけです)

    ※翻訳ファイル内の「Username」をメールアドレスという文字列に再編集すると、新規登録画面の「ユーザー名」という項目も「メールアドレス」という文字列になってしまうので都合が悪いです

    プラグインのテスト環境&個人的評価

    最後に【Login With Ajax】を動作確認した際の環境と個人的な評価を書いておきます。導入の検討や参考になれば幸いです。

    テストした環境

    1. WordPressのバージョン:4.9.0
    2. PHPのバージョン:7.0
    3. テーマ:Simplicity バージョン2.3.0g
    4. プラグインのバージョン:3.1.7
    5. このプラグインの最新バージョンは3.1.7です。バージョンが異なる場合には設定の仕方や動作仕様が変更になっている可能性があります。

    個人的な評価・感想ほか

      5段階評価

    1. 設定のしやすさ:★★★★★
    2. 使いやすさ:★★★★★
    3. おすすめ度:★★★★★

    冒頭に書いた「ログインしたときに別のページへ行ってしまう」という悩みを解決できるだけでなく、ユーザー登録やパスワードの再発行といった機能も備える秀逸なプラグインだと思います。

    Wordpressの本

    WordPressのツボとコツがゼッタイにわかる本
    • メーカー(著者):中田 亨
    • 価格  : ¥ 2,700 prime
    • 販売者 :Amazon.co.jp
    • 商品概要:
    詳細情報を見る
    たった1日で基本が身に付く! WordPress超入門 (たった1 日で基本が身に付く!)
    • メーカー(著者):佐々木 恵
    • 価格  : ¥ 1,944 prime
    • 販売者 :Amazon.co.jp
    • 商品概要:
    詳細情報を見る
    WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)
    • メーカー(著者):中島 真洋 
    • 価格  : ¥ 3,002 prime
    • 販売者 :Amazon.co.jp
    • 商品概要:
    詳細情報を見る

    ※価格は24時間以内に情報を取得した時点のものであり変更される場合があります。購入においてはAmazon.co.jpに表示されている価格の情報が適用されます。
    ※knowledge Baseは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。

    プラグインに関するお問い合わせ

    最後までお読みいただきありがとうございました。 内容の相違、導入後のトラブル、設定方法のお問い合わせなどはこちらのリンクからお願いします。
    さまざまな情報をいただくことで、プラグインの紹介記事をより正確でよりわかりやすく、よりいろいろな方のお役に立てる情報にしていきたいと考えておりますので、ぜひともご協力をお願いいたします。
    役に立つ情報でしたらぜひSNSやメールでシェアしてください
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    ページ先頭へ