【やる気アップ】WordPressのログイン画面を変更する方法

WordPressの中でもあまりしないカスタマイズかもしれませんが、ログイン画面をおしゃれに変更する方法を紹介します。

面白みのないログイン画面をカスタマイズすることで、ログイン時に気分が変わってやる気が上がったり、顧客へ納品する場合にちょっと変更するだけでも差別化を図ることができますよね。

WordPressのログイン画面を変更する方法

ログイン画面を変更する方法には、プラグインを使って変更する方法と、Wordpressのファイルのcssファイルを直接編集することで変えることができます。

２つの方法をご紹介します。

プラグインを使って変更する方法

おすすめのプラグインは「Custom Login Page Customizer by Colorlib」になります。

ダウンロードはこちら → Custom Login Page Customizer by Colorlib

プラグインをインストールして有効化すると、メニューに「Login Customizer」という項目が追加されます。

メニューを開くと、外観のカスタマイズと同じような画面が開き、いろいろ設定することができます。

一番簡単なのは、一番上にある「Templates」から選びます。

左に表示されるテンプレートが5個くらいでるので、クリックするとパッと変更されます。

テンプレートを選んでから画像を変更する方法が簡単です。

左右に分かれたテンプレートを選んで画像を変更してみました。

変更できる項目について

• 背景画像
• フォームの位置(左右・上下)
• フォームの色
• フォームの文字(Username, Passwordなど文字を変更することができます)
• ボタンの色やテキスト

と、ログイン画面のカスタマイズとしては十分なものが変更可能です。いじる部分は非常に少なく簡単ですが、英語表記になるのでその部分は少しハードルがあります。

※Usernameなど一部が英語になってしまうので変更が必要です。

wordpressファイルから変更する方法

wordpressのfunctions.phpを編集することで、ログイン画面を変更することができます。

試しに以下を入力してみます。

//ログインページのカスタマイズ
<?php 
function my_login_page() { ?>
     <style type="text/css">
		body{
			background:url("https://xxxxxxx/yyyyyy/zzzzzz.jpg")!important
		}
		#loginform {
			opacity:80%;
			background: #c7e4ff;
		}
		#login h1 a, .login h1 a {
           background-image:url("https://aaaaaaa/bbbbbbb/cccccc.jpg")!important;
		   height:65px;
		   width:320px;
		   background-size: 320px 65px;
		   background-repeat: no-repeat;
           padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_page' );
?>

my_login_page()という関数を作ってあげます。この関数名は好きな名前でOK。

作った関数を、add_action( ‘login_enqueue_scripts’, ‘my_login_page’ ); でログインするときに読み込むスクリプトに登録してあげます。

とりあえず必ず必要なことは

• 関数を作る
• add_actionで登録

この2つです。

あとは<style></style>で好きなCSSを書いていけばいろいろいじくれるわけです。

執筆時点2021年3月では以下のidとclassがログイン画面に使われているので設定します。

ログイン画面のロゴの変更

ログイン画面のロゴのデフォルトはWordpressのロゴになっているので、とりあえずここだけでも自分のサイトのロゴに変えておきたいところです。

以下のコードを上書き(override)することで変更が可能です。

#login h1 a, .login h1 a

opacity : 80%; くらいにして透過させると見栄えが良くなりますね^^

ログイン画面の背景の変更

ログイン画面の背景の変更にはbodyに直接cssを書き込む必要があります。また、すでに登録されているcssよりも優先させるために、!importantを入れる必要があります。

URLには直接URLを直打ちするのが楽でしょう。自分のログイン画面のみの利用なので直リンクをしても特に怒られないですが、Wordpressのメディアにアップロードした画像を利用するのが良いと思います。

メディアの画像編集から画像URLを取得することができますよ。

body{
			background:url("https://xxxxxxx/yyyyyy/zzzzzz.jpg")!important
	}

ちなみにbackground-imageだとどうにもこうにもうまくいきませんでした。

ログイン画面の入力フォームの変更

ログインの入力フォームの変更は以下の2つのいずれかのid、classを編集することでできます。

.login form

#loginform

サンプル例としては、#loginformに以下のように記入しています。

ちょっと透過させるとオシャレになりそうですね。

#loginform {
	opacity:80%;
	background: #c7e4ff;
}

まとめ：

ログイン画面は自分だけしか使わない画面なので好き勝手いじくれるので、好きな画像を表示したりして気分転換を図れるようにしたらいいですね。

好きなアイドルやアニメの画像でもいいかもしれませんね。

あるいは「ブログ書け！！」「記事を書くまで寝るな！！」とかやる気アップさせる言葉を表示させてもいいかもしれません(笑)

企業向けでしたらログイン画面のロゴを企業ロゴにしてあげると気が利いたウェブ制作業者になれるでしょう。

背景画像だけ変更ならばfunctions.phpにcssを記入しても良いと思いますが、英語表記ですがプラグインもとても簡単なのでまずはプラグインを試してみてください。