En la última entrada reanudamos los tutoriales dedicados al tema gratuito de una sola página de ThemeIsle que recomendamos con mucho entusiasmo: Hestia, el sucesor de Zerif Lite, que cada vez crece más en popularidad y en características.

Antes de continuar con los tutoriales oficiales, publico este que he dejado pendiente desde hace bastante tiempo, pero no por lo complicado sino simplemente porque de tan sencillo lo había olvidado por completo. 😆

Paso 1: usar la función de Hestia para insertar un código abreviado

Vamos a partir de la base de que el plugin ya está instalado y activado, y que el slider que queremos incluir ya está creado.

Cualquier plugin que genere códigos abreviados sirve. Desde MetaSlider hasta Smart Slider 3, pasando por Master Slider, los premium Revolution y Layer, y la gran mayoría de los que están disponibles en el repositorio.

También suponemos que el tema hijo ya está creado y activado. De no ser así, las instrucciones se encuentran en esta entrada anterior.

Ahora sí, en el archivo functions.php, a continuación del código presente, pegamos esta función:

function hestia_big_title() {
 hestia_before_big_title_section_trigger();
?>
 <div id="carousel-hestia-generic" class="carousel slide" data-ride="carousel">
 <div class="carousel slide" data-ride="carousel">
 <div class="carousel-inner">
 <?php echo do_shortcode('[código-plugin]'); ?>
 </div>
 </div>
 <?php hestia_after_big_title_section_trigger(); ?>
 </div>
 <?php
}

Donde [código-plugin] será el código abreviado (shortcode) del slider.

Para que las imágenes no queden debajo de la barra del menú en dispositivos móviles, simplemente tendremos que pegar el siguiente código en el archivo style.css:

@media (max-width: 767px) {
.carousel {
    padding-top: 35px;
}
}

Paso 2: ¡No hay! ¡Eso es todo! 😉

Veamos un ejemplo con Smart Slider 3, que ya incluye un slider de demo. Vamos a Smart Slider y le damos clic a Sample Slider. En la pestaña Publicar buscamos el código abreviado y lo copiamos.

Hestia - Smart Slider 3

Lo pegamos dentro de la función, que quedaría de la siguiente manera:

function hestia_big_title() {
 hestia_before_big_title_section_trigger();
?>
 <div id="carousel-hestia-generic" class="carousel slide" data-ride="carousel">
 <div class="carousel slide" data-ride="carousel">
 <div class="carousel-inner">
 <?php echo do_shortcode('[smartslider3 slider=1]'); ?>
 </div>
 </div>
 <?php hestia_after_big_title_section_trigger(); ?>
 </div>
 <?php
}

¿Qué tal se ve? Hete aquí una demo en funcionamiento: https://caribdis.bid/hestia/

En este ejemplo, Smart Slider no añade comillas en el código, pero recordemos que si un plugin distinto lo genera con comillas dobles, tendremos que envolverlo en comillas simples:

<?php echo do_shortcode('[metaslider id="42"]'); ?>

Si el plugin genera un código abreviado con comillas simples, envolverlo en comillas dobles.

<?php echo do_shortcode("[whatev-slider id='77']"); ?>
Caribdis Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web