WordPress管理者・運用する人のためのテーマカスタマイズTips【ログイン画面編】

 
WordPressのテーマ開発では、管理者や運用する人のために管理画面もカスタマイズすることができます。今回はWordPressのログイン画面のカスタマイズについて書いていこうと思います。
プラグインは未使用です。

ログイン画面にテーマ独自のスタイル/スクリプトを適用する

login_enqueue_scripts のアクションに、 wp_enqueue_style / wp_enqueue_script でCSS/JSを読み込む関数を追加します。


function attatch_login_stylesheet_and_script() {
  $stylesheet_url = get_template_directory_uri() . '/login.css';
  $script_url = get_template_directory_uri() . '/login.js';
  wp_enqueue_style('custom-login',  $stylesheet_url);
  wp_enqueue_script('custom-login', $script_url);
}
add_action('login_enqueue_scripts', 'attatch_login_stylesheet_and_script');

これによって./wp-content/themes/テーマ名/login.css / ./wp-content/themes/テーマ名/login.js が読み込まれます。

あとはログイン画面用のデザインや振る舞いを書くだけです。

ロゴ画像を変更する

管理画面のロゴを変更する場合は、先述した独自に適用したlogin.cssにCSSを記述します。
.login h1 abackground-image を上書きすることでオリジナルの画像にすることができます。
(変わらない場合は、DevToolsでロゴ画像のセレクタを確認するなどしてください。)


.login h1 a {
  background-image: url("images/logo.svg");
}

「ロゴ画像だけ変えたい!」という場合

上記のlogin.cssなどを追加したくないけど、ロゴ画像は変えたいという場合があるかと思います。
そのときは、以下のようにログイン画面に直接<style>を挿入する方法もあります。


function change_login_logo() { ?>

<?php }
add_action('login_enqueue_scripts', 'change_login_logo');

ロゴ画像部分のURL/title属性を変える

それぞれ login_headerurl / login_headertitle という関数のフィルターに関数を追加します。


/**
 * @return string $url: ロゴのリンク先
 */
function change_login_headerurl() {
  return home_url();
}
// フィルターに追加
add_filter('login_headerurl', 'change_login_headerurl');
 
/**
 * @return string $title: ロゴのtitle属性
 */
function change_login_headertitle() {
  return 'サイト名';
}
// フィルターに追加
add_filter('login_headertitle', 'change_login_headertitle');

さいごに

WordPressのテーマ開発は自由度が高すぎる結果、ググれば対応方法が沢山ヒットしちゃうので、運用や保守性の観点から最適解を考え抜くのが難しいですね…。
そんな記事を一つ増やしてしまったことに対しては、深くお詫び申し上げます。
覚え書きでも誰か(あるいは未来の自分)に役に立てればと思います。

  • BLOG
  • >
  • web
  • >
  • WordPress管理者・運用する人のためのテーマカスタマイズTips【ログイン画面編】