無料相談・お問い合わせ
ブログを移転しました。
移転先 札幌のホームページ制作・Wordpressのハルリのブログ
Haluri Blog

WordPressのログイン画面とユーザー登録画面のロゴ変更

2013年 12月26日  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です!

すると以下のようになります。

ユーザー登録画面

無事ロゴの変更と「このブログに登録」を非表示にすることができました。



Facebookページにご参加ください

ホームページの作成やSEO対策、Wordpress、WEBマーケティングなど、様々なタメになる情報を配信しています。Facebookページへの参加は下の『いいね!』ボタンをクリックしてください。

関連記事

人気記事

コメント

お名前

コメント本文


pagetop