WordPressでトップページのみヘッダー画像を表示させるカスタマイズ法


WordPress をサイト用にカスタマイズするなかで、ヘッダー画像は大事な要素だと思います。しかし、トップページではインパクトを与えることができても、他のページでは必要なかったりします。
なので、トップページのみヘッダー画像を表示させるカスタマイズはできないものか、情報を探しておりました。
そして、実際にトップページのみヘッダー画像を表示させ、他のページではヘッダー画像を表示させないというカスタマイズができたので、メモしておきたいと思います。

結論:条件分岐を使う

条件分岐タグを使えば、そのタグで指定した条件の場合にだけ、任意のソースを表示してくれるようになります。
このタグには様々なものがあり、メインページ、カテゴリーページ、個別投稿ページなどの条件を指定することができ、そのページだけで表示させたいものを吐き出すことができます。
各種条件分岐タグについてはこちら

条件分岐タグを使って、トップページのみヘッダーを表示させる

条件分岐タグには色々な種類がありますが、トップページに何を指定しているかで、ちょっと使い方が異なるようです。今回は大きく 2 パターンについてメモしておきたいと思います(以下トップページ=フロントページとして話しを進めていきます)。

フロントページに固定ページを指定している場合

今回はサイトタイプのため、フロントページには固定ページを指定していました。つまり、WordPress の設定において、【表示設定】の【フロントページの表示】の部分で【固定ページ】を選択し、任意の固定ページをフロントページに指定してたということですね。
 
フロントページに指定した固定ページにのみ、あるソースを表示させる場合、以下のタグを使用します。

<?php if(is_front_page() ): ?>
	フロントページのみで表示させたいこと
<?php endif; ?>

で、これをどこに書き込むか、ということですが、、、今回はフロントページが表示された場合のみ、つまりドメインへのアクセスがあった場合にのみヘッダー画像を表示させたいわけなので、【header.php】に書き込みます。
以下のように、ヘッダー画像を条件分岐タグで囲ってしまえば OK です。

<?php if(is_front_page() ): ?>
	<div id="header-img">ヘッダー画像</div> /* idを指定していると、CSSで編集しやすくなります */
<?php endif; ?>

Twenty Eleven を使っているのであれば、カスタムヘッダーに関する記述が 78 行目から 117 行目辺りまでなので、その間を条件分岐タグで囲みます。そうすると、トップページでしかヘッダーが表示されなくなるというわけです。

<?php if(is_front_page() ): ?> /* ここから下を囲みます */
			<?php
				// Check to see if the header image has been removed
				$header_image = get_header_image();
				if ( $header_image ) :
					// Compatibility with versions of WordPress prior to 3.4.
					if ( function_exists( 'get_custom_header' ) ) {
						/*
						 * We need to figure out what the minimum width should be for our featured image.
						 * This result would be the suggested width if the theme were to implement flexible widths.
						 */
						$header_image_width = get_theme_support( 'custom-header', 'width' );
					} else {
						$header_image_width = HEADER_IMAGE_WIDTH;
					}
					?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
				<?php
					/*
					 * The header image.
					 * Check if this is a post or page, if it has a thumbnail, and if it's a big one
					 */
					if ( is_singular() && has_post_thumbnail( $post->ID ) &&
							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) &&
							$image[1] >= $header_image_width ) :
						// Houston, we have a new header image!
						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
					else :
						// Compatibility with versions of WordPress prior to 3.4.
						if ( function_exists( 'get_custom_header' ) ) {
							$header_image_width  = get_custom_header()->width;
							$header_image_height = get_custom_header()->height;
						} else {
							$header_image_width  = HEADER_IMAGE_WIDTH;
							$header_image_height = HEADER_IMAGE_HEIGHT;
						}
						?>
					<img src="<?php header_image(); ?>" width="<?php echo esc_attr( $header_image_width ); ?>" height="<?php echo esc_attr( $header_image_height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
				<?php endif; // end check for featured image or standard header ?>
			</a>
			<?php endif; // end check for removed header image ?>
<?php endif; ?>

フロントページに最新の投稿を指定している場合

フロントページの指定が固定ページではなく、ブログの最新投稿一覧ページだった場合、別の書き方があるようですので、補足として紹介しておきます。
タグは以下のものを使います。

<?php if(is_home() && !is_paged()): ?>
	フロントページで表示させたいこと
<?php endif; ?>

これで、トップドメインのページにアクセスした場合にのみ、任意のソースを表示させることができます。
ちなみに、

<?php if(is_home()): ?>
	フロントページで表示させたいこと
<?php endif; ?>

のように書いた場合(後半の【 && !is_paged() 】が無い場合)、トップドメイン以外の 2 ページ目、3 ページ目の投稿一覧ページでもフロントページ扱いにされてしまうようです。個別投稿(single.php)とかだと、フロントページ以外、ということになるんでしょう。

結局どっちがいいのか?

フロントページを示す条件分岐タグは大きく2パターンあるようですが、フロントページを固定ページにしていた時の条件分岐タグでも、ブログの最新投稿をフロントページとして扱ってくれます。ただし、逆は無理のようです。
つまり、

フロントページの指定
【is_front_page()】の場合 最新の投稿
固定ページ
【is_home()】の場合 最新の投稿のみ

というようになっています。
WordPress をサイトタイプにカスタマイズしたい場合は、前者の方を使っておいた方が間違いないでしょう。

参考にさせて頂いたブログ

― WordPressをカスタマイズするなら絶対覚えておきたい条件分岐やカスタム投稿タイプなどいろいろ

ありがとうございました!


コメントを残す

メールアドレスが公開されることはありません。