【WordPress】ログイン画面の表示とカスタマイズをしてみよう

こんにちは!エンジニアのノムラです。WordPressをインストールして、さぁ始めよう!と思ってみたけど

ログイン画面が表示できない
ログインができない

と困っていませんか?

この記事では、以下の内容を解説していきたいと思います。

  • 【基礎】管理画面にログインする方法
  • 【基礎】ログインできない原因と対処法
  • 【応用】ログイン画面をカスタマイズ
  • 【応用】ログイン画面で使える便利なプラグイン


WordPressのログイン方法、カスタマイズの方法をマスターして、よりクオリティの高いサイトを作成していきましょう。

管理画面にログインする方法

WordPressの設定や編集を行う場合、管理画面へのログインは必須になりますね。ここでは、WordPressへのログイン方法、ログイン画面の表示方法について解説していきます。

wp-adminからログインする

まずはwp-adminからのログイン方法をみていきましょう。wp-adminでログインするには、サイトURLの最後に「wp-admin」をつけてアクセスします。

https://サイト名/wp-admin

例えば「https://www.samuraiEngineer.ne」というURLを例にすると以下のようになります。

https://www.samuraiEngineer.net/wp-admin

アクセスすると、ログイン画面が表示されます。

スクリーンショット 2018-06-19 16.12.05

ここからWordPressのユーザ名、パスワードを入力すればログインすることができます。

wp-login.phpからログインする

次にwp-login.phpでログインしてみましょう。方法はwp-adminと変わりませんURLの最後に「wp-login.php」をつけるだけです。

https://サイト名/wp-login.php

「https://www.samuraiEngineer.net」だと以下のようになります。

https://www.samuraiEngineer.net/wp-login.php
こちらもログイン画面にアクセスすることができます。

wp-adminでのログインと、wp-login.phpでのログインの違いとしては、wp-login.phpはログインページのphpファイルを直接読み込んでいるのに対し、wp-adminはwp-adminのフォルダの中の管理画面を読み込んでいます。

「wp-admin」は稀にログインできなくなる場合があるので、「wp-login.php」でアクセスする方が確実かもしれません。

ログインできない!?原因と対処法

ログイン画面の表示方法はわかったけど、ログインがうまくいかない、画面が表示されないということもあると思います。ここでは、ログインができない場合の原因と対処法について解説します。

パスワードを忘れてしまった

パスワードが間違っていた場合、エラーメッセージがでてログインすることはできません。

スクリーンショット 2018-06-19 16.31.22

そのような場合は、ログイン画面の下か、エラーメッセージに表示されている「パスワードをお忘れですか?」というリンクにアクセスしましょう。

ユーザ名、またはメールアドレスを入力することで、登録されているメールアドレスに確認のメールが送られていきます。

パスワードをリセットする場合、送られてきたメールのURLにアクセスします。新しいパスワードを入力後、「パスワードをリセット」のボタンををクリックすることで入力したパスワードに変更されます。

スクリーンショット 2018-06-19 16.40.03

ログイン画面に戻り、ユーザ名と新しく設定したパスワードでログインしてみましょう。

Cookieの確認

以下のような画面がでた場合、Cookieを有効にする必要があります。

スクリーンショット 2018-06-19 16.47.00
Cookieを有効化するには、ブラウザによって設定方法が違うので、以下のサイトを参考に確認してみてください。

GoogleChromeの場合
https://support.google.com/chrome/answer/95647?hl=ja

IEの場合
https://support.microsoft.com/ja-jp/help/17442/windows-internet-explorer-delete-manage-cookies#ie=ie-11

Firefoxの場合
https://support.mozilla.org/ja/kb/delete-cookies-remove-info-websites-stored

Safariの場合
https://support.apple.com/kb/PH5042?locale=ja_JP&viewlocale=ja_JP

ログインURLの確認

「お探しのページが見つかりません」というメッセージが表示される場合、ログインページのURLの指定を間違えている可能性があります。「wp-admin」、「login.php」の指定方法が正しいか確認してみましょう。

プラグインの無効化

稀にプラグインが影響して、ログインができなくなっている場合があります。その場合、プラグインを一旦全て無効化してしまいましょう。

具体的な方法としては、WordPressをインストールしたサーバーに接続し、プラグインが入っているフォルダをリネームしてしまうという方法です。プラグインはwp-contentのpluginsに入っています。

スクリーンショット 2018-06-19 17.03.17

この「plugins」を「plugins1234」など適当な名前にリネームし、読み込まないようにします。ここまでやって再度ログインできるかどうか試してみましょう。

ログインできれば、プラグインが原因でログインできなかった可能性が高いと思われます。原因になっているプラグインを削除して、先ほどリネームしたフォルダを「plugins」に戻せば元どおり使っていくことができます。

プラグインをインストールしたり、アップデートした後にログインできなくなった場合は、この方法を試してみてください。

ログイン画面をカスタマイズ

ここまでログイン画面について解説してきましたが、せっかく綺麗なサイトを作ってもデフォルトのWordPressのログイン画面が表示されると台無しになってしまう、と悩んでいませんか?

そんなときは、ログイン画面をオリジナルにカスタマイズしてしまいましょう。

背景の変更

今回は管理画面からログイン画面の背景を、自分で選んだ画像に差し替えて見たいと思います。管理画面から、「外観」の「テーマの編集」画面を開きましょう。右のメニューバーにテーマファイルという欄が表示されていると思います。

編集するのは、functions.phpです。ファイルを編集する際は、必ずバックアップを取ってからカスタマイズをしましょう。

記述するコードは以下です。

function login_custom() { ?>
  


スクリーンショット 2018-06-20 11.22.40

背景を変えるだけでも、随分イメージが変わりますね。

ロゴの変更

WordPressのログイン画面のデフォルトでは、WordPressのロゴが表示されています。これもカスタマイズして、オリジナルのものに変えて見ましょう。背景の変更の場合と同じ、functions.phpに記入します。

function logo_custom() { ?>
  


スクリーンショット 2018-06-20 11.41.06

ロゴを変更することで、一気にオリジナリティがでました。

不要な要素を非表示

最後に、不要な要素、表示したくない要素を非表示にして見ます。今回は、「パスワードをお忘れですか?」と「←my_blogに戻る」を非表示にします。

以下、追加コードです。

function nav_custom() { ?>
  


 

不必要な部分を非表示にすることで、画面がスッキリしますね。

ログイン時使える便利なプラグイン

ログイン画面のカスタマイズや、ログイン時に役に立つプラグインを紹介したいと思います。プラグインを使うことで、作業スピードや利便性がグッと上がるので、ぜひ参考にしてください。

カスタマイズを簡単にする

ログイン画面のカスタマイズ方法について解説しましたが、コードを書いてカスタマイズするのは難しいと感じている人にオススメしたいのが、Custom Login Page Customizerです。

https://ja.wordpress.org/plugins/login-customizer/

このプラグインを使えば、直接自分でコーディングすることなくログイン画面のデザインを編集していくことができます。

詳しい使い方は以下のサイトを参考にしてみてください。

>>Custom Login Page Customizerの使い方

SNSアカウントでログイン

会員向けのログイン画面にしたいという場合、SNSアカウントでログインできたら、使いやすいですよね。このログイン方法をソーシャルログインと言います。

ソーシャルログインに対応させるにはGianismというプラグインがオススメです。

https://ja.wordpress.org/plugins/gianism/

FacebookやTwitterなど主要SNSアカウントと連携することができ、国産プラグインなので初心者にも使いやすくなっています。

詳しい使い方については、以下のサイトを参考にしてみてください。

>>Gianismの使い方

まとめ

この記事では、ログイン方法からログイン画面のカスタマイズ、オススメプラグインの紹介まで解説してきました。

会員制のサイトでも、そうでなくても、ログイン画面はすごく重要な画面です。WordPressのログイン機能やカスタマイズをマスターして、こだわりのサイトを作っていきましょう。



LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ノムラ

ノムラ

WEBエンジニアをやっています。
プログラミング初心者にもわかりやすく解説ができるよう頑張ります。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説