ヘッダーの画像を変更しましょう。
TOP画像の用意
まずは、横幅986pxの画像を用意します。
(デフォルト画像は986×300pxです。)
管理画面で変更
管理画面の①「ヘッダー」の②「参照」をクリックして、任意の画像を選択。
③「アップロード」をクリック
任意の高さに変更してトリミング。
「切り取って公開する」又は「トリミングせず、このまま画像を公開する」を選択
①複数の画像をランダムで表示する事も可能です。
完了したら③「変更を保存」で終了。
高さが変更できない
古いバージョンでは、functions.phpの記述ミスがあります。
申し訳ありません。
functions.php
1 2 3 4 5 6 7 8 |
//カスタムヘッダー $args = array( 'width' => 986, 'height' => 150, 'flex-height' => true, 'default-image' => get_template_directory_uri() . '/images/stinger3.png', ); add_theme_support( 'custom-header', $args ); |
の
1 |
'flex-height' => true, |
が、
1 |
'flex-heighnt' => true, |
になっていたら修正して下さい。(「n」が多い)
バナーにリンクを設定したい
header.phpの
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id="gazou"> <div id="gazou-in"> <?php if (is_home()) { ?> <?php //カスタムヘッダー画像// ?> <?php if(get_header_image()): ?> <p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p> <?php endif; ?> <?php } else { ?> <?php //カスタムヘッダー画像// ?> <?php if(get_header_image()): ?> <p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p> <?php endif; ?> <?php } ?> </div> <!-- /#gazou-in --> </div> <!-- /#gazou --> |
の
1 2 3 |
<p id="headimg"> <img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /> </p> |
2つにそれぞれ、
1 2 3 4 5 |
<p id="headimg"> <a href="リンク先のURL"> <img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /> </a> </p> |
をつける。