WordPressのログイン画面とユーザー登録画面のロゴ変更
インディーズミュージシャンのポータルサイト『Japan Indies』の作成で苦労した点を書きたいと思います。
ポータルサイトを初めて作成したのですが、まぁ苦労しました(笑)
このサイトは私が管理するので、できるだけ管理が楽になるようにプラグインを多用する予定でしたが、良いプラグインがあまり見つからず、結局大部分をfunctions.phpで対応。おかげで、functions.phpが600行を超えました(笑)
今回はWEB屋さん向けに、ログイン画面とユーザー登録画面をカスタマイズする方法について書きたいと思います。
ログイン画面とユーザー登録画面のロゴを変更する
WordPressのバージョンが3.8になって、ログイン画面・ユーザー登録画面のロゴのサイズが変わり、80×80になったようです(『Wordpress』から『W』に変更)
HTMLソースを見ると、h1タグとaタグが使われていて、CSSを見ると、背景画像、aの範囲(幅・高さ)、背景画像のサイズの3つを変更しないといけないようです。
ロゴを変更できるプラグインもあったような気がしますが、functions.phpで変更する方法をご紹介します。
function my_custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/【画像のパス】) !important; background-size: 【幅】px 【高さ】px !important; width: 【幅】px !important; height: 【高さ】px !important;}</style>';
}
add_action('login_head', 'my_custom_login_logo');
※上記ソースの【画像のパス】にはテーマフォルダ以下のパスを、【幅】【高さ】はそれぞれ変更したいロゴのpx数を記入してください。
ユーザー登録画面の「このブログに登録」を削除
ユーザー登録画面で出てくる「このブログに登録」の一行。
ポータルサイトなのに、『ブログ』という表現は、ちょっと不自然です…。
ということで、上記のソースに少し追加して、ついでにこの一行を非表示にします。
function my_custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/【画像のパス】) !important; background-size: 【幅】px 【高さ】px !important; width: 【幅】px !important; height: 【高さ】px !important;} #login .message{display:none;}</style>';
}
add_action('login_head', 'my_custom_login_logo');
最後に『#login .message{display:none;}』を追加して、「このブログに登録」を非表示にしました。
上記をfunctions.phpに記述するだけでOKです!
すると以下のようになります。
無事ロゴの変更と「このブログに登録」を非表示にすることができました。