Crea un Responsive Slider en WordPress

Crea un responsive slider en WordPress para colocarlo en la página principal de tu web. Es fácil. En esta entrada voy a explicar como vamos a sustituir la foto estática que aparece por defecto en la plantilla wordpress por un controlador deslizante de imagenes o slider, como el que yo utilizo en mi web.

Paso 1. Crear un nuevo widget. Para ello hay que introducir el siguiente código en el archivo functions.php (Escritorio WP-Herramientas-Filebrowser (es un plugin, si no lo tienes instálalo)-WP Content-Themes- el tema que tengas instalado- functions.php). Una vez que llegues a este archivo dale a “edit”. Vete al final del código del archivo y pega el siguiente código:

/** Register widget area */
genesis_register_sidebar( array(
	'id'	=> 'home-slider',
	'name'	=> __( 'Home Slider', 'minimum' ),
	'description'	=> __( 'This is the home
 slider', 'minimum' ),
) );

Una vez pegado, dale al botón azul “Actualizar archivo”.  Después vas de nuevo a Escritorio WP-Apariencia- Widgets y busca en la zona de la derecha un nuevo widget ( caja) que se llama “Home-slider”. Búscalo que está….yo no la encontraba 🙂

Paso 2. Vamos a cambiar la foto estática.  Volvemos de nuevo al archivo functions.php para editarlo. Lo que pretendemos es quitar la línea de código que incluye la imagen de la homepage ( en mi plantilla esta dentro de la carpeta “images” de mi tema denominada como “sample.jpg”) y cambiarla por el código que va a situar en lugar de la imagen el nuevo widget creado. La línea de código a eliminar en mi plantilla está en torno a la línea 67 y es esta:

echo '<div id="featured-image"><img src="'. 
get_stylesheet_directory_uri() . 
'/images/sample.jpg" /></div>';

Una vez eliminada esta línea hay que incluir justo en el lugar que ocupaba la anterior esta otra:

echo '<div id="home-featured">
<div class="wrap">';
genesis_widget_area( 'home-slider',
 array( 'before' =>
 '<div class="home-slider widget-area">', ) ); 
echo '</div></div>';

Después no olvides darle a botón azul de actualizar.

Paso 3. Una vez hecho esto ya sólo nos queda bajar un plugin responsive slider para incluirlo dentro del area del widget. Te vas a escritorio WP-plugin-instalar nuevo plugin y buscas “Meta Slider Lite”, instálalo y actívalo.  Vuelve a Escritorio-Widgets y arrasta desde el área del centro (donde están los plugins) el nuevo plugin Meta Slider hasta dentro de la caja del Widget de la derecha “Home Sider” que acabas de crear.

metaslider2

Visualización del slider cuando cambia la imagen

La versión básica (gratuita) de Meta Slider que puedes instalar es totalmente responsive y te permite crear de forma personalizada el slider de tu página principal, incluyendo las fotografías que quieras y vinculándolas a los posts (entradas) correspondientes o las páginas (pages) de venta que hayas creado. En este sentido es muy fácil trabajar con él. Esta versión gratuita te permite incluir  texto en el borde inferior de la imagen (es como yo lo tengo configurado de momento en mi blog), pero la versión Pro de Meta Slider te permite colocar texto en cualquier parte del Slider, y animar ese texto para que aparezca después de cargar la imagen, así como utilizar el Slider no sólo para imágenes sino también video, que puede ser muy interesante si quieres incluir un video de presentación de tu proyecto o bien de un producto o servicio. Estos son dos videos de demostración de Meta Slider: video 1 y video 2.

Yo acabo de comprar la versión PRO que me permite utilizar el plugin hasta en 5 webs y cuesta 39 dólares (unos 29 euros). Hay otra versión PRO para un solo site o web que cuesta 19 dólares ( 14 euros) con las mismas funcionalidades, y por último una que te permite utilizarlo en sites ilimitados y que sube a 99 dólares (74 euros). Puedes comprobar estas opciones aqui.

Para generar esta entrada he utilizado una de Carrie Dills. Ella recomienda utilizar como Slider otro plugin, el Genesis Responsive Slider, pero yo lo he instalado y he trabajado con él y no funciona bien. Si utilizas imagen y texto en el slider, deja de ser responsive. Cuando lo llevas a un dispositivo tablet o smartphone la imagen si que es responsive pero el texto se desborda. La opción es quitar el texto completamente y utilizar el slider sólo para presentar imágenes, pero no es lo que yo buscaba. Quiero que al menos haya un texto mínimo asociado a la imagen. La opción gratuita de Meta Slider si te permite asociar el texto a la imagen ( aunque no puedas animar ese texto) y es responsive.

Después de publicar inicialmente el post hasta aqui, apareció una aportación de un programador freelance de la India, que completaba lo aportado inicialmente  por Carrie Dills y que la mejora. Os dejo aqui los pasos:

Paso 1. Crear un nuevo widget (incluir código en functions.php)

/** Register widget area */
genesis_register_sidebar( array(
‘id’ => ‘home-slider’,
‘name’ => __( ‘Home Slider’, ‘minimum’ ),
‘description’ => __( ‘This is the home slider’, ‘minimum’ ),
) );

Paso 2. También en functions.php de tu tema incluir este código:

//* Add home slider between header and tagline
add_action( ‘genesis_after_header’, ‘minimum_slider’, 9 );
 
function minimum_slider() {
if (is_home() || is_front_page()) {
printf( ‘<div %s>’, genesis_attr( ‘home-slider’ ) );
genesis_widget_area( ‘home-slider’ );
echo ‘</div>’;
}
}

Paso 3. Ir al editor de css (Ruta: Escritorio-Apariencia-Editor) e incluir esto al final del código del editor:

#genesis-responsive-slider {
border: none !important;
padding: 0 !important;
}
 
.home .site-tagline {
margin-top: 0;
}
 
.flex-control-nav li a,
.flex-direction-nav li a {
border-bottom: none;
}
 
.flex-direction-nav li .prev {
left: 0 !important;
}
 
.flex-direction-nav li .next {
right: 0 !important;
}
 
.flexslider .slides img {
width: 100%;
}
 
.flexslider {
max-width: 100%;
}
 
@media only screen and (max-width: 500px) {
.slide-excerpt p {
display: none;
}
 
.slide-excerpt h2 {
font-size: 1.5rem;
margin-bottom: 0;
}
 
.flex-direction-nav {
display: none;
}
}

Paso 4. Ve de nuevo a functions.php busca este código:

add_theme_support( 'custom-background',
array( 'wp-head-callback' => '__return_false' ) );

Y elimínalo o dejalo sin efecto (te recomiendo esto último). Para ello introduce esto antes y después del código

/*add_theme_support( 'custom-background',
array( 'wp-head-callback' => '__return_false' ) );*/

Paso 5. Lleva en el área de widgets el slider que te hayas bajado como plugin al widget “home slider” que has creado.

Yo finalmente he optado por dejar instalada la configuración de Sridhar katakam.

Para cualquier duda ponte en contacto conmigo.

Y si te ha gustado esta entrada por favor compártela en redes sociales. Gracias!!

Opt In Image
SUSCRÍBETE AL BLOG

¡ Hola, TE INVITO A SUSCRIBIRTE AL BLOG !

Así recibirás algunas de las nuevas entradas, que siempre las creo pensando en todo aquello que tiene valor para quien está creando su proyecto o quiere darle un impulso. Desde la creación de la web en 2013 jamás he facilitado los contactos de mis subcriptores a un tercero ni les enviamos comunicación alguna que no tenga que ver con el blog. ¡ Gracias ! Al suscribirite aceptas nuestra política de privacidad.

 

Comments

  1. Rocio Cruz says:

    Hola Silvia!
    Gracias por la información, hice los dos primeros pasos del programador de la india y me salío esto cuando le di guardar
    Parse error: syntax error, unexpected ‘Slider’’ (T_STRING) in /home/content/p3pnexwpnas01_data01/01/2206501/html/wp-content/themes/crave/lib/my_functions.php on line 17

    Y ya no puedo entrar a mi página me vuelve a salir lo mismo, que puedo hacer?? Muchas gracias por tu ayuda!!

  2. Rocio Cruz says:

    Hola ya lo solucioné desde Filezilla pero no puedo crear el nuevo widget 🙁

    • Hola Rocío, gracias por tu comentario ¿cómo lo llevas?. Ya veo que peleándote con el slider, jaja. Después de un tiempo he vuelto a la solución inicial que daba Carrie Dils. La otra me daba algún problema “responsive”. No has comentado qué tema estás utilizando.
      Saludos

  3. Buen artículo!

Puedes dejar aqui tu comentario. Gracias