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

  • このエントリーをはてなブックマークに追加
  • 156
WordPressカスタマイズ

WordPress をサイト用にカスタマイズするなかで、ヘッダー画像は大事な要素だと思います。しかし、トップページではインパクトを与えることができても、他のページでは必要なかったりします。

なので、トップページのみヘッダー画像を表示させるカスタマイズはできないものか、情報を探しておりました。

そして、実際にトップページのみヘッダー画像を表示させ、他のページではヘッダー画像を表示させないというカスタマイズができたので、メモしておきたいと思います。

結論:条件分岐を使う

条件分岐タグを使えば、そのタグで指定した条件の場合にだけ、任意のソースを表示してくれるようになります。

このタグには様々なものがあり、メインページ、カテゴリーページ、個別投稿ページなどの条件を指定することができ、そのページだけで表示させたいものを吐き出すことができます。

各種条件分岐タグについてはこちら

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

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

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

今回はサイトタイプのため、フロントページには固定ページを指定していました。つまり、WordPress の設定において、【表示設定】の【フロントページの表示】の部分で【固定ページ】を選択し、任意の固定ページをフロントページに指定してたということですね。

フロントページに指定した固定ページにのみ、あるソースを表示させる場合、以下のタグを使用します。

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

以下のように、ヘッダー画像を条件分岐タグで囲ってしまえば OK です。

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

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

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

タグは以下のものを使います。

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

ちなみに、

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

結局どっちがいいのか?

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

つまり、

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

というようになっています。

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

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

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

  • このエントリーをはてなブックマークに追加

無料メール講座

WordPress を活用している
社長、フリーランス、ウェブマーケターのための

ホームページ制作の 3 つの間違い
売上を上げるフレームワークを無料公開中……

無料メール講座

もっと楽に、簡単にホームページを作れないものだろうか?
もっと楽に、簡単にインターネットから集客できないものだろうか?
もっと楽に、簡単にインターネットから売上を上げられないものだろうか?

そんなことを思ったことがある方のために、このページを用意しました。

私たちは、ウェブマーケティングに携わる中で、多くの人が陥っているある「勘違い」に気づきました。

その勘違いとは・・・

コメントをどうぞ

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