重要 2024年1月4日以降のドロップインのご利用につきまして

WordPressのログイン画面をカスタマイズする

こんにちは。スタッフのユースケです。

今日はWordPressのログイン画面に関するお話しです。

あんまりニーズは無いかもしれませんが、、、
WordPressのログイン画面、ここちょっと変えたいなんてこと、偶にありませんか?

例えば、ロゴ画像。
デフォルトはこんな感じですよね。
yoshida_login_logo

これをカスタマイズしていきます。

1.ロゴ画像を変更
デフォルトのロゴ画像は背景画像で出力されているので、この部分のcssを書き換えて画像を差し替えます。
具体的には、functions.php で「login_enqueue_scripts」アクションフックを利用して変更します。

function custom_login_logo() {
?>
<style type="text/css">
  #login h1 a {
    background: url('/*ロゴ画像のパス*/');
  }
</style>
<?php
}
add_action( 'login_enqueue_scripts', 'custom_login_logo' );

上記では直接cssを記載していますが、外部ファイルにして読み込む方法でもOKです。

2.ロゴのリンク先を変更
デフォルトのリンク先はWordPress公式サイトになっているので、これを変更します。
具体的には、functions.php で「login_headerurl」フィルターフックを利用して変更します。

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

3.ロゴのタイトル属性を変更
デフォルトのタイトル属性は「Powered by WordPress」となっているので、これを変更します。
具体的には、functions.php で「login_headertitle」フィルターフックを利用して変更します。

function custom_login_logo_title() {
  return get_option( 'blogname' );
}
add_filter( 'login_headertitle', 'custom_login_logo_title' );

ログインフォーム下部にある「パスワードをお忘れですか?」などの表示を消したい場合は、ブラウザのデベロッパーツールなどで該当箇所のクラスなどを調べ、CSSでdisplayをnoneにすればOKです。

その他にも変更したい点があれば、wp-login.php のコードを見て、フックが用意されていないか確認してみてください。
例えば、ログインに失敗した際のメッセージを変更したい場合は、「login_errors」フィルターフックを用いれば自由な出力に変更できます。

如何でしたでしょうか?
フックを使ってあなた好みにカスタマイズ!Part.2。

WordPressのカスタマイズをプラグインに頼らず行うときは、Codexを調べることも当然ですが、コアファイルの内容にも視野を広げると臨んだ形に変更できるかもしれませんよ?
コアファイルを眺めることは、WordPressの仕組みを理解することにもなり、一石二鳥です!
ぜひ幸せなカスタマイズライフをおくってください!