Advertisement
  1. Code
  2. WordPress Plugins

Crea un mapa del mundo interactivo con un plugin de WordPress

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Existen muchas opciones entre las que elegir cuando deseas añadir un mapa a tu sitio WordPress. Existen incluso opciones gratuitas para plugins que usan Google Maps.

Sin embargo, el problema que surge con muchos de los plugins de mapas para WordPress y opciones gratuitas es la falta de personalización que tendrás disponible.

Con el fin de encajar un mapa en tu sitio web y realizar funciones específicas, necesitarás un plugin que te permita personalizar todos los aspectos del mapa. El plugin de WordPress Interactive World Maps te da el poder de crear tantos mapas como quieras y ajustar cada uno de ellos de manera que funcionen como mejor te parezca.

En este tutorial, voy a mostrarte cómo crear un mapa con World Maps plugin. Explicaré cómo crear un mapa, cómo personalizarlo, y cómo añadirlo a tu sitio web gracias a este útil plugin.

Para poder seguir el tutorial, ¡descarga e instala el plugin!

Crear un mapa

Para crear un mapa, pulsa sobre Mapas interactivos > Añadir un nuevo mapa en el lateral izquierdo del escritorio de tu WordPress. Esto abrirá el editor del mapa.

En nuestro ejemplo, vamos a crear un mapa que muestra Europa. También vamos a añadir algunas regiones interactivas en Europa de manera que el usuario pueda comprender mejor ese país en concreto.

An interactive map of EuropeAn interactive map of EuropeAn interactive map of Europe

Primero, empezaremos añadiendo el nombre y la descripción del mapa. El nombre va a ser Europa y la descripción será Mapa interactivo de Europa.

Después, dirígete a la sección de los Ajustes del mapa. La primera opción que vamos a cambiar es la Región a mostrar. Dado que sólo queremos mostrar Europa en nuestro mapa, haz clic sobre Europa en el menú de desplazamiento.

Si ahora nos desplazamos hacia la parte inferior del editor del mapa, podremos ver una sección llamada Previsualización. Ahora veremos un mapa de Europa en esta previsualización.

Vuelve a los ajustes del mapa, cambiaremos la Acción región activa para Abrir URL (nueva ventana) ya que nos gustaría que aparezca una nueva página web cuando el usuario pulse sobre un país concreto.

Map Settings Map Settings Map Settings
Tras esto, vamos a empezar a añadir interacciones en nuestro mapa a través de la sección del editor Regiones interactivas. Esto te permitirá destacar regiones concretas así como añadir texto y, en nuestro caso, abrir un enlace concreto cuando se pulse sobre esas regiones.

En nuestro mapa de Europa, vamos a destacar dos países, Italia y España. Primero, añadiremos estas regiones dentro en la pestaña Simple de la sección Regiones interactivas.

El primer elemento que necesitamos incluir es el Código de región. Para encontrar el código de región para nuestros países, pulsa sobre el enlace Continentes y países justo bajo los Ajustes del mapa, eso te llevará al documento con el listado de códigos regionales para los países y continentes de Google developer.

Continents and Countries LinkContinents and Countries LinkContinents and Countries Link

Navega hasta Europa y encontrarás las abreviaturas para Italia y España, a saber, IT y ES respectivamente.

Así que, crea una región interactiva para Italia, escribe IT en el campo para el Código de región.

Después, vamos a añadir un título. El título se mostrará cuando el usuario sitúe el ratón sobre el país en el mapa. En este caso, usaremos Italia.

Después, vamos a añadir Capital: Roma en la sección para el Tooltip. El texto del tooltip aparecerá bajo el título.

Por último, vamos a añadir el Valor acción. Añadiremos una URL a este campo, enlazando a un sitio web que se abrirá cuando se haga clic sobre la región.

Queremos que se abra la página de Italia en la Wikipedia en una nueva ventana cuando se haga clic sobre dicho país, así que añadiremos ese enlace en el campo Valor de acción.

Cuando hagas clic sobre el botón Añadir del extremo derecho del editor, verás como ahora en la previsualización Italia aparece resaltada. Puedes seguir los mismos pasos para crear una región interactiva para cualquier otro país.

Para ver el proceso de creación del mapa en acción, échale un vistazo al siguiente vídeo.


Añadir el mapa a tu sitio web

Un shortcode de WordPress puede incrustar archivos o crear objetos que normalmente requerirían gran cantidad de complicado código con tan solo una línea.

El plugin Interactive World Maps usa estos shortcodes para facilitarte la inserción de mapas en tu sitio web. Para obtener el shortcode de mapa concreto, haz clic sobre el botón Crear mapa situado dentro de los Ajustes visuales del lateral izquierdo del editor del mapa.

En la parte superior del editor aparecerá un shortcode, copia este shortcode del editor a tu portapapeles.

Después, crea una nueva página o entrada. Pega el shortcode en el editor de la página o la entrada y pulsa el botón Previsualizar que aparece a la derecha. Ahora será visible en la página o entrada el mapa que acabas de crear.

Visiona el siguiente vídeo para ver cómo añadir el mapa a una entrada o página de WordPress.


Conclusión

El plugin Interactive Map WordPress te proporciona, por un módico precio, la capacidad de crear y personalizar un mapa interactivo que puedes colocar en tu sitio WordPress. Has aprendido un método para crear un mapa usando este plugin.

Para probar el plugin, dirígete a CodeCanyon y marca previsualización en vivo de Interactive Map plugin.

Y mientras estás aquí, echa un vistazo al resto de magníficos plugins para WordPress disponibles en CodeCanyon.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.