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 no lleva mucho tiempo y es bastante sencillo. Como siempre, se recomienda usar un tema hijo para hacer las personalizaciones correspondientes. Las instrucciones para crear un tema hijo se encuentran en la entrada anterior.

Paso 1:

En la carpeta del tema hijo, creamos una carpeta denominada /sections/. Luego creamos dentro de esta carpeta un nuevo archivo con el nombre big_title.php.

Paso 2:

Abrimos con un editor de texto el archivo /sections/big_title.php y pegamos el siguiente código:

<div class="home-header-slider">
<?php echo do_shortcode( '[plugin-shortcode]' ); ?>
</div>

Donde [plugin-shortcode] es el código abreviado generado por el plugin.

Paso 3:

En el archivo custom.css del tema hijo pegamos el siguiente código:

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

Esto es para que el menú principal no quede superpuesto al área del slider.

Algunos ejemplos con imágenes

Con MetaSlider, creamos nuestro carrusel y copiamos el código abreviado que nos ha generado el plugin.

Código abreviado de MetaSlider

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

Nuestra página de inicio se verá así:

Zerif Lite con MetaSlider

Con Slider Revolution:

Código abreviado de Slider Revolution

<?php echo do_shortcode( '[rev_slider alias="sliderpreview"]' ); ?>

El resultado:

Zerif Lite con Slider Revolution

Siguiendo esta lógica, podríamos integrar cualquier plugin que genere códigos abreviados.

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.

Tutorial original en inglés: Replacing big title section with an image slider

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)