Incorporar Nivo Slider en WordPress

Tutoriales WordPress Publicado por Claudia en julio 27, 2012

Nivo Slider

Hace un tiempo hablaba de Cómo añadir Nivo slider en Blogger. Añadir Nivo Slider en WordPress no es tarea difícil, y puede hacerse sin plugin, como explica BlogOhBlog.

Cómo hacerlo, paso por paso:

1. Subiendo los archivos

Lo primero que debemos hacer es descargar el plugin jQuery desde la web del autor.

Lo descomprimimos, y subimos vía FTP las imágenes arrows.png, bullets.png y loading.gif a la carpeta images de nuestro tema.

Ahora, en la carpeta principal de nuestro tema creamos una nueva carpeta de nombre “js“, y subiremos allí el plugin jquery.nivo.slider.js

2. Llamando al slider

El primer paso es determinar dónde vamos a añadir el slider. Yo lo hice en el index.php, sobre los posts. Para poner el slider justo ahí, deberás buscar:

1
<?php while ( have_posts() ) : the_post() ?>

(o algo similar)

Y pegar inmediatamente debajo:

1
2
3
4
5
6
7
<div id="slider">
 <?php $my_query = new WP_Query('showposts=5&category_name=destacado'); while ($my_query->have_posts()) : $my_query->the_post(); ?>
 <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
 <img src="<?php echo get_post_meta($post->ID, 'nivoimage', true); ?>" alt="" title="<?php the_title(); ?>" />
 </a>
 <?php endwhile; ?>
</div>

De esta manera, veremos el slider sólo en la página principal de nuestro tema. Por defecto, mostrará 5 diapositivas, y la categoría para posts destacados será “destacado“. Dichos valores pueden cambiarse más arriba.

Las imágenes de nuestro slider deberán ser añadidas en un campo personalizado de nombre “nivoimage“.

2. jQuery

Si no tienes jQuery cargado en tu tema, deberás añadir la siguiente línea en tu header.php, justo antes de <?php wp_head(); ?>:

1
<?php wp_enqueue_script("jquery"); ?>

Ahora, bajo el cierre de la etiqueta </body>, en el footer.php, pegaremos:

1
2
3
4
5
6
7
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.nivo.slider.js" type="text/javascript"></script>
 
<script type="text/javascript">
 jQuery(window).load(function() {
 jQuery('#slider').nivoSlider();
 });
</script>

Por defecto el slider mostrará efectos de transición aleatorios.

3. CSS

En nuestro style.css, pegamos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* The Nivo Slider styles */
.nivoSlider {position:relative;}
.nivoSlider img {position:absolute;top:0px;left:0px;}
.nivoSlider a.nivo-imageLink {position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:60;display:none;}
.nivo-slice {display:block;position:absolute;z-index:50;height:100%;}
.nivo-caption {position:absolute;left:0px;bottom:0px;background:#000;color:#fff;opacity:0.8;/* Overridden by captionOpacity setting */
width:100%;z-index:89;}
.nivo-caption p {padding:5px;margin:0;}
.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}
.nivo-directionNav a {position:absolute;top:45%;z-index:99;cursor:pointer;}
.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}
.nivo-controlNav a {position:relative;z-index:99;cursor:pointer;}
.nivo-controlNav a.active {font-weight:bold;}
/*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
#slider {position:relative;width:618px;height:246px;background:url(images/loading.gif) no-repeat 50% 50%;}
#slider img {position:absolute;top:0px;left:0px;display:none;}
#slider a {border:0;display:block;}
.nivo-controlNav {position:absolute;left:260px;bottom:-42px;}
.nivo-controlNav a {display:block;width:22px;height:22px;background:url(images/bullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left;}
.nivo-controlNav a.active {background-position:0 -22px;}
.nivo-directionNav a {display:block;width:30px;height:30px;background:url(images/arrows.png) no-repeat;text-indent:-9999px;border:0;}
a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav {left:15px;}
.nivo-caption {text-shadow:none;font-family: Helvetica, Arial, sans-serif;font-size:14px;}
.nivo-caption a {color:#efe9d1;text-decoration:underline;}

Podremos hacer los cambios que queramos después. Por defecto, nuestro slider tendrá 618 píxeles de ancho y 246 de alto (width:618px;height:246px;), y las imágenes deben adaptarse a él. Obviamente, también podemos modificar dichos valores.

4. Haciendo funcionar el slider

Creamos una categoría nueva con el nombre Destacado, ponemos el post que queremos destacar bajo esa categoría, y añadimos en un nuevo campo personalizado el enlace de nuestra imagen:

Los textos o captions de nuestro slider corresponderán a los títulos de nuestras entradas. El slider requerirá haber seguido todos los pasos previos y haber añadido al menos dos imágenes para funcionar.

Consideraciones finales

  • En la página del autor puedes ver más ejemplos de personalización de Nivo Slider.
  • También puedes ver más opciones de personalización de títulos en WorPress en ReturnTrue.
  • Si no te resultó, o deseas probar con plugin para WordPress, puedes probar Oik Nivo Slider o algún otro actualizado.
Compártelo!
8 Comentarios en Incorporar Nivo Slider en WordPress
  1. Información Bitacoras.com…

    Valora en Bitacoras.com: Hace un tiempo hablaba de Cómo añadir Nivo slider en Blogger. Añadir Nivo Slider en WordPress no es tarea difícil, y puede hacerse sin plugin, como explica BlogOhBlog. Cómo hacerlo, paso por paso: 1. Subiendo los archivo……

  2. evangelicos dice:

    hace tiempo que buscaba la forma de hacer un Slider pero no sabia como pero con este articlo me queda claro como hacerlo muchas gracias

  3. blog Xool dice:

    Lo mismo que evangalicos :]

    Pero existe la forma de hacer que los enlaces apunten a paginas especificas? y no asi a entradas del blog.

    Saludos y muchas gracias

  4. […] a mi gusto fácilmente. Fue entonces cuando encontré este tutorial de chicablogger. com: http://chicablogger.com/incorporar-nivo-slider-en-wordpress/. Y conseguí que el slideshow mostrara los últimos posts de la categoría que a mi se me ocurrió. […]

  5. Rauto dice:

    Muy buena la explicación.
    Cómo se hace para que los post que salen en el slider no salgan abajo duplicados?

  6. Sergio dice:

    Hola Gracias por el post .. .. pero no me quedo claro donde pegar el codigo en el style css

    saludos

  7. […] revisa este artículo de chicablogger.com: http://chicablogger.com/incorporar-nivo-slider-en-wordpress/. Ahí podrás encontrar paso a paso la forma de incorporar Nivo Slider a WordPress sin necesidad de […]

  8. martin dice:

    Hola! Y qué debería agregar al código para hacer que el slider se vea en todas las páginas?

Deja tu comentario
Tu Comentario