ワードプレスのログイン画面をカスタマイズする方法【WordPress】

ワードプレスのログイン画面はカスマイズ出来ます！

デフォルトの画面ではワードプレスのロゴが表示されていますが、これを自分で用意した画像にしたり、リンク先を変更する事ができます。
functons.phpにちょこっと書き加えるだけで簡単にカスタマイズ出来るので、ちょっとしたサービスとしてクライアントさんに喜ばれるかもしれません。

また、不特定多数が使用する会員制の掲示板のログイン画面では、この方法でカスタマイズしておくと良いでしょう。

この記事の目次

  1. ロゴを変更する方法
  2. ロゴのリンク先を変更する方法
  3. 外部CSSを読み込む
  4. その他のカスタマイズ

これから紹介するコードは WordPress Codex (英語) で紹介されているものです。

ロゴを変更する方法

下記のコードを丸っとfunctions.phpにコピペします。
ログイン画面のワードプレスのロゴはloginというIDの下にあるh１内のaタグになっています。
background-imageでそのaタグの背景に、変更したい画像を指定しています。
大きさやpadding等も変更可能です。

function my_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a { 
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/site-login-logo.png);
height:65px;
width:320px;
background-size: 320px 65px;
background-repeat: no-repeat;
padding-bottom: 30px;
}
</style>
<?php } add_action( 'login_enqueue_scripts', 'my_login_logo' );

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

ロゴのリンク先はデフォルトでは https://ja.wordpress.org/ になっています。
このリンク先も変更するには下記のコードを先ほど追記したコードの下に書き足します。

2行目の home_url() でトップページにリンクするように指定しています。
6行目の Your Site Name and Info はaタグ内に入る文言です。実際には表示されませんが、サイトタイトル等を入れておくと良いと思います。

function my_login_logo_url() {
return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );
function my_login_logo_url_title() {
return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

外部CSSを読み込む

最初に内部CSSでロゴを指定しましたが、
これを外部ファイルにしたい場合は、最初のロゴを変更する方法で紹介したコードを下記のコードに変更します。

2行目で外部ファイル化したCSSファイルを読み込んでいます。
javascriptは無くても大丈夫です。

function my_login_stylesheet() {
wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style-login.css' );
wp_enqueue_script( 'custom-login', get_stylesheet_directory_uri() . '/style-login.js' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

その他のカスタマイズ

その他にも下記フォームボタンやパスワード再設定リンクの文字の色等も変更できます。
各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 {}

例

！importantの使用も推奨されています。

body.login div#login p#nav a,
body.login div#login p#backtoblog a { 
color: #0c0 !important; /* Your link color. */ 
}

© GOKAN DESIGN STUDIO