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
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 yloading.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() ?> |
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> |
2. jQuery
Si no tienes jQuery cargado en tu tema, deberás añadir la siguiente línea en tuheader.php, justo antes de <?php wp_head(); ?>:
1
| <?php wp_enqueue_script("jquery"); ?> |
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> |
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;} |
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 enReturnTrue.
- Si no te resultó, o deseas probar con plugin para WordPress, puedes probar Oik Nivo Slider o algún otro actualizado.
.
Via: CB
No hay comentarios.:
Publicar un comentario
¡ATENCIÓN: LEE LO SIGUIENTE ANTES DE COMENTAR!
*Si vas a comentar, puedes usar tu cuenta de Google, OpenID, Nombre/Web, y Anónimo
*No Insultar
*No hagas SPAM, Números telefónicos ni Emails
No dejes enlaces a otros blogs, números telefónicos ni correos electrónicos.
¡Gracias!
Att: Staff Club Bloggeras