エグウェブ.JP@福岡/WEBセミナー・分析・WEBサイト制作

福岡でWEB分析・ホームページ・WEBサイト作成・WordPress、Googleアナリティクス、LINEスタンプ、Photshop・illustrator、Excelの講座やセミナーを開催

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

time 2017/12/22

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

1.プラグインを入れる(MS Custom Login)

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

3.直接cssを編集する?

 

こちらが標準のログイン画面の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>

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

 

WP Admin UI Customize

良さそうなプラグインがありました。

 

インストールするとメニューが追加されます。

 

つづく。

リンク

download

プロフィール

EGUWEB

EGUWEB

【皆さまの人生に最良のファーストステップを】WEBサイトを作りたい!WEB分析を学びたいけど分からない。とりあえず色々と知りたい!皆様の悩みを解決できるように頑張ります。 [詳細]

カテゴリー