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

はじめに

「WordPressのログインページをクライアントのブランドカラーに合わせたい」「wp-login.phpのWordPressロゴを自社ロゴに変更したい」「ログイン後のリダイレクト先をダッシュボードではなく特定ページにしたい」——ログインページのカスタマイズはブランディングと使いやすさを両立します。

症状・原因

デフォルトのWordPressログインページはWordPressのロゴとスタイルが表示され、クライアントに納品するサイトではブランドイメージと合わないことがあります。login_enqueue_scriptsフックでCSSを追加し、専用フィルターでロゴやリンクを変更できます。

解決手順

ステップ1：ログインページのロゴをカスタマイズする

// functions.php: ログインロゴをカスタマイズ
add_action( 'login_enqueue_scripts', function() {
    $logo_url = get_theme_file_uri( 'assets/images/logo.png' );
    $logo_width  = 200;
    $logo_height = 80;
    ?>
    <style>
        #login h1 a {
            background-image: url('<?php echo esc_url( $logo_url ); ?>');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: <?php echo absint( $logo_width ); ?>px;
            height: <?php echo absint( $logo_height ); ?>px;
            display: block;
        }
    </style>
    <?php
} );

// ロゴのリンク先をサイトURLに変更（デフォルトはWordPress.org）
add_filter( 'login_headerurl', function() {
    return home_url();
} );

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

ステップ2：ログインページのデザインをCSSでカスタマイズする

// functions.php: ログインページ全体のスタイルを変更
add_action( 'login_enqueue_scripts', function() {
    ?>
    <style>
        /* 背景色を変更 */
        body.login {
            background-color: #1a1a2e;
            background-image: none;
        }

        /* ログインフォームのスタイル */
        #loginform,
        #lostpasswordform,
        #registerform {
            background: #ffffff;
            border-radius: 8px;
            padding: 30px 30px 20px;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
            border: none;
        }

        /* 入力フィールドのスタイル */
        #loginform input[type="text"],
        #loginform input[type="password"] {
            border-radius: 4px;
            border-color: #ddd;
            padding: 10px;
            font-size: 14px;
        }

        #loginform input[type="text"]:focus,
        #loginform input[type="password"]:focus {
            border-color: #0073aa;
            box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.2);
            outline: none;
        }

        /* ログインボタンのスタイル */
        #wp-submit {
            background: #0073aa;
            border-color: #0073aa;
            border-radius: 4px;
            padding: 10px 20px;
            font-size: 14px;
            font-weight: 600;
            text-transform: none;
            letter-spacing: 0;
            width: 100%;
            height: auto;
        }

        #wp-submit:hover {
            background: #005a87;
            border-color: #005a87;
        }

        /* リンクの色 */
        #nav a,
        #backtoblog a {
            color: #aaa;
        }

        #nav a:hover,
        #backtoblog a:hover {
            color: #fff;
        }
    </style>
    <?php
} );

ステップ3：ログインURLを変更してwp-login.phpを隠す

// functions.php: ログインURLを変更（WPS Hide Login プラグイン方式を自前実装）
// ※ プラグイン「WPS Hide Login」を使うほうが安全で推奨

// カスタムログインスラッグを定義（wp-config.phpで設定するのが推奨）
// define( 'CUSTOM_LOGIN_SLUG', 'my-secure-login' );

// .htaccessでwp-login.phpへの直接アクセスを制限（推奨）
/*
<Files "wp-login.php">
    Order Deny,Allow
    Deny from all
    Allow from 123.456.789.000  # 管理者IPのみ許可
</Files>
*/

// ログインページにカスタムメッセージを追加
add_filter( 'login_message', function( $message ) {
    if ( empty( $message ) ) {
        $message = '<p class="message">' . esc_html( get_bloginfo( 'name' ) ) . ' 管理画面</p>';
    }
    return $message;
} );

// ログインエラーメッセージを汎用化（ユーザー名/パスワードの判別を防ぐ）
add_filter( 'login_errors', function() {
    return 'ユーザー名またはパスワードが正しくありません。';
} );

ステップ4：ログイン後のリダイレクト先を変更する

// functions.php: ロール別にログイン後のリダイレクト先を変更
add_filter( 'login_redirect', function( $redirect_to, $request, $user ) {
    if ( ! ( $user instanceof WP_User ) ) {
        return $redirect_to;
    }

    // 管理者はダッシュボードへ
    if ( in_array( 'administrator', (array) $user->roles, true ) ) {
        return admin_url();
    }

    // 編集者は投稿一覧へ
    if ( in_array( 'editor', (array) $user->roles, true ) ) {
        return admin_url( 'edit.php' );
    }

    // 購読者・顧客はマイアカウントページへ
    if ( function_exists( 'wc_get_page_permalink' ) ) {
        return wc_get_page_permalink( 'myaccount' );
    }

    // その他はトップページへ
    return home_url();
}, 10, 3 );

// ログアウト後のリダイレクト先を変更
add_action( 'wp_logout', function() {
    wp_safe_redirect( home_url( '/login-page/' ) );
    exit;
} );

ステップ5：ログインページにカスタムフィールドを追加する

// functions.php: ログインフォームにhoneypotフィールドを追加（スパムbot対策）
add_action( 'login_form', function() {
    ?>
    <div style="display:none;" aria-hidden="true">
        <label for="website">ウェブサイト（入力しないでください）</label>
        <input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
    </div>
    <?php
} );

// honeypotフィールドが入力されていたらログインを拒否
add_filter( 'authenticate', function( $user, $username, $password ) {
    if ( ! empty( $_POST['website'] ) ) {
        return new WP_Error(
            'bot_detected',
            'ログインに失敗しました。'
        );
    }
    return $user;
}, 30, 3 );

注意事項

• login_enqueue_scriptsフック内で直接