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