snow_monkey_prepend_main

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

  • ブックマーク
  • -
    コピー
snow_monkey_before_entry_content
snow_monkey_prepend_entry_content

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

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

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

ログイン画面に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を少々弄っても良いでしょう。

「あれ?この情報、古くない?」と思ったらご連絡ください。 snow_monkey_append_entry_content
snow_monkey_after_entry_content

HAPPY SNOW MONKEYの管理人情報

久野 晃司

Web制作系フリーランス。WordPressに関するお仕事や活動が多いです。

WordPressコア貢献者/テーマ開発者/プラグイン開発者/Meetupオーガナイザー/翻訳貢献者

snow_monkey_append_main