WordPress小技集

WordPressのログイン画面は、初期状態だと「WordPressマーク」がそのまま表示される、どのサイトも同じ見た目になっています。自社サイトの管理画面なのに、これでは少し味気ないと感じたことはないでしょうか。

ログイン画面にロゴやブランドカラーを反映させておくと、次のようなメリットがあります。

• どのサイトの管理画面か一目で分かる(複数サイトを管理している場合に特に便利)
• 社内・取引先に見せたときの印象が良くなる
• 「きちんと作り込まれたサイトだ」という信頼感につながる

この記事では、プラグインを使う方法と、コードを書いて自分でカスタマイズする方法の両方を紹介します。

カスタマイズできる主な項目

ログイン画面でよく変更されるのは、次のような部分です。

方法1:プラグインを使う(おすすめ・初心者向け)

コードを書かずに手軽にカスタマイズしたい場合は、プラグインを使うのが安全で確実です。代表的なものに「Custom Login Page Customizer」があります。

手順の流れ

1. 管理画面の「プラグイン」→「新規追加」で該当プラグインを検索してインストール
2. 有効化すると管理画面のメニューに設定項目が追加される
3. ロゴ画像のアップロード、背景色、フォームの色などを画面上で設定
4. プレビューを見ながら調整して保存

管理画面の操作だけで完結するため、HTMLやCSSの知識がなくても扱えるのが利点です。ただし、プラグインが増えるとサイトの表示速度や管理の手間に影響することもあるため、他に使いたい機能がなければ「ログイン画面専用」にプラグインを1つ追加する形で問題ありません。

方法2:コードでカスタマイズする(自由度が高い)

デザインを細かく調整したい場合や、プラグインを増やしたくない場合は、テーマの functions.php に直接コードを追加する方法もあります。

ロゴ画像を変更する

function custom_login_logo() {
    echo '<style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(' . get_stylesheet_directory_uri() . '/images/custom-logo.png);
            height: 80px;
            width: 320px;
            background-size: contain;
            background-repeat: no-repeat;
            padding-bottom: 20px;
        }
    </style>';
}
add_action( 'login_enqueue_scripts', 'custom_login_logo' );

get_stylesheet_directory_uri() は使用中のテーマフォルダのURLを取得する関数です。画像パスは自社の環境に合わせて変更してください。

ロゴのリンク先を自社サイトに変更する

function custom_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

function custom_login_logo_url_title() {
    return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'custom_login_logo_url_title' );

これで、ロゴをクリックした際にWordPress公式サイトではなく自社トップページへ移動するようになります。

背景色を変更する

function custom_login_background() {
    echo '<style type="text/css">
        body.login {
            background-color: #f0f4f8;
        }
    </style>';
}
add_action( 'login_enqueue_scripts', 'custom_login_background' );

コードでの実装は、子テーマの functions.php に記述するのが基本です。親テーマに直接書き込むと、テーマのアップデート時に変更内容が消えてしまうため注意してください。

作業前に知っておきたい注意点

• 必ず子テーマで作業する:親テーマに直接コードを書くと、アップデートで上書きされて消えてしまいます。
• 編集前にバックアップを取る:functions.php の編集はミスがあるとサイト全体が真っ白になることがあるため、作業前のバックアップは必須です。
• 本番環境でいきなり編集しない:可能であればテスト環境で動作確認してから本番に反映しましょう。
• デザインの主張しすぎに注意:ログイン画面は社内・関係者しか見ない場所なので、視認性や使いやすさを優先したシンプルなデザインがおすすめです。

まとめ

ログイン画面のカスタマイズは、見た目の印象を整えるだけでなく「自社サイトを大切に運用している」という姿勢が伝わる部分でもあります。手軽に済ませたい場合はプラグイン、デザインにこだわりたい場合はコード編集と、目的に応じて使い分けてみてください。

「自分で編集するのは少し不安」「他のカスタマイズも含めてまとめて相談したい」という場合は、お気軽にお問い合わせください。