ヘッダー画像やスライダーをページ毎に変える方法
投稿日:
WordPressで作成したページで、ヘッダー画像やスライドショーをページごとに変えたい!
今回やってみたことは、条件分岐でヘッダーの画像部分を振り分けるといった方法です。
プラグインなしで簡単にできましたのでご紹介します。
ファイル作成が面倒ですが、条件分岐で変更できるので、「header.php」が一つで済みますので後々楽かな?
それでは、wordpressのテーマにある「header.php」の表示させたい部分に以下の条件分岐を記述します。
メニュー部分の下に表示させたいなら、その後ろに記述してください。
<!-- ヘッダー画像 条件分岐 --> <div id="gazou-area"> <?php if ( is_front_page() ) { get_template_part( 'frontimages' ); } elseif ( is_page(red) ) { get_template_part( 'redimages' ); } elseif ( is_page(blue) ) { get_template_part( 'bluemages' ); } elseif ( is_page(yellow) ) { get_template_part( 'yellowimages' ); } elseif ( is_page(black) ) { get_template_part( 'blackimages' ); } elseif ( is_page(white) ) { get_template_part( 'whiteimages' ); } elseif ( is_page(green) ) { get_template_part( 'greenimages' ); } else { // それ以外 } ?> </div><!-- /gazou-area-->
【説明】
<!-- ヘッダー画像 条件分岐 --> <div id="gazou-area"> <?php if ( is_front_page() ) { //frontページ(TOPページなど)の時は、 get_template_part( 'frontimages' ); //frontimagesというファイルを読み込みます。 } elseif ( is_page(red) ) { //http://○○○.com/red の時は、 get_template_part( 'redimages' ); //redimagesというファイルを読み込みます。 } elseif ( is_page(blue) ) { //http://○○○.com/blue の時は、 get_template_part( 'blueimages' ); //blueimagesというファイルを読み込みます。 } elseif ( is_page(yellow) ) { //http://○○○.com/yellow の時は、 get_template_part( 'yellowimages' ); //yellowimagesというファイルを読み込みます。 } elseif ( is_page(black) ) { //http://○○○.com/black の時は、 get_template_part( 'blackimages' ); //blackimagesというファイルを読み込みます。 } elseif ( is_page(white) ) { //http://○○○.com/white の時は、 get_template_part( 'whiteimages' ); //whiteimagesというファイルを読み込みます。 } elseif ( is_page(green) ) { //http://○○○.com/green の時は、 get_template_part( 'greenimages' ); //greenimagesというファイルを読み込みます。 } else { // それ以外 } ?> </div><!-- /gazou-area-->
後は、それぞれのテンプレートファイル(読み込まれるファイル)を作成します。
今回このような条件分岐を使ったのは、各ページでスライドショーを見せたかったので、
例えば、「frontimages.php」というファイルの中身は、
<div class="sample-frontimages"> <div><img src="http://○○○.com/wp-content/themes/△△△/images/×××-top01.jpg"></div> <div><img src="http://○○○.com/wp-content/themes/△△△/images/×××-top02.jpg"></div> <div><img src="http://○○○.com/wp-content/themes/△△△/images/×××-top03.jpg"></div> <div><img src="http://○○○.com/wp-content/themes/△△△/images/×××-top04.jpg"></div> <div><img src="http://○○○.com/wp-content/themes/△△△/images/×××-top05.jpg"></div> <div><img src="http://○○○.com/wp-content/themes/△△△/images/×××-top06.jpg"></div> <div><img src="http://○○○.com/wp-content/themes/△△△/images/×××-top07.jpg"></div> </div>
こういう形にしました。
もちろん、スライドショーなどを動かすには、wordpressの画像系プラグインをインストールするか、jQueryプラグインをインストールして、「.jsファイル」や「header.php」に記述が必要になってきます。
私は、jQueryのプラグインをインストールして行いました。
関連記事
-
-
サイトを作り始めの頃、作ってしまったカスタムフィールドだけど、いらなくなったものを消したいのにどうやれば消すことができるんだろうって思っていました。 カスタムフィールドが多くなって訳がわからなくなった …
-
-
便利で何かと使いやすいかな?って思いますので、とりあえずやってみました。 固定ページを書いているときに、別のテンプレートファイル(phpファイル)を読み込みたいときに、直接書くのはやめた方が良いので、 …