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

WordPress

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

// 管理画面ロゴ変更
function login_logo() {
	echo '<style type="text/css">
		.login h1 a {
			background-image: url('.get_bloginfo('template_directory').'/images/logo-logo.png);
			/* 幅84pxに収まらない画像はここでsize指定をリセットします */
			width: 300px;
			background-size: 300px 60px;

			/* 必要に応じて変更 */
			margin-bottom: 10px;
			height: 60px;
		}
		</style>';
}
add_action('login_head', 'login_logo');

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

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

画像ファイルのパスはWordPress 格納フォルダの「theme/使用中テーマフォルダ/images/login-logo.png」です。 

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

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

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

これを fanction.php へ貼り付ける

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

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

3つの fanction コードをまとめ

// 管理画面ロゴ変更
function login_logo() {
	echo '<style type="text/css">
		.login h1 a {
			background-image: url('.get_bloginfo('template_directory').'/images/logo-logo.png);
			/* 幅84pxに収まらない画像はここでsize指定をリセットします */
			width: 300px;
			background-size: 300px 60px;

			/* 必要に応じて変更 */
			margin-bottom: 10px;
			height: 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' );

コメント