WordPressのログイン画面のカスタマイズは過去にもロゴを変更する方法など書いたことがありますが、いろいろ試していたらまた幾つか覚えておきたいことが出てきたりしたので、既出しているものも含めてWordPressのログイン画面をオリジナルにカスタマイズする方法をまとめました。

October 01, 2020 追記

ここで紹介している内容は、WordPress Ver 3.9.0で試したものになります。
内容によっては現バージョンでは非推奨のタグが使用されていたり、フック名が変更されている可能性がありますのでご注意ください。

June 25, 2013 追記

デフォルトのログイン画面

デフォルトのログイン画面イメージ

イメージはWordPressのデフォルトのログイン画面をキャプチャしたもので、これをfunctions.phpを使ってオリジナルのログイン画面にしていきます。

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

カスタマイズ後のログイン画面イメージ

イメージは簡単にですが実際にここでまとめているカスタマイズを実装してみたログイン画面をキャプチャしたものです。
functions.phpを使えばCSSを調整して好きな装飾を加えたりJavaScriptを使用することも可能なので、わざわざコアファイルをいじることをしなくてもこのようなオリジナルのログイン画面にすることができます。

任意のCSSやJavaScriptを使用する

見栄えを変更したり、ログイン画面にデフォルトにはない動きを付けたいという場合は、任意のCSSやJavaScriptを使用することができるのでそれを利用することで実装できます。
下記はそれぞれhead内に挿入する方法と外部ファイルとして読み込ませて使用する方法です。

head内に挿入

任意のCSSやJavaScriptをhead内に挿入する場合は、functions.phpに下記のように記述することで実装できます。

functions.php
function custom_login() {
  ?>
    <style>
      /* ここにスタイルを記述 */
    </style>
    <script>
      /* ここにスクリプトを記述 */
    </script>
  <?php
}
add_action( 'login_enqueue_scripts', 'custom_login' );

外部ファイルを読み込む

任意のCSSやJavaScriptを外部ファイルで読み込む場合は、functions.phpに下記のように記述することで実装できます。
CSSやJavaScriptの記述が長いときやjQueryを読み込ませたいときなどはこちらの方法を使用したほうが良いと思います。

パスについてはテーマ直下に/css/jsディレクトリがあり、その中にそれぞれファイルが格納されている想定のものになるので、その他のファイル配置の場合は自身の環境に合わせて変更してください。

functions.php
function custom_login() {
  $files = '
    <link rel="stylesheet" href=" ' . get_bloginfo( 'template_directory' ) . ' /css/login.css" />
    <script src="' . get_bloginfo( 'template_directory' ) . ' /js/jquery.js"></script>
    <script src="' . get_bloginfo( 'template_directory' ) . '/js/login.js"></script>
  ';
  echo $files;
}
add_action( 'login_enqueue_scripts', 'custom_login' );

CSSで見栄えなどを変更する

背景やロゴ画像の変更、ボタンのカラー変更、余計なものを非表示にしたいときなど、CSSを変更していくだけでもいろんな部分を自分好みに変更していくことができます。
詳しくは後述しますが、例えばロゴ画像を任意のものに変更したいときは.login #login h1 aのセレクタを、消去する方法が紹介されていることが多い「パスワードをお忘れですか ?」の部分は.login div#login p#navのセレクタをそれぞれ用いることでカスタマイズ可能です。

それぞれの要素にどんなクラスやスタイルが適応されているかは、Chromeのデベロッパーツールなどを使用することで容易に確認できます。
また、ログイン画面にどのようなidやclassが使われているかがCodexで以下のように一覧化されているので、こちらもいろいろ変更したい際に便利です。

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

背景を変更する

背景を任意のカラーに変更したいときは.loginというセレクタを用いて変更することができます。
例えば、今回実際にカスタマイズしてみたログイン画面のような背景画像を指定する場合は、functions.phpに下記のように記述します。

functions.php
function custom_login() {
?>
  <style>
    .login {
      background: url(<?php echo get_stylesheet_directory_uri(); ?>/images/bg_login.png) no-repeat center center;
      background-size: cover;
    }
  </style>
<?php
}
add_action( 'login_enqueue_scripts', 'custom_login' );
  • 上記はhead内に挿入する場合の記述方法です。
  • ファイル名やディレクトリなどは自身の環境に合わせて変更してください。

ロゴを変更する

ロゴを変更したイメージ

ロゴを任意のものに変更したいときは.login #login h1 aというセレクタを用いて変更することができ、functions.phpに下記のように記述します。

functions.php
function custom_login_logo() {
?>
  <style>
    .login #login h1 a {
      width: 300px;
      height: 39px;
      background: url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo_login.png) no-repeat 0 0;
    }
  </style>
<?php
}
add_action( 'login_enqueue_scripts', 'custom_login_logo' );
  • 上記はhead内に挿入する場合の記述方法です。
  • ファイル名・ディレクトリ名・widthheightの数値などは自身の環境に合わせて変更してください。

ロゴのリンク先を変更する

デフォルトのロゴ部分には「WordPress.org」へのリンクが設定されており、これを変更したい場合はfunctions.phpに下記のように記述します。

functions.php
function custom_login_logo_url() {
  return get_bloginfo( 'url' );}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

上記ではget_bloginfo( 'url' )を使用していますがURLで指定することもでき、その場合はハイライト部分の記述をreturn 'http://example.com/';と記述すればリンク先がhttp://example.com/に設定されます。

ロゴのtitle属性を変更する

デフォルトのロゴ部分には「Powered by WordPress」というtitle属性が設定されており、これを変更したい場合はfunctions.phpに下記のように記述します。

functions.php
function custom_login_logo_title() {
  return get_bloginfo( 'name' );}
add_filter( 'login_headertitle', 'custom_login_logo_title' );

上記ではget_bloginfo( 'name' )を使用していますが文字列で指定することもでき、その場合はハイライト部分の記述をreturn 'ここに文字列を指定する';のように記述します。

June 25, 2013 追記

ロゴのタイトル属性の利用はアクセシビリティの理由から推奨できないということで、login_headertitleでの指定はVer 5.2.0から非推奨となり、タイトルを変更したい場合は下記のようにlogin_headertextを使用するようになりました。

functions.php
function custom_login_logo_title() {
  return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'custom_login_logo_title' );

「ログイン状態を保存する」を初期状態で選択済みにする

「ログイン状態を保存する」部分のイメージ

デフォルトでは「ログイン状態を保存する」のチェックボックスは初期状態で未選択なのを初期状態で選択済みにする方法で、再度ログインが必要な際に毎回のようにチェックを入れているという人には地味に便利だと思います。

実装にはfunctions.phpに下記のように記述し、今回はhead内で使用する場合の方法になり、コードにもあるように予めjQueryを読み込ませてください。

functions.php
function login_checked_rememberme() {
?>
  <script src="<?php echo get_bloginfo('template_directory') ?>/js/jquery.js"></script>
  <script>
    $(document).ready(function() {
      $('#rememberme').prop( 'checked', true );
    });
  </script>
<?php }
add_action( 'login_enqueue_scripts', 'login_checked_rememberme' );

ログインエラー時のシェイクを止める

デフォルトではログインエラー時にエラー文が表示されるのに加えてフォーム部分がシェイクする動きを止める方法です。
実装にはfunctions.phpに下記のように記述します。

functions.php
function stop_login_error_shake() {
  remove_action( 'login_head', 'wp_shake_js', 12 );
}
add_action( 'login_head', 'stop_login_error_shake' );

ログインエラー時のエラー文を変更する

ログインエラー時のエラー文部分のイメージ

ログインエラー時にロゴとフォームの間に出力されるエラー文を任意の文章に変更する方法です。
実装にはfunctions.phpに下記のように記述します。

functions.php
add_filter( 'login_errors', create_function( '$a', "return '<strong>エラー:</strong> ログインできませんでした';" ) );

上記を記述してログインエラーをしてみると、デフォルトでは「無効なユーザー名です」や「ユーザー名 ○○○ のパスワードが間違っています」というような文言が出力される部分に赤字部分で指定した「エラー: ログインできませんでした」という文言が表示されるようになります。
また、上記コードでstrongを使用しているように、文章以外にもHTMLの記述やリンク設定を指定することもできます。

ちなみにエラー文そのものを表示させたくないというときは、functions.phpに下記のように記述することで実装できます。

functions.php
add_filter( 'login_errors', create_function( '$a', "return null;" ) );

上記を記述することでエラー文が表示されなくなるので、あとはCSSで.login #login_error { display: none; }と記述すれば周りの装飾も見えなくなって非表示にすることができます。
単純に非表示にするだけならこのCSSの記述だけでも良いような感じもしますが、CSSで非表示にしただけだとコードを見ればエラー文がわかってしまうので、今回はコードを見た場合でもエラー文がわからないようにこの方法で紹介しました。

入力欄のラベルを非表示にして、プレースホルダーを設定する

プレースホルダー設定時のイメージ

デフォルトで入力欄上にラベルとして表示されている「ユーザー名」や「パスワード」を非表示にする方法と、ラベルを非表示にするとそれぞれ何を入力する部分なのかわからなくなってしまうので、それぞれの入力欄にプレースホルダーを設定する方法です。

実装にはfunctions.phpに下記のように記述し、今回はhead内に挿入する場合の方法になり、コードにもあるように予めjQueryを読み込ませてください。

functions.php
function login_user_pass_placeholder() {
?>
  <script src="<?php echo get_bloginfo('template_directory') ?>/js/jquery.js"></script>
  <script>
    $(document).ready(function() {
      $('#loginform label[for="user_login"], #loginform label[for="user_pass"]').contents().filter(function() {
        return this.nodeType === 3;
      }).remove();

      $('#loginform input[type="text"]').attr('placeholder', 'Username');
      $('#loginform input[type="password"]').attr('placeholder', 'Password');
    });
  </script>
<?php
}
add_action( 'login_enqueue_scripts', 'login_user_pass_placeholder' );

上記は今回実際にカスタマイズしてみたログイン画面で使用しているもので、プレースホルダーとして表示されている「Username」と「Password」の文言を変更したいときはjQueryの.attr()を用いてる部分を任意で変更してください。
ちなみに、プレースホルダーのスタイルを調整したい場合はCSSで::-webkit-input-placeholder::-moz-placeholderなどで調整可能です。

「パスワードをお忘れですか ?」と「← ○○○ へ戻る」を非表示にする

「パスワードをお忘れですか ?」と「← ○○○ へ戻る」の表示イメージ

フォーラム等で質問されているのを見かけたことがある、フォーム下にある「パスワードをお忘れですか ?」と「← ○○○ へ戻る」を非表示にする方法です。

単純に非表示にしたいだけであればfunctions.phpに下記のように記述し、下記はhead内に挿入する場合の記述方法です。

functions.php
function login_nav_backtoblog_hide() {
?>
  <style>
    .login #nav,
    .login #backtoblog {
      display: none;
    }
  </style>
<?php
}
add_action( 'login_enqueue_scripts', 'login_nav_backtoblog_hide' );

それぞれ「パスワードをお忘れですか ?」が.login #nav、「← ○○○ へ戻る」が.login #backtoblogになっているので、それらをdisplay: none;で非表示にしています。

「パスワードをお忘れですか ?」と「← ○○○ へ戻る」を任意の文言に変更する

「パスワードをお忘れですか ?」と「← ○○○ へ戻る」の文言変更後の表示イメージ

冒頭で紹介した今回のカスタマイズを適用したイメージでは先ほど紹介した方法でこれらを非表示にしましたが、非表示にはせずに別の文言を表示させる方法です。

実装にはfunctions.phpに下記のように記述し、今回はhead内に挿入する場合の方法になり、コードにもあるように予めjQueryを読み込ませてください。

functions.php
function login_nav_backtoblog_change() {
?>
  <script src="<?php echo get_bloginfo('template_directory') ?>/js/jquery.js"></script>
  <script>
    $(document).ready(function() {
      $('#nav').html('<a href="http://example.com" title="Lorem ipsum">Lorem ipsum</a>');
      $('#backtoblog').html('<a href="http://example.com" title="foo bar baz">foo bar baz</a>');
    });
  </script>
<?php
}
add_action( 'login_enqueue_scripts', 'login_nav_backtoblog_change' );

無理矢理な感じの方法ですが、jQueryを使用してこれらのHTMLを任意のHTMLや文章に置き換えるというものになります。
海外のフォーラムでフィルターを用いて差し替える方法も見かけはしたのですが、変更できるのはテキストだけでtitle属性やリンク先までは変更できないものだったりしたので、自分は普段この場所を任意のものに変更したいときはこの方法を用いています。


以上、WordPressのログイン画面をオリジナルにカスタマイズする方法でした。
ここで紹介したようにfunctions.phpを使うだけでCSSやJavaScriptを好きに使えたり、やろうと思えば表示されているHTMLやテキストなども変更できるので、これらを用いれば自分好みにいろいろとカスタマイズすることができます。

たまにこういったログイン画面のカスタマイズをする際にwp-login.phpを変更するというものを見かけますが、このファイルをいじってしまうとアップデート時に戻ってしまいますし、そもそもコアファイル等はできるだけ手を加えないほうが良いので、ここで紹介した方法にあるようにfunctions.phpを用いてカスタマイズすることをおすすめします。

本エントリーを書くにあたって以下を非常に参考にさせてもらいました。