ログイン画面とダッシュボードのwordpressロゴを変更する。

ここで変更するのは2箇所。
ちなみに、今回作業したwordpressのバージョンは3.4.1だ。

まずログイン画面。

ログインフォーム上部の「wordpress」というロゴを、オリジナルのロゴに変更する。

まず大本の素材を作成する。
上記「wordpress」ロゴ画像が以下の場所にあるので、これをグラフィックソフトなどで修正する。

/wp-admin/images/wordpress-logo.png

もしくは新規で作成しても問題なし。その場合のサイズは274×63ピクセル。

このオリジナルロゴ画像をテーマフォルダにコピーする。ここでは「img」フォルダに入れたとする。

次に、テーマフォルダの「function.php」にコードを追加する。それが以下。

function custom_login_logo() {
 echo '<style type="text/css">h1 a { background: url('.get_bloginfo('template_directory').'/img/wordpress-logo.png) 50% 50% no-repeat !important; }</style>';
}
add_action('login_head', 'custom_login_logo');

ファイルパス等に注意!

以上。

次はダッシュボード左上に出てくる「W」ロゴ。
↓これね。

これも同じように元画像を修正する。
ただし、これは他で使う画像も含まれている縦長の画像なので、新規で作るより不要な箇所のみ修正する方が楽だろう。
まぁ、実際に画像を見てもらえばわかると思う。

対象画像は以下のフォルダにある。

/wp-includes/images/admin-bar-sprite.png

今回僕は「W」のロゴ(薄いグレーと濃いグレーの両方)を、オリジナルのロゴに変更した。別に2箇所とも全く同じロゴでもかまわない。
マウスオーバー時にロゴが変化しないだけだ。

画像を修正したら、テーマフォルダにアップロードする。

次に「function.php」だ。
以下のコードを追加する。

function my_custom_logo() {
 echo '<style type="text/css">.ab-icon { background-image:url('.get_bloginfo('template_directory').'/img/admin-bar-sprite.png) !important;background-position:0 -76px; }</style>';
}
add_action('admin_head', 'my_custom_logo');

以上。

コメントを残す

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