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

Filed under: css,functions.php — kdcs @ 20年4月22日 水曜日

WordPress 5.4のログイン画面では入力フォームに外枠線が入ったり、ログインエラー時のシェイクが従来のカスタマイズ(function.php)では制御できなくなっていたので修正。

シェイクはjavascriptではなくcssのanimationで実装されているのでfunction.php内に以下のcssを記述

body.login div#login #loginform.shake { animation: none;transform: none; }

従来の「ログインエラーのシェイクを止める」を削除

//ログインエラーのシェイクを止める -------------------------------------------------------
function stop_login_error_shake() {
	remove_action( 'login_head', 'wp_shake_js', 12 );
}
add_action( 'login_head', 'stop_login_error_shake' );

function.phpの管理画面用css

//ログイン画面のカスタマイズ -------------------------------------------------------------
    function my_custom_login() { ?>
    <style type="text/css">
    body.login div#login { background: #fff url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo_login.png) no-repeat left center; }
    body.login div#login { width:680px;padding:10px 0 0 0;margin:100px auto 0 auto;}
    body.login div#login { border:solid 1px #e4e4e4;border-radius: 10px;}
    body.login div#login h1 { display:none;}
    body.login div#login #loginform { width: 320px; margin:0; padding: 5px 10px 10px 10px;position:relative;left:330px;box-shadow:none;border: none;}
    body.login div#login #loginform.shake { animation: none;transform: none; }
    body.login div#login p#nav {margin: 0;}
    body.login div#login p#nav a,
    body.login div#login p#backtoblog a { display: none; }
    body.login div#login #login_error a { display:none; }
    body.login div#login p.message { margin-left: 8px; }
    body.login div#login_error { margin: 0 10px; padding: 5px 10px; text-align: center; border: 1px solid #dd3d36; box-shadow:none; }
    body.login .message { margin: 0 10px; padding: 5px 10px; text-align: center; border: 1px solid #2ea2cc; box-shadow:none; }

@media screen and (max-width:670px) {
    body.login div#login h1 { display:block;height: 160px; width:320px;background: url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo_login.png) no-repeat 0 0;}
    body.login div#login h1 a { display:none; }
    body.login div#login { width:320px;}
    body.login div#login { background-image:none; background-color: #fff; }
    body.login div#login #loginform { width:300px; padding: 5px 10px 10px 10px;position:relative;left:0px; box-shadow:none;}
 }
    </style>
    <?php }
    add_action( 'login_enqueue_scripts', 'my_custom_login' );

サイト内検索

カテゴリー

最近の投稿

« |WordPress 5.4のログイン画面カスタマイズ| »
↑上に戻る