フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【WordPress】管理画面ログインページのロゴを変更する方法

WordPress
ログインページ
ロゴ変更

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

WordPressの管理画面ログインページを開くとデフォルトでWordPressのロゴが表示されています。
実はこのロゴ、簡単に変更することが可能です。
今回の記事はこの管理画面ログインページのWordPressのロゴを任意のロゴ画像に変更する方法をご紹介します。

管理画面ログインページのロゴを変更

WordPressの管理画面ログインページのロゴを任意のロゴ画像に変更するには以下の関数を使用テーマのfunctions.phpに記述します。

function my_login_logo() {
  echo '<style type="text/css">.login h1 a {background-image: url( ' . get_template_directory_uri() . '/assets/images/login-logo.png );width:●●px;height:●●px;background-size:●●px ●●px;}</style>';
}
add_action('login_head', 'my_login_logo');

表示する画像は以下ディレクトリに「login-logo.png」のファイル名でアップロードします。

/wp-content/themes/使用中のテーマ名/assets/images/login-logo.png

さらに、ロゴ画像の画像サイズに合わせて以下の●●の部分、4個所にそれぞれwidthとheightを指定します。

width:●●px;height:●●px;background-size:●●px ●●px;

目安としてwidthは320px以内、heightは任意ですが、80px以内程度を目安にロゴ画像を用意するのがおすすめです。

function my_login_logo() {
  echo '<style type="text/css">.login h1 a {background-image: url( ' . get_template_directory_uri() . '/assets/images/login-logo.png );width:320px;height:80px;background-size:320px 80px;}</style>';
}
add_action('login_head', 'my_login_logo');

ロゴのリンク先を変更

続いて、ロゴ画像に設定されているリンク先を変更する方法をご紹介します。

デフォルトではロゴ画像のリンク先は「https://ja.wordpress.org/」に設定されています。
今回はこのリンク先をWEBサイトのトップページに変更するには以下の関数を使用テーマのfunctions.phpに記述します。

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

まとめ

いかがですか?
凄く簡単にロゴ画像とURLを変更出来ますね。
機能的にはデフォルトのままでも問題ないですが、それぞれの会社ごとに自社ロゴを設定するだけで見た目もよくなりますね。
このような細かいところまで気を配って作ることがクライアントの満足度の向上に繋がると思います。