トップページのみにヘッダー画像を表示させる方法

sponsored link

タイトル通り、ヘッダー画像をトップページのみに表示させる方法です。

シンプル過ぎて見栄えのしないサイトでも、大きなヘッダー画像を使うだけで手軽にサイトを華やかに装飾できます。

しかし、記事を見る度にファーストビューに大きな画像が出でしまうのは、ユーザビリティ的にもちょっと邪魔な印象もあったりします。

最近は個別記事でもアイキャッチなどで多量に大きな画像を使う傾向がありますので、ヘッダー画像はトップページのみに制限するのも一つの手かもしれません。

Twenty Twelveでのカスタマイズ例

テーマによりますが、【概観】⇒【ヘッダー】からヘッダー画像の設定ができるものが多いですが、どのページに表示させるかなどの詳細な部分まではできません。

そこで、【条件分岐】を使って表示を制御します。

基本的にはどのテーマも似たような方法で、ヘッダー画像を表示させているコード部分に「トップページのみ表示させる」等の条件文のコードを追加するだけです。

header.phpを編集


<?php if ( get_header_image() ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
<?php endif; ?>

上記のコードがヘッダー画像を出力している箇所。ここに以下の条件文を追加します。


<?php if(is_home()): ?>
<?php if ( get_header_image() ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
<?php endif; ?>
<?php endif; ?>

ハイライトの箇所が追加コード。if文(もし~だったら~)の「is_home」で、「ホーム画面だったら以下のコードを実行する」という条件を追加しています。

「is_home」は「is_front_page」でも可能。これは後で説明します。

これで、トップページ(ホーム画面)だったらヘッダー画像が表示されます。

ただし、「is_home」だとサイトのトップページを【最新の記事】表示にしている、所謂ブログタイプの条件になります。他のいくつかの方法は下で紹介します。

header_top_setting


<?php if(is_home()): ?>
<a href="http://"><img src="http://.jpg"/></a>
<?php endif; ?>

テーマの設定画面からヘッダー画像を登録せずに、上記のように任意の箇所に自分で用意した画像を表示させても問題ありません。

まぁ、ヘッダー画像の場所を変えるにしても、前述したヘッダー画像出力コードを移動させればいいわけだし、画像のローテ表示なんかもできるので、せっかくなので既存のコードを再利用してもよいかも。これは状況によって臨機応変に。

応用の条件

上で説明した条件文だと、【表示設定】⇒【フロントページの表示】を【最新の投稿】にしている場合のトップページ表示の制御になります。

また、トップページから【過去のページ】へページ送りした場合の2ページ目以降もトップページと見なされ、ヘッダー画像が表示されます。

header_previous

ページ送りした場合も、役割としてはトップページと同じなので、通常はこれで問題ないとは思います。

2ページ目以降の制御


<?php if(is_home() && !is_paged()): ?>
ヘッダー画像
<?php endif; ?>

ページ送りした場合にはホーム画面としてほしくない場合、最初に説明したカスタマイズコードに「&& !is_paged()」を追加します。

これで、本当に文字通りトップのページのみヘッダー画像が表示され、2ページ目以降は表示されなくなります。

フロントページを使用している場合


<?php if(is_front_page() ): ?>
ヘッダー画像
<?php endif; ?>

トップページを固定している場合、「is_front_page」を利用します。

「is_front_page」は「最新の投稿」でも「フロントページ」でも利用できるので、本来はこちらの方が万能かもしれません。

sponsored link

コメントを残す

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