デフォルトのログイン画面

上の画像はWordPressのデフォルトのログイン画面をキャプチャしたもので、これをfunctions.phpを使ってオリジナルのログイン画面にしていきます。

カスタマイズ後のログイン画面

上の画像は簡単にですが実際にここでまとめているカスタマイズを実装してみたログイン画面をキャプチャしたものです。
functions.phpを使えばCSSを調整して好きな装飾を加えたり、jQueryなどのJavaScriptを使用することも可能なので、わざわざコアファイルをいじることをしなくてもこのようなオリジナルのログイン画面にすることができます。

WordPress：ログイン画面をオリジナルにカスタマイズする方法

1. 任意のCSSやJavaScriptを使用する
   1. head内で使用
   2. 外部ファイルで使用
2. CSSで見栄えなどを変更する
3. 背景を変更する
4. ロゴを変更する
5. ロゴのリンク先を変更する
6. ロゴのtitle属性を変更する
7. 「ログイン状態を保存する」を初期状態で選択済みにする
8. ログインエラー時のシェイクを止める
9. ログインエラー時のエラー文を変更する
10. 入力欄のラベルを非表示にして、placeholderを設定する
11. 「パスワードをお忘れですか ?」と「← ○○○ へ戻る」を非表示にする
12. 「パスワードをお忘れですか ?」と「← ○○○ へ戻る」を任意の文言に変更する

1. 任意のCSSやJavaScriptを使用する

見栄えを変更したり、ログイン画面にデフォルトにはない動きを付けたいという場合は、任意のCSSやJavaScriptを使用することができるのでそれを利用することで実装できます。
以下はそれぞれhead内で使用する方法と外部ファイルとして読み込ませて使用する方法です。

1-1. head内で使用

任意のCSSやJavaScriptをhead内で使用する場合は、functions.phpに下記のように記述することで実装できます。

functions.php

function custom_login() { ?>
	<style>
		/* ここにスタイルを記述 */
	</style>
	<script>
		/* ここにスクリプトを記述 */
	</script>
<?php }
add_action( 'login_enqueue_scripts', 'custom_login' );

目次へ

1-2. 外部ファイルで使用

任意のCSSやJavaScriptを外部ファイルで使用する（読み込ませる）場合は、functions.phpに下記のように記述することで実装できます。
CSSやJavaScriptの記述が長い時やjQueryを読み込ませたいときなどはこちらの方法を使用したほうが良いと思います。

functions.php

function custom_login() {
	$files = '<link rel="stylesheet" href="'.get_bloginfo('template_directory').'/css/login.css" />
		  <script src="'.get_bloginfo('template_directory').'/js/jquery.js"></script>
		  <script src="'.get_bloginfo('template_directory').'/js/login.js"></script>';
	echo $files;
}
add_action( 'login_enqueue_scripts', 'custom_login' );

※ファイルの位置などは自身の環境に合わせて変更してください。

目次へ

2. CSSで見栄えなどを変更する

背景やロゴ画像の変更、ボタンのカラー変更、余計なものを非表示にしたい時など、CSSを変更していくだけでもいろんな部分を自分好みに変更していくことができます。
詳しくは後述しますが、例えばロゴ画像を任意のものに変更したい時は.login #login h1 aのセレクタを、消去する方法が紹介されていることが多い「パスワードをお忘れですか ?」の部分は.login div#login p#navのセレクタをそれぞれ用いることでカスタマイズ可能です。

それぞれの要素にどんなクラスやスタイルが適応されているかは、ChromeのデベロッパーツールやFirefoxのアドオン「Firebug」などのツールを使用することで容易に確認できます。
また、ログイン画面にどのようなIDやクラスが使われているかがCodexで以下のように一覧化されているので、こちらもいろいろ変更したい際に便利です。

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 {}

3.2 Styling Your Login – Customizing the Login Form « WordPress Codex

目次へ

3. 背景を変更する

背景を任意のカラーに変更したい時は.loginというセレクタを用いて変更することができます。
例えば、今回実際にカスタマイズしてみたログイン画面のような背景画像を指定する場合は、functions.phpに以下のように記述します。

※下記はheadで使用する場合の記述方法です。

functions.php

function custom_login() { ?>
	<style>
		.login {
			background: url(<?php echo get_stylesheet_directory_uri(); ?>/images/bg_login.png) no-repeat center center;
			background-size: cover;
		}
	</style>
<?php }
add_action( 'login_enqueue_scripts', 'custom_login' );

※ファイル名やディレクトリなどは自身の環境に合わせて変更してください。

目次へ

4. ロゴを変更する

ロゴを任意のものに変更したい時は.login #login h1 aというセレクタを用いて変更することができ、functions.phpに以下のように記述します。

※下記はheadで使用する場合の記述方法です。

functions.php

function custom_login_logo() { ?>
	<style>
		.login #login h1 a {
			width: 300px;
			height: 39px;
			background: url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo_login.png) no-repeat 0 0;
		}
	</style>
<?php }
add_action( 'login_enqueue_scripts', 'custom_login_logo' );

※ファイル名・ディレクトリ・widthとheightの数値などは自身の環境に合わせて変更してください。

目次へ

5. ロゴのリンク先を変更する

デフォルトのロゴ部分には「WordPress.org」へのリンクが設定されており、これを変更したい場合はfunctions.phpに以下のように記述します。

functions.php

function custom_login_logo_url() {
	return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

上記ではget_bloginfo( 'url' )を使用していますがURLで指定することもでき、その場合は赤字部分の記述をreturn 'http://example.com/';という感じで記述すれば、リンク先が「http://example.com/」に設定されます。

目次へ

6. ロゴのtitle属性を変更する

デフォルトのロゴ部分には「Powered by WordPress」というtitle属性が設定されており、これを変更したい場合はfunctions.phpに以下のように記述します。

functions.php

function custom_login_logo_title() {
	return get_option( 'blogname' );
}
add_filter( 'login_headertitle', 'custom_login_logo_title' );

上記ではget_option( 'blogname' )を使用していますが文字列で指定することもでき、その場合は赤字部分の記述をreturn 'ここに文字列を指定する';という感じで記述します。

目次へ

7. 「ログイン状態を保存する」を初期状態で選択済みにする

デフォルトでは「ログイン状態を保存する」のチェックボックスは初期状態で未選択ですが、これを初期状態で選択済みにする方法で、再度ログインが必要な際に毎回のようにチェックを入れているという人には地味に便利だと思います。
実装にはfunctions.phpに以下のように記述します。
今回はhead内で使用する場合の方法になり、ソースにもあるように予めjQueryを読み込ませてください。

functions.php

function login_checked_rememberme() { ?>
	<script src="<?php echo get_bloginfo('template_directory') ?>/js/jquery.js"></script>
	<script>
		$(document).ready(function(){
			$('#rememberme').prop('checked', true);
		});
	</script>
<?php }
add_action( 'login_enqueue_scripts', 'login_checked_rememberme' );

目次へ

8. ログインエラー時のシェイクを止める

デフォルトではログインエラー時にエラー文が表示されるのに加えてフォーム部分がシェイクする動きが実装されていますが、それを止める方法です。（正直あまり使うことはない気もしますがせっかく見かけたので…。）
実装にはfunctions.phpに以下のように記述します。

functions.php

function stop_login_error_shake() {
	remove_action( 'login_head', 'wp_shake_js', 12 );
}
add_action( 'login_head', 'stop_login_error_shake' );

目次へ

9. ログインエラー時のエラー文を変更する

ログインエラー時にロゴとフォームの間に出力されるエラー文を任意の文章に変更する方法です。
実装にはfunctions.phpに以下のように記述します。

functions.php

add_filter( 'login_errors', create_function('$a', "return '<strong>エラー:</strong> ログインできませんでした';") );

上記を記述してログインエラーをしてみると、デフォルトでは「無効なユーザー名です」や「ユーザー名 ○○○ のパスワードが間違っています」というような文言が出力される部分に赤字部分で指定した「エラー: ログインできませんでした」という文言が表示されるようになります。
また、上記ソースでstrongを使用しているように、文章以外にもHTMLの記述やリンク設定を指定することもできます。

ちなみにエラー文そのものを表示させたくないという時は、functions.phpに以下のように記述することで実装できます。

functions.php

add_filter( 'login_errors', create_function('$a', "return null;") );

上記を記述することでエラー文が表示されなくなるので、あとはCSSで.login #login_error { display: none; }と記述すれば周りの装飾も見えなくなって非表示にすることができます。
単純に非表示にするだけならこのCSSの記述だけでも良いような感じもしますが、CSSで非表示にしただけだとソースを見ればエラー文がわかってしまうので、今回はソースを見た場合でもエラー文がわからないようにこの方法で紹介しました。
（スマートな消去法を知っている方は是非教えてください）

目次へ

10. 入力欄のラベルを非表示にして、placeholderを設定する

デフォルトで入力欄上にラベルとして表示されている「ユーザー名」や「パスワード」を非表示にする方法と、ラベルを非表示にするとそれぞれ何を入力する部分なのかわからなくなってしまうので、それぞれの入力欄にplaceholderを設定する方法です。
実装にはfunctions.phpに以下のように記述します。
今回はhead内で使用する場合の方法になり、ソースにもあるように予めjQueryを読み込ませてください。

functions.php

function login_user_pass_placeholder() { ?>
	<script src="<?php echo get_bloginfo('template_directory') ?>/js/jquery.js"></script>
	<script>
		$(document).ready(function(){
			$('#loginform label[for="user_login"], #loginform label[for="user_pass"]').contents().filter(function() {
				return this.nodeType === 3;
			}).remove();
			
			$('#loginform input[type="text"]').attr('placeholder', 'Username');
			$('#loginform input[type="password"]').attr('placeholder', 'Password');
		});
	</script>
<?php }
add_action( 'login_enqueue_scripts', 'login_user_pass_placeholder' );

上記は今回実際にカスタマイズしてみたログイン画面で使用しているもので、placeholderとして表示されている「Username」と「Password」の文言を変更したい時は赤字部分を任意で変更してください。
ちなみに、placeholderのスタイルを調整したい場合はCSSで::-webkit-input-placeholderや::-moz-placeholderなどで調整可能です。

目次へ

11. 「パスワードをお忘れですか ?」と「← ○○○ へ戻る」を非表示にする

ファーラム等で質問されているのを見かけたことがある、フォーム下にある「パスワードをお忘れですか ?」と「← ○○○ へ戻る」を非表示にする方法です。
単純に非表示にしたいだけであれば、functions.phpに以下のように記述します。

※下記はheadで使用する場合の記述方法です。

functions.php

function login_nav_backtoblog_hide() { ?>
	<style>
		.login #nav,
		.login #backtoblog {
			display: none;
		}
	</style>
<?php }
add_action( 'login_enqueue_scripts', 'login_nav_backtoblog_hide' );

それぞれ「パスワードをお忘れですか ?」が.login #nav、「← ○○○ へ戻る」が.login #backtoblogになっているので、見ての通りそれらをdisplay: none;で非表示にしています。
（スマートな消去法を知っている方は是非教えてください）

目次へ

12. 「パスワードをお忘れですか ?」と「← ○○○ へ戻る」を任意の文言に変更する

今回カスタマイズした例では先ほど紹介した方法でこれらを非表示にしましたが、非表示にはせずに別の文言を表示させたいという時はfunctions.phpに以下のように記述することで実装することができます。
今回はhead内で使用する場合の方法になり、ソースにもあるように予めjQueryを読み込ませてください。

functions.php

function login_nav_backtoblog_change() { ?>
	<script src="<?php echo get_bloginfo('template_directory') ?>/js/jquery.js"></script>
	<script>
		$(document).ready(function(){
			$('#nav').html('<a href="http://example.com" title="Lorem ipsum">Lorem ipsum</a>');
			$('#backtoblog').html('<a href="http://example.com" title="foo bar baz">foo bar baz</a>');
		});
	</script>
<?php }
add_action( 'login_enqueue_scripts', 'login_nav_backtoblog_change' );

無理矢理な感じの方法ですが、jQueryを使用してこれらのHTMLを任意のHTMLや文章に置き換えるというものになります。
海外のフォーラムでフィルターを用いて差し替える方法も見かけはしたのですが、変更できるのはテキストだけでtitle属性やリンク先までは変更できないものだったりしたので、自分は普段この場所を任意のものに変更したい時はこの方法を用いています。
（スマートな実装方法を知っている方は是非教えてください）

目次へ