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

シェアしてね♪
Tweet

一式98,000円～の格安プランをご用意！Web制作お任せください！

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

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

ロゴ画像を変更する

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

※2014/11/25追記
WordPress4.xでは、84px*84pxがちょうどいいサイズになります。

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


function my_login_logo() { ?>
  <style type="text/css">
    body.login div#login h1 a {
      background: url(<?php echo get_template_directory_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 type="text/css">
    body.login div#login h1 a {
      background: url(<?php echo get_template_directory_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に以下のコードを追加します。


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

2行目の「Your Site Name and Info」の部分にテキストを入力します。

カスタマイズしたログイン画面

上記手順で、ロゴ画像・リンク先・タイトルを変更したログイン画面がこちら↓

このように、functions.phpを編集することで、手軽にロゴ画像・リンク先・タイトルを変更することができます。

あとがき

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

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