Actualizado para la versión 1.1.39 y superiores.

Hace un par de semanas inauguramos la serie de tutoriales correspondientes al tema gratuito Hestia, de ThemeIsle, que está teniendo gran aceptación por parte de los usuarios y se ha convertido en el principal producto de esta fábrica de temas y plugins para WordPress.

En esta segunda entrega, vamos a aprender a agregar secciones o contenido nuevo a continuación de cada sección predeterminada.

Como ya habíamos comentado, las personalizaciones de código en Hestia se hacen a través de funciones. Esto requiere un conocimiento básico de PHP y al menos un dominio intermedio de HTML. Por lo tanto, antes de dejarles la solución servida 😉 no está de más animarlos a hacer algún tutorial sobre estos dos lenguajes. Google es vuestro amigo. 🙂

Paso 1: Crear un tema hijo

Este paso no es opcional, ya que con Hestia es estrictamente necesario un tema hijo para modificar código. Las instrucciones para crearlo se encuentran en esta entrada anterior.

Paso 2: Crear la función con el código del contenido personalizado

Hestia incluye las siguientes secciones: Título grande, Características, Quiénes somos, Tienda, Equipo, Testimonios, Suscribirse, Blog y Contacto. A partir de la versión 1.1.39 de Hestia se incluyeron numerosos hooks, que nos permitirán mostrar contenido adicional mediante funciones personalizadas.

Vamos a usar un ejemplo simple, como crear un botón con un enlace. En las secciones Tienda y Blog, solo tenemos la opción de mostrar los últimos productos y entradas. Si tenemos muchos, no vamos a querer que aparezcan todos juntos en la portada. Pero sería útil añadir un enlace “Ver más” para facilitar la navegación.

Empecemos por la sección de la tienda. Creamos el código dentro de una función, que pegaremos en nuestro archivo functions.php a continuación del código existente:

function hestia_child_shop_more() {
 ?>
 <div class="text-center">
 <a class="btn btn-primary" href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" role="button">Ver todos los productos</a>
 </div>
 <?php
}

Paso 3: Imprimir el código mediante el hook

La función anterior no hace nada por sí sola, más que contener el código HTML que debería mostrarse a continuación de la sección Tienda. Ahora nada más falta mostrarlo. Pegamos a continuación el siguiente código:

add_action( 'hestia_after_shop_section_content_hook', 'hestia_child_shop_more' );

Así se verá una vez activado el tema hijo:

Hestia - Botón "Ver más productos"

Y no hace falta agregar nada más. ¡Genial!

El código completo para el botón del blog será el siguiente:

function hestia_child_blog_more() {
 ?>
 <div class="text-center">
 <a class="btn btn-primary" href="<?php echo get_permalink( get_option( 'page_for_posts' ) ); ?>" role="button">Ver todas las entradas</a>
 </div>
 <?php
}
add_action( 'hestia_after_blog_section_content_hook', 'hestia_child_blog_more' );

Hestia - Botón "Ver más entradas"

Dos cositas más para tener en cuenta: el contenido del enlace para estas dos páginas está generado con PHP, pero podemos reemplazarlo por cualquier URL específica si pegamos la dirección completa.

Por ejemplo, si tenemos una página que se llama “Ofertas” (y el slug es ofertas), el código para el botón será:

<a class="btn btn-primary" href="http://urldelsitio.com/ofertas/" role="button">Ver ofertas</a>

La clase btn-primary que asignamos es para que use el color de acento configurado en las opciones del personalizador de tema. Se pueden usar las clases que incluye Hestia (ver entrada anterior), o usar clases personalizadas para aplicar los estilos necesarios desde el archivo style.css.

Por último, este procedimiento sirve también para crear secciones enteras y no simplemente un enlace o botón. Y es igualmente útil para incluir códigos abreviados que genere algún plugin. Todo el código debe estar contenido en una función, y esa función tendrá salida en la página mediante los correspondientes hooks.

Como último ejemplo, veamos cómo agregar una sección con un título y un vídeo de YouTube, antes de la sección Contacto. La función será algo como esto:

function hestia_child_video_section() {
 ?>
 <section id="mi-video" class="hestia-features">
 <div class="container">
 <div class="row">
 <div class="col-md-8 col-md-offset-2">
 <h2 class="hestia-title">Mi sección con vídeo</h2> <!-- El título es opcional; se puede borrar esta línea y quedará solo el vídeo -->
 <div class="video-container"><iframe src="https://www.youtube.com/embed/BFypUvVjZik?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
 </div>
 </div>
 </div>
 </section>
 <?php
}
add_action( 'hestia_before_contact_section_hook', 'hestia_child_video_section' );

Para que el reproductor de vídeo se muestre de manera totalmente responsive, vamos a usar el siguiente código en el archivo style.css:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

El resultado:

Hestia - Sección vídeo

El código que va dentro del div video-container será el que nos dará YouTube para incrustar el reproductor (los parámetros son opcionales, y conviene suprimir los valores de width y height para que se visualice mejor en todos los dispositivos):

Hestia - Incrustar vídeo de YouTube

Y no está de más recordar la estructura de la función para introducir contenidos entre secciones:

Hestia - Estructura de función

Y para añadir el contenido de un plugin mediante código abreviado, la sintaxis será algo como esto:

function hestia_child_shortcode_section() {
 ?>
 <section id="shortcode-plugin" class="hestia-features">
 <div class="container">
 <div class="row">
 <div class="col-md-8 col-md-offset-2">
 <?php echo do_shortcode('[codigoplugin id="XX"]'); ?>
 </div>
 </div>
 </div>
 </section>
 <?php
}
add_action( 'hestia_before_features_section_hook', 'hestia_child_shortcode_section' );

Como referencia, estos son todos los hooks que se pueden usar:

Antes del área de la cabecera (menú de navegación)
Contexto HTML: antes de header nav
'hestia_before_header_hook'

Antes del contenido de la cabecera (menú de navegación)
Contexto HTML: antes de header nav div.container
'hestia_before_header_content_hook'

Antes del menú hamburguesa en dispositivos móviles
Contexto HTML: antes de header nav button.navbar-toggle
'hestia_before_navbar_toggle_hook'

Después del contenido de la cabecera (menú de navegación)
Contexto HTML: después de header nav div.container
'hestia_after_header_content_hook'

Después del área de la cabecera (menú de navegación)
Contexto HTML: después de header nav
'hestia_after_header_hook'

Antes del área del pie de página
Contexto HTML: antes de footer
'hestia_before_footer_hook'

Antes del contenido del área del pie de página
Contexto HTML: antes de footer div.container
'hestia_before_footer_content_hook'

Antes del área de widgets del pie de página
Contexto HTML: antes de footer div.hestia-bottom-footer-content
'hestia_before_footer_widgets_hook'

Después del área de widgets del pie de página
Contexto HTML: después de footer div.hestia-bottom-footer-content
'hestia_after_footer_widgets_hook'

Después del contenido del área del pie de página
Contexto HTML: después de footer div.container
'hestia_after_footer_content_hook'

Después del área del pie de página
Contexto HTML: después de footer
'hestia_after_footer_hook'

Antes de la sección de título grande / slider
Contexto HTML: antes de div#carousel-hestia-generic
'hestia_before_big_title_section_hook'

Antes del contenido de la sección de título grande / slider
Contexto HTML: antes de div#carousel-hestia-generic div.container
'hestia_before_big_title_section_content_hook'

Dentro del contenedor del título grande / slider
Contexto HTML: después de la apertura de div#carousel-hestia-generic div.container
'hestia_top_big_title_section_content_hook'

Antes del contenido de la sección de título grande / slider
Contexto HTML: antes de div#carousel-hestia-generic div.container
'hestia_before_big_title_section_content_hook'

Después del botón de la sección de título grande / slider
Contexto HTML: dentro de div.big-title-content div.buttons
'hestia_big_title_section_buttons'

En la parte inferior de la sección de título grande / slider
Contexto HTML: después del cierre de div#carousel-hestia-generic div.container
'hestia_bottom_big_title_section_content_hook'

Después del contenido de la sección de título grande / slider
Contexto HTML: después de div#carousel-hestia-generic div.container
'hestia_after_big_title_section_content_hook'

Después de la sección de título grande / slider
Contexto HTML: después de div#carousel-hestia-generic
'hestia_after_big_title_section_hook'

Antes de la sección Equipo
Contexto HTML: antes de section.hestia-team
'hestia_before_team_section_hook'

Antes del contenido de la sección Equipo
Contexto HTML: antes de section.hestia-team div.container
'hestia_before_team_section_content_hook'

En la parte superior de la sección Equipo
Contexto HTML: después de section.hestia-team div.container
'hestia_top_team_section_content_hook'

En la parte inferior de la sección Equipo
Contexto HTML: antes del cierre de section.hestia-team div.container
'hestia_bottom_team_section_content_hook'

Después del contenido de la sección Equipo
Contexto HTML: después de section.hestia-team div.container
'hestia_after_team_section_content_hook'

Después de la sección Equipo
Contexto HTML: después de section.hestia-team
'hestia_after_team_section_hook'

Antes de la sección Características
Contexto HTML: antes de section.hestia-features
'hestia_before_features_section_hook'

Antes del contenido de la sección Características
Contexto HTML: antes de section.hestia-features div.container
'hestia_before_features_section_content_hook'

En la parte superior del contenido de la sección Características
Contexto HTML: después de section.hestia-features div.container
'hestia_top_features_section_content_hook'

En la parte inferior del contenido de la sección Características
Contexto HTML: después del cierre de section.hestia-features div.container
'hestia_bottom_features_section_content_hook'

Después del contenido de la sección Características
Contexto HTML: después de section.hestia-features div.container
'hestia_after_features_section_content_hook'

Después de la sección Características
Contexto HTML: después de section.hestia-features
'hestia_after_features_section_hook'

Antes de la sección Precios (Hestia PRO)
Contexto HTML: antes de section.pricing
'hestia_before_pricing_section_hook'

Antes del contenido de la sección Precios (Hestia PRO)
Contexto HTML: antes de section.pricing div.container
'hestia_before_pricing_section_content_hook'

En la parte superior del contenido de la sección Precios
Contexto HTML: antes de section.pricing div.container
'hestia_top_pricing_section_content_hook'

En la parte inferior del contenido de la sección Precios
Contexto HTML: antes del cierre de section.pricing div.container
'hestia_bottom_pricing_section_content_hook'

Después del contenido de la sección Precios (Hestia PRO)
Contexto HTML: después de section.pricing div.container
'hestia_after_pricing_section_content_hook'

Después de la sección Precios (Hestia PRO)
Contexto HTML: después de section.pricing
'hestia_after_pricing_section_hook'

Antes de la sección Quiénes somos
Contexto HTML: antes de section.hestia-about
'hestia_before_about_section_hook'

Después de la sección Quiénes somos
Contexto HTML: después de section.hestia-about
'hestia_after_about_section_hook'

Antes de la sección Tienda
Contexto HTML: antes de section.products
'hestia_before_shop_section_hook'

Antes del contenido de la sección Tienda
Contexto HTML: antes de section.products div.container
'hestia_before_shop_section_content_hook'

En la parte superior del contenido de la sección Tienda
Contexto HTML: después de section.products div.container
'hestia_top_shop_section_content_hook'

En la parte inferior del contenido de la sección Tienda
Contexto HTML: antes del cierre de section.products div.container
'hestia_bottom_shop_section_content_hook'

Después del contenido de la sección Tienda
Contexto HTML: después de section.products div.container
'hestia_after_shop_section_content_hook'

Después de la sección Tienda
Contexto HTML: después de section.products
'hestia_after_shop_section_hook'

Antes de la sección Testimonios
Contexto HTML: antes de section.hestia-testimonials
'hestia_before_testimonials_section_hook'

Antes del contenido de la sección Testimonios
Contexto HTML: antes de section.hestia-testimonials div.container
'hestia_before_testimonials_section_content_hook'

En la parte superior del contenido de la sección Testimonios
Contexto HTML: después de section.hestia-testimonials div.container
'hestia_top_testimonials_section_content_hook'

En la parte inferior del contenido de la sección Testimonios
Contexto HTML: antes del cierre de section.hestia-testimonials div.container
'hestia_bottom_testimonials_section_content_hook'

Después del contenido de la sección Testimonios
Contexto HTML: después de section.hestia-testimonials div.container
'hestia_after_testimonials_section_content_hook'

Después de la sección Testimonios
Contexto HTML: después de section.hestia-testimonials
'hestia_after_testimonials_section_hook'

Antes de la sección Suscribirse
Contexto HTML: antes de section.subscribe-line
'hestia_before_subscribe_section_hook'

Antes del contenido de la sección Suscribirse
Contexto HTML: antes de section.subscribe-line div.container
'hestia_before_subscribe_section_content_hook'

En la parte superior del contenido de la sección Suscribirse
Contexto HTML: después de section.subscribe-line div.container
'hestia_top_subscribe_section_content_hook'

En la parte inferior del contenido de la sección Suscribirse
Contexto HTML: antes del cierre de section.subscribe-line div.container
'hestia_bottom_subscribe_section_content_hook'

Después del contenido de la sección Suscribirse
Contexto HTML: después de section.subscribe-line div.container
'hestia_after_subscribe_section_content_hook'

Después de la sección Suscribirse
Contexto HTML: después de section.subscribe-line
'hestia_after_subscribe_section_hook'

Antes de la sección Blog
Contexto HTML: antes de section.hestia-blogs
'hestia_before_blog_section_hook'

Antes del contenido de la sección Blog
Contexto HTML: antes de section.hestia-blogs div.container
'hestia_before_blog_section_content_hook'

En la parte superior del contenido de la sección Blog
Contexto HTML: después de section.hestia-blogs div.container
'hestia_top_blog_section_content_hook'

En la parte inferior del contenido de la sección Blog
Contexto HTML: antes del cierre de section.hestia-blogs div.container
'hestia_bottom_blog_section_content_hook'

Después del contenido de la sección Blog
Contexto HTML: después de section.hestia-blogs div.container
'hestia_after_blog_section_content_hook'

Después de la sección Blog
Contexto HTML: después de section.hestia-blogs
'hestia_after_blog_section_hook'

Antes de la sección Contacto
Contexto HTML: antes de section.contactus
'hestia_before_contact_section_hook'

Antes del contenido de la sección Contacto
Contexto HTML: antes de section.contactus div.container
'hestia_before_contact_section_content_hook'

En la parte superior del contenido de la sección Contacto
Contexto HTML: después de section.contactus div.container
'hestia_top_contact_section_content_hook'

En la parte inferior del contenido de la sección Contacto
Contexto HTML: antes del cierre de section.contactus div.container
'hestia_bottom_contact_section_content_hook'

Después del contenido de la sección Contacto
Contexto HTML: después de section.contactus div.container
'hestia_after_contact_section_content_hook

Después de la sección Contacto
Contexto HTML: después de section.contactus
'hestia_after_contact_section_hook'

Antes de la sección Portfolio (Hestia PRO)
Contexto HTML: antes de section.hestia-work
'hestia_before_portfolio_section_hook'

Antes del contenido de la sección Portfolio (Hestia PRO)
Contexto HTML: antes de section.hestia-work div.container
'hestia_before_portfolio_section_content_hook'

En la parte superior del contenido de la sección Portfolio (Hestia PRO)
Contexto HTML: después de section.hestia-work div.container
'hestia_top_portfolio_section_content_hook'

En la parte inferior del contenido de la sección Portfolio (Hestia PRO)
Contexto HTML: antes del cierre de section.hestia-work div.container
'hestia_bottom_portfolio_section_content_hook'

Después del contenido de la sección Portfolio (Hestia PRO)
Contexto HTML: después de section.hestia-work div.container
'hestia_after_portfolio_section_content_hook'

Después de la sección Portfolio (Hestia PRO)
Contexto HTML: después de section.hestia-work
'hestia_after_portfolio_section_hook'

Antes de la sección Barra de clientes
Contexto HTML: después de section.hestia-clients-bar div.container
'hestia_clients_bar_section_content_hook'

Después de la sección Barra de clientes
Contexto HTML: después de section.hestia-clients-bar
'hestia_after_clients_bar_section_hook'

Antes de la sección Cinta
Contexto HTML: antes de section.hestia-ribbon
'hestia_before_ribbon_section_hook'

Después de la sección Cinta
Contexto HTML: después de section.hestia-ribbon
'hestia_after_ribbon_section_hook'

Si ha quedado alguna duda, con gusto se responderá en la sección de comentarios.

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)