Tutoriales WordPress

Incorporar Nivo Slider en 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“. Sigue leyendo

Tags: ,
Tutoriales

Añadir Nivo Slider en Blogger

Publicado por Claudia en enero 3, 2012

Nivo Slider

Nivo Slider es uno de los sliders jQuery más increíbles: es liviano (la versión comprimida pesa 12kb), tiene 16 efectos de transición, control de navegación y títulos HTML. Además, es completamente gratuito y configurable.

A continuación verás cómo incorporar Nivo Slider en pocos pasos en cualquier plantilla Blogger.

1. Carga Nivo Slider en tu plantilla

Primero carga la última versión de jQuery desde Google antes del cierre de </body>:

1
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Luego, incluye el script de Nivo Slider directamente en tu plantilla justo abajo del código anterior:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type='text/javascript'>
//<![CDATA[
/*
 * jQuery Nivo Slider v2.3
 * http://nivo.dev7studios.com
 *
 * Copyright 2010, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */
 
(function(b){var a=function(j,q){var g=b.extend({},b.fn.nivoSlider.defaults,q);var m={currentSlide:0,currentImage:"",totalSlides:0,randAnim:"",running:false,paused:false,stop:false};var d=b(j);d.data("nivo:vars",m);d.css("position","relative");d.addClass("nivoSlider");var e=d.children();e.each(function(){var t=b(this);var s="";if(!t.is("img")){if(t.is("a")){t.addClass("nivo-imageLink");s=t}t=t.find("img:first")}var r=t.width();if(r==0){r=t.attr("width")}var i=t.height();if(i==0){i=t.attr("height")}if(r>d.width()){d.width(r)}if(i>d.height()){d.height(i)}if(s!=""){s.css("display","none")}t.css("display","none");m.totalSlides++});if(g.startSlide>0){if(g.startSlide>=m.totalSlides){g.startSlide=m.totalSlides-1}m.currentSlide=g.startSlide}if(b(e[m.currentSlide]).is("img")){m.currentImage=b(e[m.currentSlide])}else{m.currentImage=b(e[m.currentSlide]).find("img:first")}if(b(e[m.currentSlide]).is("a")){b(e[m.currentSlide]).css("display","block")}d.css("background","url("+m.currentImage.attr("src")+") no-repeat");for(var k=0;k<g.slices;k++){var o=Math.round(d.width()/g.slices);if(k==g.slices-1){d.append(b('<div class="nivo-slice"></div>').css({left:(o*k)+"px",width:(d.width()-(o*k))+"px"}))}else{d.append(b('<div class="nivo-slice"></div>').css({left:(o*k)+"px",width:o+"px"}))}}d.append(b('<div class="nivo-caption"><p></p></div>').css({display:"none",opacity:g.captionOpacity}));if(m.currentImage.attr("title")!=""){var n=m.currentImage.attr("title");if(n.substr(0,1)=="#"){n=b(n).html()}b(".nivo-caption p",d).html(n);b(".nivo-caption",d).fadeIn(g.animSpeed)}var c=0;if(!g.manualAdvance&&e.length>1){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}if(g.directionNav){d.append('<div class="nivo-directionNav"><a class="nivo-prevNav">Prev</a><a class="nivo-nextNav">Next</a></div>');if(g.directionNavHide){b(".nivo-directionNav",d).hide();d.hover(function(){b(".nivo-directionNav",d).show()},function(){b(".nivo-directionNav",d).hide()})}b("a.nivo-prevNav",d).live("click",function(){if(m.running){return false}clearInterval(c);c="";m.currentSlide-=2;p(d,e,g,"prev")});b("a.nivo-nextNav",d).live("click",function(){if(m.running){return false}clearInterval(c);c="";p(d,e,g,"next")})}if(g.controlNav){var l=b('<div class="nivo-controlNav"></div>');d.append(l);for(var k=0;k<e.length;k++){if(g.controlNavThumbs){var f=e.eq(k);if(!f.is("img")){f=f.find("img:first")}if(g.controlNavThumbsFromRel){l.append('<a class="nivo-control" rel="'+k+'"><img src="'+f.attr("rel")+'" alt="" /></a>')}else{l.append('<a class="nivo-control" rel="'+k+'"><img src="'+f.attr("src").replace(g.controlNavThumbsSearch,g.controlNavThumbsReplace)+'" alt="" /></a>')}}else{l.append('<a class="nivo-control" rel="'+k+'">'+(k+1)+"</a>")}}b(".nivo-controlNav a:eq("+m.currentSlide+")",d).addClass("active");b(".nivo-controlNav a",d).live("click",function(){if(m.running){return false}if(b(this).hasClass("active")){return false}clearInterval(c);c="";d.css("background","url("+m.currentImage.attr("src")+") no-repeat");m.currentSlide=b(this).attr("rel")-1;p(d,e,g,"control")})}if(g.keyboardNav){b(window).keypress(function(i){if(i.keyCode=="37"){if(m.running){return false}clearInterval(c);c="";m.currentSlide-=2;p(d,e,g,"prev")}if(i.keyCode=="39"){if(m.running){return false}clearInterval(c);c="";p(d,e,g,"next")}})}if(g.pauseOnHover){d.hover(function(){m.paused=true;clearInterval(c);c=""},function(){m.paused=false;if(c==""&&!g.manualAdvance){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}})}d.bind("nivo:animFinished",function(){m.running=false;b(e).each(function(){if(b(this).is("a")){b(this).css("display","none")}});if(b(e[m.currentSlide]).is("a")){b(e[m.currentSlide]).css("display","block")}if(c==""&&!m.paused&&!g.manualAdvance){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}g.afterChange.call(this)});var p=function(r,s,u,x){var y=r.data("nivo:vars");if(y&&(y.currentSlide==y.totalSlides-1)){u.lastSlide.call(this)}if((!y||y.stop)&&!x){return false}u.beforeChange.call(this);if(!x){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}else{if(x=="prev"){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}if(x=="next"){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}}y.currentSlide++;if(y.currentSlide==y.totalSlides){y.currentSlide=0;u.slideshowEnd.call(this)}if(y.currentSlide<0){y.currentSlide=(y.totalSlides-1)}if(b(s[y.currentSlide]).is("img")){y.currentImage=b(s[y.currentSlide])}else{y.currentImage=b(s[y.currentSlide]).find("img:first")}if(u.controlNav){b(".nivo-controlNav a",r).removeClass("active");b(".nivo-controlNav a:eq("+y.currentSlide+")",r).addClass("active")}if(y.currentImage.attr("title")!=""){var z=y.currentImage.attr("title");if(z.substr(0,1)=="#"){z=b(z).html()}if(b(".nivo-caption",r).css("display")=="block"){b(".nivo-caption p",r).fadeOut(u.animSpeed,function(){b(this).html(z);b(this).fadeIn(u.animSpeed)})}else{b(".nivo-caption p",r).html(z)}b(".nivo-caption",r).fadeIn(u.animSpeed)}else{b(".nivo-caption",r).fadeOut(u.animSpeed)}var w=0;b(".nivo-slice",r).each(function(){var i=Math.round(r.width()/u.slices);b(this).css({height:"0px",opacity:"0",background:"url("+y.currentImage.attr("src")+") no-repeat -"+((i+(w*i))-i)+"px 0%"});w++});if(u.effect=="random"){var A=new Array("sliceDownRight","sliceDownLeft","sliceUpRight","sliceUpLeft","sliceUpDown","sliceUpDownLeft","fold","fade");y.randAnim=A[Math.floor(Math.random()*(A.length+1))];if(y.randAnim==undefined){y.randAnim="fade"}}if(u.effect.indexOf(",")!=-1){var A=u.effect.split(",");y.randAnim=b.trim(A[Math.floor(Math.random()*A.length)])}y.running=true;if(u.effect=="sliceDown"||u.effect=="sliceDownRight"||y.randAnim=="sliceDownRight"||u.effect=="sliceDownLeft"||y.randAnim=="sliceDownLeft"){var t=0;var w=0;var C=b(".nivo-slice",r);if(u.effect=="sliceDownLeft"||y.randAnim=="sliceDownLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);i.css("top","0px");if(w==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="sliceUp"||u.effect=="sliceUpRight"||y.randAnim=="sliceUpRight"||u.effect=="sliceUpLeft"||y.randAnim=="sliceUpLeft"){var t=0;var w=0;var C=b(".nivo-slice",r);if(u.effect=="sliceUpLeft"||y.randAnim=="sliceUpLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);i.css("bottom","0px");if(w==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="sliceUpDown"||u.effect=="sliceUpDownRight"||y.randAnim=="sliceUpDown"||u.effect=="sliceUpDownLeft"||y.randAnim=="sliceUpDownLeft"){var t=0;var w=0;var B=0;var C=b(".nivo-slice",r);if(u.effect=="sliceUpDownLeft"||y.randAnim=="sliceUpDownLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);if(w==0){i.css("top","0px");w++}else{i.css("bottom","0px");w=0}if(B==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;B++})}else{if(u.effect=="fold"||y.randAnim=="fold"){var t=0;var w=0;b(".nivo-slice",r).each(function(){var i=b(this);var v=i.width();i.css({top:"0px",height:"100%",width:"0px"});if(w==u.slices-1){setTimeout(function(){i.animate({width:v,opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({width:v,opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="fade"||y.randAnim=="fade"){var w=0;b(".nivo-slice",r).each(function(){b(this).css("height","100%");if(w==u.slices-1){b(this).animate({opacity:"1.0"},(u.animSpeed*2),"",function(){r.trigger("nivo:animFinished")})}else{b(this).animate({opacity:"1.0"},(u.animSpeed*2))}w++})}}}}}};var h=function(i){if(this.console&&typeof console.log!="undefined"){console.log(i)}};this.stop=function(){if(!b(j).data("nivo:vars").stop){b(j).data("nivo:vars").stop=true;h("Stop Slider")}};this.start=function(){if(b(j).data("nivo:vars").stop){b(j).data("nivo:vars").stop=false;h("Start Slider")}};g.afterLoad.call(this)};b.fn.nivoSlider=function(c){return this.each(function(){var d=b(this);if(d.data("nivoslider")){return}var e=new a(this,c);d.data("nivoslider",e)})};b.fn.nivoSlider.defaults={effect:"random",slices:15,animSpeed:500,pauseTime:3000,startSlide:0,directionNav:true,directionNavHide:true,controlNav:true,controlNavThumbs:false,controlNavThumbsFromRel:false,controlNavThumbsSearch:".jpg",controlNavThumbsReplace:"_thumb.jpg",keyboardNav:true,pauseOnHover:true,manualAdvance:false,captionOpacity:0.8,beforeChange:function(){},afterChange:function(){},slideshowEnd:function(){},lastSlide:function(){},afterLoad:function(){}};b.fn._reverse=[].reverse})(jQuery);
//]]>
</script>
 
<script type='text/javascript'>
jQuery(window).load(function() {
 jQuery(&#39;#slider&#39;).nivoSlider();
 });
</script>

Estarás añadiendo la versión 2.3 comprimida de Nivo Slider (experimenté problemas con la 2.7.1), con efectos de transición aleatorios.

Los estilos CSS del slider

Ahora, añade los estilos justo antes de ]]></b:skin> en las plantillas antiguas de Blogger o en Diseño/Avanzado/Añadir CSS en el Diseñador de las nuevas plantillas Blogger:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
/* NIVO SLIDER STYLES */
 
#slider-container {
margin-bottom: 50px;
}
 
.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;
width:100%;
z-index:89;
}
 
.nivo-caption p {
padding:5px;
margin:0;
font-size: 14px;
color: #FFF;
text-align: center;
}
 
.nivo-caption a {
display:inline !important;
color: #FFF;
}
 
.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:560px;
height:280px;
background: #000 url(https://1.bp.blogspot.com/-F80SiDnYNs0/Ts0P4xXGd5I/AAAAAAAACp0/xA5AuZGzqEg/s1600/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:210px;
bottom:-30px;
}
 
.nivo-controlNav a {
width:22px;
height: 22px;
background: url(https://1.bp.blogspot.com/-eVJeiVODCBI/Ts0P4-z2c6I/AAAAAAAACpo/31BXBfAbyP8/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:7px;
float:left;
}
 
.nivo-controlNav a.active {
background-position:0 -22px;
}
 
.nivo-directionNav a {
display:block;
width:30px;height:30px;
background:url(https://1.bp.blogspot.com/-MKlz8mA0xb4/Ts0P5ZLkoKI/AAAAAAAACp8/_DAgu3iSJWM/s1600/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;
}
 
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}

Habrás notado que las dimensiones del slider son 560px de ancho por 280px de alto. Puedes modificar dichas dimensiones a tu gusto, así como otras propiedades que estimes conveniente.

3. Añade el HTML del slider en tu plantilla

Puedes poner el slider en la columna principal, justo antes de los artículos. En las plantillas viejas de Blogger, esto es justo bajo <div id='main-wrapper'>, y en las nuevas, bajo
<div class='main-outer'>.

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <div class='crosscol'>
<div id='slider-container'>
 
<div id='slider'>
 
  <a href='http://angrybirds.themesnack.net/?p=24' title='Introducing WP Theme'>
 
 <img alt='' src='https://4.bp.blogspot.com/-dPjpuC2oyXM/Ts2hwaYzI_I/AAAAAAAACq8/PRrUt7GLXV8/s1600/5.jpg' title='Introducing WP Theme'/>
 
 </a>
 
  <a href='http://angrybirds.themesnack.net/?p=21' title='Another image in a post'>
 
 <img alt='' src='https://1.bp.blogspot.com/-ENdSWyspy08/Ts2iKJP5szI/AAAAAAAACrI/QAvlVIReZQA/s1600/4.jpg' title='Another image in a post'/>
 
 </a>
 
  <a href='http://angrybirds.themesnack.net/?p=17' title='An image in a post'>
 
 <img alt='' src='https://4.bp.blogspot.com/-bUQ83dpjBt8/Ts2ij6O9sFI/AAAAAAAACrU/4PSoxsafNug/s1600/31.jpg' title='An image in a post'/>
 
 </a>
 
  <a href='http://angrybirds.themesnack.net/?p=6' title='Testing HTML elements'>
 
 <img alt='' src='https://1.bp.blogspot.com/-mUFbtJqKGsE/Ts2i2Ty0AAI/AAAAAAAACrg/WwLy-uer-5w/s1600/2.jpg' title='Testing HTML elements'/>
 
 </a>
 
  <a href='http://angrybirds.themesnack.net/?p=1' title='Category Hierarchy'>
 
 <img alt='' src='https://3.bp.blogspot.com/-uZG3YUPpUwg/Ts2jH1REctI/AAAAAAAACrs/qgyW1JddFRQ/s1600/1.jpg' title='Category Hierarchy'/>
 
 </a>
 
 </div>
 
<br clear='all'/>
 
</div>
 
      </div>
</b:if>
</b:if>

Este código con condicionales mostrará el slider sólo en la página principal, con 5 diapositivas. Puedes quitar o añadir más, aunque no es recomendable tener más de 6 porque puede retardar demasiado la carga de tu blog.

Para el código de cada diapositiva, tienes que modificar: (1) el enlace que dirige al post que quieras destacar; (2) el título (title) de dicho post; (3) El enlace directo (URL) a la imagen que quieras poner, que debe ser acorde a las dimensiones del slider (560×280 en este caso).

Consideraciones finales

  • Esta es la utilización básica de Nivo Slider en Blogger. Puedes hacer todas las modificaciones que quieras, en especial si tienes conocimientos de CSS y HTML.
  • Puedes cambiar las opciones y efectos como indica su autor: Nivo Slider jQuery Plugin Usage.
  • Recuerda optimizar para la web las imágenes que uses en tu slider: no deben ser demasiadas (5 a 6 como máximo), ni muy pesadas o de gran tamaño.
  • Finalmente, aunque las ventajas de Blogger como plataforma gratuita de blogs, son múltiples, hay cosas que siempre deberemos hacer de forma manual. En este caso, la única manera de hacer que tu slider funcione es modificando los códigos de las diapositivas manualmente, de acuerdo a los posts que quieras ir destacando temporalmente.
Tags: ,