Guía paso a paso para crear un carrusel / control deslizante en WordPress con SlideDeck

Después de nuestro lanzamiento de WPBeginner Coupons ayer, estamos totalmente enfocados en construir el mejor diseño para el sitio principal de WPBeginner que integre todo sin dejar de verse bien. Queríamos añadir un carrusel / control deslizante en nuestro sitio, pero cada script tenía su limitación. Entonces gracias al impresionante Matt Mickiewicz de 99designs, SitePoint, y Flippa(ver su entrevista en WPBeginner) por referirnos a la gente de Digital Telepathy que son los creadores de SlideDeck (de lejos el mejor script de carrusel / control deslizante en la web). Jugamos con él, y nos quedamos impresionados. Es muy bueno para los principiantes, ya que proporciona un completo plugin de WordPress que le permite utilizar la sencilla interfaz de arrastrar y soltar para crear deslizadores. Sin embargo, también es genial para desarrolladores porque tiene una versión jQuery que ofrece libertad adicional a los desarrolladores para personalizarlo según sus necesidades. En este artículo, le mostraremos cómo puede crear un carrusel / control deslizante en WordPress sin editar una sola línea de código con el plugin SlideDeck WordPress.

Si quieres ver lo que puedes crear con este plugin, aquí tienes una Demo EN VIVO.

Paso 1. Descargar e instalar el plugin

Dirígete al sitio web de SlideDeck y descarga el plugin. Tienen una versión GRATUITA y una versión PRO que es compatible con / dar soporte y muchas más características. Cada vez que estamos trabajando con un nuevo producto, siempre obtenemos la versión compatible con / dar soporte. Nos quedamos atascados unas cuantas veces en nuestro desarrollo, y su soporte fue increíble y nos ayudó. Le recomendamos que obtenga la versión PRO, ya que incluye características interesantes como: Diapositivas verticales, soporte de pantalla táctil, soporte, RSS Feed Smart SlideDecks, soporte de imagen de fondo, y mucho más.

Una vez que haya descargado el plugin, a continuación, seguir adelante e instalar / activar el plugin. (Siga nuestra Guía paso a paso para instalar un plugin de WordPress)

Vamos a crear un carrusel / control deslizante

Una vez que hayas activado el plugin, verás una nueva pestaña añadida llamada SlideDeck. Vamos, y haz clic en Añadir Nuevo SlideDeck. Se le indicará a una pantalla que se parece al panel de escritura de entradas.

Así que lo que hicimos fue añadir el contenido en nuestro deslizar, y le dio el título. Podríamos tener una imagen de fondo personalizada (característica PRO), pero en aras de la simplicidad, no lo hicimos. Queremos mostrar lo que este plugin puede hacer fuera de la caja. Ese fue nuestro primer deslizar estándar. La siguiente diapositiva que añadimos en nuestra demostración fue una diapositiva vertical (característica PRO). Las diapositivas verticales son básicamente múltiples diapositivas dentro de una diapositiva. Si mira en la imagen de arriba, hay un botón llamado Convertir a Diapositiva Vertical. Bien, ese es el botón en el que hicimos clic para nuestra siguiente diapositiva, y esto es lo que se añadió:

Ahora repite el proceso para tantas diapositivas como quieras. Una vez que haya terminado de crear diapositivas, veamos las opciones de SlideDeck para publicar las diapositivas en su sitio. Verás esto en la parte derecha de tu pantalla de Editar diapositivas.

Puede seleccionar que se reproduzca automáticamente, permitir la navegación con el teclado, permitir la navegación con la rueda de desplazamiento del ratón, establecer la velocidad de animación, elegir uno de sus increíbles estilos, y seleccionar desde qué diapositiva desea comenzar. También puedes reordenar las diapositivas mediante arrastrar y soltar. Verás que hay un fragmento de código del tema que tiene el código para que lo incluyas en tu tema. Puedes añadirlo donde quieras en tu tema. Oh espera, no dijimos que no tendrás que editar ni una sola línea de código para integrar SlideDeck en WordPress. Sí, nos ceñiremos a nuestras palabras en este tutorial. Déjanos mostrarte cómo puedes integrarlo en tu WordPress sin editar una sola línea de código.

Integrando SlideDeck en entradas/páginas de WordPress

Cree una nueva entrada o página. Verás una nueva caja de SlideDeck añadida en la barra lateral derecha.

Haz clic en el botón Insertar SlideDeck. Elija el carrusel que desea añadir y publique la entrada. Una vez que publique la entrada, su carrusel se verá así con el estilo clásico:

Puedes usarlo en una entrada fija, en una plantilla de página de ancho completo o en cualquier otra cosa que desees. Pero espera, esto no termina aquí. Vamos a llevarlo un poco más lejos.

Añadir un carrusel / control deslizante con entradas destacadas

Los carruseles / controles deslizantes de entradas destacadas son los favoritos de los bloggers. Vemos esta característica en numerosos blogs, pero la mayoría de esos carruseles están codificados en temas con control deslizante limitado para los usuarios. Bueno, echemos un vistazo a lo fácil que es hacerlo con SlideDeck. Puedes añadir un carrusel dinámico llamado “Smart SlideDeck” que te permite mostrar tus entradas más recientes, entradas más populares, entradas destacadas (las que tú elijas), puedes ordenar esto por categoría, incluso puedes importar feeds RSS de otro sitio para añadir en tu carrusel. Puede seleccionar entre sus diferentes estilos, elegir los diferentes tipos de navegación, y prácticamente tener un carrusel / control deslizante listo en menos de 5 minutos. Déjanos mostrarte cómo. En nuestro tutorial, vamos a mostrar entradas / registros destacados de nuestras entradas.

Vaya a sus entradas actuales, y elija 5 entradas y añádalas en Smart SlideDecks marcando la casilla.

Ahora, vaya a su Panel de SlideDeck, y haga clic en Añadir Smart SlideDeck. Elija su estilo:

Seleccione cuantas diapositivas desea mostrar, opciones de reproducción, tipo de contenido (Vea como lo tenemos como entradas / registros Destacados de la Entrada). Puede seleccionar los ajustes de contenido como opciones de imagen, longitud del título, longitud del extracto, etc. Elija sus Estilos de Navegación, y haga clic en Publicar.

Necesitas editar el código de este. Toma el código de la barra lateral, fragmento de código del tema, y pégalo en tu tema. Lo más probable en la parte superior de su index.php. Un código de ejemplo se vería así:

<?php if (is_home()) { slidedeck( 73, array( 'width' => '100%', 'height' => '370px' ) ); } ?>

Esto mostraría su carrusel / control deslizante solo en su página de inicio.

Si quieres ver algunas demos de SlideDeck, visita el sitio web de SlideDeck y compruébalo.

Háganos saber sus pensamientos acerca de este plugin a medida que lo implementa.