Hestia: ¿Cómo añadir un mapa debajo de la sección “Contacto”?

2 comentarios

Hestia - Tutoriales

Por: Caribdis.Net

Publicada: 5 de noviembre de 2017

En: Hestia

Ya tenemos los tutoriales para agregar un mapa de Google en Zerif Lite y en OnePress, y ahora es el turno de Hestia, el tema gratuito de bandera de ThemeIsle.

Hoy vamos a aplicar la misma técnica que usamos para Zerif Lite y OnePress, con el mismo plugin que recomendamos en ambas entradas (podemos emplear cualquier plugin de Google Maps que genere un código abreviado).

Los dos primeros pasos son los mismos: instalar y activar el plugin Flexible Map y configurar la clave API de Google Maps. Para ver instrucciones y la lista completa de características del plugin, ver esta entrada anterior.

El paso 3 para Hestia es añadir el mapa mediante una función. Para esto es necesario usar un tema hijo. Las instrucciones para crear un tema hijo se encuentran en esta entrada anterior.

Dentro del archivo functions.php, y antes del cierre de la etiqueta ?> (si lo hubiere), pegaremos el siguiente código:

function hestia_child_contact_map() {
 echo do_shortcode( '[codigo-abreviado-del-plugin]' );
}
add_action('hestia_after_contact_section_hook', 'hestia_child_contact_map');

[codigo-abreviado-del-plugin] debe ser el código que hemos creado con los parámetros del mapa que necesitamos.

Usando el mismo ejemplo de las entradas anteriores (título, descripción, “Obtener ruta” activado y ancho completo), el código completo quedará de esta manera:

function hestia_child_contact_map() {
 echo do_shortcode( '[flexiblemap address="500 Sutter Street, San Francisco, CA" title="Lori’s Diner" description="Abierto las 24 horas" directions="true" width="100%"]' );
}
add_action('hestia_after_contact_section_hook', 'hestia_child_contact_map');

El resultado en pantalla:

Hestia - Mapa en sección "Contacto"

Al igual que OnePress, el fondo de la página de Hestia es blanco, pero vamos a acomodar mejor la ubicación del campo para introducir la dirección de partida y el botón Obtener ruta, y darle algo de margen a los resultados para que no queden pegados a los bordes del navegador.

En el archivo style.css del tema hijo, o en el recuadro CSS adicional del personalizador, agregamos estas líneas:

.flxmap-directions .adp {
    padding: 0 15px 15px;
}
.flxmap-directions form {
    text-align: center;
    padding-top: 15px;
}

Hestia - Instrucciones Mapa

¡Eso es todo!

Últimas entradas de Caribdis.Net (ver todo)

Se responden dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios. Así que asegúrate de suscribirte a las respuestas para recibirlas en tu casilla de correo electrónico (podrás cancelar la suscripción cuando lo desees). Con la suscripción al blog, recibirás en tu correo únicamente las nuevas entradas que se publiquen.

Ten en cuenta que muchas de las preguntas ya fueron respondidas en distintas entradas; recuerda que puedes usar el buscador de la barra lateral, y Ctrl+F para buscar texto dentro de una página.

Esta u otras entradas pueden contener enlaces de afiliado. Esto significa que si usas un enlace para adquirir algún producto recomendado, recibiremos una comisión de afiliados, la cual no te generará ningún costo adicional.

2 Comentarios

  1. artemarmolco

    Hola buenas tardes, muchas gracias por el contenido, tengo dos preguntas.
    1- como poner las redes sociales como ustedes lo tienen en la foto.
    2- como quitar el copyright de hestia y wordpress en el footer.

    muchas gracias

    Responder
    • Caribdis Diseño Web

      Hola, Artemarmolco.

      Para el primer punto, fijate en este tutorial, en la sección Configurar el menú del pie de página.

      Y para el segundo, fijate en esta respuesta.

      Saludos.

      Responder

Enviar comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Pin It en Pinterest

Compartir esto

Compartir es agradecer

Si esta publicación te resultó útil, puedes compartirla y ayudar a otros. ¡Gracias!