WordPressのログイン画面のロゴ部分のHTMLを見てみると、
|
0 1 2 3 4 5 6 7 |
<div id="login"> <span class="html-tag"><h1></span><span class="html-tag"><a <span class="html-attribute-name">href</span>="<a class="html-attribute-value html-external-link" href="https://ja.wordpress.org/" target="_blank" rel="noreferrer noopener">https://ja.wordpress.org/</a>" <span class="html-attribute-name">title</span>="<span class="html-attribute-value">Powered by WordPress</span>" <span class="html-attribute-name">tabindex</span>="<span class="html-attribute-value">-1</span>"></span>Powered by WordPress<span class="html-tag"></a></span><span class="html-tag"></h1></span> //省略// </div> |
となっている。
画像を直接挿入しているのではなく、H1タグ配下のAタグの背景画像としてWordPressのロゴを表示させている。
デフォルトのCSSの該当部分だけ抜き出すと以下のようになっている。
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.login h1 a { background-image: url(images/w-logo-blue.png?ver=20131202); background-image: none,url(images/wordpress-logo.svg?ver=20131107); background-size: 84px; background-position: center top; background-repeat: no-repeat; color: #444; height: 84px; font-size: 20px; line-height: 1.3em; margin: 0 auto 25px; padding: 0; width: 84px; text-indent: -9999px; outline: 0; display: block; } |
この中で background-image の部分を上書きすれば、ロゴの表示を変えられる。
アイコンの画像を変える
|
0 1 2 3 4 5 6 7 8 9 10 11 |
// テーマテンプレートのfunctions.php // ログイン画面のロゴを変える function my_login_page_logo(){ ?> <style type="text/css"> #login h1 a{ background-image:url(path/to/logo-image.png); } </style> <?php } add_action( 'login_enqueue_scripts', 'my_login_page_logo' ); |
path/to/logo-image.png のところに画像のURLを入れれば指定した画像に変わります。
WordPressにアップロード済みの画像を使うこともできます。
テーマテンプレートとセットにしたい場合は、テーマテンプレートフォルダ内に画像フォルダ（images や img）を用意して、そこにロゴ表示用の画像を入れます。
例えば、imagesフォルダを作って、そこに temp-symbol.png というロゴ画像を入れたとすると、
|
0 1 2 3 4 5 6 7 8 9 10 11 |
// テーマテンプレートのfunctions.php // ログイン画面のロゴを変える function my_login_page_logo(){ ?> <style type="text/css"> #login h1 a{ background-image:url(<?=get_template_directory_uri()."/images/temp-symbol.png" ?>); } </style> <?php } add_action( 'login_enqueue_scripts', 'my_login_page_logo' ); |
get_template_directory_uri() で有効化している テンプレートのディレクトリの URI を取得できます。
子テーマでカスタマイズしている場合は get_stylesheet_directory_uri() を使う。
サイトアイコンをログイン画面のロゴにする
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// テーフォルダのfunctions.php // ログイン画面カスタマイズ // サイトアイコンを取得 function dng_header_icon_url(){ $id = get_option( 'site_icon' ); if($id > 0){ $thumb=wp_get_attachment_image_src( $id , 'thumbnail' ); echo $thumb[0]; } } function my_login_page_logo(){ ?> <style type="text/css"> <?php //ロゴ $logoid = get_option( 'site_icon' ); if($logoid > 0){ ?> #login h1 a{ background-image:url(<?php dng_header_icon_url(); ?>); } <?php } ?> </style> <?php } add_action( 'login_enqueue_scripts', 'my_login_page_logo' ); |
さらに、サイトアイコンがある場合にはサイトのアイコン、設定してなければテンプレートのアイコンとしたい場合は
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// テーフォルダのfunctions.php // ログイン画面カスタマイズ // サイトアイコンを取得 function dng_header_icon_url(){ $id = get_option( 'site_icon' ); if($id > 0){ $thumb=wp_get_attachment_image_src( $id , 'thumbnail' ); echo $thumb[0]; } } function my_login_page_logo(){ ?> <style type="text/css"> <?php //ロゴ $logoid = get_option( 'site_icon' ); if($logoid > 0){ ?> #login h1 a{ background-image:url(<?php dng_header_icon_url(); ?>); } <?php }else{ ?> #login h1 a{ background-image:url(<?=get_template_directory_uri()."/images/temp-symbol.png" ?>); } <?php } ?> </style> <?php } add_action( 'login_enqueue_scripts', 'my_login_page_logo' ); |
画像の設定の仕方は、考え方次第でいろいろできる。
- 画像を固定で指定する。
- サイトアイコンを使う。
- 「外観」→「カスタマイズ」から設定できるようにする。
- テーマオプションを作って設定できるようにする。
自分のやり方に合わせて仕組みを考えてみよう。
ロゴのリンク先を変える
ログイン画面でロゴをクリックすると、WordPressのサイトに行ってしまいます。
できれば、自分のブログのトップページに行ってほしいものです。
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
// テーマテンプレート内のfunctions.php // ログイン画面のロゴのリンク先を指定 function my_login_logo_url() { return get_bloginfo( 'url' ); } add_filter( 'login_headerurl', 'my_login_logo_url' ); // ロゴのtitleテキストを指定 function my_login_logo_tit() { return get_option( 'blogname' ); } add_filter( 'login_headertitle', 'my_login_logo_tit' ); |
これで、自分のサイトのトップページにリンクされます。
