Actualizado para la versión 1.8.5.22 – 21/05/2017

Esta semana arrancamos con una serie de tutoriales para personalizar varios aspectos del tema gratuito Zerif Lite, de ThemeIsle, tanto del diseño como de la funcionalidad.

En esta segunda entrega, vamos a aprender a reemplazar la sección de título grande de Zerif con un plugin de slider o carrusel.

Este procedimiento es sumamente fácil a partir de la versión 1.8.5.22, publicada en el repositorio de WordPress.org el 16 de mayo de 2017.

Paso 1:

Cualquier plugin que genere códigos abreviados servirá. De más está decir que el plugin debe estar instalado, activado, y con al menos un slider creado. El código abreviado o shortcode es una pequeña porción de texto con una ID o alias que la gran mayoría de los plugins usan para poder insertar el slider dentro del contenido de una página.

Tan solo tendremos que copiar el código abreviado generado por el plugin de slider. Por ejemplo, para Meta Slider, el código abreviado se encuentra en el panel Uso que aparece del lado derecho de la página del pase de diapositivas. Para Soliloquy, se encuentra en la columna Shortcode de la lista de sliders. Para Crelly Slider, se encuentra en la columna Shortcode del listado de diapositivas.

Código abreviado de Meta Slider

Código abreviado generado por el plugin Meta Slider

Luego, abriremos el Personalizador y navegaremos a Secciones de la página de inicio > Sección de título grande > Contenido principal y en el campo Código abreviado del slider pegaremos el código recién copiado.

Zerif con Meta Slider

Paso 2:

Para una óptima integración, es necesario incluir unas líneas de CSS y así evitar que el slider quede debajo de la barra de navegación. Si estamos usando un tema hijo, pegaremos el siguiente código en el archivo custom.css. Si no, en el campo CSS adicional dentro del Personalizador:

@media screen and (max-width:1023px) {
.home-slider-plugin {
   padding-top: 111px;
}
}
@media screen and (max-width:767px) {
.home-slider-plugin {
    padding-top: 0px;
}
}
 @media screen and (min-width:768px) {
.home-slider-plugin {
    padding-top: 76px;
}
}

Algunos ejemplos con imágenes

Con MetaSlider:

Zerif Lite con MetaSlider

Con Slider Revolution:

Código abreviado de Slider Revolution

Código abreviado generado por el plugin Slider Revolution

Zerif Lite con Slider Revolution

Insertar un código abreviado en una nueva sección

Por ejemplo, si necesitamos una sección nueva en la página de inicio que nos muestre una galería de fotos, podemos usar parte del tutorial anterior, y en lugar de crear un área de widgets, pegar el código abreviado de la galería (en nuestro caso, creada con FooGallery).

En el archivo new_section.php, donde teníamos el siguiente código:

<?php
   if ( is_active_sidebar( 'new-section-sidebar' ) ) :
   dynamic_sidebar( 'new-section-sidebar' );
   else:
echo 'Añada algunos widgets aquí.';
   endif;
?>

Pegaremos:

Código abreviado de FooGallery

<?php echo do_shortcode('[foogallery id="1459"]'); ?>

El resultado:

Zerif con FooGallery

Tener en cuenta lo siguiente: si el plugin genera un código abreviado con comillas dobles, envolverlo en comillas simples (como el ejemplo anterior). Si el plugin genera un código abreviado con comillas simples, envolverlo en comillas dobles.

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

Últimas entradas por Caribdis Diseño Web (ver todas)