---
title: "Hestia: ¿Cómo añadir un mapa debajo de la sección “Contacto”?"
url: https://caribdis.net/2017/11/05/hestia-como-anadir-un-mapa-debajo-de-la-seccion-contacto/
date: 2017-11-05
modified: 2019-10-11
lang: es
author: "Caribdis.Net"
description: "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...."
categories:
  - "Hestia"
tags:
  - "español"
  - "gratuito"
  - "tema"
  - "ThemeIsle"
  - "tutorial"
  - "WordPress"
image: https://caribdis.net/wp-content/uploads/2017/07/hestia-tutoriales.jpg
word_count: 318
---

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

Ya tenemos los tutoriales para agregar un **mapa de Google** en **Zerif Lite** y en **OnePress,** y ahora es el turno de [**Hestia**,](https://caribdis.link/Hestia) el tema gratuito de bandera de [**ThemeIsle**.](https://caribdis.link/ThemeIsle)

Hoy vamos a aplicar la misma técnica que usamos para **Zerif Lite** y [**OnePress**](https://caribdis.net/2017/10/08/onepress-como-anadir-un-mapa-debajo-de-la-seccion-contacto/), con el mismo plugin que recomendamos en ambas entradas (podemos emplear cualquier [plugin](https://es.wordpress.org/plugins/search/google+maps/) 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](https://caribdis.net/2017/10/01/zerif-lite-como-anadir-un-mapa-debajo-de-la-seccion-contactenos/).

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](https://caribdis.net/2017/07/12/hestia-como-anadir-un-segundo-boton-en-la-seccion-de-titulo-grande/).

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"](https://caribdis.net/wp-content/uploads/2017/11/hestia-mapa-contacto.jpg)

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](https://caribdis.net/wp-content/uploads/2017/11/hestia-mapa-contacto-indicaciones.jpg)

¡Eso es todo!