Después de nuestro lanzamiento de Cupones 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 control deslizante en nuestro sitio, pero cada script tenía sus limitaciones. Luego, gracias al increíble Matt Mickiewicz de 99designs, SitePoint y Flippa (vea su entrevista en WPBeginner) por referirnos a la gente de Digital Telepathy, quienes son los creadores de SlideDeck (con mucho, el mejor guión deslizante en la web). Jugamos con él y nos impresionó. Es ideal para principiantes porque proporciona un complemento completo de WordPress que le permite usar la sencilla interfaz de arrastrar y soltar para crear controles deslizantes. Sin embargo, también es excelente para los 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 control deslizante en WordPress sin editar una sola línea de código con el complemento SlideDeck WordPress.
Si desea ver lo que puede crear con este complemento, aquí hay una demostración EN VIVO.
Paso 1. Descarga e instalación del complemento
Dirígete al sitio web de SlideDeck y descarga el complemento. Tienen una versión GRATUITA y una versión PRO que ofrece soporte y muchas más funciones. Cada vez que estamos trabajando con un nuevo producto, siempre obtenemos la versión de soporte. Nos quedamos atascados varias veces en nuestro desarrollo, y su apoyo fue increíble y nos ayudó. Recomendamos encarecidamente que obtenga la versión PRO porque incluye funciones interesantes como: Diapositivas verticales, compatibilidad con pantalla táctil, ApoyoRSS Feed Smart SlideDecks, compatibilidad con imágenes de fondo y mucho más.
Una vez que haya descargado el complemento, continúe e instale/active el complemento. (Siga nuestra Guía paso a paso para instalar un complemento de WordPress)
Vamos a crear un control deslizante
Una vez que haya activado el complemento, verá una nueva pestaña agregada llamada SlideDeck. Vamos, y haga clic en Agregar nuevo SlideDeck. Se le indicará una pantalla que se parece al Panel de escritura posterior.
Entonces, lo que hicimos fue agregar el contenido en nuestra diapositiva y le dimos el título. Podríamos tener una imagen de fondo personalizada (Función PRO), pero por simplicidad, no lo hicimos. Queremos mostrar lo que este complemento puede hacer de inmediato. 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 observa 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 próxima diapositiva, y esto es lo que agregó:
Ahora repita el proceso para tantas diapositivas como desee. Una vez que haya terminado de crear diapositivas, veamos las Opciones de SlideDeck para publicar las diapositivas en su sitio. Verá esto en el lado derecho de la pantalla Editar diapositivas.
Puede seleccionarlo para reproducción automática, permitir la navegación con el teclado, permitir la navegación con la rueda de desplazamiento del mouse, establecer la velocidad de la animación, elegir una de sus increíbles máscaras y seleccionar desde qué diapositiva desea comenzar. También puede reordenar las diapositivas arrastrando y soltando. Verá que hay un fragmento de código de tema que tiene el código para que lo incluya en su tema. Puede agregarlo en cualquier lugar que desee en su tema. Oh, espera, ¿no dijimos que no tendrás que editar una sola línea de código para integrar SlideDeck en WordPress? Sí, nos quedaremos con nuestras palabras en este tutorial. Permítanos mostrarle cómo puede integrarlo en su WordPress sin editar una sola línea de código.
Integración de SlideDeck en publicaciones/páginas de WordPress
Crear una nueva publicación o página. Verá un nuevo cuadro SlideDeck agregado en la barra lateral derecha.
Haga clic en el botón Insertar SlideDeck. Elija el control deslizante que desea agregar y publique la publicación. Una vez que publique la publicación, su control deslizante se verá así con la máscara clásica:
Puede usarlo en una publicación fija, una plantilla de página de ancho completo o cualquier otra cosa que desee. Pero espera, esto no termina aquí. Vayamos un poco más lejos.
Agregar un control deslizante con publicaciones destacadas
Los controles deslizantes de publicaciones destacadas son los favoritos de los blogueros. Vemos esta función en numerosos blogs, pero la mayoría de esos controles deslizantes están codificados en temas con control limitado para los usuarios. Bueno, echemos un vistazo a lo fácil que es hacerlo con SlideDeck. Puede agregar un control deslizante dinámico llamado «Smart SlideDeck» que le permite mostrar sus publicaciones más recientes, las publicaciones más populares, las publicaciones destacadas (las que elija), puede ordenar esto por categoría, incluso puede importar fuentes RSS desde otro sitio para agregar en su control deslizante. Puede seleccionar entre sus diversas máscaras, elegir los diferentes tipos de navegación y prácticamente tener un control deslizante listo en menos de 5 minutos. Permítanos mostrarle cómo. En nuestro tutorial, mostraremos entradas destacadas de nuestras publicaciones.
Vaya a sus publicaciones actuales, elija 5 publicaciones y agréguelas en Smart SlideDecks marcando la casilla.
Ahora, vayamos a su panel SlideDeck y haga clic en Agregar Smart SlideDeck. Elige tu piel:
Seleccione cuántas diapositivas desea mostrar, opciones de reproducción, tipo de contenido (vea cómo lo tenemos como entradas destacadas de la publicación). Puede seleccionar la configuración de contenido, como las opciones de imagen, la longitud del título, la longitud del extracto, etc. Elija sus estilos de navegación y haga clic en Publicar.
Necesitas editar el código en este. Tome el código de la barra lateral, código de fragmento de tema y péguelo en su tema. Lo más probable es que esté en la parte superior de tu 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 control deslizante solo en su página de inicio.
Si desea ver algunas demostraciones realmente geniales de SlideDeck, visite el sitio web de SlideDeck y compruébelo.
Háganos saber sus pensamientos sobre el complemento a medida que lo implementa.