icon-webfonts-smartphone
そうだWEBフォント使おう！アイコンフォントとセットで簡単スマホ対応。
DESIGN
icons-free
クレジット・リンク不要／商用可／アプリOK！アイコンフリー素材まとめ【2015年4月版】
DESIGN
materials-cc-tips
そのクレジット表記で大丈夫？クリエイティブ・コモンズ（CC）画像の使い方。
DESIGN
site-rental-design-letote
デザインの参考に！海外ファッションレンタルサイトまとめ。
FASHION
hero-header-materials25
2015年もトレンド継続。ヒーローヘッダーの参考・素材25選。
DESIGN
wp-login-customize-sample
ロゴだけでも変更しとこ！WordPressのログイン画面を簡単カスタマイズ。
DESIGN

ロゴだけでも変更しとこ！WordPressのログイン画面を簡単カスタマイズ。

投稿日 by 444 shares

ロゴだけでも変更しとこ！WordPressのログイン画面を簡単カスタマイズ。

ログイン画面を独自デザインに！便利なプラグインも3つ紹介。

あなたが使っているWordPressのログイン画面、デフォルトのままでしょうか？
もしデフォルトのまま使っているなら、この機会にカスタマイズしてみましょう！

当然そのままでも支障のでるものではありませんが、複数人で使っている場合や
クライアント向けにCMSとしてWordPressを使用する場合、既定のロゴを変更したり
背景を変えたりと、少しデザインを変えるだけで意外と喜ばれるかもしれません。

こちらはカスタマイズされたログイン画面のサンプルです。
今回はこういったログイン画面を作る方法をご紹介していきます。
この程度であれば、あまり時間もかけずにデザイン変更できますよ！
後半に上記サンプル画面のデータも用意しておくので、
ぜひカスタマイズして使ってみてください。

自分でCSSやfunctions.phpを触ってカスタマイズする方法と、
プラグインを使ってサクッと簡単に変更する方法をご紹介します。

Sponsored Link

自分で独自にカスタマイズする場合。

まずは自身でコードを編集してカスタマイズする方法を説明していきます。
なお直接wp-login.phpを触ってしまうと、WordPressのバージョンアップ時に
上書きされて元に戻ってしまいますので、functions.phpを編集します。
また原則的にコアファイルを直接触るのはよくありません。

ログイン画面で外部CSS/JSを読み込む

まずfunctions.phpに以下の記述を追加します。

// ログイン画面のカスタマイズ
function my_login_style() {
	wp_enqueue_style( 'custom-login', get_template_directory_uri() . '/css/login.css' );
	wp_enqueue_script( 'custom-login', get_template_directory_uri() . '/js/login.js' );
}
add_action( 'login_enqueue_scripts', 'my_login_style' );

別途ログイン画面用のCSS/JSを用意して読み込ませます。
既存のCSSに追記し読み込ませても構いません。
その場合既存のスタイルシートなどを指定してください。

またスクリプトを使用しない場合、login.jsの4行目は必要ありません。

ログイン画面のhead内でスタイル指定する

外部化せずhead内で指定する場合は以下の記述を加えます。

// ログイン画面のカスタマイズ
function my_login_style() { ?>
	<style type="text/css">
		/* ここでスタイル指定 */
	</style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_style' );

外部化したくない場合は直接スタイルを記述します。
同様にスクリプトもここで記述できます。

主なセレクタ一覧とデフォルト指定

主なセレクタ一覧

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

上記が使用されている主なセレクタの一覧です。
Firebugなどデバッグツールで確認しつつ、
デフォルトの指定を上書きしていきます。

デフォルト指定

.login h1 a {
	background-image: none, url("../images/wordpress-logo.svg?ver=20131107");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 84px auto;
	display: block;
	font-size: 20px;
	height: 84px;
	line-height: 1.3em;
	margin: 0 auto 25px;
	outline: 0 none;
	padding: 0;
	text-indent: -9999px;
	width: 84px;
}

ロゴ部分の場合、デフォルト指定では上記のようになっています。
※Ver.により若干異なります

body, html {
	background: #f1f1f1 none repeat scroll 0 0;
}

また背景のデフォルト指定は、上記だけです。

これらの指定を上書きすることで独自のデザインに変更できます。

ロゴのリンク先とtitleテキストを変更する


WordPressログイン画面のロゴには、リンクとtitleテキストが設定されています。
せっかくなので、これらもあわせて変更しておきましょう。

以下の2つの記述をfunctions.phpに追加します。

// ロゴのリンク先を指定
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' );

これでロゴのリンク先に、ブログのURL＜get_bloginfo( ‘url’ )＞が
titleテキストには、ブログ名＜get_option( ‘blogname’ )＞が設定されます。

ロゴはSVGにして使いまわそう！簡単スマホ対応。

簡単にカスタマイズ可能なプラグイン3つ。

直接コードを触るのは面倒、よく分からない、そんな方に。

ここでは代表的なプラグインを3つご紹介します。
これらを利用すれば直接コードを触らずとも、
誰にでも簡単にログイン画面をカスタマイズできます。
もちろんすべて無料で利用できます。

Custom Login Page Customizer



ロゴや背景、フォーム背景などをプレビューしながら簡単に変更できます。
https://ja.wordpress.org/plugins/login-customizer/

MS Custom Login



管理パネルからかなり細かい部分までカスタマイズできます。
https://ja.wordpress.org/plugins/ms-custom-login/

Custom Login


こちらも管理パネルから細かくデザイン設定できます。
https://ja.wordpress.org/plugins/bm-custom-login/

できるだけプラグインの利用は避けたいところですが、最低限の手間で変更したい場合、
今回ご紹介したようなプラグインでサクッと変更してしまいましょう！

まとめ

今回はWordPressのログイン画面を簡単にカスタマイズする方法をご紹介しました。
こういった管理画面系のデザインは、直接ユーザーの目に触れるわけではないため
どうしても優先度は低くなりますが、余裕があればぜひチャレンジしてみてください！
ではまた！


サンプル画面のデータ（CSS）：Download

参考／出典：Customizing the Login Form « WordPress Codex

実用的！自社メディア運用に役立つWordPressプラグイン18個。

こちらの記事もどうぞ

ウェブ制作でお悩みの方へ。

BILLIONPLAN JAPAN Co, Ltd

ネット通販やウェブ制作、ECサポート事業を行っている（株）ビリオンプラン・ジャパンが運営しています。ランディングページやサイト制作、自社メディアを使った集客提案、中国をはじめとする海外ローカライズ作業など幅広く対応いたします。

ウェブ制作のお悩み、ご相談ください。

ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。

CONTACT
48時間以内に返信します

または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
 10:00 - 19:00（土日祝休み）

06-6271-7761

ABOUT ME

おむおデザイナー／編集Twitter:@BILLIONPLAN_JP
大阪在住WEBデザイナー。制作会社、EC業界でデザイナーをやった後に、ゲームアプリの世界へ。そんなにゲーム好きじゃないことに気づいてウェブに出戻り。その後ビリオンプラン立ち上げに参加。ご相談はこちらにお願いします。フェネック飼いたい。 →記事一覧
Sponsored Link

この記事に関連する記事

新着記事を配信しています

FacebookやGoogle+で新着記事を配信しています。よろしければ「いいね！」や「フォロー」をお願いします。

follow us in feedly
ビリオンプラン・ジャパン

DESIGNカテゴリの最新記事

wp-login-customize-sample
ロゴだけでも変更しとこ！WordPressのログイン画面を簡単カスタマイズ。
DESIGN
media-cta-design
メディア集客の大事なところ！記事下CTAのデザインを改善しよう。
DESIGN
hero-header-materials25
2015年もトレンド継続。ヒーローヘッダーの参考・素材25選。
DESIGN
materials-cc-tips
そのクレジット表記で大丈夫？クリエイティブ・コモンズ（CC）画像の使い方。
DESIGN
fm802-renewal5
FM802公式サイトがリニューアル！フラット＆ワイドな素敵デザインに。
DESIGN
icon-webfonts-smartphone
そうだWEBフォント使おう！アイコンフォントとセットで簡単スマホ対応。
DESIGN
svg-logo-smartphone-responsive
ロゴはSVGにして使いまわそう！簡単スマホ対応。
DESIGN
responsive-mockup-service-frame4
レスポンシブなモックアップ制作に！フリーなPSD素材・サービスまとめ。
DESIGN
404-error-pagedesign_e
個性的な404デザインまとめ！日本国内・海外のエラーページ48選。
DESIGN