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

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

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

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

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

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

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

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

  1. 画面移動なしでログイン/ログアウトの処理ができる
  2. ユーザー登録/パスワードの再発行ができる
  3. プロフィールの編集(バックエンド)/表示ができる
  4. ログイン後、ログアウト後ユーザー権限に応じてリダイレクトできる
  5. ユーザー登録時にユーザーへ送信されるメールの内容を変更できる

本記事を参考にWordPressサイトへプラグインの導入を検討される方へ

WordPressは古くから無料で配布されているサイト作成ツール(CMS)で、随時改良が加えられており、さまざまなバージョンが存在します。

さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。

そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。

本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。

  • テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
    ※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能などが異なる場合があります。
    ※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。
  • プラグインに無料版と有料版(Pro版)がある場合、特に記載がなければ無料版の情報のみを紹介しています
  • このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
  • プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください(ここでは質問にお答えすることはできません)

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

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

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

翻訳ファイルは

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

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

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

インストール方法

インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください(プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください)。

WordPressを使い始めて間もない方(初心者の方)は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール&追加方法とエラー対処の方法も併せてご覧ください。

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

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

項目は大きく

  • ログイン/ログアウト後の画面移動をしないようにするか
  • 画面移動する場合は権限別にどのページへリダイレクトさせるか
  • ユーザー登録時の標準のメール設定を無効にする(別の文章にする)かどうか

の3つです。ちなみにWordPressのログイン画面から「新規」をクリックしてユーザー登録したときにどんなメールが届くかご存知ですか?

<div class="blank-box bb-yellow">
<h3>【件名】サイト名 ユーザー名とパスワード情報</h3>
<p>ユーザー名: testuser</p>
<p> </p>
<p>パスワードを設定するには以下のアドレスへ移動してください。</p>
<p><パスワード変更リンク></p>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「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】を動作確認した際の環境と個人的な評価を書いておきます。導入の検討や参考になれば幸いです。

テストした環境

  • テストサーバー:カラフルボックス
  • WordPressのバージョン:4.9.0
  • PHPのバージョン:7.0
  • テーマ:Simplicity2 バージョン2.3.0g
  • プラグインのバージョン:本記事で紹介しているバージョン 3.1.7/最新バージョン 3.1.11
  • 公式サイト(wordpress.org上):https://wordpress.org/plugins/login-with-ajax/
  • 公式サイト(作者サイト):

個人的な評価・感想ほか

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

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

サイトへの支援をお願いします

最後までお読みいただきありがとうございました。本記事の内容がお役に立てましたら幸いです。
今後もよりよい情報を提供し続けることができるよう、投げ銭によるサイトへの支援、およびSNSによる拡散をお願いします

作者:

☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。

年齢:40代 趣味/園芸・ペット・卓球