WordPressのログインページをカスタマイズする方法

はじめに

WordPressのデフォルトログインページはWordPressのロゴが表示されますが、企業サイトやクライアント向けサイトでは自社ロゴやブランドカラーに変更することが多いです。functions.php のフックで簡単にカスタマイズできます。

ロゴを変更する

// functions.php

// ログインページにカスタムCSSを追加
add_action('login_enqueue_scripts', function() {
    $logo_url = get_stylesheet_directory_uri() . '/images/login-logo.png';
    ?>
    <style>
    #login h1 a {
        background-image: url('<?php echo esc_url($logo_url); ?>');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 200px;
        height: 80px;
    }
    </style>
    <?php
});

// ロゴのリンク先をサイトトップに変更
add_filter('login_headerurl', function() {
    return home_url();
});

// ロゴのtitle属性をサイト名に変更
add_filter('login_headertext', function() {
    return get_bloginfo('name');
});

背景色・フォームデザインを変更する

add_action('login_enqueue_scripts', function() {
    ?>
    <style>
    body.login {
        background-color: #1a1a2e;  /* 背景色 */
    }
    #login {
        width: 360px;
    }
    #loginform {
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 4px 24px rgba(0,0,0,0.3);
        padding: 32px;
    }
    .login label {
        color: #1d2327;
        font-weight: 600;
    }
    #wp-submit {
        background: #0073aa;
        border-color: #0073aa;
        border-radius: 4px;
        width: 100%;
        padding: 10px;
        font-size: 15px;
    }
    #wp-submit:hover {
        background: #005a87;
    }
    </style>
    <?php
});

カスタムフィールドを追加する

// ログインフォームの下にメッセージを追加
add_filter('login_message', function($message) {
    $custom = '<p class="message">お困りの場合は管理者にご連絡ください。</p>';
    return $custom . $message;
});

ログインページにカスタムJavaScriptを追加

add_action('login_enqueue_scripts', function() {
    wp_enqueue_script(
        'custom-login',
        get_stylesheet_directory_uri() . '/js/login.js',
        [],
        filemtime(get_stylesheet_directory() . '/js/login.js'),
        true
    );
});

ログインページのURLをフッターから非表示

// ログインページのWordPressフッターリンクを削除
add_filter('login_footer', function() {
    // デフォルトのフッターを非表示にする場合はCSSで対応
});

// または管理画面のフッターを変更
add_filter('login_footer', function() { ?> <p>© <?php echo date('Y'); ?> 会社名. All rights reserved.</p> <?php });

プラグインでのカスタマイズ（コード不要）

# Custom Login Page Customizer をインストール
wp plugin install custom-login --activate
# 管理画面 → Custom Login → ビジュアルエディタで設定

注意事項

• カスタムCSSはテーマの functions.php ではなく、子テーマまたは mu-plugins に記述することを推奨します
• ログインページのカスタマイズはWordPressコアの更新で影響を受けることがあります
• セキュリティのためログインページのソースコードにWordPress特有の情報を露出させないように注意してください

まとめ

login_enqueue_scripts フックでCSSを追加し、login_headerurl / login_headertext フィルタでロゴを変更するだけで、ブランドに合ったログインページが実現できます。