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

公開日:2018年1月9日 コンテンツ追加 ユーザー管理
Knowledge Base 会員 メンバー
Wordpressに限らずどこかのサイトでユーザーログインしたとき、そのサイトのトップページや別のページへ勝手に?移動してしまったという経験はありませんか?

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

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

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

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

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

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

WordPressで写真だけでなくhtml文や広告をスライド表示できるプラグイン「Slide Anything」

WordPressでサイドバーに閲覧しているページのQRコードを表示するプラグイン「WP QR Code Generator」

WordPressのRSSフィードに画像を追加するプラグイン「RSS Image Feed」


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

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

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

翻訳ファイルは

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

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

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

インストール方法

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

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

を参照ください

【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つプラグインを追加します

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

    このプラグインは説明を見ると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>
    【注意】コードをコピーして使用する前に必ずお読みください

    この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

    使用については自己責任でお願いします

    コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

    万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

    コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

    コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

    その場合には以下の方法で修正を行ってみてください

    1. コードの中に全角の記号が入っていませんか?
    2. 半角にすることで解消できます
    3. コードの中に全角の空白(スペース)がありませんか?
    4. 半角にすることで解決できます
    5. コードは合っているはずなのに更新できないときは
    6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
    7. 「何かが間違っています...」と表示され、更新できないときは
    8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
      ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
    これらのエラー対処については以下のページが参考になるかも知れません

    コードを転載する場合には

    ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします


    <label><?php esc_html_e( 'E-mail','login-with-ajax' ) ?></label>
    【注意】コードをコピーして使用する前に必ずお読みください

    この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

    使用については自己責任でお願いします

    コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

    万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

    コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

    コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

    その場合には以下の方法で修正を行ってみてください

    1. コードの中に全角の記号が入っていませんか?
    2. 半角にすることで解消できます
    3. コードの中に全角の空白(スペース)がありませんか?
    4. 半角にすることで解決できます
    5. コードは合っているはずなのに更新できないときは
    6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
    7. 「何かが間違っています...」と表示され、更新できないときは
    8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
      ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
    これらのエラー対処については以下のページが参考になるかも知れません

    コードを転載する場合には

    ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

    に書き換えます(ソース中の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.8.1です。バージョンが異なる場合には設定の仕方や動作仕様が変更になっている可能性があります。

    個人的な評価・感想ほか

      5段階評価

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

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

    Wordpressの本

    Amazonの人気商品楽天市場の人気商品
    【送料無料】 WordPress標準デザイン講座20LESSONS WordPress5 / Gutenberg対応 / 野村圭 【本】

    【送料無料】 WordPress標準デザイン講座20LESSONS WordPress5 / Gutenberg対応 / 野村圭 【本】

    2,786 円 (税込) 送料込
    基本情報ジャンル建築・理工フォーマット本出版社翔泳社発売日2019年06月ISBN9784798156514発売国日本サイズ・ページ303p 23×19cm関連キーワード 9784798156514 【FS_708-2】出荷目安の詳細はこちら>>楽天市場内検索 『在庫あり』表記について 
    【中古】 WordPressレッスンブック 2.8対応 ステップバイステップ形式でマスターできる /エビスコム【著】 【中古】afb

    【中古】 WordPressレッスンブック 2.8対応 ステップバイステップ形式でマスターできる /エビスコム【著】 【中古】afb

    108 円 (税込)
    エビスコム【著】販売会社/発売会社:ソシム発売年月日:2009/09/18JAN:9784883376735//付属品〜CD−ROM1枚付
    楽天ウェブサービスセンター CS Shop
    ひまあーと(管理人)
    • 記事の作者: ひまあーと(管理人)

    • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
      ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
      ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


    いつでもご相談・サイトカスタマイズの依頼を受け付けています

    Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

    ※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


    【スポンサーリンク】


    記事の拡散にご協力をお願いします

    閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

    関連情報