閉じる

WordPressログイン画面をfunctions.phpでカスタマイズする方法：プラグインなしで編集する手順を解説

広告

WordPressを運用する上で、ログイン画面はサイト運営者や会員ユーザーが頻繁に目にする重要なインターフェースです。

デフォルトの状態ではWordPressのロゴやリンクが表示されていますが、これをオリジナルのデザインに変更することで、サイトのブランディングをより強固にできます。

2026年現在のWeb制作現場では、保守性の観点からプラグインを最小限に抑え、functions.phpを活用したカスタマイズが主流となっています。

この記事では、プラグインを使用せずにfunctions.phpへコードを追記するだけで、ログイン画面を自由自在に編集する具体的な手順を詳しく説明します。

目次 [ close ]
  1. functions.phpでログイン画面をカスタマイズするメリット
  2. カスタマイズを始める前の準備
  3. WordPressロゴをオリジナル画像に変更する
    1. ロゴ変更のためのコード記述
    2. ロゴのリンク先とタイトル属性を変更する
  4. ログイン画面全体のスタイルをカスタマイズする
    1. 背景とフォームのデザイン変更
  5. 特定の要素を非表示にする
    1. 不要なリンクや言語スイッチャーの削除
  6. セキュリティを強化するためのカスタマイズ
    1. エラーメッセージの抽象化
  7. カスタマイズ内容の比較まとめ
  8. よくあるトラブルと対処法
  9. まとめ

functions.phpでログイン画面をカスタマイズするメリット

ログイン画面のカスタマイズには、専用のプラグインを使用する方法と、テーマのfunctions.phpを編集する方法の2種類があります。

多くのプロフェッショナルが後者を選択する理由は、サイトのパフォーマンス低下を防ぎ、自由度の高いデザインを実現できるからです。

プラグインは手軽ですが、不要なスクリプトの読み込みが発生したり、他のプラグインとの競合リスクが生じたりすることがあります。

一方でfunctions.phpによるカスタマイズは、必要な機能だけをピンポイントで追加できるため、コードを軽量に保つことが可能です。

また、2026年のモダンな開発環境においては、コードベースでの管理がバージョン管理システム（Gitなど）との親和性も高く、チーム開発においても有利に働きます。

セキュリティ面においても、プラグインの脆弱性を気にする必要がなく、独自のフックを利用して堅牢なログイン画面を構築できます。

カスタマイズを始める前の準備

functions.phpはWordPressの動作を制御する非常に重要なファイルです。

編集を誤ると、サイト全体が表示されなくなる（真っ白になる）リスクがあるため、事前の準備が欠かせません。

まず、必ず子テーマを作成し、その中のfunctions.phpを編集するようにしてください。

親テーマを直接編集してしまうと、テーマのアップデート時にカスタマイズ内容がすべて上書きされて消えてしまいます。

また、万が一の事態に備えて、作業前には必ずデータベースとファイルのバックアップを取得しておきましょう。

FTPソフトやサーバーのファイルマネージャー、あるいはSSH接続を利用してファイルを編集できる環境を整えておくと安心です。

WordPressロゴをオリジナル画像に変更する

ログイン画面で最も目立つ要素は、画面中央に配置されたWordPressの「W」ロゴです。

このロゴをサイトロゴやクライアントのロゴに変更することで、ログイン時の体験が劇的に向上します。

ロゴ変更のためのコード記述

以下のコードを子テーマのfunctions.phpの末尾に追加してください。

PHP
/**
 * ログイン画面のロゴをカスタマイズする
 */
function my_login_logo() {
    ?>
    <style type="text/css">
        #login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/custom-logo.png);
            background-size: contain;
            width: 100%;
            height: 80px;
        }
    </style>
    <?php
}
add_action('login_enqueue_scripts', 'my_login_logo');

このコードでは、login_enqueue_scriptsというアクションフックを利用して、ログイン画面のヘッダーに独自のCSSを注入しています。

get_stylesheet_directory_uri()を使用することで、子テーマのディレクトリ内にある画像を正しく参照できます。

画像ファイルのパスや、ロゴの高さ（height）は、用意した画像に合わせて適宜調整してください。

ロゴのリンク先とタイトル属性を変更する

デフォルトでは、ロゴをクリックすると「WordPress.org」の公式サイトへ飛びます。

また、マウスを重ねたときに表示されるタイトルも「Powered by WordPress」となっています。

これらを自分のサイトのURLとサイト名に変更するには、以下のコードを追加します。

PHP
/**
 * ロゴのリンク先をサイトのトップページに変更する
 */
function my_login_logo_url() {
    return home_url();
}
add_filter('login_headerurl', 'my_login_logo_url');

/**
 * ロゴのタイトル属性（ツールチップ）をサイト名に変更する
 */
function my_login_logo_title() {
    return get_bloginfo('name');
}
add_filter('login_headertext', 'my_login_logo_title');

login_headerurlフィルターフックを使うことでリンク先をサイトのホームに、login_headertextでテキストをサイト名に書き換えています。

ログイン画面全体のスタイルをカスタマイズする

ロゴだけでなく、背景色やログインフォームの形状、ボタンの色なども自由に変更できます。

ブランドカラーに合わせたデザインにすることで、ユーザーに安心感を与えることができます。

背景とフォームのデザイン変更

以下のコードは、背景に画像を設定し、ログインボタンの色をカスタマイズする例です。

PHP
/**
 * ログイン画面全体のデザインをカスタマイズする
 */
function my_login_stylesheet() {
    ?>
    <style type="text/css">
        /* 背景の設定 */
        body.login {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            display: flex;
            align-items: center;
        }
        /* フォームのコンテナ */
        #login {
            padding: 0;
            margin: auto;
        }
        /* ログインフォーム本体 */
        .login form {
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            border: none;
        }
        /* ログインボタン */
        .login .button-primary {
            background: #cf2e2e !important;
            border-color: #cf2e2e !important;
            text-shadow: none !important;
            box-shadow: none !important;
            font-weight: bold;
        }
    </style>
    <?php
}
add_action('login_enqueue_scripts', 'my_login_stylesheet');

2026年のデザイントレンドを取り入れ、柔らかなグラデーションと角丸（border-radius）を適用しています。

!important宣言を適切に組み合わせて使用することで、WordPress標準のスタイルシートを確実に上書きできます。

特定の要素を非表示にする

ログイン画面をシンプルにするために、不要な要素を消去することも重要です。

例えば、「パスワードをお忘れですか？」というリンクや、サイトへ戻るリンク、さらには言語スイッチャーなどが対象になります。

不要なリンクや言語スイッチャーの削除

以下のコードを記述することで、画面下部のリンクや言語選択ボックスを非表示にできます。

PHP
/**
 * ログイン画面の不要な要素を非表示にする
 */
function my_login_clean_up() {
    ?>
    <style type="text/css">
        /* 「パスワードをお忘れですか？」と「サイトへ戻る」リンクを消す場合 */
        #nav, #backtoblog {
            display: none;
        }
        /* 言語スイッチャーを非表示にする */
        .language-switcher {
            display: none;
        }
    </style>
    <?php
}
add_action('login_enqueue_scripts', 'my_login_clean_up');

特定のユーザー層のみに利用を制限したい場合、このように視覚的なノイズを減らすアプローチは非常に有効です。

セキュリティを強化するためのカスタマイズ

ログイン画面のカスタマイズは見た目だけでなく、セキュリティ向上にも寄与します。

デフォルトのWordPressでは、ログインに失敗した際「ユーザー名が間違っています」や「パスワードが間違っています」といった具体的なエラーメッセージが表示されます。

これは、攻撃者に対して「ユーザー名が実在するかどうか」というヒントを与えてしまうことになります。

エラーメッセージの抽象化

以下のコードを追加して、エラーメッセージを一律の内容に変更しましょう。

PHP
/**
 * ログインエラーメッセージを汎用的なものに変更する
 */
function my_login_error_message() {
    return 'ログイン情報に誤りがあります。正しく入力してください。';
}
add_filter('login_errors', 'my_login_error_message');

このように設定することで、不正ログインを試みる第三者に推測の手がかりを与えないようにできます。

カスタマイズ内容の比較まとめ

ここまで紹介した主なカスタマイズ項目を一覧表にまとめました。

項目使用するフック期待される効果
ロゴ画像変更login_enqueue_scriptsブランディングの向上・信頼性アップ
ロゴリンク先変更login_headerurlユーザーの利便性向上
カラー・レイアウトlogin_enqueue_scriptsサイト全体のデザイン統一
エラーメッセージlogin_errorsセキュリティの強化（推測防止）
言語スイッチャー削除login_enqueue_scriptsログインUIのシンプル化

よくあるトラブルと対処法

functions.phpを編集した際に遭遇しやすい問題とその解決策について触れておきます。

もしコードを追記した直後にサイトが動かなくなった場合は、最後に記述したコードに記述ミス（セミコロンの忘れや括弧の閉じ忘れ）がないか確認してください。

特に?>の閉じタグの後に不要な改行やスペースが入っていると、エラーの原因となることがあります。

また、キャッシュプラグインやサーバー側のキャッシュ機能が有効になっていると、CSSの変更が反映されないことがあります。

その際は、ブラウザのシークレットモードを利用するか、キャッシュをクリアして確認してください。

最新のWordPressバージョン（2026年時点）では、コアの仕様変更により一部のセレクタ名が変わる可能性も否定できません。

もしスタイルが適用されない場合は、ブラウザの開発者ツール（F12キー）を使い、対象の要素のIDやクラス名を再確認してください。

まとめ

WordPressのログイン画面は、わずかなコードをfunctions.phpに追加するだけで、驚くほど高品質なオリジナルのデザインに生まれ変わります。

プラグインを使わない手法は、サイトの軽量化に繋がるだけでなく、将来的なバージョンアップに伴う不具合のリスクを低減させる賢い選択です。

ロゴの変更、URLの最適化、そしてセキュリティに配慮したエラーメッセージの設定は、サイト運営における「おもてなし」と「防衛」の第一歩と言えるでしょう。

今回紹介したコードをベースに、ご自身のサイトやクライアントの要望に合わせた最適なログイン画面を作り上げてください。

まずは小さなロゴの変更から始めて、徐々に全体のトーン＆マナーを整えていくことをおすすめします。

URLをコピーしました！