ヘッダー画像のスライドショー

実はこれはやりたかった機能の一つです。
使用ブログ

WordPressには、jQuery(ジェイクエリー)というライブラリが用意されていますので、あらかじめこれを使う設定だけしておきます。

次に、CrossSlide サイトから「jquery.cross-slide.min.js」というファイルをダウンロードします。Download minified を右クリックして保存することができます。

このファイルは、Themeフォルダにアップロードします。

WordPressでは、「外観」→「ヘッダー」をクリックし、カスタムヘッダーの画像をアップロードしておきます。※画像は、Function.php で指定したサイズにします。
「ランダム」という項目をチェックします。ここをチェックしてある場合だけ、スライドショーにするようにします。
ループは1回に設定しました。 設定しないといつまでも動いています。

Function.php でJQueryの出力設定を指定します。

//jQueryの設定を出力
add_action('wp_head', 'myScript', 1);
function myScript() {
	wp_enqueue_script('jquery');

wp_enqueue_script('jquery.cross-slide.min.js', 
get_bloginfo('template_url') . '/jquery.cross-slide.min.js');
}

ヘッダーファイル（header.php）に、ヘッダー画像のURLを出力する設定をします。

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

<script>
  jQuery(function() {
    jQuery('#slideshow').crossSlide({
      sleep: 3,
      fade: 1,
	  loop: 1
    }, [
<?php $headers = get_uploaded_header_images(); ?>
<?php foreach ($headers as $key => $value): ?>
	{ src: '<?php echo $value['url']; ?>' },
<?php endforeach; ?>
    ])
  });
</script>

<div id="slideshow"></div>
<?php endif; ?>
<?php endif; ?>