Hoy retomamos la serie de entradas dedicadas a Hestia, el tema gratuito de ThemeIsle que ha tomado la posta de Zerif Lite. Esta será una recopilación de los tutoriales más breves de la documentación oficial, para continuar con las publicaciones que incluyen códigos más avanzados (configurar el mega menú, por ejemplo; y una que no es oficial pero tengo pendiente desde hace mucho: cómo reemplazar la cabecera con un slider).

Comencemos con la lista:

¿Cómo ocultar los créditos del pie de página?

Hestia - Ocultar créditos del pie de página

En caso de querer ocultar los créditos de Hestia, podemos usar la opción CSS adicional del personalizador. El código que tenemos que pegar es:

.copyright.pull-right {
    display: none;
}

¿Cómo eliminar la opacidad/superposición de la cabecera?

Hestia - Opacidad de cabecera

Si no nos gusta la opacidad del fondo de la cabecera y queremos eliminarla, usaremos también la opción CSS adicional del personalizador y pegaremos el siguiente código:

.header-filter:before {
    background-color: rgba(0, 0, 0, 0);
}

En caso de que no necesitemos eliminarla, sino atenuarla o cambiar el color de la superposición, tendremos que ajustar los valores RGB del color y el valor alfa para la opacidad. Ejemplo: rgba(22, 85, 155, 0.25).

¿Cómo hacer estática la barra de navegación en la portada?

En el recuadro CSS adicional del personalizador usar el siguiente código:

.navbar-fixed-bottom, .navbar-fixed-top { 
    position: absolute !important; 
}

¿Cómo disminuir la altura de la cabecera en las entradas?

Si queremos achicar un poco el área de la cabecera, podemos usar el siguiente código en el recuadro CSS adicional del personalizador:

.page-header.header-small .container {
    padding-top: 86px !important;
    padding-bottom: 67px !important; 
}

Ajustaremos el relleno superior e inferior cambiando el valor por el que más convenga. Tener en cuenta que el valor mínimo del relleno inferior es de 67px.

¿Cómo cambiar el color de fondo del menú en dispositivos móviles?

Si necesitamos un color diferente para el menú en celulares o tablets, podemos usar código CSS adicional:

@media (max-width: 768px) {
/* Barra transparente */
.navbar.navbar-transparent{
    background-color: rgba(101, 36, 36, 0.8);
}
/* Barra no transparente al desplazar */
.navbar.navbar-not-transparent{
    background-color: rgba(101, 36, 36, 0.8);
}

/* Fondo de los elementos del menú antes de desplazar y transparentes */
.navbar.navbar-fixed-top.navbar-transparent .navbar-collapse {
    background-color: rgba(165, 99, 129, 0.8);
}

/* Fondo de los elementos del menú después de desplazar y no transparentes */
.navbar-not-transparent .navbar-collapse{
    background-color: rgba(165, 99, 129, 0.8);
}
}

Se puede usar cualquier combinación de color, y para la semitransparencia nunca está de más tener a mano una referencia de los valores RGB: https://www.hexcolortool.com/

¿Cómo cambiar el color de texto de los botones?

El color de texto de los botones de la sección de título grande es blanco de manera predeterminada, pero si usamos un color de acento más bien claro puede que necesitemos usar uno más oscuro para los enlaces. En el recuadro CSS adicional del personalizador pegaremos el siguiente código:

.buttons a {
    color: #000;
}

¿Cómo ocultar el subtítulo de las entradas?

Hestia - Ocultar datos meta de entrada

En el  recuadro CSS adicional del personalizador pegaremos el siguiente código:

h4.author {
    display: none; 
}

¿Cómo eliminar la información meta de las entradas?

El código anterior funciona para ocultarla, pero puede que necesitemos suprimirla del todo. Para eso usaremos un tema hijo. Las instrucciones para crear un tema hijo se encuentran en esta entrada anterior.

Copiaremos el archivo single.php del tema padre al tema hijo y en el archivo copiado eliminaremos las siguientes líneas del código:

<h4 class="author">
 <?php
 printf(
 /* translators: %1$s is Author name wrapped, %2$s is Date*/
 esc_html__( 'Published by %1$s on %2$s', 'hestia' ),
 /* translators: %1$s is Author name, %2$s is Author link*/
 sprintf(
 '<a href="%2$s" class="vcard author"><strong class="fn">%1$s</strong></a>',
 esc_html( hestia_get_author( 'display_name' ) ),
 esc_url( get_author_posts_url( hestia_get_author( 'ID' ) ) )
 ),
 /* translators: %s is Date */
 sprintf(
 '<time class="date updated published" datetime="%2$s">%1$s</time>',
 esc_html( get_the_time( get_option( 'date_format' ) ) ), esc_html( get_the_date( DATE_W3C ) )
 )
 );
 ?>
</h4>

¿Cómo cambiar el texto “Leer más” del blog?

Para esto es necesario usa un tema hijo. Las instrucciones para crearlo se encuentran en esta entrada anterior.

En el archivo functions.php del tema hijo pegaremos la siguiente función:

function hestia_excerpt_more_new( $more ) {
 global $post;
 if ( ( ( 'page' === get_option( 'show_on_front' ) ) ) || is_single() || is_archive() || is_home() ) {
 return '<a class="moretag" href="' . esc_url( get_permalink( $post->ID ) ) . '"> ' . esc_html__( 'Seguir leyendo...', 'hestia' ) . '</a>';
 }
 return $more;
}
add_filter( 'excerpt_more', 'hestia_excerpt_more_new', 20 );

Editaremos el texto Seguir leyendo por el de nuestra preferencia.

¿Cómo eliminar las entradas relacionadas?

Se puede quitar la sección de entradas relacionadas de las entradas del blog con el siguiente código en el archivo functions.php del tema hijo.

function remove_hestia_related_posts() {
 remove_action( 'hestia_blog_related_posts', 'hestia_related_posts' );
}
add_action( 'wp_head', 'remove_hestia_related_posts' );

En caso de querer eliminar las entradas relacionadas para una entrada en particular, se puede adaptar el código anterior y usando la ID de la entrada en cuestión (en el ejemplo, 103).

function remove_hestia_related_posts() {
 if ( is_single( 103 ) ) { 
 remove_action('hestia_blog_related_posts', 'hestia_related_posts'); 
 }
}
add_action( 'wp_head', 'remove_hestia_related_posts' );

¿Cómo eliminar el autor y la fecha de la parte inferior de las entradas del blog?

Hestia - Eliminar autor y fecha

En el recuadro CSS adicional del personalizador pegaremos el siguiente código:

.card-blog .author{
    display: none;
}

Si estamos usando el diseño alternativo del blog (en Hestia Pro), el código deberá ser el siguiente:

.alternative-blog-row .author {
    display: none !important;
}

¿Cómo disminuir el tamaño del texto de la sección de título grande en dispositivos móviles?

En caso de que necesitemos un tamaño más pequeño en móviles para el título de la cabecera en la página de inicio, podemos usar el siguiente código en el recuadro CSS adicional del personalizador:

@media only screen and (max-width: 320px) {
h1.hestia-title{
    font-size: 16px !important;
}
}

Ajustaremos el valor en píxeles por aquel que sea más adecuado.

¿Cómo cambiar el número de elementos de las secciones Características, Testimonios y Blog?

Hestia - Número de características por fila

Si no estamos conformes con el número de Características, Testimonios o entradas del blog que se muestran por fila de manera predeterminada, podremos cambiarlo de manera sencilla. Tan solo tenemos que seguir los siguientes pasos:

  1. Crear un tema hijo, tal como se describe en esta entrada anterior.
  2. En el archivo functions.php usar el filtro para el número de elementos por fila como en este ejemplo:

Para 4 características por fila en lugar de 3:

add_filter( 'hestia_features_per_row_no', 'my_child_theme_custom_features_per_row_no' );
function my_child_theme_custom_features_per_row_no() {
 return 4; /* El número de características por fila */
}
add_filter( 'hestia_features_per_row_class', 'my_child_theme_custom_features_per_row_class' );
function my_child_theme_custom_features_per_row_class() {
 return 'col-md-3'; /* Cambiar de acuerdo con el número de características correspondiente */
}

La relación entre el número de elementos por fila (en el ejemplo, 4) y la clase (en el ejemplo, col-md-3) es la siguiente (se corresponde con la estructura de Bootstrap):

  • 1 elemento -> col-md-12
  • 2 elementos -> col-md-6
  • 3 elementos -> col-md-4
  • 4 elementos -> col-md-3
  • 6 elementos -> col-md-2
  • 12 elementos -> col-md-1

Para cambiar el número de testimonios o de entradas del blog, tendremos que usar los filtros correspondientes, como se detallan a continuación:

Filtros para la sección Características:

hestia_features_per_row_class

hestia_features_per_row_no

Filtros para la sección Testimonios:

hestia_testimonials_per_row_class

hestia_testimonials_per_row_no

Filtros para la sección Blog:

hestia_blog_per_row_class

hestia_blog_per_row_no

Así, para los testimonios, sería:

add_filter( 'hestia_testimonials_per_row_no', 'my_child_theme_custom_testimonials_per_row_no' );
function my_child_theme_custom_testimonials_per_row_no() {
 return 4;
}
add_filter( 'hestia_ testimonials _per_row_class', 'my_child_theme_custom_testimonials_per_row_class' );
function my_child_theme_custom_testimonials_per_row_class() {
 return 'col-md-3';
}

¿Cómo aumentar el tamaño del icono de las características?

Si queremos que el icono de las características sea un poco más grande, podemos usar el siguiente código en el recuadro CSS adicional del personalizador:

.hestia-info .icon > i {
    font-size: 80px;
}

Ajustaremos el tamaño en píxeles por el que sea más conveniente.

¿Cómo centrar un miembro del equipo?

En este rápido tutorial, veremos cómo colocar los miembros del equipo en una sola línea y centrados (la imagen a la izquierda y la descripción a la derecha). En el recuadro CSS adicional del personalizador pegaremos el siguiente código:

@media screen and (min-width: 768px) {
#team .col-xs-12.col-ms-6.col-sm-6 {
    width: 100% !important;
    min-height: 400px !important;
}
}

Podemos ajustar el valor de min-height para que quede algo de espacio entre las imágenes.

¿Cómo mostrar la cabecera en pantalla completa?

Si queremos que la cabecera del sitio ocupe toda la ventana del navegador, podemos usar el siguiente código en el recuadro CSS adicional del personalizador:

.page-header {
    height: 100vh !important;
}

Esto hará que la cabecera de todas las páginas tenga altura completa. Si solo queremos ajustar el alto en la portada, usaremos el siguiente código en su lugar:

.home .page-header {
    height: 100vh !important;
}

¿Cómo eliminar los títulos de páginas de archivo: “Categoría:”, “Etiqueta:” y “Autor:”?

En caso de que no deseemos que aparezca el prefijo “Categoría:”, “Etiqueta:” y “Autor:” en la cabecera de las correspondientes páginas de archivo, podemos seguir estas instrucciones.

Es necesario crear un tema hijo. En el archivo functions.php pegaremos el siguiente código:

add_filter( 'get_the_archive_title', function ($title) {
 if ( is_category() ) {
 $title = single_cat_title( '', false );
 } elseif ( is_tag() ) {
 $title = single_tag_title( '', false );
 } elseif ( is_author() ) {
 $title = '<span class="vcard">' . get_the_author() . '</span>' ;
 }
 return $title;
});

¿Cómo eliminar los títulos de página?

Si no queremos mostrar los títulos de página dentro de la cabecera, podemos hacer lo siguiente:

En primer lugar, crear un tema hijo. Luego, en el archivo functions.php pegar este código:

add_filter( 'single_post_title','child_hestia_remove_page_title' );
function child_hestia_remove_page_title( $title ) {
 if( is_page() ) {
 return false;
 }
 return $title;
}

Nota: Si queremos eliminar también los títulos de las entradas, tendremos que cambiar is_page() a is_page() || is_single().

¿Cómo cambiar el color del título del sitio y del menú hamburguesa en dispositivos móviles?

Si queremos que los colores del título del sitio y del menú hamburguesa sean distintos, podemos usar el siguiente código en el recuadro CSS adicional del personalizador:

@media screen and (max-width: 768px){
/* color del menú hamburguesa */
.navbar button.navbar-toggle {
    color: #fff !important;
}
/* título del sitio */
.navbar .navbar-brand p {
    color: #fff !important;
}
}

Para cambiar el color de fondo de la barra del menú, ver este tutorial.

¿Cómo mostrar la descripción de los miembros del equipo en dispositivos móviles?

De manera predeterminada, Hestia oculta la descripción de los miembros del equipo en dispositivos pequeños. Pero si necesitamos mostrarla, podemos usar el siguiente código en el recuadro CSS adicional del personalizador:

@media (max-width: 768px) {
.hestia-team .card .content .card-description {
    display: block;
}
}

¿Cómo mostrar la imagen del producto en la cabecera de la página de producto individual (WooCommerce)?

En una de las últimas actualizaciones, se decidió eliminar la imagen del producto de la cabecera en las páginas de producto individual de WooCommerce, porque ya se mostraba con un formato más adecuado, y era complicado que se ajustara bien a un área mucho más amplia como lo es la de la cabecera.

En este momento, para la imagen de cabecera en esa página, tenemos la posibilidad de usar la imagen destacada de la categoría del producto, la imagen de fondo de la opción del personalizador en Opciones de cabecera > Ajustes de cabecera o un Degradado de cabecera, en ese orden.

Sin embargo, si aún queremos que la imagen destacada del producto se repita como fondo de cabecera, podemos hacer lo siguiente:

  1. Crear un tema hijo.
  2. En el archivo functions.php del tema hijo añadir el siguiente código:
function child_filter_header_image( $default_thumbnail ) {
 if ( function_exists('is_product') && is_product() ) {
 $thumb = get_the_post_thumbnail_url();
 if ( ! empty( $thumb ) ) {
 return $thumb;
 }
 }
 return $default_thumbnail;
}
add_filter( 'hestia_header_image_filter', 'child_filter_header_image' );

Nota: Este filtro también se puede usar en otras páginas, reemplazando el condicional is_product().

¿Cómo añadir un título y un subtítulo a la barra de clientes?

Primero y principal, asegurarnos de usar un tema hijo. En el archivo functions.php añadir el siguiente código:

add_action( 'hestia_clients_bar_section_content_hook', 'child_add_title_in_the_clients_bar_section' );
function child_add_title_in_the_clients_bar_section() {
 $output = '';
 $output .= '<div class="row">';
 $output .= '<div class="col-md-8 col-md-offset-2 text-center">';
 $output .= '<h2 class="hestia-title">Título personalizado</h2>';
 $output .= '<h5 class="description">Subtítulo personalizado</h5>';
 $output .= '</div>';
 $output .= '</div>';
 echo $output;
}

No olvidar reemplazar los textos Título personalizado y Subtítulo personalizado por los que sean necesarios.

¿Cómo mostrar la fecha de última modificación en las entradas?

Si tenemos un blog de publicaciones que se actualizan con frecuencia, quizás optemos por mostrar la fecha de última modificación y no la de creación.

Esto se puede lograr mediante un tema hijo.

Copiaremos el archivo single.php del tema padre al tema hijo, y buscaremos la siguiente línea de código:

esc_html__( 'Published by %1$s on %2$s', 'hestia' ),

Cambiaremos el texto Published by a Última modificación por. Luego, buscaremos la siguiente línea de código:

esc_html( get_the_time( get_option( 'date_format' ) ) ), esc_html( get_the_date( DATE_W3C ) )

Y la reemplazamos por:

esc_html( get_the_modified_time( get_option( 'date_format' ) ) ), esc_html( get_the_modified_time( DATE_W3C ) )

Eso es todo por hoy 🙂 Dudas y consultas, en la sección de comentarios.

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)