[WordPress General] カスタムヘッダーを利用してスライドショー画像を入れ替えできるようにする

トップページに設置したスライドショーの画像入れ替えについて、カスタムヘッダーを利用した方法が便利でした。

こちらで勉強させて頂きました。

以下のような jQuery スライダーを利用する際に参考になります。

Contents

テーマのカスタムヘッダーを有効にする

管理画面からカスタムヘッダーを登録できるよう、テーマの functions.php で有効化します。

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)

ヘッダー画像を管理画面から登録する

管理画面(ダッシュボード)をリロードすると「外観 > ヘッダー」が有効になっています。
利用したい画像を選択して、アップロードします。

2014-08-29_custom_header_01

ちなみに画像を削除したい場合は、「メディア > ライブラリ」から。
バージョン 4.0 であれば、Unattached 扱いで登録されていました。

必要な出力を生成する function を作成する

カスタムヘッダーに登録した画像をスライドショー用に出力する function を作成します。
今回は Supersized 用の文字列を生成します。

functions.php
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 にスクリプトを書いてしまったので、表示したい箇所で呼び出します。

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 に登録して呼び出すような処理をしないといけないよう。