Nivo slider in WordPress



In this article I will teach to you to integrate a light and very configurable slider, as he is the one of Nivo, in your WordPress.

To integrate jQuery in WordPress.

This slider, or merry-go-round of photographies, is based on the technology jQuery for that reason first that we must do is to add the function library of jQuery in our WordPress, for that in the file €˜funtions.php €˜of the folder of our subject we must add the following lines:


function mijQuery () \ {
  if (! is_admin ())\ {
    wp_deregister_script (€˜jquery€™);
    wp_register_script (€˜jquery€™, (€œhttp://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js€), false, '');
    wp_enqueue_script (€˜jquery€™);
  }
}
add_action (€˜init€™, €˜mijQuery€™);

This code loads the file of jQuery more updated from the Apis de Google. He is within a conditional instruction €˜if€™ because if we are executing WordPress as administrator already is activated jQuery.

To unload the slider of Nivo

The slider you can unload it in the direction €˜http://dev7studios.com/plugins/nivo-slider/€™. Since you see are three options, one of them is for WordPress and is of payment, we we will choose the gratuitous version: jQuery plugin.



Zip will unload to us that contains the archives of the slider and a folder with one demo.
We must copy the following archives to a folder of our subject, I I called to the folder €˜nivo€™, as one is in the image:



To add slider to our WordPress

In the file header.php, of the folder of our subject, we must add to these lines within the label <head>, this way:



&#60; link rel= " stylesheet€ type= " text/css€ href=€/nivo/nivo-slider.css€ media= " screen€/>
&#60; link rel= " stylesheet€ type= " text/css€ href=€/nivo/themes/default/default.css€ media= " screen€/>
&#60; script type= " text/Javascript€ src=€/nivo/jquery.nivo.slider.pack.js " ></script>
<script type= " text/Javascript " >
  $ (window) .load (function () \ {
    $ (€˜to #nivoslider€™) to.nivoSlider ();
  });
</script>

These are the archives of style sheet css and the document of java of our slider.

And in the document where we want to add the slider, for example index.php or home.php, we must do it of the following way:


<script type= " text/Javascript " >

  $ (window) .load (function () \ {

    $ (€˜to #nivoslider€™) to.nivoSlider (\ {

      effect: €˜random€™,

      slices: 15,

      boxCols: 8,

      boxRows: 4,

      animSpeed: 500,

      pauseTime: 3000,

      startSlide: 0,

      directionNav: false,

      controlNav: false,

      controlNavThumbs: false,

      to pauseOnHover: false,

      manualAdvance: false

    });

  });

</script>>


In document HTML where you are going to insert the slider must be thus:


  <div id= " slider " >

        <div class= " slider-wrapper theme-default " >

              <div class= " ribbon " ></div>

              <div id= " to nivoslider€ class= " to nivoSlider " >

                    <a href= " # " ><img src= " https://imagen1.jpg€ alt= ""/></a>

                    <a href= " # " ><img src= " https://imagen2.jpg€ alt= ""/></a>

                    <a href= " # " ><img src= " https://imagen3.jpg€ alt= ""/></a>

            </div>

        </div>

  </div>

I hope that this entrance has been to you useful and if I can help you in something you do not doubt more in leaving a commentary.

It lets a commentary