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 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.

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.

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"

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

Algo muy útil para tener en cuenta, es que si tenemos nuestra empresa registrada en Google Mi Negocio, 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

¡Genial! 🙂

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