WordPress ログインページのロゴをオリジナル画像へ変更する方法

WordPress のログインページって「W」のロゴマークがあって、そのロゴマークをクリックすると WordPress Japan のウェブサイトが開きます。

ぼくは、複数の WordPress サイトを運営しているので、間違わないようにログインページのロゴを変更しています。

このロゴを好きな画像へ変更するだけで、ちょっとオリジナル感がでると思いません？お客さんに納品するウェブサイトであれば、会社名とか入れるだけで専用感でますよね！

個人サイト（ブログ）でログインページのロゴを変更するなんて「自己満足」かもしれませんが、少しオリジナル感が出て愛着が湧きモチベーションも上がるかも？？

今回の記事内容

今回は「WordPress ログインページのロゴをオリジナル画像へ変更し、ロゴのリンク先をサイトトップページへ変更する方法」を紹介します。

WordPress ログインページを開くとこんな感じよね
WordPress ログインページのロゴを変更する手順
ログインページのロゴのリンク先と文言を変更
3つの fanction コードをまとめたやつ
実際にログインページのロゴを変更するとこうなる
あとがき

WordPress ログインページを開くとこんな感じよね

WordPress 感がすごいです・・・まあ、WordPress なんで WordPress 感がすごくても良いんですが・・・

先にも記載したとおり、納品サイトなんかは、先方の社名や会社シンボルなどをロゴとして設定したほうがわかりやすいですし、個人サイト（ブログ）であれば、オリジナル画像にロゴを変更するだけで若干の愛着が湧きます。

WordPress ログインページのロゴを変更する手順

ログインページのロゴを任意の画像へ変更

// ログイン画面のロゴ変更
function login_logo() {
  echo '<style type="text/css">.login h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login-logo.png);width:●●px;height:●●px;background-size:●●px ●●px;}</style>';
}
add_action('login_head', 'login_logo');

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

function login_logo() {

echo '<style type="text/css">.login h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login-logo.png);width:●●px;height:●●px;background-size:●●px ●●px;}</style>';

}

add_action('login_head', 'login_logo');

これを fanction.php へコピペします。

「get_bloginfo(‘template_directory’).’/images/login-logo.png 」の部分が変わりになる画像を呼び出すための URL です。

WordPress 格納フォルダの「theme/使用中テーマフォルダ/images/login-logo.png」を代替として表示してくださいね！っていう命令です。

親テーマの images フォルダに「login-logo.png」という名前を付けた任意画像を入れてください。子テーマだと反映されません。

続いて「width:●●px;height:●●px;background-size:●●px ●●px」の「●●」の部分へ画像のサイズ、画像は背景画像として使われるので、背景エリアのサイズを入力します。

画像のサイズと背景エリアのサイズはすべて同じにします。

用意する画像のサイズは「横：320px まで」「縦：50～80px」くらいが最適です。

ここがポイント！

WordPress のメディアに直接アップロードした画像をログインページのロゴに指定したい場合は、URL 部分を以下のコードをコピペして「ここにURL」の部分を画像に指定されている URL へ変更すれば OK です。

// ログイン画面のロゴ変更
function login_logo() {
  echo '<style type="text/css">.login h1 a {background-image: url(ここにURL);width:●●px;height:●●px;background-size:●●px ●●px;}</style>';
}
add_action('login_head', 'login_logo');

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

function login_logo() {

echo '<style type="text/css">.login h1 a {background-image: url(ここにURL);width:●●px;height:●●px;background-size:●●px ●●px;}</style>';

}

add_action('login_head', 'login_logo');

ログインページのロゴのリンク先と文言を変更

ログインページのロゴへマウスカーソルを置くと「Powered by WordPress」と表示されてしまいます。これを任意の文言へ変更します。

そして、ロゴをクリックすると、WordPress Japan 公式サイトへ飛ばされます。これも自サイトのトップページがリンク先になるように変更します。

ログインページのロゴのリンク先を自サイトのトップページヘ変更

// ログイン画面のロゴURL
function custom_login_logo_url() {
	return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

// ログイン画面のロゴURL

function custom_login_logo_url() {

return get_bloginfo( 'url' );

}

add_filter( 'login_headerurl', 'custom_login_logo_url' );

これは単純で、「ロゴをクリックしたときのリンク先はサイトのトップページにしてくださいね」とすでになっているので、コピペだけで OK です。

これを fanction.php へ貼り付けるだけで、ログインページのロゴのリンク先が、その WordPress のトップページが開くように差し替わります。

ログインページのロゴへマウスカーソルを置いたときの文言を変更

// ログイン画面のロゴタイトル
function custom_login_logo_url_title() {
	return 'トップページを表示';
}
add_filter( 'login_headertitle', 'custom_login_logo_url_title' );

// ログイン画面のロゴタイトル

function custom_login_logo_url_title() {

return 'トップページを表示';

}

add_filter( 'login_headertitle', 'custom_login_logo_url_title' );

これも fanction.php へ貼り付ければ OK。「トップページを表示」の部分を任意の文言へ変更してくださいね。

3つの fanction コードをまとめたやつ

// ログイン画面のロゴ変更
function login_logo() {
  echo '<style type="text/css">.login h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login-logo.png);width:●●px;height:●●px;background-size:●●px ●●px;}</style>';
}
add_action('login_head', 'login_logo');

// ログイン画面のロゴURL
function custom_login_logo_url() {
	return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

// ログイン画面のロゴタイトル
function custom_login_logo_url_title() {
	return 'トップページを表示';
}
add_filter( 'login_headertitle', 'custom_login_logo_url_title' );

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

function login_logo() {

}

add_action('login_head', 'login_logo');

// ログイン画面のロゴURL

function custom_login_logo_url() {

return get_bloginfo( 'url' );

}

add_filter( 'login_headerurl', 'custom_login_logo_url' );

// ログイン画面のロゴタイトル

function custom_login_logo_url_title() {

return 'トップページを表示';

}

add_filter( 'login_headertitle', 'custom_login_logo_url_title' );

上の3つのコードをまとめたやつです。まとめて貼り付けて編集してください。

ここがポイント！

function.php へは、WordPress 管理画面の「外観 → テーマエディター」からアクセスすることができます。

実際にログインページのロゴを変更するとこうなる

今、この記事を書きながら、ローカル運用の WordPress サイトで変更してみました。

ロゴをクリックしたときのリンク先やマウスオン時の文言も任意のものへ変更されています。完璧ですね！！

因みに、fanction.php へはこんな感じで記述しています。

// ログイン画面のロゴ変更
function login_logo() {
  echo '<style type="text/css">.login h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login-logo.png);width:300px;height:60px;background-size:300px 60px;}</style>';
}
add_action('login_head', 'login_logo');

// ログイン画面のロゴURL
function custom_login_logo_url() {
	return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

// ログイン画面のロゴタイトル
function custom_login_logo_url_title() {
	return 'トップページを表示';
}
add_filter( 'login_headertitle', 'custom_login_logo_url_title' );

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

function login_logo() {

echo '<style type="text/css">.login h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login-logo.png);width:300px;height:60px;background-size:300px 60px;}</style>';

}

add_action('login_head', 'login_logo');

// ログイン画面のロゴURL

function custom_login_logo_url() {

return get_bloginfo( 'url' );

}

add_filter( 'login_headerurl', 'custom_login_logo_url' );

// ログイン画面のロゴタイトル

function custom_login_logo_url_title() {

return 'トップページを表示';

}

add_filter( 'login_headertitle', 'custom_login_logo_url_title' );