スライドショーの実現

WordPressのヘッダー画像を登録画像を使ってスライドショーを実現する方法です。 WordPressのプラグインを使うことでも可能らしいが、ヘッダー画像をスライドショーさせるため「CrossSide」というJQueryを利用した。 次の1～5の手順で行うことでヘッダー画像のスライドショーが実現できた。

  1. 「CrossSide」のホームページからjquery.cross-slide.min.jsをダウンロードして、テーマフォルダーにアップロードする。
  2. jQeryの設定を出力するためfunctions.phpに次のソースコードを追加する。
//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');
}
  1. style.cssに表示エリアの大きさを指定する。
style.css
/* スライドショー */
#slideshow  {
        width: 940px;
        height: 198px;
}
  1. スライドショーに使う画像を登録する。
    　・画像サイズ940×198にする。
    　・画像はブログフォルダー/wp-content/uploads/slideフォルダーに入れる。
  2. ヘッダー画像をスライドショーを表示するために、header.phpに次のソースコードを追加する。
<script>
  jQuery(function() {
    jQuery('#slideshow').crossSlide({
    sleep: 2,
    fade: 1
    }, [
    { src: "<?php bloginfo('url'); ?>/wp-content/uploads/slide/cherryblossoms.jpg" },
    { src: "<?php bloginfo('url'); ?>/wp-content/uploads/slide/sunset.jpg" },
    { src: "<?php bloginfo('url'); ?>/wp-content/uploads/slide/autom.jpg" },
    { src: "<?php bloginfo('url'); ?>/wp-content/uploads/slide/berries.jpg" }
        ])
    });
</script>
<div id="slideshow"></div>

サンプルは「季節の便り」のヘッダー画像で確認できる。