ログイン画面を独自デザインにカスタマイズする方法｜WordPress

ログイン画面を独自デザインにカスタマイズ
標準のログイン画面のHTML

ログイン画面を独自デザインにカスタマイズ

方法はいくつかあると思いますが、

１．プラグインを入れる（MS Custom Login）

２．テーマのfunction.phpに追記する。

３．直接cssを編集する？

標準のログイン画面のHTML

こちらが標準のログイン画面のHTML。

<body class="login login-action-login wp-core-ui  locale-ja">
		<div id="login">
		<h1><a href="https://ja.wordpress.org/" title="Powered by WordPress" tabindex="-1">Powered by WordPress</a></h1>
<form name="loginform" id="loginform" action="http://linestamp.jp/wp/wp-login.php" method="post">
	<p>
		<label for="user_login">ユーザー名またはメールアドレス<br>
		<input type="text" name="log" id="user_login" class="input" value="" size="20"></label>
	</p>
	<p>
		<label for="user_pass">パスワード<br>
		<input type="password" name="pwd" id="user_pass" class="input" value="" size="20"></label>
	</p>
		<p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever"> ログイン状態を保存する</label></p>
	<p class="submit">
		<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="ログイン">
		<input type="hidden" name="redirect_to" value="http://linestamp.jp/wp/wp-admin/">
		<input type="hidden" name="testcookie" value="1">
	</p>
</form>
<p id="nav">
	<a href="http://linestamp.jp/wp/wp-login.php?action=lostpassword">パスワードをお忘れですか ?</a>
</p>
<script type="text/javascript">
function wp_attempt_focus(){
setTimeout( function(){ try{
d = document.getElementById('user_login');
d.focus();
d.select();
} catch(e){}
}, 200);
}
wp_attempt_focus();
if(typeof wpOnload=='function')wpOnload();
</script>
	<p id="backtoblog"><a href="http://linestamp.jp/">← ラインスタンプNavi.JP に戻る</a></p>	
	</div>
		<div class="clear"></div>
	</body>

２．はテーマを変えると消えそうな気がしたので却下、３．はコアファイルを触りそうな気がしたので却下、ということで１．のプラグインを探してみることに。

WP Admin UI Customize