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

8 comentarios

OnePress - Tutoriales

Por: Caribdis.Net

Publicada: 8 de octubre de 2017

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! 🙂

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

8 Comentarios

  1. Yami

    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:)

    Responder
    • Caribdis.Net

      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.

      Responder
  2. Lucian

    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

    Responder
    • Caribdis Diseño Web

      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.png o screenshot.jpg.

      Saludos.

      Responder
  3. lenin

    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

    Responder
    • Caribdis Diseño Web

      Hola, Lenin.

      En el campo Teléfono incluí el HTML del enlace. Ejemplo:

      <a href="tel:+442098762345">+44 20 9876 2345</a>
      

      Saludos.

      Responder
  4. luismiguelsec

    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.

    Responder
    • Caribdis Diseño Web

      Respondido aquí.

      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!