WordPressのログインページをカスタマイズする方法のメモです。
ログインページをサイト専用にカスタマイズしておくと、目当てのサイトであることが視覚的に分かりやすくなります。
複数サイトを運用している・ログインする必要がある場合などは、ログイン情報入力前にぱっと見で何のサイトのログイン画面か判断できるのでメリットになると思います。
functions.php でスタイルを追加する
ログインページのデザインを変更したい場合、サイト側の設定とは別にスタイルの読み込みをする必要があります。
読み込ませたいスタイルを記述、もしくはログインページ用のCSSファイルをログインページが表示された時に読み込ませる、というコードを functions.php に記載します。基本の記述方法は以下の形です。
【関数内でスタイルを直接当てる場合】
function login_style_custom() {
echo '<style>
// ログインページで変更・追加したいスタイルを設定
</style>';
}
add_action('login_head', 'login_style_custom');【ログインページ用のCSSファイルを作成する場合】
function login_style_custom() {
echo '<link rel="stylesheet" href="'.get_template_directory_uri().'/css/admin_login.css" />';
}
add_action('login_head', 'login_style_custom');または、以下のコードでも可能です。
function my_admin_script() {
wp_enqueue_style('login-style', get_stylesheet_directory_uri() . '/assets/login_style.css');
}
add_action('login_enqueue_scripts', 'my_admin_script');ログインページのロゴ画像を変更
ログイン画面のデフォルトにはワードプレスのロゴ画像が表示され、「wordpress.org」へのリンクが設定されています。
ログインページのロゴは、「css の background」で設定されています。なので、このスタイルの画像を変えればOK。
デフォルトでは .login h1 a にロゴ画像を設定しているので、それを上書きします。
function login_logo_custom() {
echo '
<style type="text/css">
.login h1 a {
background: url('.get_template_directory_uri().'/img/login_ico.png) no-repeat;
background-size: contain;
}
</style>
';
}
add_action('login_head', 'login_logo_custom');ロゴ画像に付いてるリンク先を変更
ロゴについているリンク先を変更するには funtions.php に以下のようなコードを記述します。
function login_logo_link() {
return get_bloginfo('url');
}
add_filter('login_headerurl', 'login_logo_link');ここでは get_bloginfo('url') を使って、サイトアドレスに登録しているURLへリンクさせるように設定しています。
URLで設定することもできます。「return」の後に飛ばしたいURLを設定すればそのページにアクセスできるようになります。
function login_logo_link() {
return 'https://komaricote.com/wordpress/custom-login-page/';
}
add_filter('login_headerurl', 'login_logo_link');ログインページ全体のスタイルを変更
一箇所・二箇所だけではなく、いろいろな箇所を変更したい場合はログインページ用にCSSを作成する方がおすすめです。
ロゴの変更に加え、背景色とフォント、ログイン情報の入力フォームを変更した管理画面が以下のものです。
ログイン画面に表示されるコンテンツにどんなスタイルが当たっているかはデベロッパーツールから確認できます。どの要素にどういったスタイルが当たっているかを参考にしながら上書きします。
管理画面の <body> タグには login というクラスが設定されているので、以下のように指定して変更しています。
専用のCSSを作るならロゴの変更も、このファイルに記述すれば反映されます。
【変更例】
/* 背景とフォントの変更 */
body.login {
background: #f6f8f2;
font-family: 'custom_font', sans-serif;
}
/* WordPressロゴ部分の変更 */
.login h1 a {
background: url('ロゴ部分に使用したい画像のpath') no-repeat;
background-size: contain;
}
/* ログイン入力フォームの変更 */
.login form {
background: #a0d9b4;
border-radius: 10px;
}プラグインでログイン画面をカスタマイズ
ログインページをカスタマイズできるプラグインは多くあります。最新のWordPressバージョンに対応しているものも多く、公開前に変更を確認しながら簡単に設定できるものばかりです。
「custom login」カテゴリーのプラグイン – WordPress.org 日本語
日本語にも対応している人気のプラグインは、Custom Login Page Customizer です。
また、ログインを主要なSNSアカウントやGoogleアカウントで行うことができるようにするプラグインもあります。会員制のサイトやログインを簡潔にしたい時は検討してみてください。
