コロナに負けるな!ステイホームでブログを書きます!

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

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

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

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

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

どういうこと?

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

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

ログイン画面てどれ?

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

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

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

どうしていじるのか?

ですよね。

その理由は、

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

ただそれだけです(本当はもう一つ理由あります)!!!

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

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

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

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

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

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

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

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

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

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

でも、

上がりません???

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

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

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

継続すること

なんですよ。

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

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

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

そんな時、

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

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

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

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

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

カスタマイズ方法

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

割と重要な

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

WordPress ログイン画面 カスタマイズ
検索

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

ちょっと古い記事だと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の中にブチ込むだけ!

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

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

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

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

あー、聞きたい?

ログイン画面を変えるもう一つの効果

ボクはWordpress歴8年くらいですが、基本的にいつもログイン画面をいじっています。

なぜ?

それは、

ログイン画面でどのサイトか一目瞭然になるから

です。

ボクは完全に個人で運営するもの、人のために作ったもの、依頼を受けて制作〜維持まで担っているもの合わせると20くらいのWordpressを並行して管理・運営しています。

フリーランスのデザイナーの方でこれくらいの方、なんならもっともっと多く関わっている方はごまんといると思いますが、

似通った名前のサイトとか、同じ事業に対して複数のWordpressを運用することも少なくないんですよね。

例えばボクの会社、EXSも、会社本体のサイトと、ブログ、LPなどに使う用と3つ使っています。ですが、全部URL自体はexs-i.comで共通なんです。

このブログもそうです。

blog.leomiyanaga.comというサブドメインで運用していますが、leomiyanaga.comで運用中の本体はポートフォリオスタイルの写真特化型テーマで作っていますし、今はやめてしまいましたが、かつては作品販売用にshop.leomiyanaga.comもやっていました。 

そういう事情もある中で、ログイン画面で圧倒的なビジュアル的情報により差別化を計ることでどのWordpressにログインしようとしているのかが一目瞭然になる効果は”地味に”でかいんですよ。

これは最近ローンチした新規サイトですが、”姉妹サイト”で2つ同時に似たようなブログを立ち上げたため、ビジュアルで差別化するのはめっちゃブログ立っています。

なるほど、ほんなら1つのブログだけやってる人やったら「気分」だけの効果ってことか

その通りです

まとめ・総括

  • ログイン画面を変えるだけで上がる⤴︎⤴︎
  • 上がる要素は「継続」に効果あり
  • 複数サイト運営者にはどのサイトかわかるという効果も

以上、

そこまで難しくない作業でできる”地味な”カスタマイズについて紹介しました!

地味ですが、

恩恵大きい人にとっては結構大きい恩恵があるカスタマイズでもあるので、function.phpをいじる少し高レベルのカスタマイズですが、是非やってみて下さい!

この記事が気に入ったら
いいね!しよう

Leo Miyanagaを
Like
LikeLoveHahaWowSadAngry
このブログを書いてる人
Leo

コロナで色々バグった起業家😷
写真家/ブロガー/YouTuberなど色々やってます。愛機はα7III & RX100VII。
シアトル生まれ、大阪育ち→シアトルにも10年以上住んでましたが今は大阪ベース。
このブログではLeoの気になるコトや毎日の色んなコトを記録しています!
詳しいプロフィールはこちら

Leoをフォローする
Web・Wordpress WORK
LEO LOG

Comment 気軽にどうぞ!!

トップへ戻る
タイトルとURLをコピーしました