ロゴだけでも変更しとこ！WordPressのログイン画面を簡単カスタマイズ。

ログイン画面を独自デザインに！便利なプラグインも3つ紹介。

あなたが使っているWordPressのログイン画面、デフォルトのままでしょうか？
もしデフォルトのまま使っているなら、この機会にカスタマイズしてみましょう！

当然そのままでも支障のでるものではありませんが、複数人で使っている場合や
クライアント向けにCMSとしてWordPressを使用する場合、既定のロゴを変更したり
背景を変えたりと、少しデザインを変えるだけで意外と喜ばれるかもしれません。

こちらはカスタマイズされたログイン画面のサンプルです。
今回はこういったログイン画面を作る方法をご紹介していきます。
この程度であれば、あまり時間もかけずにデザイン変更できますよ！
後半に上記サンプル画面のデータも用意しておくので、
ぜひカスタマイズして使ってみてください。

自分でCSSやfunctions.phpを触ってカスタマイズする方法と、
プラグインを使ってサクッと簡単に変更する方法をご紹介します。

• 自分で独自にカスタマイズする場合。
• 簡単にカスタマイズ可能なプラグイン3つ。

自分で独自にカスタマイズする場合。

まずは自身でコードを編集してカスタマイズする方法を説明していきます。
なお直接wp-login.phpを触ってしまうと、WordPressのバージョンアップ時に
上書きされて元に戻ってしまいますので、functions.phpを編集します。
また原則的にコアファイルを直接触るのはよくありません。

ログイン画面で外部CSS/JSを読み込む

まずfunctions.phpに以下の記述を追加します。

// ログイン画面のカスタマイズ
function my_login_style() {
	wp_enqueue_style( 'custom-login', get_template_directory_uri() . '/css/login.css' );
	wp_enqueue_script( 'custom-login', get_template_directory_uri() . '/js/login.js' );
}
add_action( 'login_enqueue_scripts', 'my_login_style' );

別途ログイン画面用のCSS/JSを用意して読み込ませます。
既存のCSSに追記し読み込ませても構いません。
その場合既存のスタイルシートなどを指定してください。

またスクリプトを使用しない場合、login.jsの4行目は必要ありません。

ログイン画面のhead内でスタイル指定する

外部化せずhead内で指定する場合は以下の記述を加えます。

// ログイン画面のカスタマイズ
function my_login_style() { ?>
	<style type="text/css">
		/* ここでスタイル指定 */
	</style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_style' );

外部化したくない場合は直接スタイルを記述します。
同様にスクリプトもここで記述できます。

主なセレクタ一覧とデフォルト指定

主なセレクタ一覧

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

上記が使用されている主なセレクタの一覧です。
Firebugなどデバッグツールで確認しつつ、
デフォルトの指定を上書きしていきます。

デフォルト指定

.login h1 a {
	background-image: none, url("../images/wordpress-logo.svg?ver=20131107");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 84px auto;
	display: block;
	font-size: 20px;
	height: 84px;
	line-height: 1.3em;
	margin: 0 auto 25px;
	outline: 0 none;
	padding: 0;
	text-indent: -9999px;
	width: 84px;
}

ロゴ部分の場合、デフォルト指定では上記のようになっています。
※Ver.により若干異なります

body, html {
	background: #f1f1f1 none repeat scroll 0 0;
}

また背景のデフォルト指定は、上記だけです。

これらの指定を上書きすることで独自のデザインに変更できます。

ロゴのリンク先とtitleテキストを変更する

WordPressログイン画面のロゴには、リンクとtitleテキストが設定されています。
せっかくなので、これらもあわせて変更しておきましょう。

以下の2つの記述をfunctions.phpに追加します。

// ロゴのリンク先を指定
function my_login_logo_url() {
	return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );
// ロゴのtitleテキストを指定
function my_login_logo_tit() {
	return get_option( 'blogname' );
}
add_filter( 'login_headertitle', 'my_login_logo_tit' );

これでロゴのリンク先に、ブログのURL＜get_bloginfo( ‘url’ )＞が
titleテキストには、ブログ名＜get_option( ‘blogname’ )＞が設定されます。

ロゴはSVGにして使いまわそう！簡単スマホ対応。

簡単にカスタマイズ可能なプラグイン3つ。

直接コードを触るのは面倒、よく分からない、そんな方に。

ここでは代表的なプラグインを3つご紹介します。
これらを利用すれば直接コードを触らずとも、
誰にでも簡単にログイン画面をカスタマイズできます。
もちろんすべて無料で利用できます。

Custom Login Page Customizer

ロゴや背景、フォーム背景などをプレビューしながら簡単に変更できます。
https://ja.wordpress.org/plugins/login-customizer/

MS Custom Login

管理パネルからかなり細かい部分までカスタマイズできます。
https://ja.wordpress.org/plugins/ms-custom-login/

Custom Login

こちらも管理パネルから細かくデザイン設定できます。
https://ja.wordpress.org/plugins/bm-custom-login/

できるだけプラグインの利用は避けたいところですが、最低限の手間で変更したい場合、
今回ご紹介したようなプラグインでサクッと変更してしまいましょう！

まとめ

今回はWordPressのログイン画面を簡単にカスタマイズする方法をご紹介しました。
こういった管理画面系のデザインは、直接ユーザーの目に触れるわけではないため
どうしても優先度は低くなりますが、余裕があればぜひチャレンジしてみてください！
ではまた！

サンプル画面のデータ（CSS）：Download

参考／出典：Customizing the Login Form « WordPress Codex

実用的！自社メディア運用に役立つWordPressプラグイン18個。

こちらの記事もどうぞ

ABOUT ME

おむおデザイナー／編集Twitter:@BILLIONPLAN_JP

大阪在住WEBデザイナー。制作会社、EC業界でデザイナーをやった後に、ゲームアプリの世界へ。そんなにゲーム好きじゃないことに気づいてウェブに出戻り。その後ビリオンプラン立ち上げに参加。ご相談はこちらにお願いします。フェネック飼いたい。 →記事一覧

Recent Posts

• 2016.10.26EC楽天RMSのカスタマイズで使えるclass名の一覧。
• 2016.09.30WEBWordPressプラグイン利用で、オリジナルシェアボタンを簡単設置。
• 2016.08.10EC注目のキッズファッション！楽天の参考デザインまとめ、子供服サイト10選。
• 2016.07.15DESIGNロゴだけでも変更しとこ！WordPressのログイン画面を簡単カスタマイズ。

Tweet

メディア集客の大事なところ！記事下CTAのデザインを改善しよう。

新着記事を配信しています

FacebookやGoogle+で新着記事を配信しています。よろしければ「いいね！」や「フォロー」をお願いします。

Follow @BILLIONPLAN_JP

ビリオンプラン・ジャパン