• メニュー
  • メニュー
wordpressのログイン画面の変更

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

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

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

背景画像を好きな画像にするだけでも印象がガラッと変わりますよ!
やり方は難しくないのでおすすめします^^


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

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

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

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

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

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

Wordpressのログイン画面を変更する方法
 Custom Login Page Customizer by Colorlib

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


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

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


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

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


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


変更できる項目について

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

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

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


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

CSSで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を記入しても良いと思いますが、英語表記ですがプラグインもとても簡単なのでまずはプラグインを試してみてください。


有益情報も流しているのでツイッターもぜひフォローお願いします。


参考になったらシェアお願いします!
toshiki@ひざのうえ起業家

3児&2犬(大型)のウェブ大好きパパです。

サイト作り・デザイン大好きで、どんどん新しいサイトを作ろうとしてしまう性格の持ち主。けど、深く深く極めるのも好きなハイブリットです。Wordpress歴は18年くらいです。

子どもが大きくなってしまう前に、子どもとの時間を作りたくて脱サラ計画中。ひざのうえにノートパソコンを置いてでも稼げる仕事で起業を目指しています。

10年ちょい前に世界一周チケットで主要都市だけ回る旅行も経験、これからもいっぱい旅行したい一心で切磋琢磨しています。旅行大好きだから。

好きな物:ウェブサイト/旅行(国内・海外)/動画編集/音楽(クラシック/JAZZ/ポップス)/山崎豊子/久石譲/ショパン/ピアノ/ラブラドールレトリバー/コーヒー/ワイン/スポーツ全般/スキーモーグル/高校野球/スキューバ

夢:キャンピングカーで子どもと犬と日本一周、もう一度乗りたい豪華客船クルーズ、映画音楽の作曲、プール付きか温泉付きの別荘で暖炉の前でリクライニングチェアで老眼鏡付けて分厚い洋書を手に犬を足元に居眠り。

ストーリーを見る

コメント・質問する

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です