実はこれはやりたかった機能の一つです。
使用ブログ
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; ?>