WordPressのログイン画面カスタマイズ コピペで可

2018-12-27スタイリッシュ

 

 

今回はログイン画面のロゴと、ロゴのリンク先、ボタンの色をプラグインを使わずに変える方法を解説します。

 

はじめに

WordPressのログイン画面はいくつWordPressでサイトを構築しても同じものになりますよね。

特にいくつものサイトで投稿したり管理していて、複数のWordPressにログインする場合
どの画面も同じより、パッと見てわかる方が便利です。

 

現在、管理サイト4個と、記事投稿などでお邪魔するサイト4~5個で10近くのWordPressにログインするのですが、全部同じ画面なのです。

※ログイン入力エリアの下に出る「←サイト名XXXに戻る」で区別はつきます

 

せめて自分でカスタマイズできるサイトは変えよう!そうしよう!

 

色々、検索してプラグインを使う方法などもあったのですが、こんなつまらない事でプラグインを増やすのもイヤだ、、、、という事で、以下に決めました。

 

functions.phpに追記して、既存CSSを上書きする

 

 

参考にさせて頂いたのは こちら

CSS上書きの方法でも、たくさんのサイトで紹介されていますが、とてもわかりやすくて、丁寧な解説でわかりやすいです。

が、一番簡単な方法でサクっとコピペしていってもらえるように簡単に書きます。

 

注意点
今回の内容に限らず、テーマファイルの functions.php を触る場合は、使用中のテーマを更新した時にもカスタマイズコードは消えてしまいますので、子テーマに行う事!(子テーマがない場合は、作成するかバックアップを取っておく)更にテーマを変えた場合などにもすぐに使えるよう追記するコードはコピーしてテキスト保存しておくと便利です。
子テーマについては以下をご覧ください。

 

ロゴとログインボタンの色を変える

まずはロゴ。

デフォルト画面ではWordPressのロゴになっている部分を独自のロゴに変えます。

 

 

「外観」→「テーマの編集」 functions.phpファイルに以下を追記

/************************************************/
/*ログイン画面のロゴ変更とログインボタンの色変更*/
/************************************************/
function my_login_screen() { ?>
<style>
body.login div#login h1 a {
background-image: url("ロゴ画像のURL");
background-size: contain;
height: 60px;
width: 100%;
}
/*ボタンの色*/
body.login div#login form#loginform p.submit input#wp-submit {
background: #707070;
box-shadow: 0 1px 0 #e1e1e1;
text-shadow: none;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_screen' );

 

※画像URLと、ボタンの色はカスタマイズして下さい。

 画像URL フルパス
http://XXXX.com/images/logo.jpg

 

以上で以下のようになりました。

 

ロゴのリンク先を変える

デフォルトではワードプレスロゴの部分のリンクは「https://ja.wordpress.org/」になっていますので、これを自身のサイトに変更します。

「外観」→「テーマの編集」 functions.phpファイルに以下を追記
/******************************/
/*ログイン画面のリンク先 変更*/
/******************************/
function my_login_logo_url() { // リンク先変更
return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );function my_login_logo_url_title() { // タイトル変更
return 'サイト名';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );
※サイト名をカスタマイズして下さい。
ロゴのリンクが自身のサイトになり、ロゴにカーソルが乗るとサイト名が出ます。
以上で完了です。
  • WordPressランキング
  • にほんブログ村 IT技術ブログ Webサイト構築へ