WordPress ログイン画面をカスタマイズする

Posted on: 2011/10/18

WordPress ログイン画面をカスタマイズする

カスタマイズの方針

・ログイン画面のテンプレートとディフォルトのCSSはいじらない
・関数とCSSでカスタマイズする
・テーマフォルダ内で完結させる

1. 独自のスタイルシートを用意する

テーマフォルダ内に「login.css」というスタイルシートを用意します。
それを、ログイン画面で読み込む関数を、テーマフォルダ内の functions.php に記述します。

> functions.php

function login_css() {
	echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo("template_directory").'/login.css">';
}
add_action('login_head', 'login_css');

2. ログイン画面のマークアップ構造を把握する

ログイン画面で出力されるHTMLのマークアップ構造は、以下のようになっています。

<body class="login">

<div id="login">

	<h1><a href="http://wordpress.org/" title="Powered by WordPress">hijiriworld Web Creators</a></h1>
	
	<form name="loginform" id="loginform" action="http://localhost/xxxxxx/wp-login.php" method="post">
		<p>
			<label>ユーザー名<br />
			<input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" /></label>
		</p>
		<p>
			<label>パスワード<br />
			<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" /></label>
		</p>
		<p class="forgetmenot">
			<label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> ログイン情報を記憶</label>
		</p>
		<p class="submit">
			<input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="ログイン" tabindex="100" />
			<input type="hidden" name="redirect_to" value="http://localhost/xxxxxx/wp-admin/" />
			<input type="hidden" name="testcookie" value="1" />
		</p>
	</form>
	
	<p id="nav">
		<a href="http://localhost/xxxxxx/wp-login.php?action=lostpassword" title="パスワード紛失取り扱い">パスワードをお忘れですか ?</a>
	</p>
	
	<p id="backtoblog">
		<a href="http://xxxxxx/" title="迷子になってしまいましたか ?">&larr; WebCreators へ戻る</a>
	</p>

</div>

</body>

Firefoxのアドオン「Firebug」や、GoogleChromeのデベロッパーツールを使えば、マークアップ構造にどのようなCSSが適用されているかはすぐに分かると思います。

3. 独自のスタイルシートでCSSを上書きする

マークアップ構造とディフォルトのCSSを把握したところで、カスタマイズしたい部分のCSSを、独自のスタイルシートで上書きしていきます。

例）ログイン画面のロゴを変更

まず、オリジナルのロゴ画像（logo.png）を作成し、テーマフォルダ内の images フォルダに格納します。
そして、独自のスタイルシートにCSSを記述します。

> login.css

.login h1 a {
	background: url(../images/logo.png) no-repeat center center;
}

こうなります↓

同様の手順で、気が済むまでカスタマイズしましょう！

ログイン画面をカスタマイズした例

Universidad San Andres

大学のWebサイトにWordPressを導入しているようですね。
クライアントに納品する時には喜ばれそうです。

カスタマイズ方針について

なぜ、ログイン画面のテンプレートとディフォルトのCSSをいじらないのか？

ログイン画面のテンプレートは /wp-login.php、ディフォルトのCSSは、/wp-admin/css/login.css、使用されている画像は /wp-admin/images/ に、それぞれあります。

これらを直接編集すれば、当然カスタマイズは可能ですし、より自由なカスタマイズができるかもしれません。
しかし、この方法はおすすめしません。

wp-admin 以下は、WordPressのコアファイルなので、WordPress自体をバージョンアップしたら上書きされてしまうからです。

次回は「管理画面のカスタマイズ」です。

hijiriworld Web