En la entrada anterior vimos como publicar mapas usando el código HTML que nos propociona Google Maps. En esta ocasión, vamos a utilizar shortcodes para evitar el inconveniente que supone re-escribir el código, ya que se pierde sí necesitamos reeditar el artículo o la página.
¿Qué es un shortcode?
Los shortcode son un código específico de WordPress, que nos permiten integrar archivos o crear objetos con poco esfuerzo y sin utilizar plugins. De hecho existen repositorios de los Shorcodes más utilizados.
Los shortcode los introduciremos en la entrada o en la página donde queramos publicar el recurso, y para que todo funcione hay que realizar unos ajustes previos en el archivo functions.php de nuestro tema activo.
Como publicar Google Maps en WordPress con shortcode
1 Añade el siguiente código al archivo functions.php
Lo primero que tenemos que hacer es crear la función que nos permita publicar un mapa, y para ello acudiremos al archivo functions.php del tema que estamos utilizando.
El archivo functions.php se encuentra dentro de la carpeta themes. Recuerda que tienes que modificar el archivo de tu tema activo.
Una vez abierto, el archivo functions.php, introducimos el siguiente código:
//Google Maps Shortcode
function fn_googleMaps($atts, $content = null) {
extract(shortcode_atts(array(
"width" => '640',
"height" => '480',
"src" => ''
), $atts));return
'<iframe width="'.$width.'" height="'.$height.'"
frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="'.$src.'"></iframe>';
}
add_shortcode("googlemap", "fn_googleMaps");
Estos son los ajustes por defecto que tendrán los mapas que publiques, pero puedes cambiar el tamaño y dar uno que se adapte mejor al ancho de tu tema, modificando los valores en píxeles del ancho, width, y alto, height.
- Sí usas un único mapa en tu sitio:
Si vas a usar un único mapa, puedes poner en el shortcode del archivo functions.php, la URL del mapa que quieres publicar. Si vas a usar diferentes mapas hay que dejarlo en blanco.
- Sí usas un mapa diferente o de diferente tamaño en cada página o post:
Si vas a usar mapas de Google Maps en diferentes páginas o entradas y con diferente tamaño, puedes modificar la URL y el tamaño de cada mapa directamente en el shortcode de cada página o post, por ejemplo:
[googlemap width="200" height="200" src="URL"]
En este caso sustituye “URL” por la url que genera Google tras la personalización, ojo debes copiarla completa.
Finalmente guarda los cambios del archivo functions.php.
2 Busca en Google Maps el mapa que quieres mostrar
Pon la dirección del mapa que te interese publicar en tu wordpress en Google Maps
Haz clic en Enlazar, sí quieres puedes Personalizar el mapa que vamos a insertar.
y en el apartado Copia este código HTML para incrustar el mapa en tu sitio web, como podemos ver en la imagen siguiente:
copia la dirección que genera Google Maps, en concreto la parte marcada en azul, es el código que va entre comillas (“) despues de SRC= y hasta EMBED.
Un ejemplo de la dirección URL que tienes que copiar:
“http://www.google.com/maps?f=q&source=s_q&hl=es&geocode=&q=Calle+de+Pedro+Cerbuna,+50009+Zaragoza,+Espa%C3%B1a&sll=41.639052,-0.887318&sspn=0.117642,0.244446&ie=UTF8&hq=&hnear=Calle+de+Pedro+Cerbuna,+50009+Zaragoza,+Arag%C3%B3n,+Espa%C3%B1a&ll=41.640467,-0.89739&spn=0.011225,0.018239&z=15&iwloc=A&output=embed”
3 Introduce el shortcode en el post o la página
Donde quieras que se muestre el mapa de Google Maps escribe el shortcode:
[googlemap src="URL"]
Sustituye la palabra URL por la url que acabas de copiar tras la personalización, debes copiarla completa. Es muy importante que el código de la URL sea el que lleva el “embed”, para que no te inserte la página completa del Google sino solamente el mapa.
No hay diferencia visual con respecto a publicar el mapa utilizando el código <iFrame> que nos proporciona Google Maps, pero nos evitamos el inconveniente de tener que volver a copiar el código del mapa, sí realizamos algún cambio en la entrada o página donde está publicado.
Demo:
Artículos Relacionados:
[...] This post was mentioned on Twitter by María Teresa Pérez. María Teresa Pérez said: Nueva entrada en mi blog: Publicar mapas en WordPress II http://mtperez.es/2010/05/10/publicar-mapas-en-wordpress-ii/ [...]
Como Publicar mapas en WordPress con shortcode | MI uniVERSO…
…en integrar archivos o crear objetos con poco esfuerzo y sin utilizar plugins. De hecho existen repositorios de los Shorcodes ms utilizados. ……
No funciona con mi sitio Web, añado la funcion y me genera error… Tengo que editar desde el ftp quitando el codigo para poder recuperar mi sitio
Al revisar el código que hay que introducir en el archivo functions.php, me he dado cuenta que no había puesto el punto y coma del final. Vuelve a introducir el código, ahora te tiene que funcionar sin ningún problema.
Saludos