Sesión 8: Personalización avanzada

En esta sesión, veremos como dotar de mayor expresividad a nuestros contenidos para facilitar las cosas a nuestros visitantes utilizando algunos plugins de WordPress.

A continuación veremos como incorporar calendarios de eventos, mapas y encuestas a nuestro blog.

Añadir un mapa

Otra opción muy interesante en cualquier blog es la de añadir mapas. Hoy por hoy, gracias a herramientas como Google Maps, el uso de mapas online para localización de ubicaciones está muy extendida. No hay que hacer pensar a nuestros visitantes, por lo tanto, si les damos la ubicación en un mapa, mejor que si les damos sólo la dirección.

Lo primero que tenemos que hacer es buscar la ubicación deseada en Google Maps (también puede ser una foto de Google Street View). Una vez tengamos el mapa que queremos mostrar, pulsaremos el botón de compartir y obtendremos el código de inserción del mapa.

ew
Podemos seleccionar el tamaño que queramos que tenga el mapa (pequeño, mediano o grande).

Lo que nos proporciona Google es el código HTML que hará que se muestre el mapa. Habrá que pegar ese código en el contenido de nuestra entrada o página, pero directamente en el código HTML. Para ello, iremos a la pestaña «Texto» de la caja de edición, que nos muestra los que hemos escrito, pero en formato HTML.

La visualización en modo texto muestra el contenido de la entrada en HTML, tal y como se guarda en el servidor.
La visualización en modo texto muestra el contenido de la entrada en HTML, tal y como se guarda en el servidor.

Buscaremos la zona del texto donde queremos que aparezca el mapa y lo pegaremos ahí.

[googlemaps https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1539.6487012750372!2d-0.39365671576314454!3d39.485198628994766!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd6045f5783e389f%3A0xf49baca884105343!2sInstituto+de+Educaci%C3%B3n+Secundaria+Ies+Conseller%C3%ADa!5e0!3m2!1ses!2ses!4v1452507036384&w=600&h=300]

Si queremos personalizar el tamaño del mapa, tan sólo tenemos que modificar los siguientes valores que aparecen en el código de inserción para especificar el ancho (width) y el alto (height) en píxels:

 width=»400″ height=»300″ 

Por ejemplo, si queremos que tenga 650×250 píxels, lo sustituiríamos por:

 width=»650″ height=»250″ 

Más información sobre como insertar un mapa en la Ayuda de Google.

En versiones actuales de WordPress, si se pega el código HTML en el editor WYSIWYG, lo reconoce y también muestra el mapa.

Añadir una encuesta

Otro aspecto interesante que puede ser interesante para nuestro blog es la posibilidad de añadir una encuesta. Las encuestas pueden ser de gran utilidad para recopilar información sobre los intereses de los visitantes o, simplemente, para visibilizar la corriente de opinión general sobre algún tema en concreto.

Por ejemplo:

¿Cómo es mi sitio?

Ver resultados

Cargando ... Cargando ...

Para añadir una encuesta es necesaria la incorporación de un plugin. En el ejemplo, vamos a usar el plugin WP-Poll.

Una vez instalado el plugin nos aparece una nueva opción en el panel de administración llamada encuestas desde la cual podemos crear nuestras encuestas.

Creando una encuesta

Una vez indiquemos la pregunta y las respuestas, así como las opciones de configuración para nuestra encuesta, pulsamos en «Guardar encuesta». Verás que el resultado es un  shortcode que pondremos donde queramos que se visualice.

Puedes ver los resultados de la encuesta desde el menú de Encuestas

Si quieres una encuesta que aparezca en una ventana emergente como la que pusimos en la web del IES tienes que probar otros plugins como por ejemplo Mare.io. En ese caso es necesario registrarse en una web externa que es la que almacenará los resultados de la encuesta.

Añadir un calendario de eventos

WordPress nos ofrece la opción de insertar un widget con un calendario en el que aparecen los días en los que se ha publicado una entrada. Si quisiéramos tener un calendario en en el que publicar eventos relacionados con la actividad de nuestro blog tendríamos que recurrir a un plugin.

El plugin events calendar es una opción muy interesante y versátil que nos permite crear un calendario sobre el que publicar una serie de eventos. al instalar el plugin verás cómo se añade un nuevo concepto a nuestro blog: ahora podemos crear entradas, páginas y eventos.

El peculiar logotipo del plugin

 

Personalización del aspecto del blog

Para finalizar la sesión, vamos a integrar encuestas y mapas a la página principal del sitio haciendo uso de los widgets.

Recuerda que hemos presentado los widgets como otra característica que nos permitía personalizar el aspecto del blog añadiendo cajas con contenidos en partes determinadas del blog (dichas partes dependen del tema elegido).

Usar widgets para encuestas es muy interesante, ya que nos permite poner la encuesta en una parte fija del blog y no en el interior de una página o entrada a la que un visitante puede entrar o no. De este modo, hacemos la encuesta más visible para todos los visitantes.

Para agregar un widget con una encuesta, hay que ir a Apariencia > Widgets. Como puede ver, no hay ningún widget para encuestas, por lo que seleccionaremos el widget genérico Texto y lo arrastraremos a la sección en que lo queremos visualizar.

Arrastrar el widget Texto a la barra en la que se quiera visualizar
Arrastrar el widget Texto a la barra en la que se quiera visualizar

Una vez arrastrado, poner un título a la caja (yo he puesto «Encuesta») y pegar el shortcode de la encuesta en la caja de texto. Si no te acuerdas, lo puedes obtener desde la sección Encuestas

Para insertar un widget con un mapa, actuaremos de forma similar, de nuevo con el widget genérico Texto, pero insertando el código de inserción proporcionado por Google.

Tareas

  • Ahora que ya sabes incluir el mapa en WordPress, modifica la sección de contacto de tu blog para poner un mapa a la localización del negocio (puede ser inventada).
  • Crea una encuesta, preferiblemente con algo relacionado con la temática de tu blog, y pide a algún compañero que entre a rellenarla.
Sesión 8: Personalización avanzada

2 comentarios en “Sesión 8: Personalización avanzada

Responder a Carlos M. Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *