HOME > > > WordPress管理画面カスタマイズ「ログイン画面のロゴデータを変更する」

WordPress管理画面カスタマイズ「ログイン画面のロゴデータを変更する」

ログイン画面

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

WordPressのログイン画面をそのままにしておくとワードプレスのロゴが表示されていて、いかにも「ザ・ワードプレス」という感じです。そのままにしておくよりも対象になるサイトのロゴを入れたりした方が格好がいいので、ロゴを変更しちゃいましょう。

functions.phpにロゴを読み込むパスを記述する

まずはfunctions.phpにロゴデータを読み込むパスを記述します。
ここではテーマの中に「/custom/images/」というフォルダをおき、ロゴデータのファイル名を「logo_login.gif」にしました。
ロゴになるファイルを入れるとログイン画面のロゴ部分が変更になります。


//ログイン画面のロゴ変更
function custom_login_logo() {
 echo '<style type="text/css">h1 a { background: url('.get_bloginfo('template_directory').'/custom/images/logo_login.gif) 50% 50% no-repeat !important; }</style>';
 }
add_action('login_head', 'custom_login_logo');

ロゴデータの幅が狭い時はCSSで対応します

ロゴデータは変更できたのですが、WordPress3.8(それ以下では検証してません)ではロゴが80xp×80pxになっており、そのサイズ以上は表示されません。
対策としては専用のCSSを用意して対応します。


まずCSSを読み込むパスをfunctions.phpに記述します。
こちらではテーマの中に「/custom/css/」フォルダを設置し、その中にlogin.cssを作りました。


//カスタム用CSS
function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/custom/css/login.css" />';
}
add_action('login_head', 'custom_login');

CSSには下記の様な感じで書いてみました。


#login h1 a{
 width: 100%;
 height: 200px;
}

ロゴのサイズは200px×200px。ちょっと大きいです。
ロゴを設置するとこの様な感じになります。

ログイン画面ロゴ

ロゴのリンク先とtitleを変更する

ロゴにはリンク(デフォルトではhttp://wordpress.org/)とtitle(デフォルトではPowered by WordPress)が入っています。こちらも変更できますので、ロゴ設置後に変えておきましょう。

変更ヶ所は「wp-login.php」の101行目あたりの()内のソース・タイトルを変更しましょう。


$login_header_url   = __( 'http://wordpress.org/' );
$login_header_title = __( 'Powered by WordPress' );

以上で設置完了です

クライアントに渡す前には出来るだけソレっぽくしておいた方がいいですね。
と自分に言い聞かせてます。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket