WordPressのログインページをカスタマイズする方法のメモです。
ログインページをサイト専用にカスタマイズしておくと、目当てのサイトであることが視覚的に分かりやすくなります。
複数サイトを運用している・ログインする必要がある場合などは、ログイン情報入力前にぱっと見で何のサイトのログイン画面か判断できるのでメリットになると思います。
PHP を使ってスタイルを追加する
ログインページのデザインを変更したい場合、サイトで設定しているものとは別にCSSやスタイルの読み込みをする必要があります。
読み込ませたいスタイルを記述、もしくはログインページ用の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');ログインページのロゴを変更
ログイン画面のデフォルトにはワードプレスのロゴ画像が表示され、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;
}
