Update!

WordPress: ログイン画面をカスタマイズする(子テーマ対応)

Web 案件を WordPress で納品する場合、ログイン画面をオリジナルのものにすれば格段に品質が向上します。
今回はログイン画面カスタマイズの基本であるロゴ画像や、ボタンのデザインを変更してみたいと思います。

目次

  • ログイン画面をカスタマイズする(子テーマ対応)
  • まとめ

WordPress: ログイン画面をカスタマイズする(子テーマ対応)

みなさんもご存知の WordPress デフォルトのログイン画面です。

ここからは https://xxx.com で運用されている WordPress に以下のような xxx という子テーマがあると仮定し説明します。(※印のファイルは今回使用するファイルです)

wordpress
├ wp-content
│   └ themes
│       └ xxx
│         ├ functions.php(※)
│         ├ screenshot.png
│         ├ style.css
│         ├ css
│         │ └ login.css(※)
│         └ img
│           └ login_logo.png(※ 320 x 320px の画像を推奨)
├ ...
├ ...
└ ...

functions.php

<?php

/*
* Add your own functions here. You can also copy some of the theme functions into this file.
* WordPress will use those functions instead of the original functions then.
*/

// スタイルシート読み込み
function my_login_style() {
//  親テーマの場合は以下を利用
//  wp_enqueue_style( 'custom-login', get_template_directory_uri() . '/css/login.css' );
 wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/css/login.css' );
}
add_action( 'login_enqueue_scripts', 'my_login_style' );

// ロゴのリンク
function my_login_logo_url() {
 return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

// ロゴの title
function my_login_logo_tit() {
 return get_option( 'blogname' );
}
add_filter( 'login_headertitle', 'my_login_logo_tit' );
[/code]

<h3>login.css</h3>

ログイン画面に関連するスタイルをすべて書き出しています。
必要に応じてスタイルを追加してください。

[code]
body.login div#login {}

body.login div#login h1 {}

body.login div#login h1 a {
    background-image: url('https://xxx.com/wp/wp-content/themes/xxx/img/login_logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 180px 180px;
    width: 180px;
}

body.login div#login_error,
body.login div#login .message,
body.login div#login .success {
    border-left: 4px solid #202020;
}

body.login div#login form#loginform,
body.login div#login form#lostpasswordform {
    padding: 26px 24px 36px;
    border-radius: 4px;
}

body.login div#login form#loginform p,
body.login div#login form#lostpasswordform p {}

body.login div#login form#loginform p label,
body.login div#login form#lostpasswordform p label {}

body.login div#login form#loginform input,
body.login div#login form#lostpasswordform input {}

body.login div#login form#loginform input#user_login,
body.login div#login form#lostpasswordform input#user_login {}

body.login div#login form#loginform input#user_pass,
body.login div#login form#lostpasswordform input#user_pass {}

body.login div#login form#loginform p.forgetmenot,
body.login div#login form#lostpasswordform p.forgetmenot {}

body.login div#login form#loginform p.forgetmenot input#rememberme,
body.login div#login form#lostpasswordform p.forgetmenot input#rememberme {}

body.login div#login form#loginform p.submit,
body.login div#login form#lostpasswordform p.submit {
    text-align: center;
}

body.login div#login form#loginform p.submit input#wp-submit,
body.login div#login form#lostpasswordform p.submit input#wp-submit {
    margin: 18px 0 0 !important;
    background-color: #202020;
    font-size: 15px;
    border: none;
    box-shadow: 1px 1px 2px #ccc;
    border-radius: 30px;
    padding: 6px 60px 8px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: auto;
    text-shadow: none;
    float: none !important;
}

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 div#login div.privacy-policy-page-link {
    margin: 4em 0 2em;
}

以下のようにログイン画面が変更されました。

まとめ

久しぶりに WordPress を触っていますが、基本構造はあまり変化ないにも関わらず、できることが増え、ユーザビリティが格段に良くなっていることにびっくりしました。

これまで WordPress のテーマファイルは自作していたのですが、なるべく工数をかけず優秀なテーマファイルを利用し、子テーマで運用するのも面白いと感じました。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents