Plugins imprescindibles para WordPress(cc) Foto por Steve Maxwell

Casi todos los bloggers que utilizan WordPress como plataforma de publicación tienen su lista de plugins recomendados. Yo no quería ser menos, así que aquí va la mía, con los que, a fecha de hoy, estoy utilizando para este blog, y son mis plugins imprescindibles para WordPress. De paso, contesto a la pregunta que lanzaba en el anterior post “Plugins de WordPress. ¿Cuántos son demasiados?“. En mi caso, son 11 12, de momento.

Esenciales

Listado de plugins que hay que instalar por defecto.

1. Jetpack por WordPress.com

Este plugin, desarrollado por los propios autores de WordPress, nos proporciona funcionalidades que sólo están disponibles para blogs alojados en wordpress.com. El listado es amplio, algunas incluidas directamente, y otras se pueden activar o desactivar, según nos interese, por lo que destacaré las que estoy utilizando actualmente. Para utilizarlo, es necesario tener una cuenta de usuario en WordPress.com, que es gratuita.

Estadísticas de WordPress.com

Incluidas por defecto, no se pueden deshabilitar. Aunque estoy utilizando Google Analytics para medir el acceso global a toda la página, no está de más disponer de otra visión de las estadísticas de acceso específico al Blog.

Estadísticas

Publicación en Redes Sociales

Posiblemente la funcionalidad más interesante que nos brinda JetPack es la automatización de la publicación del post en nuestras redes sociales, como Twitter, Facebook, LinkedIn, Google+, Tumblr o Path. De esta manera, integramos en un mismo sitio la publicación del post y su divulgación en redes sociales. Una vez vinculadas las cuentas que queremos utilizar, el plugin añade una sección más en la edición del post que nos permite editar el contenido del mensaje a enviar, genera la URL corta correspondiente e incluso podemos decidir si publicamos o no en todas las redes.

Publicación en redes sociales

También incluye en cada post los enlaces para que los visitante compartan la página con sus redes sociales, de manera que nos ahorramos un plugin adicional de iconos sociales. Los iconos que aparecen son configurables, pudiendo elegir entre varios redes y formatos. Yo he elegido los iconos oficiales:

Iconos sociales

Enlaces cortos WP.me

Permite utilizar el acortador de URLs propio de WordPress, para facilitar compartirlas. Se utiliza también para generar las URLs que se comparten en las redes sociales con la función anterior de divulgación.

Photon

Esta funcionalidad, incluida por defecto y que no se puede desactivar, se encarga de subir todas nuestras imágenes al CDN (Content Delivery Network) propio de WordPress, de forma transparente y gratuita. De esta manera, se reducen las peticiones a nuestro servidor y aprovechamos la distribución geográfica del CDN de WordPress para servir el contenido más cercano al usuario.

El código HTML de una imagen tendrá el siguiente aspecto:

Como se puede observar en la url de la imagen, el servidor que la sirve es i1.wp.com.

Monitor

También incluida directamente, Monitor se encarga de monitorizar la disponibilidad del blog, y nos enviará un correo cuando esté caído. Muy útil para corregir periodos de inactividad.

2. UK Cookie Consent

Para cumplir con la normativa europea sobre el uso de cookies en las páginas web, este plugin muestra un pequeño popup a nuestros visitantes para informales de su uso en el blog. A pesar de ser la versión inglesa, es totalmente configurable, tanto los textos, colores como los contenidos de la página de información, que se crea automáticamente. También podemos decidir si se muestra en la parte superior o inferior de nuestra página. Podéis ver la mía en Cookie Policy.

Cookies

SEO. Optimización para buscadores

Como todos sabemos, es importante cuidar el apartado de optimización en buscadores de nuestra página si queremos aparecer en los resultados de búsqueda de nuestros potenciales visitantes. Para ello utilizo los siguientes plugins:

3. WordPress SEO

Probablemente el plugin de SEO por excelencia. Las funcionalidades que ofrece son diversas y merecen un post completo, pero por destacar algunas:

  • Generación automática de meta-tags en el código
  • Generación automática de los sitemaps para los buscadores
  • Añade los meta-tags propios de Facebook, Twitter y Google+
  • Análisis del SEO de cada POST antes de su publicación, con recomendaciones sobre contenido, palabras clave, etc.

4. Simple 301 Redirects

En mi caso, ya tenía otro blog hace tiempo (al que tampoco le dedicaba demasiado tiempo), pero que recibía algunas visitas. Para no perderlas y seguir recibiendo el tráfico que aquel blog recibía a través de buscadores, con este plugin podemos definir las redirecciones que necesitemos, indicando la nueva página que deberá servir la página.

En mi caso, tenía pocas URLs que migrar, así que lo hice a mano. Existen otros plugins que realizan la importación de los posts desde otros gestores de Blogs (Blogger en mi caso) y automatizan las redirecciones, pero tuve algunos problemas con ellos, así que finalmente este plugin me resultó el más sencillo y funciona correctamente.

Simplemente hay que indicar los pares “URL anterior” – “URL nueva” y él se encarga de enrutar la peticiones:

301 redirects

Sólo queda un problema de infraestructura que resolver, consistente en redirigir el tráfico desde el dominio anterior, http://blog.interbuilders.es, al nuevo http://www.sergigisbert.com/blog, y que además envíe la URL completa para que el plugin sepa a qué página concreta debe dirigirse. Existen varias maneras de hacerlo: algunos plugins te proporcionan un código HTML a colocar en tu sitio anterior, que realiza la redirección. En mi caso, y con el fin de no depender de que Blogger siga existiendo, utilizo una funcionalidad de CloudFlare, que me permite realizar la redirección a nivel de DNS y transmitir además la URL completa al nuevo host.

Como ejemplo, el siguiente enlace http://blog.interbuilders.es/2011/04/nuget-o-como-simplificar-la-gestion-de.html nos llevará al mismo artículo, pero alojado en sergigisbert.com.

[Actualización: Plugin de Backup, aportación de Gonzalo Cao]

5. BackWPup

Para realizar las copias de seguridad de nuestro Blog, imprescindible un plugin como BackWPup, que nos permite hacer copias de seguridad programadas de la BD y el contenido, y almacenarlas tanto en el propio servidor, como en la nube, en una cuenta de Dropbox, por ejemplo.

Optimización y rendimiento

En este apartado aparecen aquellos plugins que nos ayudan a mejorar el rendimiento global de WordPress. Como ya comenté en en el post “Detalles técnicos de implantación de la web“, para este blog utilizo CloudFlare y Varnish para acelerar el contenido y, entre ambos, reciben y gestionan la mayor parte del tráfico y las peticiones que llegan a la web. Aún así, es necesario optimizar la página para que la carga en el cliente sea lo más rápida posible.

6. W3 Total Caché

Un plugin básico para aumentar el rendimiento del blog, igualmente requiere un post dedicada por su vasta extensión de funcionalidades. Como ejemplo, nombraremos algunas de las funcionalidades que utilizo para este blog.

  • Caché de páginas, objetos y Base de datos.
  • Combinación y minimización de archivos y código inline (HTML, JS y CSS).
  • Gestión adecuada de las cabeceras de caché de los recursos estáticos.

En el caso concreto de este blog, probablemente por su alojamiento en un WebSite de Azure, tiene problemas para la creación de los archivos JS y CSS que combinan los diferentes archivos que se utilizan en el blog, por lo que la solución adoptada ha sido la siguiente:

  • Archivo JS: Utilizo una funcionalidad de CloudFlare para cargar los archivos JS juntos al finalizar la carga de la página principal.
  • Archivo CSS: El plugin de CleanerPress descrito a continuación.

7. CleanerPress Professional

Este plugin ofrece diversas funcionalidades, pero la que nos interesa especialmente es la posibilidad que ofrece de combinar todos los archivos CSS que use utilizan en el tema de WordPress en uno sólo, de manera que se reducen las peticiones del navegador al servidor.

8. WP Smush.it

Este plugin hace uso del servicio gratuito de Yahoo Smush It, para optimizar las imágenes de nuestro blog y reducir su tamaño. Cada vez que subimos una nueva imagen a la librería multimedia, este plugin optimizará las diferentes versiones de la imagen y almacenará la versión optimizada de las mismas. Es especialmente eficaz con los archivos PNG.

Smush.It

Si ya teníamos imágenes subidas a la web con anterioridad a la instalación del plugin, también nos permite realizar una optimización general de todas las imágenes de la librería.

9. WordPress Varnish

Cuando trabajas con Varnish, es muy importante disponer de la funcionalidad de invalidar su caché cada vez que publiquemos, actualicemos o eliminemos contenido del blog, porque si no, Varnish devolverá la página antigua que tiene en caché y el usuario no vería el contenido actualizado.

Después de probar varios plugins, y de modificar y optimizar el archivo VCL de configuración de Varnish, este ha sido el único que me ha funcionado de todos. Se encarga él solo de invalidar la caché de Varnish con cada nuevo post o actualización, y además permite invalidarla por completo o una URL en concreto

Miscelánea

Los cuatro plugins que faltan aportan funcionalidades interesantes que WordPress por sí mismo no dispone.

10. Crayon Syntax Highlighter

Por la orientación tecnológica de este blog, de vez en cuando incluyo código fuente en el contenido de los posts. Este plugin es un increíble formateador de código, con innumerables opciones, lenguajes soportados y funcionalidades, que lo haen adaptable a cualquier estilo visual.

11. Disqus Comment System

Este plugin permite sustituir el sistema de comentarios nativo de WordPress por el servicio de comentarios de Disqus, cuya principal ventaja reside en que ya incorpora Akismet y otros sistemas anti-spam, por lo que no necesitamos instalarlo en nuestro blog ni disponer de una licencia propia.

Otra ventaja es que los usuarios se pueden autenticar con sus cuentas de Twitter, Facebook o Google y una vez han accedido, pueden comentar con su mismo usuario en todas las webs que utilicen Disqus como sistema de comentarios.

12. Ultimate TinyMCE

El editor que incorpora WordPress para el contenido de los posts y página es algo limitado en cuanto a funcionalidades. Para solucionarlo, existen varios plugins que añaden nuevos botones y funciones al editor por defecto, permitiendo una experiencia de edición más útil. En mi caso, utilizo este.

Resumen

De momento son 11 12 los plugins que necesito para hacer funcionar el blog según mis necesidades actuales, aunque no es descartable que en un futuro aumenten. Y tú, ¿cuántos plugins de WordPress necesitas?

¿Demasiados plugins de WordPress?(cc) Foto porGaetan Lee

Esta es la pregunta del millón. Y como ahora veremos, no tiene respuesta sencilla. Depende.

Desde el punto de vista del rendimiento, un WordPress recién instalado no es lo más ágil en cuanto a velocidad, sobretodo porque se basa en un lenguaje interpretado como PHP. Por ello, cuantos más plugins instalemos, más carga de proceso añadimos al sistema, y por tanto, obtenemos una menor velocidad de carga y de rendimiento. Esto es importante tenerlo claro para no ponernos a instalar plugins a diestro y siniestro, sino tener claras las funcionalidades que nos ofrece cada  plugin y si realmente es necesaria su instalación.

Sin embargo, tampoco hay que obsesionarse por cuál es el número máximo de plugins que podemos instalar, sino que depende de la calidad de los que instalemos. Podemos tener 30 plugins que funcionen perfectamente y que sólo uno de ellos tenga problemas de rendimiento o conflictos. Como en todo, hay que tener la justa mesura. Herramientas como Plugin Performance Profiles (P3) nos ayudarán a detectar esa manzana podrida.

WordPress es una muy buena herramienta que nos proporciona un framework ya desarrollado y robusto con el que disponer de un blog básico, pero no es menos cierto que gran parte de su popularidad se la da el gran ecosistema de plugins con el que cuenta, y que le dotan de funcionalidades que el core de WordPress no implementa.

Al final, la decisión para instalar o no un plugin se debe basar en factores como, por ejemplo:

  • La funcionalidad que ofrece es realmente necesaria.
  • Las estadísticas de uso del plugin y su última fecha de actualización.
  • Foros de soporte activos, con resolución reciente de problemas.
  • La documentación y la facilidad de uso de su interfaz

Finalmente, aunque el aumento de uso de plugins de WordPress aumenta las probabilidades de tener una merma en el rendimiento, existen técnicas de optimización web que nos ayudaran posteriormente a aligerar la carga de procesamiento del servidor, pudiendo disfrutar de las funcionalidades de los plugins que realmente necesitemos.

En ManageWP han realizado un artículo muy completo sobre este mismo tema, del que recomiendo su lectura: https://managewp.com/wordpress-plugins-how-many

Próximamente publicaré un post con los plugins que utilizo para este blog y las funcionalidades que me aportan. ¡Estad atentos!

Servidores(cc) Foto por Rob Halsell

Después del post inicial de presentación, ahora viene el rollete con los detalles técnicos de cómo he montado esta web, qué tecnologías y servicios hay detrás y demás tecnicismos frikis. ¡Avisado quedas!

La web se divide en dos aplicaciones: Páginas estáticas y el Blog.

Las páginas estáticas

Tanto la pantalla de Inicio, como la parte de Proyectos y la Biografía las he implementado mediante ASP.NET MVC 5.

Dispone de un pequeño Backend, para almacenar los datos de los Proyectos, Clientes, Imágenes, etc. para el que utilizo sencillos archivos XML que deserializo a objetos DTO (Data Transfer Object) que luego manipulo con Linq. El coste de la deserialización de estos archivos está entre 5 y 10ms, que es despreciable, y que además cacheo en memoria, por lo que no supone una penalización mayor que tenerlos en una BD relacional al uso. De hecho, es apreciablemente más rápido y barato, y el volumen de datos que manejo es relativamente pequeño.

A modo de ejemplo, esta es una muestra del archivo que almacena las categorías de proyectos:

y este, un fragmento resumido de la clase C# que lo deserializa:

Una vez dispongo del modelo de datos modelado y los archivos XML con la información controlados, desarrollo las 4 vistas principales del proyecto, utilizando Razor como View engine y Bootstrap + el template Unify para el diseño y la implementación del frontend.

El blog

Para montar el blog me decidí a utilizar WordPress, porque no tiene sentido reinventar la rueda y ponerme a programar un gestor de blogs desde cero, y porque últimamente he estado trabajando con esta plataforma por motivos profesionales y le estoy cogiendo el tranquillo, además de para seguir aprendiendo y probando cosas nuevas para futuros proyectos.

Como era importante para mi mantener una uniformidad visual, decidí utilizar el mismo tema que para el resto de la web, por lo que me tocó adaptar el tema a WordPress, ya que en origen no viene preparado para ello.

Como curiosidad, comentaré que el blog está incluido dentro de la misma solución de Visual Studio que implementa la web, en una carpeta /blog, ya que me facilita las cosas a la hora de hacer el deploy del site a Azure desde el propio IDE, además de ahorrar costes de hosting porque sólo necesito un site. Pero para que esto funcione y convivan ambas tecnologías (ASP.NET MVC 5 y PHP) hay que hacer un par de retoques, para que cada una enrute sus peticiones y no interfiera en las de la otra.

En mi caso, utilizo como alojamiento Azure Websites, por lo que mi servidor web es un IIS ejecutando PHP 5.5.

Por una parte, en el archivo Web.config común hay que incluir la regla de enrutamiento de WordPress:

Importante comprobar como sólo enrutamos las peticiones a blog/*. De esta manera, el motor de PHP ignora las peticiones que no vayan explícitamente al blog y se las deja a MVC. Igualmente es importante cambiar el nombre de la regla, de “wordpress” (por defecto) a otro (en mi caso, “blog“). Esto es debido a que es muy probable que tengamos otro archivo web.config dentro del directorio del blog que utilice los valores por defecto y esto crea un conflicto en IIS que generará un error y el blog dejará de funcionar.

Por otro lado, es importante decirle a MVC que no enrute las peticiones al blog, para que las maneje PHP. Esto se consigue añadiendo la siguiente línea antes del código de definición de las rutas de nuestra aplicación:

Los servicios

Para el alojamiento utilizo 1 Azure Website, que comparten tanto el site en MVC 5 como el blog en WordPress, así comparto gastos de hosting.

Para mejorar el rendimiento, utilizo CloudFlare como proxy DNS, que me proporciona servicios de seguridad y optimización automáticos de forma transparente, y Varnish como servidor proxy-caché, que tengo instalado en una máquina virtual Extra pequeña con Ubuntu, también sobre Azure. La unión de estos dos servicios reduce enormemente el número de peticiones que recibe el sitio web, por lo que es suficiente con una instancia compartida del Website para mantener el site.

Finalmente, una vez aplicadas las técnicas de optimización WPO al site principal, www.sergigisbert.com, obtenemos la siguiente calificación de GTMetrix:

gtmetrix webVer el informe completo

Siempre penalizada por la inclusión de recursos externos a los que no tenemos acceso.

Dudas, aclaraciones, preguntas, sugerencias, ¡aquí me tenéis!