WordPressを使用しているとログイン画面を開く機会がちょこちょこあるかと思います。

そんな中、

ケケンタ

（見た目にちょっと飽きてきたな……）

このように感じたことはないでしょうか。

今回はそのような方のために

WordPressのログイン画面の見た目をCSSでカスタマイズする方法

を解説していきます！

WordPressのログイン画面を開く機会は多くても1日に１～２回程度かなと思いますが、実際にオリジナリティのある見た目にカスタマイズしてみるとモチベーションも上がるためオススメです。

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

ログイン画面の見た目をカスタマイズする仕組み

まずは簡単にWordPressのログイン画面の見た目をカスタマイズする仕組み（ポイント）についてお話をさせていただきます。

WordPressにはフィルターフックという概念が存在します。

これは簡単に言うと

ある表示内容を出力する際、その表示内容に変更を加えるためのもの

です。

そして、WordPressのログイン画面にCSSやJavaScriptを追加するためのフィルターフックとして「login_enqueue_scripts」というものがあります。

ケケンタ

今回の作業では、このlogin_enqueue_scriptsを利用して
① 自作したCSSをログイン画面に読み込ませる
② ログイン画面の見た目が変わる
という流れを踏みます！

フィルターフック「login_enqueue_scripts」を使用すれば、ログイン画面に簡単にCSSやJavaScriptを追加できる

ログイン画面のデザインを変える手順

それでは、上記の仕組みを踏まえた上で具体的な手順をご紹介します。

① ログイン画面に設定するCSSを用意する

CSSの例

/* 背景 */
body.login {
    background-color: #fff;
}

/* ロゴ */
body.login h1 a {
    width: 250px; /* サイズ調整用 */
    background: url('画像までのパス') no-repeat center center / contain;
}

/* フォームコンテナ */
body.login form {
    background-color: #efa336;
    border-radius: 15px;
    border: none;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3); /* 影を付けてそれっぽくしてみる */
}

/* フォームラベル */
body.login label {
    color: #fff;
}

/* ログインメッセージ全般 */
.login .message,
.login .notice,
.login .success {
    border-left: 4px solid #efa336 !important;
}

/* ログインボタン */
.wp-core-ui .button-primary {
    background-color: #fff !important;
    color: #efa336 !important;
    border-color: #efa336 !important;
}

.wp-core-ui .button-primary:hover {
    background-color: #efa336 !important;
    color: #fff !important;
    border-color: #fff !important;

}

ここで登場しているCSSクラス名についてはGoogle chromeの検証ツール（デベロッパーツール）で確認しました。
★ 「検証ツールの使い方」はこちらの記事で詳しく解説しています。

② フィルターフック「login_enqueue_scripts」を利用して①で用意したCSSをログイン画面に適用する

ここから登場するソースコードはfunctions.phpの末尾に追加して下さい。
また、その際は必ずバックアップをお取りいただき、自己責任のもとで作業を行ってください。

なお、functions.phpへのソースコードの追加方法がご不明な方はこちらの章をご覧ください。

ケケンタ

login_enqueue_scriptsを利用してCSSを読み込ませる方法は大きく2パターンあります。

【パターン①】functions.phpに直接CSSを記述する

// ログイン画面のカスタマイズ
function custom_login_style() { ?>
  <style>

    /* ここにCSSを記述 */

  </style>
<?php }
add_action( 'login_enqueue_scripts', 'custom_login_style' );

【パターン②】CSSファイルを別に用意し、そのファイルをfunctions.phpで読み込ませる

// ログイン画面のカスタマイズ
function custom_login_style() {
  /*
   * get_stylesheet_directory_uri()以降のパス部分には
   * テーマディレクトリを基準とした相対パスを記述する
   */
  wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/css/作成したCSSファイル名.css' );
}
add_action( 'login_enqueue_scripts', 'custom_login_style' );

【パターン②】の例は「…省略…/テーマディレクトリ/cssディレクトリ」の中に「作成したCSSファイル名.css」を配置した想定となっています。

①は手軽にでき、②は管理性に優れているというメリットがあります。
ご自身の好みや仕様に合わせて①、②のどちらを利用するかご検討ください。

ケケンタ

functions.phpなどの扱いに不慣れな方は、とりあえず①の方法をお選びいただくのが間違いないです！

実際にログイン画面のデザインを変えてみる

変更前

完成した見た目

以下、具体的に設定した各CSS

背景

/* 背景 */
body.login {
    background-color: #fff;
}

ロゴ

/* ロゴ */
body.login h1 a {
    width: 250px;
    /* サイズ調整用 */
    background: url('画像のパス') no-repeat center center / contain;
}

フォームエリア

/* フォームエリア */
body.login form {
    background-color: #efa336;
    border-radius: 15px;
    border: none;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3); /* 影を付けてそれっぽくしてみる */
}

フォームラベル

/* フォームラベル */
body.login label {
    color: #fff;
}

ログインメッセージ全般

/* ログインメッセージ全般 */
.login .message,
.login .notice,
.login .success {
    border-left: 4px solid #efa336 !important;
}

ログインボタン

/* ログインボタン */
.wp-core-ui .button-primary {
    background-color: #fff !important;
    color: #efa336 !important;
    border-color: #efa336 !important;
}

.wp-core-ui .button-primary:hover {
    background-color: #efa336 !important;
    color: #fff !important;
    border-color: #fff !important;

}

ケケンタ

ご覧のように自分の好きな見た目に変更することができました！

SWELLの子テーマのfunctions.phpにソースコードを追加する方法

まずは管理画面の「外観」→「テーマファイルエディタ」をクリックします。

すると以下のような画面が表示されるので、右側にある「Theme Functions（functions.php）」をクリックします。

このとき、念のため右上の「編集するテーマを選択」が「SWELL CHILD」になっていることをご確認下さい。
※もしなっていなければ、「SWELL CHILD」を選び、「選択」ボタンをクリックして下さい。

続いて、エディタの末尾にソースコードを追加します。

ケケンタ

ソースコードを追加したら、最後に画面左下の「ファイルを更新」をクリックして完了です。

まとめ

いかがだったでしょうか。

やり方さえわかってしまえば、WordPressログイン画面の見た目をカスタマイズすることは意外と簡単に可能です。

（CSSの知識は必要になってしまいますが……）

ケケンタ

このように自分好みの見た目にカスタマイズできるとモチベーションも上がりますし、複数人で使用する事情から見た目を変えたいといったときにも今回の方法で実装ができます。

この記事が少しでもお役に立ったなら何よりです。

当ブログではWordPressやPHP、Web制作に関するお役立ち情報を発信しています。

ご興味のある方はぜひ他の記事もご覧いただけると嬉しいです。

それでは、最後までご覧いただきありがとうございました！