【wordpress】Stinger5でカルーセルスライダーを実装する方法

Stinger5でカルーセルスライダーを実装する方法

現在、案件で、無料日本語wordpressテーマの中で最高峰とも名高いStinger5をカスタマイズしているのですが、カスタムヘッダーで登録した複数のヘッダー画像を使ってカルーセルスライダーにしてみました。

そんなに難しくないので、「コピペでいけるからさ」ぐらいの気持ちで実装してみてください。

今回は「Stinger5を使っている場合」ということで進めていくので問題はないと思いますが、functions.phpにカスタムヘッダーを設定できるようにする記述が無いと話になりませんので、「Stingerじゃないけど見てるよ」という方はfunctions.phpに以下の記述があるかをご確認ください。

//こんなかんじの
add_theme_support( 'custom-header');

1 2	//こんなかんじの add_theme_support( 'custom-header');

関数リファレンス/add theme support – WordPress Codex 日本語版

スライダーに使うjQueryプラグイン「bxSlider」

レスポンシブ対応の最強スライダープラグイン「bxSlider」を使います。

Stinger5でカルーセルスライダーを実装

bxSlider　ダウンロード

bxSliderの動作デモはこちら。
レスポンシブルデザインにも対応した高性能なスライダー【bxslider】の設置 – Divスライド系の中では一番のオススメです。

レスポンシブル。

Stinger5でスライダーを実装する部分

&lt;div id="gazou"&gt;
 &lt;?php if(get_header_image()): ?&gt;
 &lt;ul id="headimg" class="bxslider"&gt;
 &lt;?php
 $headers = get_uploaded_header_images();
 foreach($headers as $header){
 //カスタムヘッダーのalt取得
 $alt = get_post_meta( get_custom_header()-&gt;attachment_id, '_wp_attachment_image_alt', true );
 ?&gt;
 &lt;li&gt;
 &lt;img src="&lt;?php echo $header[url]; ?&gt;" alt="&lt;?php echo $alt; ?&gt;" width="&lt;?php echo HEADER_IMAGE_WIDTH; ?&gt;" height="&lt;?php echo HEADER_IMAGE_HEIGHT; ?&gt;" /&gt;
 &lt;/li&gt;
 &lt;?php
 }
 ?&gt;
 &lt;/ul&gt;
 &lt;?php endif; ?&gt;
 &lt;/div&gt;

<?php if(get_header_image()): ?>

<?php

$headers = get_uploaded_header_images();

foreach($headers as $header){

//カスタムヘッダーのalt取得

$alt = get_post_meta( get_custom_header()->attachment_id, '_wp_attachment_image_alt', true );

<li>

<img src="<?php echo $header[url]; ?>" alt="<?php echo $alt; ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" />

</li>

<?php

}

</ul>

<?php endif; ?>

</div>

Stingerシリーズには、だいたいこんな感じのカスタムヘッダーを出力するところがあると思います。

当ブログはStinger3を使用していますが、同様の構造のHTMLがあったような気がします。「id=”gazou”」を探してみてくださいね。

headimgの箇所は若干HTMLを変更し、リスト表示にしているのでご注意を。
しかしそのような変更を加えなくてdivの羅列などでも実装はできます。ただ、HTML的にはliとかfigureで書くほうが好ましいような気はします。

なにをやっているか？

get_upload_header_images

カスタムヘッダーとしてUPされた複数の画像を配列で取得しています。

foreachでループさせて各要素の持つ値からURLを出力しましょう。

&lt;img src="&lt;?php echo $header[url]; ?&gt;"

1	<img src="<?php echo $header[url]; ?>"

[url]に、カスタムヘッダーのURLが格納されています。

get_uploaded_header_images:WordPress私的マニュアル

HEADER_IMAGE_WIDTH; HEDAER_IMAGE_HEIGHT;

ここでカスタムヘッダーの幅と高さを取得、表示しています。僕としてはget_custom_header()を使う方を推奨しますが、元の形式を崩さないことを優先したかったのでそのまま進めました。

ちなみにget_custom_header()でカスタムヘッダーの高さを幅を出力する場合は

width="&lt;?php get_custom_header()-&gt;width; ?&gt;" height="&lt;?php get_custom_header()-&gt;height ?&gt;"

1	width="<?php get_custom_header()->width; ?>" height="<?php get_custom_header()->height ?>"

となります。

カスタムヘッダーのaltの取得

せっかくなのでalt=””も指定しておきましょう。

get_post_meta( get_custom_header()-&gt;attachment_id, '_wp_attachment_image_alt', true );

1	get_post_meta( get_custom_header()->attachment_id, '_wp_attachment_image_alt', true );

get_post_meta

&lt;?php $meta_values = get_post_meta($post_id, $key, $single); ?&gt;

1	<?php $meta_values = get_post_meta($post_id, $key, $single); ?>

$post_id
データを取得したい投稿のID。

$key
取得したい値のキー名の文字列。

$single
trueにセットした場合、文字列として単一の結果を返します。falseまたは値をセットしなかった場合、関数はカスタムフィールドの配列を返します。

関数リファレンス/get post meta – WordPress Codex 日本語版
WordPress › フォーラム » カスタムヘッダー画像のalt取得

僕も知らなかったのですが、カスタムフィールドを取得するget_post_metaの引数にattachment_idと「wp_attachment_image_alt」を指定することでカスタムヘッダーのaltが取得できるんですね！

BxSliderの設定

bxSliderからは以下の2ファイルを読みこませましょう。

&lt;link rel="stylesheet" type="text/css" href="&lt;?php bloginfo('template_directory'); ?&gt;/パス/jquery.bxslider.css" &gt;
&lt;script type="text/javascript" src="&lt;?php bloginfo('template_directory'); ?&gt;/パス/jquery.bxslider.js"&gt;&lt;/script&gt;

1 2	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/パス/jquery.bxslider.css" > <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/パス/jquery.bxslider.js"></script>

スライダーに変わったエフェクトを付けたいなら更に「jquery.easing.1.3.js」というファイルを探して読ませてください。エフェクトの指定に関してはこちらの「easing」の項目をご参照ください。

jsファイルに以下のように記述するだけで完成！

jQuery(document).ready(function(){////////bxSlider

	jQuery('#headimg').bxSlider({
		auto : true ,  //自動でスライドするか？
		speed : 500 , //スライドの速度
		pause : 2000 , //スライドごとの停止時間
		controls : false //スライドのコントローラー
	});
});

jQuery(document).ready(function(){////////bxSlider

jQuery('#headimg').bxSlider({

auto : true , //自動でスライドするか？

speed : 500 , //スライドの速度

pause : 2000 , //スライドごとの停止時間

controls : false //スライドのコントローラー

});

以上で、カスタムヘッダーのカルーセルスライダー化は完了です。とってもかんたん！

実は、Stinger5でこのようにカルーセルスライダーを実装していくと、IE8でスライダーが表示されないというトラブルが起こる時があります。

それの対処法に関しては別の記事で書こうと思います！

でわ！

Profile

東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。（ポートフォリオ）Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。コーヒー友達募集中。