wordpressログイン画面のロゴや背景画像を設定する
login_enqueue_scriptsにフックしてcssを追加
ログイン画面に表示されているwordpressのwマークロゴを変更するには、
login_enqueue_scriptsにstyleタグを出力するためのコードを関連付けることで対応可能
add_action('login_enqueue_scripts', array($this, 'set_login_logo'));
set_login_logoは以下のようにした。
function set_login_logo() { ?>
<style type="text/css">
body.login div#login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/site-login-logo.png);
padding-bottom: 10px;
}
</style>
<?php }
選択しているテーマディレクトリ内のimagesフォルダにsite-login-logo.pngというロゴファイル画像を用意すれば、設定したいロゴ画像が表示される。ログイン画面の背景画像設定する場合は、上のコードに以下のようなcssを追記する
body.login {
background-image: url(<?php echo bloginfo('stylesheet_directory'); ?>/images/pattern.png);
}
pattern.pngという背景画像が表示される。cssを設定するhtml要素は、
body.login
になり、
body
に設定すると最初表示されるだけで背景画像が消えてしまう。
ログインフォーム部分のcssは、
body.login div#login form#loginform
で設定できる。
ページに自前のログインフォームを埋め込むこともできる
wp-login.phpへ移動せずにサイトの任意の場所にログインフォームを設置したい場合は、
wp_login_form
が利用できる。
サイトの任意の場所に、
wp_login_form();
とすることでログインフォームを表示することが可能だが、フォーム内の個々のhtml要素に固有のid属性を付けてフォームを構成し、自由にcssを適用できるようにするためには、wp_login_formに引数を渡して要素にid属性を付けることができる。
http://codex.wordpress.org/Function_Reference/wp_login_form
wp_login_formに渡す引数の仕様については、codexの情報を元に作業することができる。
任意のid属性で構成したログインフォームを組んで、そこにcssを定義することで、横長のログインバーをサイトの好きな場所に設置したりすることができるようになる。