[WordPress General] カスタムヘッダーを利用してスライドショー画像を入れ替えできるようにする
トップページに設置したスライドショーの画像入れ替えについて、カスタムヘッダーを利用した方法が便利でした。
こちらで勉強させて頂きました。
以下のような jQuery スライダーを利用する際に参考になります。
Contents
テーマのカスタムヘッダーを有効にする
管理画面からカスタムヘッダーを登録できるよう、テーマの functions.php で有効化します。
$custom_header_defaults = array(
'default-image' => get_template_directory_uri().'/img/frontpage_slide.jpg',
'width' => 1200,
'height' => 800,
'header-text' => false, //画像にテキストをかぶせるか
);
add_theme_support( 'custom-header', $custom_header_defaults );
ちなみに、この2つの使い分けが良く理解できていません。
追記(2015/01/06)
ヘッダー画像を管理画面から登録する
管理画面(ダッシュボード)をリロードすると「外観 > ヘッダー」が有効になっています。
利用したい画像を選択して、アップロードします。
ちなみに画像を削除したい場合は、「メディア > ライブラリ」から。
バージョン 4.0 であれば、Unattached 扱いで登録されていました。
必要な出力を生成する function を作成する
カスタムヘッダーに登録した画像をスライドショー用に出力する function を作成します。
今回は Supersized 用の文字列を生成します。
function frontpage_slides() {
$header_images = get_uploaded_header_images();
if ($header_images) {
$str = NULL;
foreach ($header_images as $key => $value) {
$str .= '{image: "' . $value['url'] . '"},';
}
$data = rtrim($str, ',');
} else {
$data = '{image: "' . get_template_directory_uri() . '/img/frontpage_slide.jpg"}';
}
return $data;
}
get_uploaded_header_images()
で登録した画像の配列を取得できるのですね。
WordPress Codex 日本語版 で見つけられなかったけれどもこちらに載っていました。
今回は footer.php にスクリプトを書いてしまったので、表示したい箇所で呼び出します。
<script type="text/javascript">
$(document).ready(function(){
'use strict';
$.supersized({
slide_interval: 10000,
transition: 1,
transition_speed: 3000,
slides: [<?php echo frontpage_slides(); ?>]
});
});
</script>
補遺
こちらでは bxSlider を例に確認できました。
「#5 bxSliderとその実行スクリプトをWordPressで読み込むコードを書く」に記述があったのですが、どうも配布するようなテーマやプラグインでは、JavaScript を functions.php に登録して呼び出すような処理をしないといけないよう。