WordPressのログイン画面ってデフォルトのままだとちょっと味気ないよね？
そうだね。人に見られることはないけど、せっかくだったら細かい部分もこだわりたいよね。
最近WordPressのログイン画面のロゴマークを自社のものに変更したいという依頼をよく受けます。
WordPressのログイン画面は他人に見られることはないですが、どうせならかっこよくカスタマイズしたですよね。
ということで今回はWordPressのログイン画面のロゴマークとリンク先の変更方法を紹介します。
①デフォルトの場合
WordPressのログイン画面はデフォルトだと下画像のようにWordPressのロゴマークに公式サイトへのリンクが付けられた状態です。
今回はこのロゴマークを自サイトのロゴに、リンクを自サイトのトップページURLに変更してみます。
②ロゴマークを変更する
ロゴマークを変更するにはfunctions.phpに以下のコードを追記します。
functions.phpファイルを変更する際はバックアップを取っておきましょう！
function login_logo_change() {
echo '<style type="text/css">
.login h1 a {
background-image:url('.get_bloginfo('template_directory').'/images/logo.png);
width:300px;
height:70px;
background-size:cover;
}
</style>';
}
add_action('login_head', 'login_logo');background-image: url()で自分のロゴマークを設置した場所を指定します。上記の場合テーマ内の「images」フォルダの中に「logo.png」というファイル名の画像を設置しているので、
background-image: url('.get_bloginfo('template_directory').'/images/logo.png)
となります。
次に画像のサイズを指定します。画像サイズは色々試して調整してみて下さい。ここで重要なのはロゴマークは背景画像として扱われるため、background-sizeを記述しておくことです。
実際にロゴマークを変更してみると・・・
うん！いいですね！
③リンク先を変更する
ロゴマークのリンク先を変更するにはfunctions.phpに以下のコードを追記します。
function custom_login_logo_url() {
return home_url();
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );return home_url()で自サイトのトップページへのURLを取得することが出来ます。
④まとめ
個人サイトでWordPressのログイン画面をカスタマイズすることはあまりないかもしれませんが、場合によっては（サイト制作依頼など）必要になると思います。
その際はぜひ参考にしてみて下さい。
参考にさせて頂いたサイト
https://tanweb.net/2019/04/16/26316/