以前、「外観」→「ヘッダー」からヘッダー画像を背景に設定したのですが、そのときヘッダーで使えるアイキャッチ画像の機能を削除しました。
今回は、ヘッダーの背景にアイキャッチ画像を使えるようにします。
以下のコードをTwentyTenのheader.phpに追加（変更）します。
【追加（変更）：header.php】
<style type="text/css">
#branding {
<?php
if ( is_singular() && current_theme_supports( 'post-thumbnails' ) &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) && $image[1] >= HEADER_IMAGE_WIDTH ) : ?>
background-image: url(<?php echo $image[0] ?>);
<?php elseif ( get_header_image() ) : ?>
background-image: url(<?php header_image(); ?>);
<?php endif; ?>
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
}
</style>
＊画像が、設定して（されて）いる横のサイズより小さい場合は機能しません。
＊上のコードの「&& $image[1] >= HEADER_IMAGE_WIDTH」を削除すると小さいサイズでも表示できます。
次にページを開いて「アイキャッチ画像を設定」をクリックします。
画像を選択したあと、「アイキャッチ画像として使用」をクリックし保存し終えたら閉じます。
これで、ヘッダーに設定している画像とは別に、ページにアイキャッチ画像を設定した場合、そのページを開いたときにアイキャッチ画像に設定されている画像が、ヘッダーに背景画像として表示されます。
【例：トップページ表示（ヘッダーで設定）】
【例：ページ表示（アイキャッチで設定）】
スポンサーリンク
コメント