【Wordpress】ログイン画面を自分専用スタイルにカスタマイズする方法【コピペで4分】

こんにちは、ブログ歴15年目のLeoです。

今日は、Wordpressの地味な部分のカスタマイズについてご紹介します。

MoKuJi

ログイン画面を改造すると”上がる⤴︎⤴︎”
- ログイン画面てどれ？
見た目がガラッと変わったログイン画面
- こういうちょっとしたことが大事
カスタマイズ方法
ログイン画面を変えるもう一つの効果
まとめ・総括

ログイン画面を改造すると”上がる⤴︎⤴︎”

”地味な”と言いましたが、そう言った理由は、このカスタマイズは管理者以外見ることがないからです。

どういうこと？

それは、ログイン画面の見た目を変えるだけのカスタマイズだからです。

通常、ブログ（ウェブサイト）に訪れるユーザー側は管理者用のログイン画面なんか見ませんよね？

ログイン画面てどれ？

通常のログイン画面はこんな感じです。

WordPressのバージョンアップでたまに見た目が変わりますが、デフォルトはだいたいこんな感じです。Wordpressをすでにやっている方は見慣れた画面ですね。

今回はこれをいじる話ですが、

どうしていじるのか？

ですよね。

その理由は、

気分が上がるから⤴︎⤴︎

ただそれだけです（本当はもう一つ理由あります）！！！

じゃあ、カスタマイズした画面を実際に見てみましょう。

見た目がガラッと変わったログイン画面

これがカスタマイズしたログイン画面です。

いじったポイントは4つ。

ロゴをWPロゴから自前のロゴに変更
背景を設定
「ログイン」ボタンの色を変更
「パスワードをお忘れですか？」を除去

以上の4点をいじったわけですが、その全ては1つのPHPファイルをいじるだけで完了するので割とサクッとできるはずです。

やり方の前に、いかがでしょう？

質素なログイン画面でも、カスタマイズ済みのログイン画面でも、多くの方がブラウザに記憶させているログイン情報でサクッとログインしていると思います。

なのでこの画面にいる時間って多分10秒とかです。

なんなら人によってはログインしっぱなしで滅多にこの画面に来ないこともあり得ます。

でも、

上がりません？？？

ボクはちょっとだけかもですが気分良くなります。

こういうちょっとしたことが大事

いくつかの記事で書いていますが、ブログをやっていく上で一番大事で、かつ最大の敵は、

継続すること

なんですよ。

ネタがなくなる
書くのに疲れる
PVが伸びないしやる気がなくなる
他のことで忙しくて時間が取れなくなる

などなど、いろんな理由でブログ活動って続かないんですよ。

ボクの周りでも割とPV稼いでいたのにやめちゃった、自然消滅しちゃった人結構いるんですよね。収益化していて、そこの収入が生活につながっているレベルの人でもなければ、いろんな理由でやめちゃいますね。

そんな時、

居心地がいいブログにデザインを育てることはかなり役に立ちます。

いつも家に例えていますが、

無味無臭の家に住んでいるより、住んでいて気分がよくなるおしゃれで自分好みのインテリアに囲まれた家に住んでいる方がいいですよね？

ブログも、継続するには色々な作戦がありますが、今回のカスタマイズのような「上がる⤴︎⤴︎」要素を付け加えていくことの効力は大きいってことです。

なるほど、わかる気がする

カスタマイズ方法

ってことで、”地味”ながら、

割と重要な

カスタマイズのやり方です。

などでググると、結構いっぱい記事が出てくると思いますが、

ちょっと古い記事だとWordpressのバージョンとの相性でしょうか？うまくいかない奴が結構あったんですよね。

テーマとの相性もあり得る話ですが、とりあえず「AFFINGER5（WING）」と「Cocoon」では下記のコードを使えば書いた通りの現象が実現できています。

//ログイン画面のロゴ変更
function theme_login_style() {
?>
<style> .login h1 a { width: 320px!important; background: url(ここにロゴ画像.png) no-repeat 46% 72%!important;
       background-size: 100%!important;
}
body.login{
background: url(ここに背景画像.jpg) no-repeat 46% 72%!important;
}
.wp-core-ui .button-primary{
background: #ボタンの色!important;
border-color: #ボタンの輪郭色!important;
color: #fff;
text-decoration: none;
}
.login #nav,
.login .privacy-policy-page-link{
display: none;
}

<?php
}
add_action('login_enqueue_scripts', 'theme_login_style');
function my_login_logo_url() {
return home_url();
}
add_filter('login_headerurl', 'my_login_logo_url');

こいつをfunction.phpの中にブチ込むだけ！

かならぶバックアップを取ってから作業しましょう！

本当は細かくパーセンテージとかロゴの幅とかいじればもっと細かく整形できるわけですが、今回はサクッと変装する方法として紹介するのでその辺は割愛します。

コードを見て意味がわかる方はてきとーにいじってください！

てか、もう一つの理由ってなんやねん？

あー、聞きたい？