Custom Login Page Customizer」は、WordPressのログイン画面を容易にカスタマイズできるプラグインです。
テーマ編集などで使用されるカスタマイザーのような形でログイン画面をオリジナルにカスタマイズでき、ロゴ画像や背景・文字のカラー変更はもちろん、ボタンや入力フィールドの見栄えなども変更することができます。

紹介している内容やキャプチャなどは、WordPress Ver 4.4.2で使用した際のものになります。

インストール・有効化

  1. 管理画面のプラグインから「Custom Login Page Customizer」を検索してインストール、もしくは「Custom Login Page Customizer」からファイルをダウンロードして環境にアップロード。
  2. プラグインを有効化すると「外観」に「Login Customizer」という項目が追加されます。
    ページが移動するとクレジットやサポートについての記載がされているページが表示されますが、そこにある「Start Customizing!」という赤いボタンからログイン画面のカスタマイズができるようになります。

「Custom Login Page Customizer」プラグインのカスタマイズ開始ボタンを示すイメージ

使い方

使い方はテーマを編集するときのように以下のようなカスタマイザー画面で実際の見栄えを確認しながらオリジナルにカスタマイズをすることができ、それぞれ英語で表示されてはいますがロゴ・背景色・ボタンなど各パーツを編集することができます。

「Custom Login Page Customizer」使用時のイメージ

特に分かりにくい部分もないのでちょっと見れば大体わかるとは思いますが、それぞれ以下のような箇所をカスタマイズできるようになっています。
ちなみに、項目一番下にある「Security」はPro版で使用できる機能になります。

Logo

デフォルトではWordPressのロゴが表示されていますが、それをオリジナルの画像に変更することができます。
また、その画像の幅と高さ、フォームエリアまでの距離(Padding Bottom)を指定できます。

Background

ログイン画面全体の背景について設定することができます。
背景色を指定するだけでなく、背景画像を指定したりbackground-sizeを指定することもできます。

From Background

フォーム部分の背景画像や背景色を指定することができます。

From Styling

フォーム部分の横幅・高さ・余白・外側に表示するボーダーをそれぞれ指定することができます。

Fields Styling

フォーム内にある入力フィールド周りを変更することができ、幅・マージン・背景色・フィールド内やラベル部分の文字カラーをそれぞれ指定することができます。

Button Styling

背景色やボーダーをはじめとするボタンのスタイリングができ、シャドウや文字カラーだけでなくホバー時のカラーについても指定することができます。

Other

「パスワードをお忘れですか?」などのテキストカラーとホバー時のカラーを指定することができます。
また、一番下の「Custom CSS」では上記で紹介してきた項目では用意されていない部分で更にスタイルを追加したい時にここを利用することで追加することができます。

Pro版で更に機能を追加

これまで紹介してきた機能については全てプラグインを有効化するだけで無料で実装可能ですが、このプラグインには有償にはなりますがPro版というのも用意されており、Pro版にすることでセキュリティを強化するような機能を追加させることができます。
具体的にはロボットからのアクセス禁止に役立つreCAPTCHA機能やログイン試行を何度もできないように制限したりといった機能を追加することができます。

正直、わざわざこれらを有償でやらなくても他のプラグインで同じようなことを無料で実装できてはしまうのですが、一応こういった機能もついているということでご紹介しました。


ログイン画面のカスタマイズは以前このブログでも「WordPress:ログイン画面をオリジナルにカスタマイズする方法」というエントリーで紹介しているように、ある程度CSSをいじったりできるのであれば特にプラグインを使わなくてもオリジナルデザインに容易にできはしますが、冒頭にもあるようにCSSをいじるのは苦手という人や管理画面から気軽に変更したいという人には、リアルタイムに変更されているのを確認することもできますし便利なプラグインだと思います。

プラグインに関しての詳細やダウンロードは以下よりどうぞ。