Actualizado para la versión 1.1.78+ – 25/06/2018

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 un hook 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_child_slider() {
?>
<div class="carousel-inner">
<?php echo do_shortcode('[código-plugin]'); ?>
</div>
<?php
}
add_action( 'hestia_after_big_title_section_hook', 'hestia_child_slider' );

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

Paso 2: Ocultar la sección de título grande con CSS

El código anterior no hace más que agregar el slider debajo de la sección de título grande. En versiones anteriores de Hestia, esta sección entera se “imprimía” mediante una función que se podía modificar desde el tema hijo. A partir de la versión 1.1.78 esa función ya no está presente, por lo que se debe recurrir al hook para añadir el código del slider y a unas líneas de CSS para ocultar la sección.

Vamos a ir primero al Personalizador > Secciones de la página de inicio > Sección de título grande, eliminamos la imagen de fondo y dejamos todos los campos en blanco. Publicamos los cambios.

Luego, en el archivo style.css del tema hijo (o en el recuadro CSS adicional del Personalizador) pegaremos el siguiente código:

#carousel-hestia-generic {
    display: none;
}

Y para que las imágenes no queden debajo de la barra del menú en dispositivos móviles, agregaremos lo siguiente:

@media (max-width: 768px) {
.carousel-inner {
    padding-top: 70px;
}
}

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_child_slider() {
?>
 <div class="carousel-inner">
 <?php echo do_shortcode('[smartslider3 slider=1]'); ?>
 </div>
<?php
}
add_action( 'hestia_after_big_title_section_hook', 'hestia_child_slider' );

¿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.Net

Caribdis.Net

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una Vizsla loca.
Caribdis.Net

Últimas entradas por Caribdis.Net (ver todas)