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

CATEGORY: WordPress

2014年6月28日

WordPress のログイン画面をカスタマイズする方法のメモ。「Codex: Customizing the Login Form」を参考にしたものです。

目次

デフォルトのログイン画面

wp_login_01

 

デフォルトのログイン画面のマークアップ（抜粋）

<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">Web Design Leaves</a></h1>
  
<form name="loginform" id="loginform" action="http://.....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://..../wp/wp-admin/" />
        <input type="hidden" name="testcookie" value="1" />
    </p>
</form>

    <p id="nav">
        <a href="http://....login.php?action=lostpassword" title="パスワード紛失取り扱い">パスワードをお忘れですか ?</a>
    </p>
        
    <p id="backtoblog">
        <a href="http://..../wp/" title="迷子になってしまいましたか ?">&larr; Web Design Leaves へ戻る</a>
    </p>  
</div>  
<div class="clear"></div>
</body>

ログイン画面をカスタマイズするには、それぞれの要素をより詳細度の高いセレクタを指定して CSS で設定（上書き）していくような感じ。

CSS を設定（上書き）するには「login_enqueue_scripts」フックを使って、CSS を head 内に挿入する。（head 内に挿入された埋め込み・エンベッデッド CSS は外部 CSS より優先度が高いのでそれを利用）。

「login_enqueue_scripts」フックは以下のように、functions.php に記述する。

function my_custom_login() { ?>
    <style type="text/css">
        /*  スタイルを設定  */
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_custom_login' );
&#91;/code&#93;

必要であれば JavaScript の記述も可能。

&#91;code&#93;
function my_custom_login() { ?>
    <style type="text/css">
        /*  スタイルを設定  */
    </style>
    <script>
        /* JavaScript を記述 */
    </script>
<?php }
add_action( 'login_enqueue_scripts', 'my_custom_login' );
&#91;/code&#93;

また、スタイルやスクリプトの記述量が多い場合は外部ファイルに記述して読み込ませると良いとのこと。以下は「style-login.css」と「style-login.js」という外部ファイルを読み込ませる例。（functions.php に記述）


&#91;code&#93;
function my_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_template_directory_uri() . '/style-login.css' );
    wp_enqueue_script( 'custom-login', get_template_directory_uri() . '/style-login.js' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );
&#91;/code&#93;


<h3>ログイン画面の要素（セレクタ）</h3>


ログイン画面の body 要素には「login」というクラスが付いていて、一番外側の div 要素は「login」という ID が付いている。  

<a  class="mpg" href="https://www.webdesignleaves.com/wp/wp-content/uploads/2014/06/wp_login_02.png"><img src="https://www.webdesignleaves.com/wp/wp-content/uploads/2014/06/wp_login_02.png" alt="wp_login_02" width="635" height="569" class="alignnone size-full wp-image-1006" /></a>


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




ログイン画面の設定に使われている CSS はおそらく以下のものだと思うがミニファイされているので Online CSS Unminifier 等で普通の形式に戻すか、または「wp-admin/css/login.css」を参考にすると良いと思う。（定かではない）




<link id="login-css" media="all" type="text/css" href="http://localhost/wp/wp-admin/css/login.min.css?ver=3.9.1" rel="stylesheet">




ロゴの変更


ログイン・ロゴを変更するには、以下の部分の CSS を変更する。


WordPress では h1 要素の中の a 要素の「background-image」を使ってロゴを表示している。




<h1><a href="http://wordpress.org/" title="Powered by WordPress">Your Site Name</a></h1>




ロゴの画像を用意して、使用しているテーマの「images」に配置し、以下の「site-login-logo.png」の部分をその画像のファイル名に書き換えて、functions.php に記述する。




function my_custom_login() { ?>
    <style type="text/css">
        body.login div#login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/site-login-logo.png);
            padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_custom_login' );
&#91;/code&#93;

ロゴとログインフォームのスペースは「padding-bottom」で調整する。

ロゴのサイズは WordPress の CSS では以下のように設定されているので 80 x 80 pixels 以下にするか、または必要に応じて「background-size」や「width」、「height」の値を設定する

&#91;code&#93;background-size: 80px 80px;&#91;/code&#93;
 
<h4>ロゴではなくテキストを表示</h4> 
 
 ロゴを表示している「.login h1 a」は以下のようなスタイルが設定されている。「text-indent: -9999px」によりテキストは飛ばされて見えないようになっている。
 


.login h1 a {
    background-image: url(../images/w-logo-blue.png?ver=20131202);
    background-image: none, url(../images/wordpress-logo.svg?ver=20131107);
    -webkit-background-size: 80px 80px;
    background-size: 80px 80px;
    background-position: center top;
    background-repeat: no-repeat;
    color: #999;
    height: 80px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3em;
    margin: 0 auto 25px;
    padding: 0;
    text-decoration: none;
    width: 80px;
    text-indent: -9999px;
    outline: 0;
    overflow: hidden;
    display: block;
}




テキストを表示するには、text-indent: を 0 にして、background-image を none にする。必要に応じて width や height を指定。


テキストを表示する例。




function my_custom_login() { ?>
    <style type="text/css">
        body.login div#login h1 a {
            background-image: none;
            text-indent: 0;
            padding-bottom: 10px;
            width: 200px;
            height: 30px;
            color: #915E4D;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_custom_login' );
&#91;/code&#93;
 
 
<h3>ロゴのリンク先と title 属性の変更</h3>

ロゴのリンク先はデフォルトでは WordPress のサイト（https://ja.wordpress.org/）になっているが、リンク先を自分のサイトにするには functions.php に以下のように記述。（login_headerurl フック）



function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );




ロゴの title 属性はデフォルトでは「Powered by WordPress」になっているが、これを変更するには functions.php に以下のように記述。（login_headertitle フック）




function my_login_logo_url_title() {
    return '設定したい title 属性の値';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );




「パスワードをお忘れですか ?」と「XXX へ戻る」のスタイルを変更


「パスワードをお忘れですか ?」のセレクタは「body.login div#login p#nav a」、

「XXX へ戻る」のセレクタは「body.login div#login p#backtoblog a」を使って設定








function my_custom_login() { ?>






ログイン画面の背景を設定

ログイン画面の背景を設定するには以下のようにセレクタ「body.login」を指定して設定。


以下は背景画像を指定する例。








function my_custom_login() { ?>






その他の要素の変更例

以下はフォーム（form#loginform）の背景色、ボーダーとログインボタン（input#wp-submit）を変更する例。（ロゴも変更）








function my_custom_login() { ?>