* WordPress Hook * login_head [ログイン画面のロゴの差し替え]
はじめに
年明けの1週間。ほぼほぼ更新作業が続きました。 WordPressのアクション / フィルターフックはよく使いますがあれなんだっけ？となりがちなので、使う機会があれば書くことにしました。
login_head
アクションフックです。 Codex日本語版はこちら。
プラグイン API/アクションフック一覧 - WordPress Codex 日本語版
目的。例えばログインページのCSSデザイン変更
よくある、この青丸ロゴを書き換えるという作業です。
こちらの構造は、単純にdisplay:blockにしたaタグに`background-image'で背景画像を貼っているだけです。
なのでここをどうにかして上書きしてしまえば良いということですが、テーマで使っているstyle.cssでここに割り込むことはできません。
なので以下のアクションフックの出番です。
Codexの説明では
- login_head ログインページの head要素の読み込みが完了する直前に実行する。
とあります。 なのでこのタイミングでstyleを割り込ませてあげれば良いということです。
functions.phpに記述。
function custom_login_css() {
?>
<style type="text/css">
h1 a {
background-image: url('任意の画像のフルパス') !important;
width:320px !important;
background-position:center center !important;
background-size:auto !important;
}
</style>
<?php
}
add_action('login_head', 'custom_login_css');
- 割り込ませたいcssを
function (任意の名称)(){}のカギカッコの中に書く。 - ソースとしてして割り込ませたいので、必ずphpタグを終了させ、cssを書いてから再びphpを開始するようにする。echoにしてもいいです。好みで。
- cssは、単純にwidth、heightそれぞれ84pxのブロックスペースに背景画像を張り込む、という風に書けば良いです。僕は大きくしたかったので幅も上書きしています。!importantはなくてもいけるかも。都度都度デベロッパーツールでご確認を。
- 最後の1行。login_headのタイミングでcustom_login_cssを実行、という意味になります。
ソースを確認するとこんな感じになります。
無事に/headの前に差し込まれています。
さいごに。
特にないです。 さむいですねー手がかじかむので仕事用の手袋が欲しいです。
