Mejorando mi blog WordPress, Parte II

Revisando un articulo sobre como mejorar la velocidad de un blog WordPress encontré un enlace donde listaban un conjunto de herramientas online gratuitas que realizan una serie de pruebas (tests) y de acuerdo a los resultados emiten unos informes y dan en algunos casos sugerencias a mejorar. He realizado pruebas con 3 de ellas con el plugin W3 Total Cache inhabilitado y luego de nuevo con el plugin habilitado para poder observar si hay mejoras en cuanto a rendimiento. A continuación los resultados de los tests con el plugin inhabilitado:

Pingdom

pingdom_antes

 

 

 

Google Page Insights

page_movil_antes page_desktop_antes

Gtmetrix

gtmetrix_antes

 

 

 

 

 

Ahora voy con los resultados una vez habilitado el plugin W3 Total Cache

pingdom_despues

 

 

 

page_desktop_despues page_movil_despues

 

gtmetrix_despues

 

Conclusión

Esta verificado que el plugin me proporciona mejoras en cuanto a rendimiento, ya que de hecho en mayor o menos medida las 3 diferentes herramientas así lo han corroborado, lo cual es positivo, aunque hay algo que les confieso me ha dejado aun un poco inconforme y ha sido el resultado arrojado por la aplicación de google, ya que incluso cuando he habilitado la minimización del Javascript, de las CSS y del HTML además de la compresión en los ajustes del plugin de WordPress, el test de velocidad de google me sugiere llevar a cabo lo antes citado (minimización de los js, css y html). Supongo que quizás es alguna afinación en los ajustes que me falta por hacer y de hecho espero que así sea. De todas formas si logro hallar la manera de solventar ese inconveniente lo compartiré con ustedes como una actualización de esta entrada, por otro lado si ustedes conocen la respuesta POR FAVOR HAZMELA LLEGAR!, pero independientemente de eso lo importante es que he podido (y espero que ustedes también) llevar a cabo una mejora en cuanto al rendimiento del blog.

Actualización

He descubierto, que las sugerencias que me planteaba la herramienta Google PageSpeed Insights, que consistían en minimizar el JS (JavaScript), HTML y CSS de la página tanto para la versión de escritorio (que alcanzaba una valoración de 80/100), como para la versión para móviles (con una nota de 74/100), se deben a lo siguiente:

En la versión de escritorio se debe casi en su totalidad a código proveniente de los anuncios de amazon que aparecen en mi página, mientras que en la versión de móviles se debe al JavaScript utilizado para mostrar el mensaje de las cookies al cargar la página y al plugin WPtouch Mobile, el cual es el encargado de mostrar una versión algo minimalista de la página para dispositivos móviles, pero que a su vez me permite conseguir una nota de 99/100 en experiencia de usuario en móviles (razón que me hace compensar el por ahora no tener un mejor rendimiento), lo cual ahora que conozco la razón no me preocupa, ya que no me extrañaría que pronto salga una actualización en alguno de los plugins involucrados (WPtouch Mobile y W3 Total Cache) que permita mejorar la compresión del Javascript y CSS de la página.

Mejorando mi blog WordPress

Hace aproximadamente un mes, inicie esta mejora del blog, motivado en un principio por la ley de cookies española, como les conte en mi última entrada, aunque el paso definitivo que me empujo a llevar a cabo estas mejoras fue el darme cuenta que todas las entradas que incluían segmentos de código se veian mal, sin estilo, en fin,  sencillamente horribles, puedo decirles que me avergüenza ya que ni siquiera tengo una idea de cuanto tiempo llevaban las entradas en dicho estado. Profundizando un poco mas en el asunto creo que tendría alrededor de 2 años o mas sin buscar algún plugin novedoso o revisar algún tema nuevo, pero al menos me contenta decirles que estoy satisfecho con el tiempo dedicado, el resultado obtenido y compartirlo con ustedes.

Antes de empezar y para no alargarme mucho quiero aclarar que no soy un experto ni mucho menos, pero pienso que puede haber personas que al igual que yo no sabrían por donde empezar a la hora de buscar que plugins agregar a su blog WordPress, ni siquiera con que objetivo empezar a buscar e igualmente siempre da un poco de confianza tener una referencia de un plugin antes de descargarlo aunque este tenga 4 estrellas de rating.

Les detallo a continuación que plugins instale:

Plugin para adecuar el blog a la ley de cookies española.

akismetPara evitar el spam en los comentarios, instale Akismet, el cual es un servicio que en el caso de ser utilizado para una web personal es gratis aunque siempre te agradecerán cualquier donación que puedas aportarles, entre otras cosas además de quitarte el dolor de cabeza de los spam te aporta estadísticas al respecto. No dejes de instalarla no te arrepentiras te lo aseguro. Para mejorar aun más la gestión de los comentarios de mis entradas active el plugin SI CAPTCHA Anti-Spam el cual añade un captcha que el usuario ha de ingresar correctamente para poder añadir un comentario.

Con respecto al resaltado de código y su visualización, instale el plugin Crayon Sintax Highlighter, lo cual me sorprendió muy gratamente ya que al activarlo una vez desactivado  el resaltador de sintaxis que tenia previamente, ya se visualizaba el código con un look & feel fantástico, ya que el plugin le aplica un estilo a todo lo contenido dentro de etiquetas <pre></pre>, el único trabajo que tuve que realizar adicionalmente para añadir atributos a la etiqueta como por ejemplo

<pre class=”lang:java”> indicando que el código a mostrar es Java

crayon

Sin lugar ha dudas este plugin ha de estar en este momento en el top 3 de resaltadores de sintaxis, además de la gran cantidad de lenguajes que soporta entre los que puedo nombrarles, C/C++, Java, HTML/XML, CSS …

Para mejorar las funciones de SEO, añadí Google Analytics for WordPress, el cual esta considerado ahora mismo el número 1 en la materia.

yoast seo

Mucho cuidado con tener otro plugin de características similares instalado y activado, ya que puede interferir y dar error al intentar visitar el sitemap.xml de la página.

Para dar características de Social Media, instale Juiz Social Post Sharer, el cual permite compartir en las principales redes sociales y posee un estilo sobrio y sencillo como pueden ver a continuación en la siguiente imagen.

social media

Para aportar esta característica al blog existen muchas otras opciones, yo también estuve probando Social Media Feather, el cual esta muy bien ya que cubre las principales redes sociales y a su vez da la opción de seguir además de la de compartir, aunque yo me decante por la primera por razones de estilo.

Además de las antes mencionadas, añadí el plugin que hasta el momento estaba siendo considerado como el plugin mas popular, el Contact Form 7, este permite de una forma muy sencilla crear formularios de contacto, los cuales recibiríamos por correo electrónico, este es un plugin simple pero que hace muy bien su trabajo.

Era necesario que también llevara a cabo mejoras en cuanto a rendimiento y carga de paginas, sobretodo en estos tiempos donde la navegación a través de dispositivos móviles representa un factor importante y para eso instale W3 Total Cache, el cual además de crear una cache, mejora de forma considerable la velocidad de carga haciendo una compresión de las CSS y el código javascript del blog.

Para finalizar yo siempre me pregunte como hacían los editores de blog related postpara en todos sus entradas hubieran referencias a otras entradas relacionadas entre si (dios que iluso fui), y para ello existen varios plugin aunque yo me decante por Yet Another Related Posts Plugin, que funciona de maravilla, con solo instalarlo ya me doto de esta característica a la mayoría de las entradas de mi blog.

Para aquellos que al igual que yo esten un poco desconectados en las novedades los plugins WordPress espero que esta entrada les haya sido de utilidad y para los que ya estén mas actualizados ¿Han hecho alguna mejora a su blog? ¿Que otro plugin podrían sugerirnos para tener nuestro blog actualizado a las nuevas tendencias?

Plugins WordPress para la ley de cookies española

Transcurría el mes de agosto del año pasado cuando por un tuit me entere de que existía una “ley de cookies”, el tuit hacia referencia a una publicación donde indicaban que ya existía una demanda en contra de una empresa “grande” en España y todo porque alguien (entiendo que un astuto) había introducido la demanda ya que el sitio Web de la empresa no indicaba que introducía cookies en las computadoras de los usuarios que visitaban dicho sitio. Recuerdo también que dicho articulo comentaba que el ente jurídico español no multaría (según sus fuentes) con una cifra escandalosa a la empresa para la compensación del o los usuarios pero si estaban tomando ese caso para elaborar una especie de borrador para que a su vez bloggers y empresas tuviesen una referencia al momento de adaptar sus sitios Web así como también ellos tener una referencia a la cual apegarse a la hora de determinar si un sitio cumplía con la ley o no.

Esta ley de cookies fue aprobada en el año 2012, pero ciertamente creo que éramos pocos los que sabíamos o habíamos empezado a acatar dicha legislación que si no me equivoco es a nivel europeo. Yo particularmente no estoy muy de acuerdo que se diga con dicha ley, de hecho considero que antes de multar empresas y personas e invertir dinero en toda una legislación que vigile su cumplimiento, etc.., preferiría que tales recursos se dedicaran a la educación del internauta para que conozca acerca de las cookies, o sea, me parece bien que se informe al usuario pero no con el hecho de ser tan riguroso hasta llegar al punto de multar (y mas en estos tiempos que corren) a la persona (jurídica y natural) dueña del sitio Web que no informe acerca de las cookies que guarda la página Web en los navegadores de los internautas.

Ha sido hasta este momento que por fin me he dignado a adaptar el sitio y buscar al respecto, y bueno comparto brevemente con ustedes lo que encontré que me ha resuelto el problema. Hay realmente varios pulgins en el sitio Web de WordPress.org pero los dos que les listare a continuación fueron los que mas me gustaron:

  • Ley cookie: Esta muy bien y es sencillo, pero aun esta en etapa de desarrollo, pero lo bueno es la disposición que tiene su creador en mejorarlo con ayuda de la comunidad.
  • Asesor de cookies para normativa española: Muy sencillo y sinceramente (hasta donde llega mi conocimiento en la materia) cumple con lo necesario y realmente hace todo y en menos de 5 min tuve el sitio ya adaptado para el cumplimiento de la ley de cookies. En un principio he dejado todo lo generado por defecto para a su vez hacer algo de justicia a su desarrollador y referencia al plugin entre otras cosas.

Ahora cuéntanos ¿ya tienes tu sitio Web de empresa o blog preparado para el cumplimiento de la ley de cookies?

Algo de información valiosa al respecto

http://www.davidrabaez.com/ley-de-cookies-5-puntos-a-tener-en-cuenta/

Cambiar estilos en tu tema de blog wordpress

Tienes problemas con los estilos de tu blog wordpress y deseas cambiarlos, si es ese el caso, no te preocupes a continuación te mostrare una solución sencilla.

Primero que nada, no cambies directamente los estilos en el tema de tu blog, ya que si posteriormente actualizas la versión del tema, puede que pierdas los cambios realizados. La solución esta en crear un tema hijo (child theme) a partir de un tema de tu preferencia que hayas seleccionado para tu blog.

Para crear un tema hijo, debes seguir los siguientes pasos:
– Dentro de tu carpeta wp-content/themes, crea una carpeta con el nombre que pensaras darle a tu nuevo tema.
– Dentro de la carpeta de tu nuevo tema, crea un fichero style.css. Lo minimo necesario que ha de tener este fichero es lo siguiente

IMPORTANTE: Los campos “Theme Name” y “Template”, no los dejes vacíos. A continuación una breve explicación de los campos

  • Theme Name:  se utiliza para especificar el nombre del nuevo tema (hijo) que estas creando.
  • Theme URI: Sitio web del tema.
  • Description: Descripción del nuevo tema (hijo) a crear.
  • Author: Autor del nuevo tema.
  • Author URI: Sitio web del autor del tema
  • Template: Tema padre desde el cual estamos heredando estilos.
  • Version: Versión del tema a crear.

Por ultimo se puede notar la sentencia “@import url(“../twentyeleven/style.css”);”, aquí lo que se hace es importar el fichero de estilos del tema padre.

Cualquier estilo que deseas modificar o añadir, sencillamente agregalo al fichero style.css del nuevo tema a crear (ver ejemplo mas abajo).

Por ultimo indicarles que el funcionamiento será de la siguiente manera, para todos los estilos encontrados, se seleccionarán los estilos especificados en el nuevo fichero style.css del nuevo tema (hijo) creado, en caso de no encontrarlo, hará uso del estilo presente en el fichero style.css del tema padre. En caso de necesitar una personalización más profunda del nuevo tema, se puede crear el fichero functions.php en el nuevo tema y también se podrán añadir ficheros php y su funcionamiento será semejante al de los estilos, en caso de invocar un fichero .php tendrán prioridad los presentes en el tema hijo, en caso de no existir se utilizará el fichero presente en el tema padre.

Finalmente aquí les dejo el fichero (completo) style.css de mi nuevo tema.