SummArg | Cursos y recursos para webmasters

Clase 7: Insertar un slider sin utilizar plugins

En esta clase aprenderemos a insertar un slider si la necesidad de echar mano a ningún plugin. Consideramos que esta lección conforma un excelente punto de partida para aprender a utilizar los cientos de recursos jQuery realmente asombrosos que circulan por la web.

Antes que nada vale mencionar que jQuery es un framework (una librería) para facilitar animaciones y funciones del lado del cliente. Es totalmente gratuito y ya viene en el core de la mayoría de los CMS. Generalmente agregando un plugin (un slider, un news ticker o un menú) insertamos un mundo nuevo de funciones con muy poco trabajo. Los plugins de jQuery no se instalan desde el apartado Plugins de WordPress, sino que bastará con colocar el o los archivos en nuestro theme y linkearlos desde el header.php, footer.php o functions.php.

Tenemos dos versiones para descargar en jQuery.com: una llamada de producción y la otra de desarrollo. En nuestro caso no estamos interesados en desarrollar nada, simplemente utilizaremos recursos ya fabricados, así que descargamos la versión de producción que está minimizada y comprimida.

El archivo jquery-1.7.2.min.js (actual) posiblemente se abra en nuestro navegador y nosotros procederemos a guardarlo en una carpeta llamada /scripts/ dentro de nuestro theme.

En la clase anterior utilizamos jQuery para el menú, así que en nuestro proyecto ya está almacenado. También indicamos a WordPress que deseamos utilizar nuestro archivo jQuery desde el functions.php.

/* Mi jQuery */
 function my_init_method() {
 if (!is_admin()) {
 wp_deregister_script( 'jquery' );
 wp_register_script( 'jquery', '/wp-content/themes/themetaller/scripts/jquery-1.7.2.min.js');
 wp_enqueue_script( 'jquery' );
 }
 }
 add_action('init', 'my_init_method');

Notarán que my_init_method comienza con un condicional en donde especifica que si no estamos en el área de administrador, entonces carga nuestro jQuery. Esto se debe a que WordPress ya trae la librería y, como dijimos anteriormente, y lo utiliza para el Escritorio. Si nosotros linkeasemos la librería desde el header.php del theme sin ningún miramiento ni condicionales, posiblemente algunas secciones del Escritorio dejen de funcionar con normalidad, ya que cargaría dos versiones de jQuery y ésto produciría errores.

Nivo-Slider, uno de los sliders jQuery mas populares

En el sitio oficial de Nivo-Slider promocionan la venta de un plugin para WordPress que es por demás fantástico. También en el repositorio oficial vimos algún que otro plugin para insertar el slider en WordPress bastante bien logrado. Pero nosotros no tomaremos esos caminos, sino que nos ensuciaremos un poco para entender como se aplican estos fantásticos recursos a nuestro theme.

Primero descargamos Nivo Slider desde su sitio (desde aquí, selecciona la primer opción llamada jQuery Plugin) y copiaremos la carpeta themes, el archivo jquery.nivo.slider.pack.js y nivo-slider.css a nuestra carpeta /scripts/.

Y ahora linkeamos nivo-slider.css y el estilo themes/default.css desde nuestro header.php utilizando parte de la ruta hasta nuestro theme con bloginfo(), como vimos en clases pasadas.

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

Y en el footer.php vamos a linkear el archivo JS, justo antes del cierre de la etiqueta </body>. También vamos a dejar preparado el script indicándole que queremos que se active en el <div> con id #nivoslider.

<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>

Antes de continuar vamos a establecer el tamaño de las imágenes que utilizaremos con the_post_thumbnail(). En functions.php ubicamos nuestra sección destinada a las imágenes.

add_theme_support( 'post-thumbnails' );
 add_image_size( 'homepage-thumb', 290, 130, true );

Y debajo añadimos un tamaño mas, con el nombre de homepage-slider.

add_image_size( 'homepage-slider', 920, 310, true );

Guardamos y subimos al servidor. Ahora al subir una imagen, WordPress recortará este tamaño extra. Generamos la categoría “slider” y subimos dentro tres o mas entradas con su respectivo título y una imagen que mínimo sea de 920px de ancho por 310px alto, las cuales marcaremos como destacadas. No es necesario que las insertemos en la entrada, con sólo marcarlas como destacadas ya alcanza.

Procedemos a abrir nuestro archivo index.php en donde vamos a trabajar desarrollando las primeras líneas:

<div id="nivoslider">
 <img src="http://lorempixum.com/g/920/310" />
 </div><!-- end of nivoslider -->

El slider trae un archivo demo.html para que podamos copiar la estructura que necesita para funcionar. Lo copiamos dentro de nuestro id #nivoslider y vamos dejando libre la sección en donde colocaremos el código PHP para generar una consulta que traiga nuestras imágenes recién subidas.

<div id="nivoslider">
 <div class="slider-wrapper theme-default">
 <div class="ribbon"></div>
 <div id="slider" class="nivoSlider">
 <!-- aqui va nuestra query... -->
 </div>
 </div>
 </div><!-- end of nivoslider -->

Necesitamos efectuar una consulta que nos traiga tres entradas de la categoría slider, y cuando lo haga deberá mostrarnos la miniatura del tamaño que le especificamos (homepage-slider) en el functions.php usando add_image_size. Además la imagen debe estar entre etiquetas <a></a> y el link debería dirigirnos a la entrada que se esté mostrando. El código finalmente quedará de la siguiente manera:

<div id="slider">
 <div class="slider-wrapper theme-default">
 <div class="ribbon"></div>
 <div id="nivoslider" class="nivoSlider">
 <?php query_posts('category_name=slider&posts_per_page=3' );
 while ( have_posts() ) : the_post(); ?>
 <a href="<?php echo get_permalink(); ?>"><?php the_post_thumbnail( 'homepage-slider' ); ?></a>
 <?php endwhile; wp_reset_query(); ?>
 </div>
 </div>
 </div><!-- end of nivoslider -->

Finalmente podemos observar que el theme por defecto de Nivo Slider nos agrega debajo un control para navegar, lo eliminaremos abriendo su archivo de estilos ubicado dentro de nuestro theme/scripts/theme/default/default.css, buscamos la línea 30 y le añadimos un “display:none” para ocultarlo.

.theme-default .nivo-controlNav {
 display:none;
 position:absolute;
 left:50%;
 bottom:-42px;
 margin-left:-40px;
 }

Esperamos que les haya resultado fácil de entender esta clase y les recomendamos que utilicen el complemento Firebug (para Firefox) para ejercitar con otros scripts similares a Nivo Slider para afianzar conocimientos.

Demo | Descarga ThemeTaller | Clase 7 (1202)

Volver al temario del taller

 

Dejar un comentario

  1. elmajaron

    Gracias por esta nueva leccion, buenisima como todas las ya publicadas, esperando con ilusion la proxima, un saludo.

  2. Nekko

    Gracias!

  3. Sergio

    Muchísimas gracias por este tutorial, es sin duda, el mejor que he encontrado en castellano en toda la web. Espero la siguiente lección. Un saludo.

  4. Ricardo

    Hola, tengo un problema con el nivo, desde hace 3 dias he estado intentando solucionarlo, por alguna razon me sale descolocado y no obedece estilos, ni los de #nivoslider ni los q trae nivoslider en sus carpetas, el caso es q me sale donde quiere y si no le pongo estlos me sale bien pero descentrado. Estoy super contento con el curso, tengo mucha ilu y me gustaria poder hacer la siguiente clase!!

    Gracias

  5. Nekko

    Hola Ricardo! Deberíamos ver bien el HTML generado en tu theme y el estilo. A veces omitimos cerrar un div y nos pasan estas cosas. El archivo que descargás de acá te muestra bien el slider?

  6. Ricardo

    Si, no se realmente lo que pasaba, lo que hice fue cargar otro tema en lugar del que default que ponemos , aunque luego tube que acoplar el estilo para que quedara bien y ahora esta perfecto :D, gracias por contestarme.

  7. no consigo poner el slider ojala puedan ayudarme, por mas que lo miro parece que todo esta bien pero el slider se me queda en blanco con el circulo en mmedio de cargando.

    no me queda muy claro como implementar las imagenes talvez eso este hacindo mal.

    un saludo

  8. Nekko

    Al colocar las imágenes dentro de la categoría slider, las marcás como destacadas?

  9. Buen aporte. Lo intentaré a ver qué tal.

  10. si que las marco como destacadas, tambien estan en la categoria slider y tienen el tamaño necesario.. he copiado literalmente los archivos que poer a descargar por si tenia algun fallo pero nada, no se que puede pasar

  11. Hola Nekko.. realmente espectacular cada lección!.. justamente estaba buscando algo así.
    Ahora una pregunta: si utilizo un plugin por ej como nextgen para poder tener galerías con diferentes álbumes de fotos, cómo puedo hacer para mostrar las imágenes de cada galería a mi gusto? o sea.. cuáles serían las funciones de wordpress para eso.
    Lo que pasa es que la persona que use el sitio se encargará de crear los álbumes/galerías desde el admin, pero la forma como se ve por defecto no es lo que quiere.
    Muchas gracias!

  12. Nekko

    La verdad es que nunca me llevé lo suficientemente bien con el Nextgen como para tirarme a hacer algo así. Pensá que ese plugin tiene ya de por si sus propios sliders y quizás lo mejor sería que modifiques un poco lo que tiene (http://nextgen-gallery.com/slideshow/).

    Sino podemos meternos a modificar el output del shortcode gallery y adaptarlo para que muestre nuestro slider.
    http://www.summarg.com/2012/modificar-el-html-que-genera-por-defecto-el-shortcode-gallery-en-wordpress/

  13. Hola amigo, a mi me gustaría hacer eso mismo pero en mi caso quiero insertar el slider en la cabecera de mi blog, quedando de esa forma el menú debajo del slider. Pero ya he hecho varios intentos y ninguno me funciona. Si no es tanta molestia para vos me gustaría que me explicaras como puedo insertar el slider en esa parte de mi blog. Muchas gracias por adelantado. 😉

  14. Nekko

    En otras oportunidades ya nos dedicamos a hablar sólo sobre este tema. Espero que este link te ayude!
    http://www.summarg.com/2010/nivo-slider-multiples-efectos-de-transicion-para-tu-sitio-o-wordpress/

  15. Hola Nekko, mi pregunto si hay una posibilidad de mostrar los últimos 10 post en el slider y no solo una categoria.

  16. Nekko

    Por supuesto, lo que vos decis es lo que muestra por defecto WordPress, asi que borrá lo siguiente y fijate si funciona: query_posts('category_name=slider&posts_per_page=3' );

  17. Hola Nekko, no me funciono lo que me recomendaste pero a prueba y error encontré la un forma de hacerlo funcionar, no se si es la correcta pero aquí dejo el código.

    query_posts(‘postbypost’);
    while ( have_posts() ) : the_post();

  18. Jonathan

    Me a servido mucho el tutorial, muchas gracias ! pero e topado acá… Logro insertar el slider donde lo necesito pero no carga las imágenes, están dentro de la categoría “slider” y como destacadas. E estado horas buscando el error y no lo encuentro, seria genial si me prestaras ayuda. Gracias de antemano.

  19. Jonathan

    Adjunto esta imagen, así se puede apreciar mejor.

    http://imageshack.us/f/812/capturaut.png

  20. Nekko

    Fijate si la ruta a la imagen es correcta, porque en tu firebug sale solo la ruta del enlace.

  21. Andrea_11

    Nekko, te felicito por tu trabajo.

    Para la gente que en el slider no se le ven las imágenes, a mi me ocurría lo mismo y revisando mi código he encontrado el error en el archivo functions.php. Tenía mal escrita la ruta del script (wp_register_script( ‘jquery’, ‘rutaa….’).

    Espero que a los que tenían el mismo fallo esta sea su solución tambien.

  22. Estimado!

    Segui los pasos y no logor que funcione… el bucle carga las entradas y las imagenes redimensionadas (lo veo en el codigo de fuente generado) pero en la pagina no aparece nada… que puede ser? El script no esta funcionando? Algo mal en el css?

  23. @Adrian_gcia

    Lo primero gracias por este gran curso, estoy aprendiendo mucho.
    Lo segundo, tengo el mismo problema que Laura, se me queda en blanco cargando y no encuentro el fallo.

    Cuando pones: “Guardamos y subimos al servidor.” a que se refiere? yo estoy trabajando en local, hasta ahora no hice nada para subirlo a ningún lado, que no sea lo que toma el servidor local desde localhots.

    Saludos y gracias

  24. Nekko

    Fijate el código generado (click derecho, ver código fuente, varía según el navegador) y fijate si encontró las imágenes de tus entradas. Perdón por el “subimos al servidor”, es la costumbre de no siempre trabajar en local.

  25. @Adrian_gcia

    Gracias por responder y perdona la tardanza mía, que estuve fuera unos días.
    Si que en el código me aparecen las imágenes correctamente, vamos que si le doy al enlace que aparece sale la imagen.

  26. @Adrian_gcia

    Nada,el slider en blanco cargando indefinidamente

  27. Hola, me pasa lo mismo que a @Adrian_gcia y no logro encontrar el error! necesito ayuda urgente porque tengo q entregar el sitio pronto :S
    gracias

  28. Ok, encontré el error!
    http://imageshack.us/photo/my-images/717/capturaoz.jpg/

    el error para q aparecieran las imagenes, era simple, ahora me queda ver si funciona el slider y el tamaño de las imagenes, q no es el correcto.

    asi http://imageshack.us/photo/my-images/69/capturafv.jpg/

    Saludos! y cualquier consejo, bienvenido!

  29. Kitsune

    Respecto a los que tienen el problema de que no les acaba de cargar las imágenes (se queda en el icono de cargando) les diría que revisaran las referencias a las rutas a los archivos, como por ejemplo a fichero jquery, es posible que vuestro tema no se llame “themetaller” y hayais copiado sin modificar el texto. Ejemplo en functions.php tal y como aparece en el manual:
    wp_register_script( 'jquery', '/wp-content/themes/themetaller/scripts/jquery-1.7.2.min.js');
    Si mi tema se llama “temapruebas”, tendre que cambiar la ruta:
    wp_register_script( 'jquery', '/wp-content/themes/temapruebas/scripts/jquery-1.7.2.min.js');
    Otra cosa que hay que revisar es si el fichero jquery que hemos descargado tiene el mismo nombre que el del manual. Por ejemplo, me he descargado el jquery actual, y el archivo descargado es: jquery-1.8.2.min.js, por lo tanto tendre que modificar de nuevo la linea:
    wp_register_script( 'jquery', '/wp-content/themes/temapruebas/scripts/jquery-1.8.2.min.js');

    Espero que a alguien le sirva y perdón por extenderme.
    Por cierto, muchas gracias por el taller 🙂

  30. en vdd eres grande Mil gracias baje miles de plugins segui muchos tutoriales pero ninguno me servio solo el tuyo en vdd mil gracias Saludos

  31. carlos

    DIOS bendiga y le de mas conocimiento a estas personas que son genios y nos regalan GRACIAS finalmente uno no se lleva nada
    GRACIAS

  32. José F. Ramírez

    Muy buen post sobre esta aplicación.

    Pero yo también tengo otro problema, a ver si alguno podéis ayudarme y es urgente.

    Tengo una categoría asignada para cargar las imágenes y he puesto un máximo de 3 entradas (3 imágenes a aparecer en el slide). Sin embargo solo aparece una de ellas, cuando en la categoría tengo hasta 5 entradas con una imagen preparada para el slide. De hecho, he probado a quitar la primera entrada de la categoría, y en el slide justamente la siguiente, y solo esa.

    No sé si me he explicaado con claridad… de todas formas, si alguien tiene la clave, y además de responder por aquí pueda escribirme a joeycorleone@gmail.com, le estaré eternamente agradecido. Gracias!

  33. Flabio

    Hola gracias por la información, me gustaría saber si el nivo se puede descargar y usar o si hay que pagar alguna licencia. Saludos y gracias
    Flabio

  34. Podés usarlo libremente.

  35. @Adrian_Gcia

    Hola
    Sigo aprendiendo y avanzando con estos tutoriales, que son la leche, GRACIAS.

    Ahora mi duda es que me gustaría que no saliese el titulo de las imágenes en el Slider.
    Buscando por ahí veo que a casi nadie le salen, pero no encuentro la solución a como quitarlas.
    En otros sitios lo que hacen es hacer un documento html con las imágenes que se tienen que mostrar y me parece que desde ese mismo seleccionan si sale el titulo o no, pero al hacerlo de esta otra manera no encuentro como ni donde.

    Un saludo y gracias

  36. Hugol

    Hola muchas gracias por los tutoriales realmente excelentes y en espera de los nuevo, y tengo un problema con los captios del nivo slider no se como se agregan o desde que seccion en wordpress lo puedo cargar, muchas gracias por todo y saludos.

  37. Trouner

    Buenas estoy con el nivosSlider pero mi problema es que al cargar la pagina el script no funciona me muestra las imágenes una debajo de otra y no en forma de presentación alguna idea de este error?

  38. […] Clase 7: Insertar un slider sin utilizar plugins | SummArg. Share this:TwitterFacebookLike this:LikeBe the first to like this. codigo diseño fotografia […]

  39. Hola, sabes como hacer para mostrar en el caption el extracto de la ntrada respectica..??’ he tratado haciendo malavares, pero no me sale,,,ejeje..??’
    Saludos.:!!

  40. Sergio

    Buenas, este web es de gran ayuda, ¡sin duda! estoy siguiendo la mayoría de capítulos y me funciona por el momento, pero aquí he topado con un problema.
    He insertado 1 categoría llamada slider, tal y como explicas, y 2 entradas con imágenes destacadas, pero al visualizar la web solo carga 1 de ellas.
    ¿Podrías decirme que podría estar mal?

    Grácias!

  41. Sergio

    por lo que veo en la consola, me dice que nivoslider no tiene el método “on” y que “undefined” no es una función.
    está todo bien linkeado, y no se como arreglarlo

  42. Ruben

    Me hace algo raro, me carga la imagen en un tamaño muy grande y después justo antes de cargar la siguiente la hace mas pequeña…

  43. ruben

    Hola muy buen aporte, pero tengo problemas… si la imagen es bastante mas grande de 920×310 hace cosas muy extrañas…

  44. […] Clase 7: Implementar Nivo-slider sin plugins. […]

  45. […] Clase 7: Insertar un slider sin utilizar plugins […]

  46. Hola amigos una pregunta, donde puedo eliminar el cuadro negro de texto que aparece debajo? saludos me encanta su web!

  47. Una consulta, es posible hacer que se muestre solo en la página de categorias de un blog? el tema que tengo instalado trae un slider incluido, y ademas se puede agregar independientemente en cada artículo o página, pero en la pagina de categorias no tiene ninguna opción, alguien sabe si existe alguna forma de inlcuirlo especificamente ahi?
    de antemano muchisimas gracias

  48. Jesus

    Hola, he creado el slider tal como indicas en el post. Me gustaría saber más acerca de como hacer que se muestre el texto en el slider y si es posible.
    Gracias

Dejar un comentario