ワードプレスのログイン画面のロゴを変更する方法

WordPressのログイン画面はデフォルトでWordPressのロゴが表示されます。
サイト独自のロゴに変更することで、ブランディングやユーザー体験を向上させることができます。
この記事では、PHPとCSSを使ったワードプレスのログイン画面ロゴ変更の方法を紹介します。

1 ログイン画面のロゴとは？

WordPressのログイン画面には上部にWordPressのロゴが表示されます。
これを自分のサイト用のロゴに差し替えることで、ログイン画面からブランドを演出できます。

2 functions.phpにコードを追加

// ------------------------------
// ログイン画面のロゴを変更
// ------------------------------

// ログイン画面のロゴを直接指定
function my_custom_login_logo() { 
    echo '<style type="text/css">
    #login h1 a {
        /* ここにロゴの画像を指定 */
        background-image: url("https://example.com/wp-content/themes/child-theme/images/logo.png");
        background-size: contain;
        width: 320px;
        height: 100px;
        background-repeat: no-repeat;
        margin: 0 auto;
    }
    </style>';
}
add_action('login_enqueue_scripts', 'my_custom_login_logo');

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

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

2.1 ディレクトリ構造

3 完成イメージ

4 ポイント

• 子テーマの functions.php にコードを追加するだけで反映されます
• 子テーマを使用すると、テーマ更新時も設定が消えません
• 子テーマの中にchild-themeフォルダを作り、その中にimagesフォルダを作り、そこに画像を入れてください。

5 まとめ

PHPとCSSを追加するだけで、WordPressログイン画面のロゴを簡単に差し替えられます。
サイトのブランディングやユーザー体験を向上させたい場合に便利なカスタマイズです。