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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
delpihero says
I put <?php if (is_home()) { slidedeck( 72, array( ‘width’ => ‘849px’, ‘height’ => ‘300px’ ) ); } ?>
at the top of index.php and it worked but its at the top, i need it in the middle, so I place the code where I need it and it shows up but the slider does not work so what have I done wrong.
I also tried putting this in another directory library/includes/featured-page-php but that has the same corrupted effect
CaroletteGoodlowWright says
So I am needing help. I have slide deck pro and I would like to customize it at place it in the header next to my logo. but i do not know how to code it properly.
my site is http://www.chrisrogersconstruction.com can you help? I cannot find any help on this issue.
Thanks,
wpbeginner says
@CaroletteGoodlowWright Sure we can help for a fee. We don’t offer free customization as part of our tutorial. Please use the contact form if you are interested in hiring us.
web design thailand says
The pro version of the plugin is a bit expensive but really worth it. We start to use here and we are very happy about it !
EnkShahbazMehdi says
Jason, you can search for “Sticky Trending Bar using JQuery” and u may find it.
Jason says
Great post! Funny how things just appear… I was looking for a good slider.
What is the BAR Plugin you use below?
Editorial Staff says
It’s not a plugin. It’s custom code that we added on our site.
Administrador
Adriana says
My template came with an integrated slider too. I didn’t know you can take it down and replace it with another slider.
I have to try in my posts so see exactly how it works before replacing my main slider – I guess.
Thank for the tutorial.
S says
Would it be possible to integrate this into the header only and use it to display an array of header images with link to different sections of the website?
I am trying to figure out how to do this but no luck!
Editorial Staff says
Yes it is possible. You would have to create a slider, then edit your header.php file to paste the code. You can use the smart slider option which only shows images… and display your most recent posts … most featured posts etc.
Administrador
Michele Welch says
Awesome tutorial! I have a slider integrated into my template, but always had issues with it so had to take it down. This definitely seems like a good alternative! Will definitely give it a try.
I think the best part is that you can add it to your posts. This way you have integrated related posts and decrease bounce rates.
Thanks for sharing this application!