wordpress

ヘッダー画像やスライダーをページ毎に変える方法

投稿日:

ヘッダー画像変える

 

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のプラグインをインストールして行いました。
 

-wordpress
-, , ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

レスポンシブ確認

レスポンシブの確認

  レスポンシブに対応したサイトを作って、 PC・ノート・タブレット・スマホなどの確認をしたい時におススメなのが、 『Responsively』   【Download now】か …

スマートスライダー

Smart Sliderのプラグインで画像に網掛け

  スライダー画像に網掛けをする   簡単にフェードアウトやスライダーができるWordPressのプラグインで有名な【Smart Slider】を使って、画像に網掛けをしたいと思い …

メンバー紹介選手紹介

WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた①

  WordPressでスポーツチームやサークルのメンバー紹介や選手紹介または、企業やショップなどの人物紹介などのページを作るときに行う方法として、Web製作者それぞれやり方はあると思います …

vegas動画と画像

画像と動画を混合させて表示VEGAS

動画も一緒に表示させる方法   動かしてみた方法は以下の通りです。   1.先に動画を表示して、次に画像を表示する方法   jQuery(document).ready( …

wordpress

WordPressとは?

WordPress(ワードプレス)って オープンソースのブログソフトとして、2003年に公開されました。 オープンソースとは、言葉通り、誰でも無償で自由に改良したり、再配布できるソフトウェアです。 ま …