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

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:

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:

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.

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:

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.

AVISO: esta publicación es de hace dos 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.

Valora este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (2 votos, promedio: 5,00 de 5)
Cargando…

Autor: Francisco

Desde hace ya muchos años me he convertido en un fanático del mundo de la programación. Inicialmente lo hice con Java, después lo extendí a su aplicación en el desarrollo de páginas web dinámicas (JSP, JSF, STRUTS, etc.) y lógicamente tampoco he perdido mi ligazón con el tan extendido uso de php que últimamente lo he enlazado con el mundo de los CMS y en concreto con WordPress, sobre todo por el hecho de facilitar enormemente la labor de programación y poder obtener unos resultados espectaculares. También me gustan los temas relacionados con la Ley de Protección de Datos, mis trabajos sobre esta materia los puedes ver en http://lopd-agpd.com

Comparte esta entrada en
468 ad

Pin It on Pinterest