ワードプレスのログイン画面は、多くのサイトでデフォルトのまま使用されることが一般的です。
しかし、このログイン画面をオリジナルにカスタマイズすることには、意外にも大きなメリットが隠されています。
ログイン画面に、自分だけのロゴやサービスのロゴを設置したり、オリジナルのデザインを採用することで、サイト全体のブランドイメージを統一することができ、ユーザーに対してもプロフェッショナルな印象を強く与えることができます。
また、クライアントにとっては、他の多くのサイトとは一線を画する個性的なログイン画面が、ビジネスの独自性と信頼性を高める手段となります。
ログイン画面のカスタマイズは技術的にもそれほど高度ではないため、ちょっとした工夫でライバルに大きな差別化を図ることができます。
この記事では、そんなログイン画面のカスタマイズ方法を、functions.phpを用いて具体的にご紹介します。
ログイン画面のデフォルトの見た目
ワードプレスのログイン画面のデフォルトの見た目は、多くのユーザーにとっておなじみのものでしょう。
シンプルで使いやすく設計されているため、新しいユーザーでも迷うことなくログインすることが可能です。
デフォルトでは、ワードプレスのロゴが表示され、ユーザー名とパスワードを入力するフォームが配置されています。
背景は無地で、無駄な要素をなくしたシンプルなデザインとなっています。
このシンプルなデザインは非常に機能的ですが、ブランドの個性や特徴を表現する余地はほとんどありません。
しかし、意外にも個別・企業のブランドやウェブサイトのテーマに合わせたカスタマイズが必要とされる場面も多いです。
この記事では、ログイン画面のカスタマイズを実施する方法を紹介していきますので、デフォルトの見た目から一歩進めて、オリジナルのログイン画面を作り上げていきましょう。
ログイン画面のロゴを変更した完成イメージ
今回は、このようなワードプレスのログイン画面の完成形が以下になるように、コードを書いていきます。
また、今回のカスタマイズは、直接functions.phpにコードを記述してきます。
ログイン画面を編集するメリット
ログイン画面をオリジナルのデザインにカスタマイズすることで、サイトやブランドの特性を訪れるユーザーに明確に伝えることができます。
また、デフォルトのワードプレスログイン画面よりもオリジナルデザインを用いることで、セキュリティ面でのプラスの効果が働きます。
デフォルトのログイン画面を使っている場合、攻撃者に狙われやすくなるリスクが高まる可能性があります。
さらに、クライアントやスタッフがログインするたびに、ブランドのメッセージを感じ取ることができるのも重要な点です。
ログイン画面で読み込ませるCSSの2つの方法
functions.phpにCSSを直接書く
functions.phpファイルに直接CSSを書く方法は、短いコードの修正で十分な場合に非常に効率的な手段です。
この方法を採用すると、外部のCSSファイルを読み込む手間が不要となります。
具体的には、functions.phpにlogin_enqueue_scriptsをフックさせる形で、の中にCSSの追加や変更を直接記述していく形になります。
以下のようにして、簡単かつ迅速にログイン画面のスタイルを変更することが可能です。
function my_login_style() { ?>
<style type="text/css">
/* ここにCSSの記述 */
</style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_style' );外部CSSを読み込ませる
WordPressでログイン画面をカスタマイズする際、外部CSSを利用する方法も有効です。
特に、大規模なプロジェクトや複数のスタイルシートを管理する必要がある場合は、この方法がオススメです。。
具体的には、functions.phpに以下のようなコードを追加することで、外部のCSSファイルを読み込ませることができます。
/* ログイン画面に外部CSSを読み込む */
function my_login_style() {
wp_enqueue_style( 'my-login-css', get_stylesheet_directory_uri() . '/css/admin/my-login.css' );
}
add_action( 'login_enqueue_scripts', 'my_login_style' );このコードにより、css/adminフォルダ内のmy-login.cssという名前の外部CSSファイルがログイン画面で読み込まれます。
この外部CSSファイルにスタイリングを書くことで、ログイン画面の見た目を自由にカスタマイズできます。
この方法の利点は、CSSが外部ファイルに分けられているため、管理や編集がしやすくなる点です。
さらに、このCSSファイルは他のサイトでも再利用が可能です。
以上の手法を用いれば、外部CSSを読み込んでログイン画面をカスタマイズすることが簡単にでき、プロフェッショナルなカスタムログイン画面を効率よく実装することが可能です。
ログイン画面をカスタマイズ
ロゴを好みのものに変更する
WordPressのログイン画面で表示されるロゴはデフォルトでは、WordPressのマークが表示されます。
しかし、このロゴを自分のブランドやサイトに合ったオリジナルにに変更することで、訪問者するユーザーに対してプロフェッショナルな印象を与えることができます。
functions.phpに以下のコードを追加して、ロゴを変更することができます。
/* ログインのロゴを変更 */
.login #login h1 a {
width: 300px;
height: 98px;
background: url(<?php echo get_stylesheet_directory_uri();
?>/images/admin/my-logo.png) no-repeat 0 0;
}
このサンプルコードでは、ログイン用のロゴの画像ファイルをimages/admin/login-logo.pngとしています。
widthとheightでロゴの表示サイズを設定しています。backgroundプロパティでロゴの位置と表示方法を定義しています。
ご自身のロゴのサイズで、widthとheightは調整してください。
このような手法を用いることで、ログイン画面のロゴを自分好みに変更できます。
背景を変更を追加する
WordPressのログイン画面の背景もカスタマイズが可能です。
この方法を用いると、ブランドイメージをより強調することができます。
特に、シンプルな背景から独自のデザインに変更することで、訪問者に与える印象を大きく変えることができます。
functions.phpに追加するCSSの例は以下の通りです。
/* ログイン画面の背景を変更する */
.login {
background: url(<?php echo get_stylesheet_directory_uri();
?>/images/admin/admin-bg.png) no-repeat center;
background-size: cover;
position: relative;
z-index: 0;
overflow: hidden;
}
/*ログイン画面の背景に:beforeでオーバーレイを設定する*/
.login:before {
width: 100%;
height: 100%;
content: "";
background: rgb(255, 255, 255, 0.65);
z-index: -1;
position: absolute;
}このコードにより、images/adminディレクトリに保存されているadmin-bg.pngという名前の画像がログイン画面の背景に設定されます。
さらに、擬似要素:beforeでオーバーレイを設定することで、ロゴが見えやすくなるようにしました。
background-size: cover;により、背景画像が画面全体に広がります。
背景画像を使用しない場合、代わりに背景色を指定することも可能です。
その際は、擬似要素「.login:before」部分は削除してください。
ログインボタンの色を変更する
WordPressのログイン画面では、ボタンのデザインも自由にカスタマイズできます。特に、このボタンの色を自分のブランドカラーに合わせることで、訪問者に与える印象を一貫させることが可能です。
以下がfunctions.phpに追加するためのCSSサンプルコードです。
/*ログインボタンの色を変更する*/
.login #login .button-primary {
background: #FF9B50;
border: none;
box-shadow: none;
color: #fff;
text-decoration: none;
text-shadow: none;
}
/*ログインボタンの色を:hover時のスタイル*/
.login #login .button-primary:hover {
opacity: .8;
}このコードでは、.login #login .button-primaryというCSSセレクタを用いて、ログイン画面に表示される主要なボタンに対してスタイルを適用しています。
具体的には、background: #FF9B50;で背景色をオレンジ色にし、border: none;とbox-shadow: none;でボタンの枠線と影をそれぞれ消しています。
また、color: #fff;でボタン上のテキストの色を白にしています。
さらに、ボタンにマウスを乗せた際のスタイルも設定しています。
.login #login .button-primary:hoverというセレクタで、ボタンがホバーされたときの透明度をopacity: .8;として、少し暗くなるように設定しています。
これらの設定によって、ログインボタンも自分の好みやブランドに合ったデザインにカスタマイズできます。
ロゴのリンク先の変更
WordPressのログイン画面で表示されるロゴは、デフォルトではja.wordpress.orgへのリンクが設定されています。
しかし、このリンク先を自分のウェブサイトに変更することが可能です。
この部分を、自分のウェブサイトに変更することで、訪問者が間違って外部サイトに遷移するのを防ぐことができ、ワードプレス初心者にも優しい設定になります。
functions.phpに追加するPHPのサンプルコードは以下です。
// ロゴのリンク先を変更する
function my_login_logo_url() {
return home_url();
}
add_filter('login_headerurl', 'my_login_logo_url');ロゴのtitle属性を変更をする
WordPressのログイン画面に表示されるロゴには、デフォルトで「Powered by WordPress」のtitle属性が設定されています。
このテキストを独自のものに変更することで、訪問者に更なる情報を提供することが可能です。
// ロゴのtitle属性を変更する
function my_login_logo_url_title() {
return '独自のテキスト';
}
add_filter('login_headertext', 'my_login_logo_url_title');ログイン画面で使用されている主なCSSセレクタ
WordPressのログイン画面のカスタマイズは、特定のCSSセレクタを使って行われます。
これらのセレクタに適用するスタイルを指定することで、画面の見た目を自由に変更できます。
以下に、ログイン画面で主に使用されるCSSセレクタの一覧を示します。
/* 全画面背景のスタイリング */
body.login {}
/* ログインボックス全体の調整 */
body.login div#login {}
/* ログイン画面上部のタイトル領域 */
body.login div#login h1 {}
/* タイトルに表示されるロゴのスタイリング */
body.login div#login h1 a {}
/* フォーム要素全体に適用するスタイル */
body.login div#login form#loginform {}
/* フォーム内のテキストボックスとラベルを囲むp要素 */
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 {}
/* ログインボタンを包むp要素のスタイリング */
body.login div#login form#loginform p.submit {}
/* ログインボタン自体のスタイリング */
body.login div#login form#loginform p.submit input#wp-submit {}
/* 「パスワードを忘れた場合」テキストを囲むp要素 */
body.login div#login p#nav {}
/* 「パスワードを忘れた場合」のリンクテキスト */
body.login div#login p#nav a {}
/* 「サイトに戻る」テキストを囲むp要素 */
body.login div#login p#backtoblog {}
/* 「サイトに戻る」のリンクテキスト */
body.login div#login p#backtoblog a {}
以上が、WordPressのログイン画面でよく使用される主なCSSセレクタです。
このCSSセレクタ一覧を参照して、必要なスタイリングを行ってください。
まとめ
WordPressのログイン画面をカスタマイズすることは、ブランドイメージを高めるためだけでなく、ユーザー体験を向上させる点でも非常に効果的です。
ログイン画面のカスタマイズは、特にクライアントワークにおいても、細かい配慮が求められます。
各種デザインや機能の微調整は、クライアントやそのエンドユーザーへの優れたサービスを提供することができます。
また、独自のデザインや機能を採用することで、他のウェブデザイナーや開発者との差別化も図れます。
一つ一つのカスタマイズが積み重なることで、サイト全体の質が向上し、その結果、より多くのクライアントやユーザーに選ばれる確率が高くなります。
本記事では、ロゴや背景のカスタマイズから、ボタンのスタイル、リンク先の変更、さらにはtitle属性のカスタマイズまで、多角的な方法を詳しく説明しました。各セクションで示したサンプルコードは、functions.phpに追加することで容易に適用可能です。
これらのカスタマイズを通じて、訪問者に与える印象やサイトの信頼性が大きく向上するでしょう。
以上の方法を駆使して、他のWordPressサイトやウェブデザイナーと差をつけ、優れたログイン画面を作成してください。