WordPressでトップページのみに画像を表示させたい

WordPressでトップページのみに画像を表示させたい

サイトのデザインでよく、トップページのみに大きな画像を表示しているものを見ると思います。

しかしながら、WordPressでそれを実現しようとするには「PHP」を記述しなければいけません。

テーマによっては、外観のカスタマイズで変更できたりしますができないものも多くあります。

そこで、今回はトップページのみにHTMLを反映させるPHPのコードをご紹介していきます。

それを利用してトップページのみに画像を表示してみましょう。




WordPressでトップページのみにHTMLを埋め込む方法

WordPressでトップページのみにHTMLを埋め込む方法

WordPressでいじるファイルといえば、「header.php・sidebar.php・index.php・footer.php」の四つがメインになってきます。

しかしながら、PHPコードの記述せずにHTMLを記述してしまうとすべてのページに反映されてしまいます。

そこで、トップページのみに表示したい場合は以下のPHPコードを記述します。

(コードをコピペして「// 追加したい処理」をHTMLなどに書き換えてください。)

is_home()という条件分岐を行うことで、トップページの時のみ「// 追加したい処理」の部分が実行されます。

これを利用することで、「トップページのみに画像を表示する」ことができます。

is_home()例 – トップページのみに画像を表示する

is_home()例 - トップページのみに画像を表示する

↑今回使用する画像

では、実際にトップページのみに画像を表示させていきます。

CSSに関しては、あまり設定しないので表記崩れが起きた場合は環境に合わせて変更してください。

といっても作業はとても簡単で、先ほどのコードに画像を追加するHTMLを追加するだけです。

中央ぞろえもしたいので、<div>タグもつけておきましょう。

コードは以下です。

今回は、説明のため「<div>タグ」に直接CSSを書いていますが、作法的(読みにくくなるため)によろしくないので「style.css」に書くようにしましょう。

編集前

編集前

【編集後】

トップページ

編集後

他のページ

他のページ

ちゃんとトップページのみに追加されていて、他のページには追加されていないことがわかります。

スマートフォン版

スマートフォン版もしっかりとトップページに画像がいい感じに追加されていますね。

注意 – ここでいうトップページとは?

注意 - ここでいうトップページとは?

先ほどから「トップページ」と書いていますが、正確にはhome.phpのことを指します。

このコードは、「home.php」かどうかを判別するためのPHPコードです。

ですので、テーマのカスタマイズなどで「home.php」をトップページにしていない場合は、うまく動作しませんのでご注意ください。

あくまでも、home.php」に追加されます。

(いじってなければ基本は大丈夫だと思います。)

まとめ

WordPressでトップページのみに画像を表示する方法を紹介しました。

PHPの知識が若干必要ですが、コピペしていただければ何とかなると思います。

このコードを使用すれば、画像の他にも「トップページにだけ行いたい処理」を記述することができますのでいろいろ試してみてください。

スポンサーリンク







シェアする

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

フォローする

スポンサーリンク