いろいろなことをちゃんとしたいブログ

ちゃんとしたブログ

jQuery Wordpress

nivo-sliderをwordpressに実装する

投稿日:

画像をスライドさせる最近流行のjQueryをWordpressに実装する方法。
プラグインもあるんだけど、とりあえずプラグインには頼りたくない場合に。

Nivo Sliderをダウンロードする

Nivo Slider

ダウンロードしたファイルを任意の場所にアップロードする

ダウンロードしたnivo-sliderのフォルダをここでは
themeのoriginalというフォルダにアップロードします。
つまりはtop.phpやindex.phpなどのテンプレートファイルがあるディレクトリです。

ライブラリなどを読み込ませる

jQueryライブラリー、Nivo Sliderソースファイル、Nivo Sliderのcssなどを読み込ませる記述を追加する。
head内

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/nivo-slider/demo/scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/nivo-slider/jquery.nivo.slider.pack.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/nivo-slider/nivo-slider.css" type="text/css" media="screen" >
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/nivo-slider/demo/style.css" type="text/css" media="screen" >

同じくhead内にjQueryコードを記述

<script type="text/javascript">
  $(window).load(function() {
      $('#slider').nivoSlider({
      });
  });
</script>

このjQueryコードに下記のパラメーターを追加する事で効果を色々と追加できる

<script type="text/javascript">
  $(window).load(function() {
      $('#slider').nivoSlider({
        effect:'random', // 画像切り替え時のアニメーション
        slices:15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed:500, // アニメーション速度(ms)
        pauseTime:3000, // 画像切り替えまでの時間(ms)
        startSlide:0, // 初めに表示する画像位置
        directionNav:true, // 前/次ボタンを表示
        directionNavHide:true, // マウスホバー時のみdirectionNavを表示
        controlNav:true, // コントロールナビの表示
        controlNavThumbs:false, // コントロールナビに画像サムネイルを使用
        controlNavThumbsFromRel:false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav:true, // スライドをキーボードで操作
        pauseOnHover:true, // マウスホバー時に切り替えを一時停止
        manualAdvance:false, // 自動スライドしない
        captionOpacity:0.8, // キャプションの透過度
        prevText: 'Prev', // 前ボタンの名前
        nextText: 'Next', // 次ボタンの名前
        beforeChange: function(){}, // スライド切り替え前のコールバック関数
        afterChange: function(){}, // スライド切り替え後のコールバック関数
        slideshowEnd: function(){}, // 全ての画像を表示した後のコールバック関数
        lastSlide: function(){}, // 最後の画像が表示される後のコールバック関数
        afterLoad: function(){} // スライドのロードが完了したときのコールバック関数
      });
  });
</script>

effectの値

random / sliceDown / sliceDownLeft / sliceUp / sliceUpLeft / sliceUpDown / sliceUpDownLeft / fold /fade / random
slideInRight / slideInLeft / boxRandom / boxRain / boxRainReverse / boxRainGrow / boxRainGrowReverse

コンテンツ部分

コンテンツ部分に下記のコードを追加。
tittle=""でキャプションを表示する事ができる。

<div class="slider-wrapper">
    <div id="slider" class="nivoSlider">
        <img src="<?php bloginfo('template_directory'); ?>/images/main.png" tittle="メインページ" />
        <a href="?page_id=11"><img src="<?php bloginfo('template_directory'); ?>/images/sub1.png" alt="sub" /></a>
        <a href="?page_id=2210"><img src="<?php bloginfo('template_directory'); ?>/images/sub2.png" alt="sub" /></a>
        <a href="?page_id=4661"><img src="<?php bloginfo('template_directory'); ?>/images/sub3.png" alt="sub"/></a>
        <a href="?page_id=3126"><img src="<?php bloginfo('template_directory'); ?>/images/sub4.png" alt="sub" /></a>
    </div>
</div>

-jQuery, Wordpress
-, ,

Copyright© ちゃんとしたブログ , 2019 All Rights Reserved.