After our launch of WPBeginner Coupons yesterday, we are totally focused on building the best design for the main WPBeginner site that integrates everything while still looking good. We wanted to add a slider in our site, but every script had its limitation. Then thanks to the awesome Matt Mickiewicz from 99designs, SitePoint, and Flippa (see his Interview on WPBeginner) for referring us to the folks over at Digital Telepathy who are the creators of SlideDeck (by far the best slider script on the web). We played around with it, and we were impressed. It is great for beginners because it provides a complete WordPress plugin that lets you use the easy drag-drop interface to create sliders. However, it is also great for developers because it has a jQuery version that offers additional freedom to developers to customize it to their needs. In this article, we will show you how you can create a slider in WordPress without editing a single line of code with the SlideDeck WordPress Plugin.
If you want to see what you can create with this plugin, here is a LIVE Demo.
Paso 1. Descargar e instalar el plugin
Head on over to SlideDeck’s Website and download the plugin. They have a FREE version and a PRO version which offers support and a lot more features. Whenever we are working with a new product, we always get the support version. We got stuck a few times in our development, and their support was amazing and helped us out. We highly recommend that you get the PRO version because it includes cool features like: Vertical Slides, Touch Screen Support, Support, RSS Feed Smart SlideDecks, Background Image Support, and much more.
Once you have downloaded the plugin, then go ahead and install/activate the plugin. (Follow our Step by Step Guide to Installing a WordPress Plugin)
Creemos un Slider
Una vez que hayas activado el plugin, verás una nueva pestaña llamada SlideDeck. Vamos, haz clic en Agregar Nuevo SlideDeck. Se te pedirá una pantalla que se parece al Panel de Escritura de Publicaciones.
Así que lo que hicimos fue agregar el contenido en nuestra diapositiva y le dimos un título. Podríamos tener una imagen de fondo personalizada (Función PRO), pero por simplicidad, no lo hicimos. Queremos mostrar lo que este plugin puede hacer de fábrica. Esa fue nuestra primera diapositiva estándar. La siguiente diapositiva que agregamos en nuestra demostración fue una diapositiva vertical (Función PRO). Las diapositivas verticales son básicamente múltiples diapositivas dentro de una diapositiva. Si miras la imagen de arriba, hay un botón llamado Convertir a Diapositiva Vertical. Bueno, ese es el botón en el que hicimos clic para nuestra siguiente diapositiva, y esto es lo que se agregó:
Ahora repite el proceso para tantas diapositivas como desees. Una vez que hayas terminado de crear diapositivas, veamos las Opciones de SlideDeck para publicar las diapositivas en tu sitio. Verás esto en el lado derecho de tu pantalla de Edición de diapositivas.
Puedes seleccionarlo para que se reproduzca automáticamente, permitir la navegación con teclado, permitir la navegación con la rueda del ratón, establecer la velocidad de animación, elegir una de sus increíbles apariencias y seleccionar desde qué diapositiva quieres empezar. También puedes reordenar las diapositivas arrastrando y soltando. Verás que hay un fragmento de código de tema que contiene el código para que lo incluyas en tu tema. Puedes agregarlo donde quieras en tu tema. Oh, espera, ¿no dijimos que no tendrías que editar una sola línea de código para integrar SlideDeck en WordPress? Sí, mantendremos nuestra palabra en este tutorial. Te mostraremos cómo integrarlo en tu WordPress sin editar una sola línea de código.
Integrar SlideDeck en Publicaciones/Páginas de WordPress
Crea una Nueva Publicación o Página. Verás un nuevo cuadro de SlideDeck agregado en la barra lateral derecha.
Haz clic en el botón Insertar SlideDeck. Elige el Slider que deseas agregar y Publica la entrada. Una vez que publiques la entrada, tu slider se verá así con la Apariencia Clásica:
Puedes usarlo en una publicación fija, plantilla de página de ancho completo, o cualquier otra cosa que te guste. Pero espera, no termina aquí. Llevémoslo un poco más allá.
Agregar un Slider con Publicaciones Destacadas
Los carruseles de publicaciones destacadas son los favoritos de los bloggers. Vemos esta función en numerosos blogs, pero la mayoría de esos carruseles están codificados en los temas con un control limitado para los usuarios. Bueno, veamos qué tan fácil es hacerlo con SlideDeck. Puedes agregar un carrusel dinámico llamado "Smart SlideDeck" que te permite mostrar tus publicaciones más recientes, las más populares o las destacadas (las que tú eliges), puedes ordenarlas por categoría, incluso puedes importar RSS Feeds de otro sitio para agregarlos a tu carrusel. Puedes seleccionar entre sus diversas apariencias, elegir diferentes tipos de navegación y, básicamente, tener un carrusel listo en menos de 5 minutos. Permítenos mostrarte cómo. En nuestro tutorial, mostraremos entradas destacadas de nuestras publicaciones.
Ve a tus publicaciones actuales y elige 5 publicaciones y agrégalas a Smart SlideDecks marcando la casilla.
Ahora, vamos a tu Panel de SlideDeck y hacemos clic en Agregar Smart SlideDeck. Elige tu apariencia:
Selecciona cuántas diapositivas quieres mostrar, opciones de reproducción, tipo de contenido (mira cómo lo tenemos como entradas destacadas de la publicación). Puedes seleccionar la configuración de contenido como opciones de imagen, longitud del título, longitud del extracto, etc. Elige tus estilos de navegación y haz clic en Publicar.
Necesitas editar el código de este. Obtén el código de la barra lateral, Código de fragmento de tema, y pégalo en tu tema. Lo más probable es que sea en la parte superior de tu index.php. Un ejemplo de código sería así:
<?php if (is_home()) { slidedeck( 73, array( 'width' => '100%', 'height' => '370px' ) ); } ?>
Esto mostraría tu carrusel solo en tu página de inicio.
If you want to see some real cool demos of SlideDeck, then visit SlideDeck’s website, and check it out.
Haznos saber tus opiniones sobre el plugin a medida que lo implementes.
delpihero
Puse <?php if (is_home()) { slidedeck( 72, array( ‘width’ => ‘849px’, ‘height’ => ‘300px’ ) ); } ?>
en la parte superior de index.php y funcionó, pero está en la parte superior, lo necesito en el medio, así que coloco el código donde lo necesito y aparece, pero el slider no funciona, ¿qué he hecho mal?
También intenté poner esto en otro directorio library/includes/featured-page-php, pero eso tiene el mismo efecto corrupto
CaroletteGoodlowWright
Así que necesito ayuda. Tengo slide deck pro y me gustaría personalizarlo y colocarlo en el encabezado junto a mi logo. pero no sé cómo codificarlo correctamente.
my site is http://www.chrisrogersconstruction.com can you help? I cannot find any help on this issue.
Gracias,
wpbeginner
@CaroletteGoodlowWright Claro que podemos ayudar, pero tiene un costo. No ofrecemos personalización gratuita como parte de nuestro tutorial. Por favor, usa el formulario de contacto si estás interesada en contratarnos.
diseño web tailandia
La versión pro del plugin es un poco cara pero realmente vale la pena. ¡Empezamos a usarlo aquí y estamos muy contentos con él!
EnkShahbazMehdi
Jason, you can search for “Sticky Trending Bar using JQuery” and u may find it.
Jason
¡Gran publicación! Es gracioso cómo aparecen las cosas... Estaba buscando un buen slider.
¿Cuál es el plugin BAR que usas abajo?
Personal editorial
No es un plugin. Es código personalizado que agregamos en nuestro sitio.
Administrador
Adriana
Mi plantilla también venía con un slider integrado. No sabía que se podía quitar y reemplazar con otro slider.
Tengo que probar en mis publicaciones para ver exactamente cómo funciona antes de reemplazar mi slider principal – supongo.
Gracias por el tutorial.
S
¿Sería posible integrar esto solo en el encabezado y usarlo para mostrar un arreglo de imágenes de encabezado con enlaces a diferentes secciones del sitio web?
I am trying to figure out how to do this but no luck!
Personal editorial
Sí, es posible. Tendrías que crear un slider, luego editar tu archivo header.php para pegar el código. Puedes usar la opción de slider inteligente que solo muestra imágenes... y mostrar tus publicaciones más recientes... las publicaciones más destacadas, etc.
Administrador
Michele Welch
¡Tutorial increíble! Tengo un slider integrado en mi plantilla, pero siempre tuve problemas con él, así que tuve que quitarlo. ¡Esto definitivamente parece una buena alternativa! Definitivamente lo intentaré.
Creo que la mejor parte es que puedes agregarlo a tus publicaciones. De esta manera, tienes publicaciones relacionadas integradas y reduces las tasas de rebote.
¡Gracias por compartir esta aplicación!