【wordpress】カスタムヘッダーをリッチなスライダーで表示する方法

2014.4.11 Wordpress

最近、Sky’s The Limitにハマっています。satohmsysです!

WordPressでソースをいじることなくヘッダーに画像を表示する機能で「カスタムヘッダー」がありますが、
その機能を利用して、管理画面から画像を投稿するだけで設定できる画像スライダーを作ってみようと思います!

bxSliderの準備

かの有名なjQueryプラグイン、bxSliderをダウンロードします。
使い方はこちらを参照。

レスポンシブルデザインにも対応した高性能なスライダー【bxslider】の設置

解答後、「jquery.bxslider.min.js」「jquery.bxslider.css」「“plugins”フォルダ」「“images”フォルダ」をwordpressの任意のディレクトリに保存してください。
<head>内で読み込みます。

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.bxslider/jquery.bxslider.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/jquery.bxslider.css" />
<script type="text/javascript">
$(document).ready(function(){
  $('#bxSlider').bxSlider({ //メイン画像。
      auto: true,
        mode: 'fade',
        easing: 'easeOut',        
        speed: 5400,
        pause: 5400 ,         
        control: false, //コントロールボタンの非表示
        pager: false , //次へ、前へのページャー非表示        
      });      
});
</script>

本当はpluginフォルダ内のjquery.easing.1.3.jsも読み込みたいところですが、なぜかスクリプトエラーが出て、スライダー実装に支障が出たので今回は読み込みません。
bxSliderの設定についてはこちらを参照してください!

簡単に設置出来るJQueryスライドショー「bxSlider」の使い方。 | wordpress&Me

カスタムヘッダーを設定する

自作テーマなどだと、カスタムヘッダーが設定出来ない場合が多いです。
そこで、functions.phpに以下のように記述します

$prm = array(
'width' => 横幅 ,
'height' => 縦幅
''header-text' => false,
)
add_theme_support('custom-header')

これでダッシュボードの「外観」に「ヘッダー」が現れたと思います!

add_theme_supportCUSTOMHEADER

では、スライダーを実装したい、任意の場所に以下の記述をします

<?php 
     $allheaderimg = get_uploaded_header_images(); //ヘッダーイメージ全取得

     if(count($allheaderimg) >= 1) {//ヘッダイメージが1つ以上ある場合
        echo '<div id="bxSlider">';
	if(is_home()) {//トップページのみスライダーを表示
	 foreach($allheaderimg as $headerimg) {//ヘッダーイメージ全出力
        	echo '<img class="'. '" src="' . $headerimg['url'] . '" />'; //ヘッダー画像を1枚ずつ、順に出力
          }
       }else {//下層ページではスライダーなしのロゴとトップページへのリンク。
        	echo '<a href="' . home_url() . '"><img src="' .get_bloginfo('template_url') . '/img/ロゴなど….png" alt="ロゴ" ></a>';
        }

   }else {//ヘッダーイメージが1つ以上ない場合、デフォルトイメージを表示するための記述
	        if(is_home()) {//トップページは
        		echo '<img src="' . get_bloginfo('template_url') . '/img/デフォルトイメージ.png" alt="" />';
        		}else {//下層ページではスライダーなしのロゴとトップページへのリンク。
        			echo '<a href="' . home_url() . '"><img src="' .get_bloginfo('template_url') . '/img/デフォルトイメージ.png" alt="" ></a>';
        		}
       		}
; ?>

get_uploaded_header_images()で、「外観  >ヘッダー」からアップロードした画像を配列で取得します。

カスタムヘッダーの画像をすべて取得してスライダーにしたい | データベースに接続できません

配列$allheaderimgには幅や高さも含まれていますが、取り敢えず欲しいのはURLなので、引数である[url]を指定して、値であるURLを呼び出しています。

設定したヘッダー画像を全部呼び出すためにforeachを使います。
ちなみに参考ではesc_htmlを使ってエスケープしていますが、配列の値はすでにエスケープされているそうです。

ヘッダー画像が1枚以下の場合でもスライドのエフェクトがかかっていると、非常に鬱陶しいので、if(count($allheaderimg)>=1){~この中に記述}していくこととします。

これは、ヘッダーの画像をブチこんだ配列の要素数をカウントして、1枚以上なら{}内の処理をしますよ~、ということです。

 

その直後に、<div id=”bxSlider”>がありますが、これがbxSliderを適用したいエリアです。
<script>~</script>内でセレクタで指定したidでないとbxSliderが効かないので注意してください。

そのあとに、ヘッダ画像が1枚以上あるという条件の中で、更に“TOPページか、そうでないか”の条件分岐をします。
TOPページ以外ではスライドではなく、ロゴなどを出しておいて読みやすくするという意図です。

全ページ、ヘッダー画像をスライダーで表現したいならモチロンここは不要です。

	if(is_home()) {//トップページのみスライダーを表示
	 foreach($allheaderimg as $headerimg) {//ヘッダーイメージ全出力
        	echo '<img src="' . $headerimg['url'] . '" />';
          }
       }else {//下層ページではスライダーなしのロゴとトップページへのリンク。
        	echo '<a href="' . home_url() . '"><img src="' .get_bloginfo('template_url') . '/img/ロゴなど….png" alt="ロゴ" ></a>';
        }

これのこと。

次に、ヘッダー画像が1枚以上ないとき、つまり0か1枚しかヘッダー画像を登録していない場合の条件分岐の話。

処理をelse{~この中に記述}します。
ここで、ヘッダー画像が設定されていない場合に出力する、いわばデフォルトの画像を設定しています。

echo '<a href="' . home_url() . '"><img src="' .get_bloginfo('template_url') . '/img/デフォルトイメージ.png" alt="" ></a>';

更に、else内に、同じ条件分岐をします。

    if(is_home()) {//トップページはこちら
	echo '<img src="' . get_bloginfo('template_url') . '/img/デフォルトイメージ.png" alt="" />';//ヘッダ画像設定なし
   }else {//下層ページではスライダーなしのロゴとトップページへのリンク。
     	echo '<a href="' . home_url() . '"><img src="' .get_bloginfo('template_url') . '/img/ロゴ.png" alt="" ></a>';
	}

完成!

あとは外観>ヘッダーから、スライドで表示したい画像をボンボンとブチこんでいくのみです。

header

TOPページの上部、ループを記述した箇所が

bxslider

bxslider

解りにくい!

しかし、これで実装可能です!

ここからは完全に任意ですがCSSを忘れずに。

今回の僕の場合は、レスポンシブデザインを採用したサイトだったので、ヘッダーの画像はブラウザ幅いっぱいにしました。

img {
    max-width: 100%;
    height: auto;
}
header .bx-wrapper .bx-viewport { /*メイン画像領域*/
    max-height: 250px;
    /*min-height: 200px;*/
}

max-heightを指定して、領域の最大の高さを固定します。
ココらへんはケースバイケースでお願いします。

さいごに

デモページ、作らなきゃな~。
(なにか「デモページ」のイイ作り方をご存じの方が居たら教えて下さいm(_ _)m)

でわ!

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからグラフィックデザイン的なことをして、ごにょごにょと小さく活動中。Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったり、主に散歩しています。だいたいラーメンを食べて帰ってくる、そんな過ごし方です(都内のオススメ散歩コース募集中!)。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。