WordPressログイン画面の「ロゴ画像」「リンク先」「タイトル」「背景」を変更する方法

WordPressのログイン画面には、デフォルトだとWordPressのロゴが表示されますね。WordPressのロゴには、リンクがついていて、リンク先はwordpress.orgになっています。また、ロゴにマウスホバーすると、「Powered by WordPress」というタイトルが表示されます。

以前、ログイン画面のロゴを変更する方法やログイン画面をカスタマイズするプラグインを紹介しましたが、今回はもっと手軽にロゴ画像やリンク先、タイトルを変更する方法について紹介したいと思います。

ロゴ画像を変更する

まずはロゴ画像として利用する画像を用意しましょう。サイズは、84px × 84pxで作成するとちょうど収まります。ロゴ画像を用意したら、利用しているテーマディレクトリのimagesフォルダにアップロードしましょう。

そして、functions.phpに以下のようなコードを追加します。

function my_login_logo() { ?>
  <style>
    body.login div#login h1 a {
      background: url(<?php echo get_theme_file_uri('/images/login-logo.png'); ?>) no-repeat;
    }
  </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

4行目でimagesフォルダの中にあるlogin-logo.pngというファイルをロゴとして指定しています。ファイル名やディレクトリは適宜変更してください。

ロゴエリアのサイズを変更したい時は、widthとheightを追加して調整します。ユーザー名・パスワードの入力欄が320pxなので、横幅は320pxに合わせるときれいになります。

function my_login_logo() { ?>
  <style>
    body.login div#login h1 a {
      background: url(<?php echo get_theme_file_uri('/images/login-logo.png'); ?>) no-repeat;
      width: 320px;
      height: 80px;
    }
  </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

リンク先を変更する

ロゴのリンク先をwordpress.org以外に変更するには、functions.phpに以下のコードを追加します。

function my_login_logo_url() {
  return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

これで、ロゴのリンク先はあなたのWordPressサイトになります。

2行目のreturnで返す値を変更すれば、他のURLも指定できます。例えば、以下のようにリンク先をURLで指定することもできます。

function my_login_logo_url() {
  return 'https://www.google.co.jp';
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

上記の例では、リンク先にGoogleを指定しています。

タイトルを変更する

マウスホバーした時に表示されるテキスト(タイトル属性)を変更するには、例によってfunctions.phpに以下のコードを追加します。login_headertitleはWordPress5.2から非推奨になったので、5.2以上ではlogin_headertextを使いましょう。

WordPress5.2未満

function my_login_logo_url_title() {
  return get_bloginfo( 'name' );
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

WordPress5.2以上

function my_login_logo_url_title() {
  return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'my_login_logo_url_title' );

上記の場合はサイト名が入りますが、テキストを直接指定してもOKです。

function my_login_logo_url_title() {
  return 'Your Site Name and Info';
}
add_filter( 'login_headertext', 'my_login_logo_url_title' );

背景を変更する

背景を変更するには、以下のようなコードをfunctions.phpに追加します。ロゴ画像を変更した際と同じように、ログイン画面にCSSを追加します。

function my_login_bg() { ?>
  <style>
    body.login {
      background: url(<?php echo get_theme_file_uri('/images/login-bg.png'); ?>) no-repeat center center / cover;
    }
  </style>
<?php }
add_action('login_enqueue_scripts', 'my_login_bg');

上記の場合、login-bg.pngという背景画像が画面いっぱいに表示されます。

あとがき

割と手軽にロゴ画像・リンク先・タイトル・背景を変更することができますね。

ログイン画面にもこだわりたいという方は、ぜひ参考にしてください。