Vídeos y mapas preparados para móviles con WordPress

Hoy toca un par de cosas útiles. Se trata de un par de plugins para WordPress que permiten que nuestro tema adaptado para móviles sea de verdad adaptado.

Cada vez hay más temas que se adaptan a las diferentes pantallas en las que trabajamos, especialmente a los móviles o tabletas, pero muchos de ellos (salvo que sean temas premium) no incorporan todas las funciones que debieran. Para eso siempre podemos recurrir a hacer el código por nuestra cuenta o por plugins si nos encontramos un poco más vaguetes. Justo un par de plugins de éstos que funcionan y dan buen resultado son los que traigo hoy.

El primero es para una de las cosas que más utilizamos: el vídeo. Se trata de Responsive Video Embeds, que podéis descargar e instalar desde el panel de plugins de WordPress, y que permite incrustar vídeos desde diferentes fuentes (YouTube, Vimeo, DailyMotion, Viddler o Blip.tv entre otras) y que se beneficia de las capacidades de auto-incrustar de WordPress a través de OEmbed (la misma función que hace que si ponemos el enlace a una imagen de Flickr o a un tweet salgan por arte de magia, ahorrándonos mucho tiempo). La configuración para hacerlo funcionar no puede ser más fácil: instalar, activar la función de auto-incrustado de WordPress presente en Ajustes -> Multimedia y lo tendremos funcionando, de tal manera que cuando peguemos la URL del vídeo en cuestión, lo tendremos visible en nuestra web y adaptándose a la pantalla en la que lo estemos viendo. El resultado lo podéis ver en la web de testeo del desarrollador.

Cómo activar la opción de autoincrustar de WordPress
Cómo activar la opción de autoincrustar de WordPress

El otro plugin nos permitirá incrustar mapas utilizando la misma técnica, adaptándolos a la pantalla en la que se muestren. El plugin en cuestión es Theme Blvd Responsive Google Maps. Lleva un poco más de configuración y utiliza un código corto para incrustar los mapas. La instalación se hace también a través del buscador de plugins, y en este caso sólo hay que descargar, instalar y activar. Para incrustar el mapa tenemos que usar el código corto [tbgooglemap] que requiere varios parámetros, por supuesto, todos ellos en inglés:

  1. address(más que obligatorio) La dirección que queremos mostrar en el mapa.
  2. maptype(opcional) La clase mapa a usar – hybrid, satellite, roadmap o terrain.
  3. zoom(opcional) El zoom que usaremos por defecto, que será un número entre 1-19.
  4. html(opcional) Lo que queramos mostrar en el mapa cuando se haga clic en el señalizador; por defecto muestra la dirección.
  5. popup(opcional) Si queremos que muestre la caja de texto al hacer clic en el señalizador del punto del mapa o no, los parámetros son true y false.
  6. width(opcional) La anchura del mapa, que por defecto es del 100% de la anchura disponible, aunque también se pueden poner píxeles. Por ejemplo, 50%, 500px, etc.
  7. height(opcional) La altura del mapa, que por defecto es de 500px, pero como en el caso anterior podremos también poner píxeles o porcentajes

Es decir, si queréis poner un mapa con todos los parámetros posibles (ojo con la anchura y la altura, por supuesto), podéis poner algo como esto:

[tbgooglemap address=”Calle Mendez Alvaro 30, Madrid, Spain” popup=”true” height=”350px” html=”Wholesale World Congress 2012 Madrid” zoom=”15″ maptype=”roadmap”]

Si queréis ver el resultado de ambos plugins funcionando a la vez, simplemente echad un vistazo a la web que ha preparado Netinnova, una empresa del sector de telecomunicaciones, para la presentación de la nueva versión de uno de sus productos en un congreso que tendrá lugar en Madrid en breve: http://www.optimzr-wwc.com.

Dos plugins más que recomendables de todas maneras para que nuestra web se pueda ver en cualquier pantalla.

Sé el primero en comentar

Deja un comentario