Nivo Slider para WordPress


Hace tiempo que instalé en mi blog con la siguiente dirección http://www.vercrucerosbaratos.com el popular Nivo Slider que permite hacer un maravilloso slider de imágenes. Este extendido plugin lo podemos ver en http://nivo.dev7studios.com/. Ahora bien, si os vais al apartado de descargas, podéis ver que la versión para jQuery es gratuita, pero para WordPress hay que pagar por utilizarlo.

Por todo ello, si es gratis para jQuery y no para WordPress, y si además eliminamos la instalación de un plugin en WordPress, con el consiguiente ahorro de recursos, ¿por qué no hacerlo nosotros mismos?, ese fue mi pensamiento cuando lo instalé en mi blog, y con el presente, os invito a todos vosotros a que decubráis lo fácil que es y y os animéis a instalarlo de forma manual, siguiendo las pautas que a continuación os paso a relatar.
Lo primero que hacemos es cargar jQuery, en nuestro tema, para lo cual tenemos dos opciones:

  • Utilizar siempre la última versión de jQuery, mediante un enlace html
  • Descargar la última versión de jQuery y depositarla en una carpeta del tema

Para el primer caso, lo que debemos hacer es colocar las siguientes líneas de código en nuestro fichero funtions.php

function mimetodo()
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', 'mimetodo');

En el segundo caso, debemos descargar el fichero javaScript de jQuery desde este enlace, y aconsejo que se utilice la versión minimizada para ahorrar espacio y mejorar el tiempo de carga de la página. El fichero descargado, que en el momento de redactar este post sería jquery-1.8.1.min.js, lo colocamos por ejemplo en una carpeta llamada scripts, de tal forma que si nuestro tema se llama temaPrueba,tenga el siguiente path /wp-content/themes/temaPrueba/scripts/jquery-1.8.1.min.js.
En este caso, el código que hay que implementar en el fichero functions.php, sería el siguiente:

 function mimetodo() {
 if (!is_admin()) {
 wp_deregister_script( 'jquery' );
 wp_register_script( 'jquery', '/wp-content/themes/temaPrueba/scripts/jquery-1.8.1.min.js');
 wp_enqueue_script( 'jquery' );
 }
 }
 add_action('init', 'mimetodo');

Como puede verse, tanto en un caso como en otro, hemos puesto un condicional, de tal forma que cargue jQuery, sólo cuando no estemos en el área de administración. Ello es debido a que jQuery, ya viene instalado por defecto con la carga de WorPress, para la zona de la administración, y consecuentemente como la versión que cargamos nosotros y la que tiene por defecto WordPress posiblemente sean diferentes, conviene hacer esta distinción para evitar posibles conflictos.
Bien, pues con esto ya tenemos los cimientos colocados, ahora vayamos a la parte concreta de instalación del Nivo Slider y para ello lo primero que tenemos que hacer es descargarnos el plugin de jQuery llamado Nivo Slider acudiendo a la página que aparece al pinchar en este enlace.
El fichero descargado está comprimido en formato zip, y habrá que descomprimirlo. Nos debemos fijar un poco en la estructura de los directorios y los ficheros que contiene, y además en la carpeta denominada demo hay un ejemplo que nos puede servir de ejemplo para reproducir su estructura y la formación del código necesario en la hoja que estamos creando.

De momento, lo que tenemos que hacer es copiar los ficheros jquery.nivo.slider.js y jquery.nivo.slider.pack.js que son los que contienen las instrucciones javascript correspondientes a nuestra carpeta que hemos denominado scripts, igualmente en esta carpeta irá el fichero nivo-slider.css, que contiene el código de la presentación (hoja de estilo), y también copiaremos tal cual la carpeta themes que aparece en el documento descomprimido que nos hemos bajado.
Para aclarar cómo queda la dependencia de ficheros y directorios, os dejo a la izquierda una imagen de mi estructura de directorios, tal y como yo la tengo, indicando con una flecha los archivos necesarios de Nivo Slider, que a buen seguro clarificará mucho lo comentado en el párrafo anterior.
Bien, ahora en el fichero header.php de nuestro theme debemos indicar los ficheros css que se deben utilizar al mostrar la página html, en concreto, para esto yo tengo las siguientes instrucciones:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url');?>/scripts/nivo-slider.css" media="screen" />
 <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url');?>/scripts/ themes/default/default.css" media="screen" />

Igualmente en el fichero footer.php he incluido la instrucción que incluye el fichero javascript que hace el efecto Nivo Slider, junto con las instrucciones necesarias para ello, en concreto he añadido lo siguiente, antes de la etiqueta que indica la finalización del cuerpo de la página.

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/scripts/jquery.nivo.slider.pack.js"></script>



 <script type="text/javascript">

 $(window).load(function() {

 $('#nivoslider').nivoSlider();

 });

 </script>

He utilizado la función bloginfo(‘template_url’) de WordPress, que nos facilita el patch hasta la carpeta de scripts.

Por último lo que queda es añadir un conjunto de etiquetas, que contienen a las imágenes que queremos mostrar, y que se deberá incluir en el lugar de la página que deseamos aparezca (yo lo incluí dentro del fichero header.php pues el slider de imágenes me aparecía en la cabecera de cada página del blog), con la siguiente estructura:

<div id="slider">
		 <div class="slider-wrapper theme-default">
		 <div class="ribbon"></div>
		 <div id="nivoslider" class="nivoSlider">
			<img src="<?php bloginfo('template_url');?>/images/cruise1.jpg" data-thumb="<?php bloginfo('template_url');?>/images/cruise1.jpg" alt=""/>
	                <img src="<?php bloginfo('template_url');?>/images/cruise2.jpg" data-thumb="<?php bloginfo('template_url');?>/images/cruise2.jpg" alt="" />
	                <img src="<?php bloginfo('template_url');?>/images/cruise3.jpg" data-thumb="<?php bloginfo('template_url');?>/images/cruise3.jpg" alt="" data-transition="slideInLeft" />
			 <img src="<?php bloginfo('template_url');?>/images/cruise4.jpg" data-thumb="<?php bloginfo('template_url');?>/images/cruise4.jpg" alt=""/>
	                <img src="<?php bloginfo('template_url');?>/images/cruise5.jpg" data-thumb="<?php bloginfo('template_url');?>/images/cruise5.jpg" alt="" />
	                <img src="<?php bloginfo('template_url');?>/images/cruise6.jpg" data-thumb="<?php        loginfo('template_url');?>/images/cruise6.jpg" alt="" data-transition="slideInLeft" />
	 </div>
	 </div>
 </div>

Con todo este montaje, el efecto de slider de las imágenes debería salir, y además de una forma más eficiente que si cargamos el plugin, que además nos cuesta dinero.

Bien pues esto es todo, espero que os sirva para vuestro trabajo, y por supuesto os recomiendo que hagáis una salvaguarda de vuestro sitio, antes de hacer estos cambios, como corresponde hacer siempre que se incorporan modificaciones importantes al sitio web.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(2 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

14 comentarios en “Nivo Slider para WordPress”

  1. No he probado Nivo así que igual me animo. Últimamente muchos temas incorporan sliders (y plugins como dices) pero siempre está bien tener todas las opciones, para tunear un tema que no lo tenga incorporado y si no se quieren meter más plugins.

    Gracias Francisco, estupendo artículo.

  2. La ventaja de este sistema, es que cualquier plugin de jQuery, que hay muchos y muy interesantes, lo podemos utilizar con técnicas afines a la que he expuesto en este artículo, y por supuesto, la mayoria gratuitas, y lo interesante es que tu puedes controlar mejor el funcionamiento. Ahora eso sí se necesitan más conocimientos específicos que si utilizas un plugin de WorPres.

  3. Fernando, conoces la forma de implementar un slider así pero en las galerías nativas de wordpress? (la idea es que con un shortcode se pueda agrear el slide automáticamente) Intuyo que haría falta algún código que en primera instancia te de la url de cada una de las imágenes. Partiendo de eso creo que no sería muy difícil armar el resto.

    ¿Alguna idea?

    ¡Saludos!

  4. La verdad que integrar este tipo de scripts que en su mayoría están en forma gratuita en html, jquery y css, es relativamente fácil si se entiende como cargar y llamar los archivos necesarios para su funcionamiento, ni que digamos de la automatización mediante categorías, custom fields o custom posts para cargar las imágenes o artículos del blog. Y esto no se puede hacer únicamente como nivo slider, que es un script agradable, pero hay otros que tienen un mejor acabado y efectos como jquery cycle, el cub3r, entre otros. La limitancia en estos casos es la falta de conocimientos y muchas veces el decir «no puedo». Muy buen tutorial Francisco sigue así.

  5. Nivo Slider está programado para 16 efectos. Una forma de conseguir el efecto es poniendo el atributo data-transition dentro de la etiqueta img, quedando por ejemplo así: . Otra forma es poniendo el efecto dentro de la llamada a la función que ejecuta el NivoSlider. Esta forma de hacerlo y la relación de los 16 efectos, los puedes ver en: .

    La ventaja de utilizar estos métodos, como ya os he dicho en el anterior comentario, es que puedes conseguir unos efectos maravillosos ( eso sí, hay que tener activado javascript en el navegador). Por ejemplo, usando otro plugin de jQuery, el JQuery.sidebar, que los podéis encontrar en la dirección , y utilizando una metodología similar a la descrita en este post, podéis conseguir un maravilloso menú, desplegando unos paneles laterales, como podéis ver en mi blog sobre la Ley de Protección de Datos que acabo de comenzar a crear hace tres días, y cuya dirección es http://lopd-agpd.com/normativa/ley-organica-15199/. Hay podéis ver cómo he colocado un panel en el lateral derecho que se despliega al pasar el ratón por él, presentando un maravilloso menú.

  6. En total se le pueden dar a las transiciones de imágenes un total de 16 formas diferentes. Una de las formas de indicar un tipo de transición es como sigue:
    , es decir definiendo el atributo data-transition. Hay otra forma, que es indicándolo en la llamada al método. Todo esto lo tienes pinchando en este enlace .

  7. Una modificación al script para iniciar el slider, es que en algunos navegadores, especialmente IE te arrojará un error y eso es debido a un conflicto entre librerías, la solución en ese caso es utilizar la opción: jQuery.noConflict() que se puede especificar a una variable al inicio del codigo.

  8. No lo he probado, pero creo que no habría ningún problema, tan sólo cunado declaras la imágenes, dices dónde están situadas (lo puedes ver en la pantalla de administración de WP, en multimedia, ahí te viene en cada imagen, el http donde se encuentran) pones ese http en el atributo src de la etiqueta img y debería funcionar.

  9. Fernando, en el primer bloque de código te falta incluir una llave, resultando en un error de WordPress.

    function mimetodo() {

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido