Como crear un responsive slider en WordPress con los últimos posts

Como crear un responsive slider en WordPress con los últimos posts

8 Enero, 2014 0 Comentarios1


Como crear un responsive slider en WordPress con los últimos posts
5 (100%) 4 votes

Hola a tod@s, en este artículo vamos a explicar como crear un responsive slider en WordPress con las últimas entradas de nuestro blog y para ello vamos a empezar explicando que librerías y componentes se requieren para ello:

  • jQuery: Librería básica para funciones javascript. Podéis descargarla desde su página oficial.
    Nota importante: Normalmente jquery viene activada en WordPress por defecto pero lo incluímos en el tutorial por si no fuera así. Una vez descargado lo copiamos al directorio js del theme activo en WordPress.
  • Bootstrap: Librería imprescindible para proyectos responsive. Aquí os dejo el enlace de descarga. Una vez descargado copiamos los archivos js en el directorio js y los archivos css en el directorio css del theme activo en WordPress.
  • Flexslider: El componente que se va a encargar de gestionar nuestra galería de posts. Se descarga desde aquí.Una vez descargado lo copiamos al directorio flexslider del theme activo en WordPress.

Una vez que tengamos todos estos elementos podemos empezar a trabajar sobre nuestro responsive slider y para ello tenemos que añadirlas a WordPress. Si no sabéis como hacer esto podéis ver este otro tutorial. Una vez que tengáis realizada la función modificamos dicho código editando el archivo functions.php alojado en la ruta base del theme que tengáis activado en WordPress de la siguiente forma:

wp_enqueue_style( 'css/bootstrap.css', get_template_directory_uri() . '/css/99708c0.css', array(), false, true);
wp_enqueue_style( 'css/bootstrap-responsive.css', get_template_directory_uri() . '/css/99708c0.css', array(), false, true);
wp_enqueue_style( 'flexslider/flexslider.css', get_template_directory_uri() . '/css/99708c0.css', array(), false, true);
wp_enqueue_script( 'js/jquery.min.js', get_template_directory_uri() . '/vendor/jquery.min.js', array(), false, true );
wp_enqueue_script( 'js/bootstrap.js', get_template_directory_uri() . '/vendor/jquery.min.js', array(), false, true );
wp_enqueue_script( 'flexslider/jquery.flexslider.js', get_template_directory_uri() . '/vendor/jquery.min.js', array(), false, true );

Una vez tengamos nuestros componentes y librerías correctamente referenciados debemos cambiar el estilo del flexslider para que se muestre como queremos, para ello editamos el archivo flexslider.css. Esta hoja de estilos almacena los estilos principales del slider. Nosotros hemos hecho estas modificaciones en el estilo aunque vosotros podéis modificarlo según vuestros gustos:

.wp-flexslider a:active,
.wp-flexslider a:focus  {outline: none;}
.wp-flexslider {margin: 0; padding: 0;}
.wp-flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.wp-flexslider .slides img {width: 100%; display: block;}
.wp-flexslider {margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
.wp-flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.wp-flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.wp-flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}
.wp-flexslider .slides li {position: relative;}
.wp-flexslider .slides img {
    display: block;
    max-height: 252px;
	width:auto;
}
.wp-flexslider .flex-caption {
    position: absolute;
    bottom: 0;
    left: 0;
	top:0;
    margin: 0px 0px 0px 400px;
    padding: 10px;
    color: white;
    background: rgba(0, 0, 0, 0.7) !important;
	font-size:13px;
	padding:20px 10px 0px 10px; 
	overflow:hidden;
	line-height:17px;
}
.wp-flexslider .flex-caption .title{font-size:1.6em;text-decoration:none;line-height:1.2em;}
.wp-flexslider .flex-caption .more-link:before {
	content: " ";
    display: block;
    clear: both;
	margin:20px 0px 0px 0px;	
}
.wp-flexslider .flex-caption a{color:#fff;font-weight:bold}

Ahora debemos crear el código html encargado de mostrar el slider con los últimos artículos, para ello editamos nuestro index.php y escribimos antes del loop principal lo siguiente:
Nota importante: No olvidéis incluir el código que aparece a continuación entre capas Bootstrap2 para que sea responsive, para ello creais una capa con la clase row-fluid y otra capa dentro de ella que tenga la clase span correspondiente al ancho total de la columna.

  • por →', 'twentythirteen' ) ); echo substr(strip_tags($post_excerpt), 0, 200).'...'; ?> Sigue leyendo

A la función query_posts le decimos que nos de los últimos 5 posts publicados y una vez en el bucle recorremos los posts. En el lado izquierdo mostramos su imagen destacada y en el lado derecho pondremos alguna de sus propiedades como el título, la fecha de creación, el autor, un fragmento del texto y un enlace para continuar leyendo. Lo último que nos falta es hacer la llamada a la función flexslider para que nos lo muestre, para ello tenemos que incluir el siguiente código en el footer.php o en un fichero javascript que tengamos incluido en el theme:

$(document).ready(function(){
	if ($('.wp-flexslider').length) {
		$('.wp-flexslider').flexslider({
			animation: "slide",
			controlNav: "thumbnails",
		});
	}
});

Dicha función se encarga de mostrar el responsive slider y le indicamos que la animación sea slides y el control de navegación sea mediante thumbnails pero estás propiedades las podéis modificar a vuestro antojo haciendo uso de la documentación de la librería.

Y ya tenemos nuestro responsive slider el resultado final lo podéis ver en la imagen a continuación, espero que os sirva y si tenéis alguna duda o problema espero vuestros comentarios. Si os ha gustado y queréis proponer un tutorial de otra temática no dudéis en contactar con nosotros.

Resultado responsive slider de los últimos posts para WordPress

Soy Ing. de Telecomunicaciones, diseñador/programador desde hace 8 años, los últimos 3 centrado en el desarrollo de Apps .

Además de muchomasquewebs.com mantengo bepremium.es. En lo personal un apasionado del Windsurf y surf , en general todo lo que tenga que ver con el mar, como afición friky que todo ingeniero debe tener, me encanta el aeromodelismo.

Si queréis contactar conmigo directamente podéis hacerlo a jose.revenga@muchomasquewebs.com

Summary
Crear un responsive slider en WordPress con los últimos post
Article Name
Crear un responsive slider en WordPress con los últimos post
Description
Si no encuentras la forma de hacer un reponsive slider con tus últimos artículos en WordPress te enseñamos paso a paso como puedes crear uno en tu pagina web.
Author



Soy Ing. de Telecomunicaciones, diseñador/programador desde hace 8 años, los últimos 3 centrado en el desarrollo de Apps .Además de muchomasquewebs.com mantengo bepremium.es. En lo personal un apasionado del Windsurf y surf , en general todo lo que tenga que ver con el mar, como afición friky que todo ingeniero debe tener, me encanta el aeromodelismo.Si queréis contactar conmigo directamente podéis hacerlo a jose.revenga@muchomasquewebs.com