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

CODEXの「ログイン画面のロゴを変更」方法を参考にして試したが、何故か上手くいかなかったので少し手を加えて試した。親テーマだと更新の際に消えてしまうので、子テーマのfanctions.phpに書き加える。

function login_logo_image() {
echo ‘<style type=”text/css”>
#login h1 a {
background: url(‘ . get_bloginfo(‘template_directory’) . ‘/login_logo.png) no-repeat !important;
}
</style>’;
}
add_action(‘login_head’, ‘login_logo_image’);

元のロゴと同じサイズ(幅85px、高さ85px)の画像を準備して、親テーマのディレクトリに保存(「login_logo.png」)すれば、ログイン画面のロゴが切り替わる。又、ロゴのリンク先をウェブサイトにしたい場合は下記も書き加える。

add_action(‘login_head’, ‘login_logo_image’);
function login_logo_url() {
return get_bloginfo(‘url’); ➡ブログのURLを設定
}
add_filter(‘login_headerurl’, ‘login_logo_url’);

上記の画像変更だけで良いが、少しアクセントを付けて見たい場合は、width,height,border,border-radius,box-shadow等を加えてから必ず「background-repeat: no-repeat !important」を書き加える。

function login_logo_image() {
echo ‘<style type=”text/css”>
#login h1 a {
background: url(‘ . get_bloginfo(‘template_directory’) . ‘/login_logo.png); ➡ 必ず(;)
width: 85px;
height: 85px;
border: solid 1px #d0d0d0;
border-radius:50px; ➡ 角丸(5px)
box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.4);
bakground-repeat: no-repeat !important;
}
</style>’;
}
add_action(‘login_head’, ‘login_logo_image’);

function login_logo_url() {
return get_bloginfo(‘url’);
}
add_filter(‘login_headerurl’, ‘login_logo_url’);

円形にしたり角丸にして影を付けたりと独自のログイン画面ができるので楽しみが増えたね。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)