この記事にはプロモーションが含まれています。

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

2024-06-08

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

そんな中、

ケケンタ

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

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

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

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

を解説していきます！

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

＼Web制作を仕事にしたいなら／

こちらの記事で

Web制作コース独学プラン

についてご紹介しています。

Web制作を10万円以下で学べるオンライン型プログラミングスクール｜忍者CODE

まずは無料相談してみる >>

￣￣￣

「仕事が忙しい」、「すぐに欲しい商品がある」という方、必見のサービス

　Amazon Prime　

by Amazon

日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる

最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る　
※ご注文の時間帯やお住まいの地域によります。

Amazonプライムの無料体験は「何度でも」利用可能

Amazonプライムの無料体験を何度も利用する方法

Amazonのカート画面で表示される「Amazon Primeの無料体験の案内」をクリック
会員の自動更新を解除しておく＝期限が来たら自動解約
１～３ヶ月ぐらいするとAmazonのカート画面で再度無料体験の案内が表示される

商品をカートに入れ、カート画面に行ったときに「無料体験の案内」が表示されていれば
1ヶ月間の無料体験を受け取ることが可能です。

ケケンタ

僕自身、過去に少なくとも３回は無料体験を利用しています。

※条件は不明ですが、解約後に一定期間が経過すると、再び「Amazon Prime無料体験の案内」が表示され、再度利用することが可能です。

Amazonで買い物をする　>>

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

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

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

カスタマイズ用のCSSを自作する
WordPressに用意されているフィルターフックのひとつ「login_enqueue_scripts」を利用して自作したCSSを読み込ませる

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パターンあります。

login_enqueue_scriptsを利用してCSSを読み込ませる方法

functions.phpに直接CSSを記述する
CSSファイルを別に用意し、そのファイルをfunctions.phpで読み込ませる

【パターン①】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;

}