---
title: "OnePress: ¿Cómo añadir un mapa debajo de la sección “Contacto”?"
url: https://caribdis.net/2017/10/08/onepress-como-anadir-un-mapa-debajo-de-la-seccion-contacto/
date: 2017-10-08
modified: 2019-10-11
lang: es
author: "Caribdis.Net"
description: "Como vimos en el tutorial anterior, agregar un mapa de Google en un tema que no incluye esta característica en sus opciones, es bastante sencillo con la ayuda de un..."
categories:
  - "OnePress"
tags:
  - "español"
  - "gratuito"
  - "OnePress"
  - "tema"
  - "tutorial"
  - "WordPress"
image: https://caribdis.net/wp-content/uploads/2016/12/onepress-tutorial.jpg
word_count: 369
---

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

Como vimos en el tutorial anterior, agregar un **mapa de Google** en un tema que no incluye esta característica en sus opciones, es bastante sencillo con la ayuda de un plugin y unas pocas líneas de código.

Hoy vamos a aplicar la misma técnica que usamos para **Zerif Lite** en **OnePress**, con el mismo plugin que recomendamos en la última entrada, aunque vale recordar que 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 las instrucciones y la lista completa de características del plugin, [visitar la entrada anterior](https://caribdis.net/2017/10/01/zerif-lite-como-anadir-un-mapa-debajo-de-la-seccion-contactenos/).

El paso 3 para **OnePress** 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/2016/12/11/onepress-como-editar-los-creditos-del-pie-de-pagina/).

Dentro del archivo `functions.php`, y antes del cierre de la etiqueta `?>` (si lo hubiere), pegaremos el siguiente código:
function onepress_child_contact_map() {
    echo do_shortcode( '[codigo-abreviado-del-plugin]' );
}
add_action('onepress_after_section_contact', 'onepress_child_contact_map');
Donde, claro está, `[codigo-abreviado-del-plugin]` será el código que hemos creado con los parámetros que necesitamos.

Usando el ejemplo de la entrada anterior (con las instrucciones de cómo llegar activadas), el código completo sería:
function onepress_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('onepress_after_section_contact', 'onepress_child_contact_map');
Y el resultado:

![OnePress - Mapa en sección "Contacto"](https://caribdis.net/wp-content/uploads/2017/10/onepress-mapa-contacto.png)

En el caso de **OnePress**, el fondo de la página es blanco, así que no será necesario incluir el CSS para que el texto contraste bien, aunque podemos mejorar la ubicación del campo para introducir la dirección de partida y el botón *Obtener ruta*, además de separar un poco los márgenes del resultado. Para eso, en el archivo `style.css` del tema hijo, o en el recuadro *CSS adicional* del personalizador, añadiremos estas líneas:
.flxmap-directions .adp {
padding: 0 15px 15px;
}
.flxmap-directions form {
text-align: center;
padding-top: 15px;
}
![OnePress - Instrucciones Mapa](https://caribdis.net/wp-content/uploads/2017/10/onepress-mapa-contacto-instrucciones.png)

Algo muy útil para tener en cuenta, es que si tenemos nuestra empresa registrada en [Google Mi Negocio](https://www.google.com/business/get-started.html), simplemente podemos usar el nombre en el parámetro `address` y San Google hará el resto. Un ejemplo:

`[flexiblemap address="Caribdis Diseño Web" title="Caribdis.Net" description="WordPress / HTML5 / CSS3" directions="true" width="100%"]`

![OnePress - Mapa Mi Negocio](https://caribdis.net/wp-content/uploads/2017/10/onepress-mapa-contacto-google.png)

¡Genial! :)