2026年8月20日

WordPressのログインページのデザインを変更する方法

テーマ・デザイン

はじめに

WordPressのログインページは、ユーザーがサイトにアクセスする最初の画面であり、そのデザインはサイト全体の第一印象を左右します。そのため、ブランドイメージやコーポレートアイデンティティを反映させることが重要です。この記事では、WordPressのログインページをカスタマイズするための基本的な方法から高度な技術までを紹介します。

症状・背景

企業サイト: ロゴやカラーリングが統一されたデザインにしたい。
個人ブロガー: 自身のブログと同様のスタイルを持たせたい。
WordPressテーマ開発者: 新しいテーマで一貫性を確保するために、ログインページも同じデザインにする必要がある。
セキュリティ対策: デフォルトのログイン画面は攻撃者の標的になりやすい。そのため、独自のロゴや背景画像を使用してユーザーを混乱させる。

手順・設定方法

ステップ1: ロゴとヘッダー画像の追加

# カスタムロゴをwp-content/themes/yourtheme/imagesディレクトリにアップロードします。
cp /path/to/logo.png wp-content/themes/yourtheme/images/

# functions.phpに以下のコードを追加して、カスタムロゴを使用するように設定します。
add_filter('login_headertitle', 'custom_login_logo_title');
function custom_login_logo_title($title) {
    return '<span class="login-logo-text">' . get_bloginfo( 'name' ) . '</span>';
}

// ログインページのヘッダー画像をカスタマイズします。
add_action('login_head', 'my_custom_header');
function my_custom_header() { ?>
    <style type="text/css">
        body.login div#login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png);
            padding-bottom: 30px;
        }
    </style>
<?php }

// ロゴのサイズを指定します。
add_filter('login_logo_url', 'my_custom_login_logo');
function my_custom_login_logo() {
    return home_url();
}

// ヘッダー画像のサイズを調整します。
add_action( 'wp_enqueue_scripts', 'custom_wp_admin_css' );
function custom_wp_admin_css() {
	wp_enqueue_style(
		'my-custom-admin-style',
		get_stylesheet_directory_uri() . '/css/admin.css'
	);
}

ステップ2: ログインページの背景画像と色をカスタマイズ

# wp-content/themes/yourtheme/cssディレクトリにadmin.cssファイルを作成します。
add_action( 'wp_enqueue_scripts', 'custom_wp_admin_css' );
function custom_wp_admin_css() {
	wp_enqueue_style(
		'my-custom-admin-style',
		get_stylesheet_directory_uri() . '/css/admin.css'
	);
}

// admin.cssファイルには以下のようなスタイルを定義します。
body.login {
    background-image: url(/path/to/background.jpg) !important;
    background-repeat: no-repeat;
    background-position: center top;
}
body.login div#login h1 a {
    height: 0;
    padding-bottom: 35px;
    background-size: auto 298px;
}

ステップ3: ログインフォームの要素をカスタマイズ

// functions.phpに以下のコードを追加します。
function custom_login_stylesheet() {
	wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/css/login.css' );
}

add_action( 'login_enqueue_scripts', 'custom_login_stylesheet' );

// wp-content/themes/yourtheme/cssディレクトリにlogin.cssファイルを作成します。
body.login div#login form#wp-recaptcha > p {
    margin-bottom: 0;
}
body.login div#login h1 a {
    background-size: auto 298px !important;
}

ステップ4: ログインページのCSSをカスタマイズして、追加要素を含む

// functions.phpに以下のコードを追加します。
function custom_login_css() {
	?>
    <style type="text/css">
        .login h1 a { 
            background-image: url(<?php echo esc_url( home_url() ); ?>/wp-content/uploads/logo.png) !important; 
            height: 0;
            width: auto;
            padding-bottom: 35px;
            margin-bottom: 20px;
            display:block;
        }
        
        body.login div#login form#wp-recaptcha > p {
            margin-top: 1em;
        }

        .login form #user_login { 
            color: #fff; 
            font-size: 14px; 
            padding-left: 30px; 
            background-image: url(https://example.com/images/user.png);
        }
        
        .login form input[type="password"] {
            color: #fff;
            font-size: 14px;
            padding-left: 30px;
            background-image: url(https://example.com/images/passwd.png);
        }

    </style>
	<?php
}

add_action('login_enqueue_scripts', 'custom_login_css');

注意事項

バックアップ: ログインページのカスタマイズは重要なセキュリティ機能にも影響を与える可能性があるため、変更前に必ずサイトのバックアップを取ってください。
テスト: カスタムCSSやPHPコードを追加した後は、ログインページが正常に動作するか確認してください。必要であればブラウザのデベロッパーツールを使用して問題点を特定します。
セキュリティ上の注意: ログイン画面のカスタマイズにはセキュリティリスクも伴います。たとえば、カスタムログオーナーが不正アクセスに晒される可能性があります。そのようなリスクを低減するために、強力なパスワードや二段階認証などの追加セキュリティ設定を使用することをお勧めします。
パフォーマンス/運用上の注意: 複雑なカスタマイズはウェブサイトのロード時間に影響を与える可能性があります。CSSとJavaScriptファイルを圧縮し、キャッシュ機能を利用することでパフォーマンスを向上させることができます。

まとめ

1. 基本的な設定: ロゴや背景画像の追加から始めて、ログインページの基本的な外観をカスタマイズします。

2. 高度なカスタマイズ: JavaScriptを使用してより高度なインタラクティブ要素を追加することができます。

3. セキュリティ強化: ログインページは攻撃者の標的になりやすいので、独自のロゴや背景画像を使用してユーザーを混乱させるなどの方法で対策を取ります。

4. テストと確認: 変更後は必ずログインページが正常に動作するか確認します。必要であればブラウザのデベロッパーツールを使用して問題点を特定します。

5. パフォーマンス最適化: カスタムCSSやJavaScriptファイルの圧縮とキャッシュ機能の利用により、サイトのパフォーマンスを向上させることができます。

Post Views: 17