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:
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;
}
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%"]
¡Genial! 🙂
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una vizsla loca.
- Guía para WordPress 6.6 disponible - 22 de septiembre de 2024
- Guía para WordPress 6.5 disponible - 13 de junio de 2024
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
Hola, realicé todo igual que cómo usted lo hizo y me da un error en la página y no me muestra el mapa “Map address returns error: REQUEST_DENIED”. Ojalá me pueda ayudar, gracias:)
Hola, Yami.
Gracias por tu comentario.
Para que el mapa funcione, deberás tener activada la clave API de Google Maps, y configurados los datos de facturación. Más información aquí.
Las API necesarias son la de JavaScript y Geolocalización.
Saludos.
Hola Ana te juro que lo he intentado y no me sale cree la carpeta hijo como indicas luego esos dos archivos el function y el style copie el codigo dentro de function.php casi al final antes de ?/ como indicas osea el function de la carpeta hijo pero nada por cierto en la seccion temas el tema hijo me sale sin foto solo blanco en fin, ademas cuando voy al editor de worpress para ver esos dos archivos el style y el function no me los muestra cuando hago click en ellos que sera, tal vez sea porque recien cree una carpeta hijo cuando mi pagina estaba avanzada ? que raro con zerif lite jamas me paso esto espero me puedas ayudar . Gracias
Hola, Lucian.
Si es la URL de tu comentario, veo que estás usando el tema hijo. Para que te aparezca la miniatura en la lista de temas, tenés que subir a la carpeta del tema hijo una imagen con el nombre
screenshot.pngoscreenshot.jpg.Saludos.
Hola, quisiera que me ayudes por favor, en la sección para poner números de teléfono del tema one press quiero hacer que cuando lo vean desde un movil este habilitado para llamar directamente desde la pagina lo cual no puedo hacerlo. Te lo agradecería mucho
Hola, Lenin.
En el campo Teléfono incluí el HTML del enlace. Ejemplo:
Saludos.
hola es una pregunta sobre el menu hamburguesa del tema zerif lite, como hago para que cuando pase el moude por un item se despliegue el submenu, que no toque dar click, en especial sobre el recuadro naranja.
Respondido aquí.