Después de nuestro lanzamiento de Cupones de WPBeginner 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 agregar un slider en nuestro sitio, pero cada script tenía sus limitaciones. Luego, gracias al increíble Matt Mickiewicz de 99designs, SitePoint y Flippa (ve su entrevista en WPBeginner) por recomendarnos a la gente de Digital Telepathy, quienes son los creadores de SlideDeck (el mejor script de slider en la web, por mucho). Jugamos con él y quedamos impresionados. Es genial para principiantes porque proporciona un plugin completo de WordPress que te permite usar la interfaz fácil de arrastrar y soltar para crear sliders. Sin embargo, también es genial para desarrolladores porque tiene una versión de jQuery que ofrece libertad adicional a los desarrolladores para personalizarlo según sus necesidades. En este artículo, te mostraremos cómo puedes crear un slider en WordPress sin editar una sola línea de código con el Plugin de WordPress SlideDeck.
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 ofrece soporte y muchas más funciones. Siempre que trabajamos con un producto nuevo, obtenemos la versión con soporte. Nos quedamos atascados un par de veces en nuestro desarrollo, y su soporte fue increíble y nos ayudó. Recomendamos encarecidamente que obtengas la versión PRO porque incluye funciones geniales como: Diapositivas Verticales, Soporte para Pantalla Táctil, Soporte, Diapositivas Inteligentes con Feeds RSS, Soporte para Imágenes de Fondo y mucho más.
Una vez que hayas descargado el plugin, procede a instalarlo y activarlo. (Sigue nuestra Guía Paso a Paso para Instalar un Plugin de WordPress)
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.
Si quieres ver algunas demostraciones geniales de SlideDeck, visita el sitio web de SlideDeck en SlideDeck’s website y échale un vistazo.
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.
mi sitio es http://www.chrisrogersconstruction.com ¿puedes ayudarme? No encuentro ninguna ayuda sobre este problema.
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!