add_action() と add_filter() でログイン画面のロゴとリンク先を変更【WordPress】

ログイン画面のロゴをカスタマイズ

ログイン画面のロゴを変更する手順

CSSファイルの用意

読み込まれるCSSファイルを用意します。
デフォルトのセレクタと同じ指定方法で上書きしています。数値は使用する画像サイズに合わせて変更してください。

css/login.css

.login h1 a {
  background: url("ロゴファイルのパス") no-repeat center / 100%;
  width: 120px;
  height: 50px;
}

ログイン画面でオリジナルのCSSを読み込む

functions.phpに処理内容を記述します。

functions.php

function og_login_css() {
  wp_enqueue_style( 'og_login', get_template_directory_uri() . '/css/login.css' );
}
add_action( 'login_head', 'og_login_css' );

1行目：link要素を書き出す関数を用意します。
2行目：wp_enqueue_style()を使うと安全にCSSを読み込めます。get_template_directory_uri()で適用中のテーマのフォルダを参照できます。
4行目：1行目の関数を実行するタイミングを指定しています。この場合、head要素の読み込み完了直前となります。

参考リンク
WordPress Codex – wp_enqueue_style()
WordPress Codex – get_template_directory_uri()
WordPress Codex – add_action()
WordPress Codex – アクションフック一覧

ログイン画面リンク先を変更

add_filter()を使うことでデフォルトのリンク先URLが出力される前にこれを変更できます。

functions.php

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

1行目：4行目のadd_filter()で実行される関数を用意します。
2行目：変更後のテキストを返り値とします。ここではトップページのURLを返り値としました。
4行目：フィルターフックlogin_headerurlにlogin_logo_link()をフックします。

参考リンク
WordPress Codex – home_url()
WorePress Codex – add_filter()
WordPress Codex – フィルターフック一覧

add_action() と add_filter() の違い

add_action()のアクションフックで指定されるのは「関数を実行するタイミング」となります。

対してadd_filter()のフィルターフックで指定されるものは「変更前のテキスト・データ等」となります。そのためadd_filter()にフックする関数ではreturnで値を返す（返り値・戻り値とも言います）必要があり、フィルターフックで指定されたものがその値に変更されます。