【Twenty Ten】アイキャッチ画像を使ってヘッダーを変更

以前、「外観」→「ヘッダー」からヘッダー画像を背景に設定したのですが、そのときヘッダーで使えるアイキャッチ画像の機能を削除しました。

今回は、ヘッダーの背景にアイキャッチ画像を使えるようにします。
以下のコードを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」を削除すると小さいサイズでも表示できます。

次にページを開いて「アイキャッチ画像を設定」をクリックします。

画像を選択したあと、「アイキャッチ画像として使用」をクリックし保存し終えたら閉じます。

これで、ヘッダーに設定している画像とは別に、ページにアイキャッチ画像を設定した場合、そのページを開いたときにアイキャッチ画像に設定されている画像が、ヘッダーに背景画像として表示されます。

【例:トップページ表示(ヘッダーで設定)】

【例:ページ表示(アイキャッチで設定)】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です