ログイン画面をカスタマイズ｜ Mana Design Lab.

WordPressのログイン画面をオリジナルにカスタマイズする方法まとめ。

任意のCSSやJavaScriptを使用する

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' );

function custom_login() {

$files = '<link rel="stylesheet" href=" ' . get_bloginfo( 'template_directory' ) . ' /css/login.css" />

echo $files;

}

add_action( 'login_enqueue_scripts', 'custom_login' );

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

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

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

背景を変更する

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' );

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' );

ロゴを変更する

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' );

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' );

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

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

function custom_login_logo_url() {

return get_bloginfo( 'url' );

}

add_filter( 'login_headerurl', 'custom_login_logo_url' );

ロゴのtitle属性を変更する

function custom_login_logo_title() {
  return get_bloginfo( 'name' );
}
add_filter( 'login_headertitle', 'custom_login_logo_title' );

function custom_login_logo_title() {

return get_bloginfo( 'name' );

}

add_filter( 'login_headertitle', 'custom_login_logo_title' );

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

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' );

function login_checked_rememberme() { ?>

$(document).ready(function(){

$('#rememberme').prop('checked', true);

});

</script>

<?php }

add_action( 'login_enqueue_scripts', 'login_checked_rememberme' );

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

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

function stop_login_error_shake() {

remove_action( 'login_head', 'wp_shake_js', 12 );

}

add_action( 'login_head', 'stop_login_error_shake' );

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

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

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

エラー文そのものを非表示にするなら

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

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

入力欄のラベルをプレースホルダーに置き換える

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' );

function login_user_pass_placeholder() { ?>

$(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' );

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

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

function login_nav_backtoblog_hide() { ?>

<style>

.login #nav,

.login #backtoblog {

display: none;

}

</style>

<?php }

add_action( 'login_enqueue_scripts', 'login_nav_backtoblog_hide' );

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

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' );

function login_nav_backtoblog_change() { ?>

$(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' );

任意のCSSやJavaScriptを使用する

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

背景を変更する

ロゴを変更する

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

ロゴのtitle属性を変更する

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

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

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

入力欄のラベルをプレースホルダーに置き換える

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

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

関連記事