ログイン画面にCSSを読み込んでカスタマイズする

Snow Monkeyでなくても利用できるカスタマイズになりますが、お仕事でWordPressを活用したウェブサイトを制作する際によく行うカスタマイズになります。

ログイン画面にクライアントのロゴを入れてあげるだけでも喜んでいただけますし、何よりもそのウェブサイトに愛着を持ってもらえて、更新頻度などにも影響してくるかもしれませんよ？バカにできない小さなカスタマイズの１つです。

ぜひカスタマー・エクスペリエンスを向上させるためにも試してみてください。

ログイン画面にCSSファイルを読み込む

以下のソースコードを、My Snow Monkeyなどのプラグイン内のPHPファイルに記述することで、ログイン画面専用のCSSファイルを読み込むことができます。（login-style.cssを同じディレクトリに用意されている前提で書いてあります）

<?php
function login_customize_script() {
	wp_enqueue_style( 'login-customize-style', plugin_dir_url( __FILE__ ) . 'login-style.css' );
}
add_action( 'login_enqueue_scripts', 'login_customize_script' );

例）ロゴ画像を置き換えてみる

このようなCSSでロゴ画像を置き換えることができます。

.login h1 a {
  background: url("../images/logo.png");
  width: 320px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-bottom: 0;
}

プラグインのルートにimagesディレクトリがあり、その中にlogo.pngというロゴ画像が用意されている前提で書いています。他の設定については良しなに変更してみてください。

また、他にもCSSでカスタマイズできる部分は多岐にわたります。開発者ツールで必要な箇所を調べながらトライしてみてください。

DOMを少々変更したい場合には、上記読み込み部分にwp_enqueue_script()を追記して、JavaScriptファイルを読み混み、DOMを少々弄っても良いでしょう。