WordPressのログイン画面ロゴをサイトのロゴに変更する方法【Code Snippetsを使用】

WordPressのログイン画面には、初期状態ではWordPressのロゴが表示されています。

クライアントへWordPressの管理画面を納品する場合や、自社サイトを運営している場合、このロゴをサイトや会社のロゴへ変更しておくと、管理画面までブランドイメージを統一できます。

今回は、WordPressテーマのファイルを直接編集せず、無料プラグイン「Code Snippets」を使って、ログイン画面のWordPressロゴを「サイト基本情報」で設定したロゴへ変更する方法を紹介します。

Code Snippetsとは？

「Code Snippets」は、WordPressにPHPコードを追加・管理できるプラグインです。

通常、WordPressへ独自の機能を追加するときは、テーマの functions.php を編集する方法があります。しかし、テーマファイルを直接編集すると、テーマの更新によって変更内容が消えたり、記述ミスによってサイトへ影響が出たりする可能性があります。

Code Snippetsを使えば、追加したコードをWordPress管理画面から個別に管理し、必要に応じて有効化・無効化できます。WordPress.orgでも公開されており、管理画面の「プラグイン」からインストールできます。(WordPress)

今回のような小さなカスタマイズであれば、無料版で十分です。

今回行うこと

作業内容は次の4ステップです。

1. 「Code Snippets」をインストールする
2. 新しいPHPスニペットを作成する
3. ログイン画面変更用のコードを貼り付けて有効化する
4. 一度ログアウトし、ログイン画面を確認する

作業前に、WordPressの「外観 → カスタマイズ → サイト基本情報」で、使用したいサイトロゴが設定されていることを確認してください。

1．Code Snippetsをインストールする

WordPress管理画面へログインします。

左メニューから、

「プラグイン」→「新規プラグインを追加」

をクリックします。

プラグインの検索欄に、

Code Snippets

と入力してください。

検索結果に「Code Snippets」が表示されたら、

「今すぐインストール」→「有効化」

の順番でクリックします。

有効化すると、WordPress管理画面の左メニューに「Snippets」が追加されます。公式のインストール手順も、管理画面から検索・インストール・有効化する流れになっています。(WordPress)

2．新しいスニペットを作成する

管理画面左側の、

「Snippets」→「Add New」

をクリックします。

スニペットの名前は、管理しやすいように、

ログイン画面のロゴをサイトロゴに変更

などとしておくと分かりやすいでしょう。

コードの種類を選択できる場合は、PHPを選択します。

3．ログイン画面を変更するコードを貼り付ける

コード入力欄へ、以下のコードをコピーして貼り付けます。

/**
 * WordPressログイン画面のロゴを
 * 「外観 → カスタマイズ → サイト基本情報 → ロゴ」
 * で設定した画像に変更
 */
function crispa_custom_login_logo() {

    $custom_logo_id = get_theme_mod( 'custom_logo' );

    if ( ! $custom_logo_id ) {
        return;
    }

    $logo_url = wp_get_attachment_image_url( $custom_logo_id, 'full' );

    if ( ! $logo_url ) {
        return;
    }
    ?>
    <style>
        body.login div#login h1 a {
            background-image: url('<?php echo esc_url( $logo_url ); ?>');
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            width: 100%;
            height: 100px;
            margin-bottom: 25px;
        }
    </style>
    <?php
}
add_action( 'login_enqueue_scripts', 'crispa_custom_login_logo' );


/**
 * ロゴをクリックしたときのリンク先を
 * サイトのトップページへ変更
 */
function crispa_login_logo_url() {
    return home_url( '/' );
}
add_filter( 'login_headerurl', 'crispa_login_logo_url' );


/**
 * ロゴのリンクテキストをサイト名へ変更
 */
function crispa_login_logo_text() {
    return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'crispa_login_logo_text' );

WordPressには、ログイン画面へCSSなどを追加するための login_enqueue_scripts、ログインロゴのリンク先を変更する login_headerurl、ロゴのリンクテキストを変更する login_headertext といった仕組みが用意されています。今回のコードは、これらWordPress標準の仕組みを利用しています。(WordPress Developer Resources)

Code Snippets側の実行範囲を選択できる場合は、サイト全体で実行する設定にして、最後に**「保存して有効化」**をクリックします。

4．ログイン画面を確認する

コードを有効化したら、一度WordPressからログアウトします。

再度、

https://あなたのドメイン/wp-login.php

を開いてください。

これまで表示されていたWordPressの「W」ロゴが、「サイト基本情報」で設定したロゴへ変更されていれば成功です。

さらに、ロゴをクリックするとWordPress.orgではなく、自分のサイトのトップページへ移動するようになります。

ロゴが大きすぎる・小さすぎる場合

今回のコードでは、ロゴの表示エリアを次のように設定しています。

height: 100px;

横長の企業ロゴや店舗ロゴであれば、100px前後から調整すると使いやすいでしょう。

もう少し大きくしたい場合は、

height: 120px;

小さくしたい場合は、

height: 80px;

のように変更します。

また、

background-size: contain;

としているため、元画像の縦横比を維持した状態でロゴが表示されます。

この方法のメリット

特にWeb制作会社がクライアントへWordPressを納品する場合、ログイン画面まで整えておくことで、標準状態のWordPressよりも「その会社専用の管理画面」という印象を持たせやすくなります。

また、今回のコードは画像URLを直接指定していません。

WordPressの「サイト基本情報」で設定しているロゴを自動的に取得するため、将来ロゴを変更した場合も、基本的にはコードを書き直す必要がありません。

テーマの functions.php に直接コードを書き込まないため、テーマ変更やテーマアップデートの影響も受けにくく、保守管理の面でも扱いやすい方法です。

注意点

Code SnippetsへPHPコードを追加するときは、コピーしたコードを不用意に書き換えないようにしてください。

また、本番サイトで作業する場合は、万が一に備えてWordPress本体・データベースのバックアップを取得してから作業することをおすすめします。

ロゴが変更されない場合は、「外観 → カスタマイズ → サイト基本情報」にロゴが設定されているか、Code Snippetsでスニペットが「有効」になっているかを確認してください。

キャッシュ系プラグインを使用している場合は、キャッシュを削除してからログイン画面を再読み込みします。

まとめ

WordPressのログイン画面は、少し手を加えるだけでサイトや企業のブランドに合わせたデザインへ変更できます。

今回紹介したCode Snippetsを利用すれば、テーマファイルを直接編集することなく、管理画面から安全にカスタマイズを管理できます。

クライアントへWordPressサイトを納品するときは、公開ページだけでなく、ログイン画面や管理画面の細かな部分まで整えておくと、制作物全体の完成度を高めることができます。

---

ブログ公開時のSEO設定案

記事タイトル
WordPressのログイン画面ロゴを変更する方法｜Code Snippetsでサイトロゴを表示

SEOタイトル案
WordPressログイン画面のロゴを変更する方法【Code Snippets】

メタディスクリプション
WordPressのログイン画面に表示される標準ロゴを、自社やサイトのロゴへ変更する方法を解説。Code Snippetsを使い、functions.phpを直接編集せずに設定する手順を紹介します。

推奨スラッグ
wordpress-login-logo-change

アイキャッチ内の文字案
「WordPress ログイン画面のロゴを変更する方法」
サブコピー：「Code Snippetsでサイトロゴを表示」

先ほど作成した説明画像は、本文の**「今回行うこと」直後か、「1．Code Snippetsをインストールする」の直前**へ入れると、記事全体の流れを把握しやすくなります。

加えて、ブログ一覧やSNSシェアにも使いやすい横長のアイキャッチ画像も作ります。文字数を絞り、「WordPress」「ログイン画面」「ロゴ変更」が一目で分かる構成にします。

加えて、ブログ一覧やSNSシェアにも使いやすい横長のアイキャッチ画像も作ります。文字数を絞り、「WordPress」「ログイン画面」「ロゴ変更」が一目で分かる構成にします。

横長のブログ用アイキャッチ兼説明画像も作成しました。記事冒頭に置けば、内容と手順の全体像がひと目で伝わる構成です。

---