Automágica: durante 2017 estoy trabajando bastante en Automágica, mi software para editar libros: Más información - Posts relacionados

Limpiar Wordpress infectado

Si tenés un blog con Wordpress y te atrasás con las actualizaciones (o no) tarde o temprano te embocan (no es la primera vez que me pasa). Alguna herramienta automática detecta que estás corriendo una versión vulnerable a cierto fallo de seguridad reciente y otra inserta código malicioso en todos los archivos de tu sistema de blogging en los que pueda escribir.

Las consecuencias son que cuando tus visitantes intenta entrar al blog son redirigidos a un sitio porno o de venta de Viagra. Si se accede con Chrome a uno de estos sitios infectados, un enorme cartel rojo de avisa que el sitio incluye contenido de una web rumana reportada como distribuidora de malware.

Tu hosting te manda un mail diciéndote que no te sientas solo por que no lo estás, pero en realidad si lo estás. Te recomiendan cosas poco prácticas como actualizar, cambiar claves o restaurar un back-up previo a la infección. Tengo casi 1000 archivos .php llenos de código malicioso y me decís que cambié mis claves (?). Necesito una forma de arreglar esto.

Dejo aquí unos tips en base a mi experiencia personal, con la certeza de que en cualquier momento voy a volver a buscarlos por necesidad.

Muchas de las herramientas que agregan código malicioso (las más simples) agregan una línea al principio de todos los .php en los que pueden escribir. En mi caso esta línea tenía esta forma:

 <?php /**/ eval(base64_decode("aWYoZnVuY3...oZnVu"));?><?php

(código codificado que es decodificado y evaluado al ejecutar el archivo).

¿Qué archivos están infectados?

grep -l eval\(base64_decode -R *

¿Cuantos archivos hay infectados? (aprox.)

grep -l eval\(base64_decode -R * | wc -l

Limpiar todos los archivos:

for x in `grep -l eval\(base64_decode -R * | grep -v .back`; do sed -i.back '1d' $x ; sed -i '1 i 

El anterior comando busca todos los archivos infectados (excepto los que tienen extensión .back), les borra la primer línea y luego les agrega una primer línea "

Mejoras, sugerencias y correcciones bienvenidas!


Coloreando código fuente en WordPress

Tengo este blog hace unos 5 años y en él tengo muchos posts con código fuente, pero nunca usé un plug-in para hacer syntax highlight o resaltado de sintáxis, es decir que las distintas partes del código fuente se pinten de distintos colores según su significado. Mi idea es solucionarlo.

El escenario es bastante complicado. Hay bloques de código en los que uso la etiqueta HTML <pre> y otros en los que uso la etiqueda <code>. También tengo código in-line (es decir líeas de código que forman parte de una oración) arcadas con la etiqueta <code>.

¿Qué busco?

  • No quiero posts con código coloreado de ahora en adelante y que los anteriores sigan en blanco y negro.
  • No quiero tener que editar cada posts para agregar algún atributo en las etiquetas pre o code. Por ejemplo, muchos plug-ins te piden que marques el código con algo como <pre lang="python"> o similar.
  • Quiero que los bloques de código <pre> y <code> se vean igual.

Luego de buscar un poco, decidí instalar y probar estos plug-ins:

  • WP-SynHighlight (lo descarté enseguida, tiene una GUI pesada con muchas opciones y las marcas que introduce en el post son bastante poco estándar e intrusivas)
  • WP-Syntax (usa GeSHI, por lo que el coloreado se realiza en el lado del servidor)
  • JQuery.Syntax (hecho con la popular librería de JavaScript)
  • Google Code Prettify (está basado en tecnología de Google y posiblemente lo hayan visto en acción en StackOverflow. Su principal ventaja es que no requiere decirle en qué lenguaje está escrita la porción de código, sino que este lo adivina)

Intentar empezar a usar uno de estos plug-ins ahora, me genera un gran problema

de compatibilidad hacia atrás :)

Veamos... WP-SynHighlight no me gustó de arranque. Modifica la GUI del editor WYSIWYG the WordPress, uno selecciona una porción de código, aprieta el botón y te da unas 10 opciones para elegir (desde lenguaje hasta el número de espacios para los tabs). Puede funcionar para algún tipo de usuario, pero no para un programador. Además agrega bastante código sucio al HTML del post. Paso.

El segundo que probé fue WP-Syntax. Me gustó mucho, entre otras cosas:

  • Usa CSS in-line para que el código coloreado se mantenga incluso si el posts no es leído en el blog; por ejemplo en un planeta o por RSS.
  • Si el texto es más ancho que la página, agrega una barra de desplazamiento en la cajita de código.

Luego probé JQuery.Syntax y Google Code Prettify. Estos funcionan de la siguiente forma: luego de que se carga el HTML del sitio, corre código JavaScript que se encarga del coloreado. Esto hace que la carga de la página sea más lenta.

¿Qué hice?

Me decidí a usar WP-Syntax y para no editar todos los bloques de código, creé un pequeño plug-in para WordPress que cambia todos los <pre> por <pre lang="python" escaped="true">, cambié a mano los pocos bloques code que tenía por bloques pre y agregué a mano la especificación para los bloques de código que no son Python (no eran muchos).

Tampoco tengo coloreado del código in-line. De las opciones que probé solo el plug-in que usa tecnología de Google, tenía esta característica.

Si ven algún post en el que algo no quedó del todo bien, avisen!


Cómo agregar Menéame a Bookmarkify

Bookmarkify es un popular plugin para Wordpress y script PHP que permite agregar a un sitio web una botonera que posibilite a un visitánte rápidamente compartir el contenido que está leyendo mediante las redes sociales más pupulares (Twitter, Facebook, Digg, Reddit, ...).

Lamentablemente no posee la posibilidad de incluir a Menéame, el sitio web para compartir contenidos más popular en español.

Para añadirlo, se debe editar la función get getBookmarkifyLinks en el archivo bookmarkify.php de la distribución del plugin para añadir, en algún lugar entre $i=0; y return $links; la siguiente línea:

$links[$i++] = array("Meneame!", "Publicar en Meneame!", "http://meneame.net/submit.php?url=$u&title=$t", "meneame.ico", 0, 0);

y guardar el archivo http://meneame.net/favicon.ico como meneame.ico en la carpeta del plugin.


Una clase para usuarios no informáticos de WordPress

El siguiente artículo no está pensado para ser leído por informáticos sino por no-informáticos. De todas formas, se agradece la lectura por parte de informáticos y sus comentarios para mejorarlo. El texto es una adaptación de un correo electrónico que le envié a un amigo luego de solucionar un problema que tenía con su blog alojado en wordpress.com.

Suele pasar, y esto lo se de leer tantas veces consultas en foros especializados, que sin aparente causa algunos blogs hechos con WordPress de repente se ven mal: la disposición (layout) de los elementos se rompe, cambia el color de fondo, la barra lateral aparece abajo de todo. ¿Cuál es la razón? Este "efecto indeseable" puede ser provocado de distintas maneras, pero una suele ser la causa en la mayoría de los casos: un error al crear entradas (o posts) para el sitio. Otro dato a tener en cuenta es que el error se suele manifestar cuando se utiliza la etiqueta especial 'more' (seguir leyendo).

En forma particular el problema se suele dar cuando el código HTML que conforma una entrada no es correcto; hay etiquetas (o 'tags') que abren pero no cierra o que están mal anidados. Se dice que un tag "abre" cuando es de la forma <NOMBRE> y "cierra" cuando es de la forma </NOMBRE>. Lo que está en el medio de esas marcas es su contenido.

<NOMBRE>Contenido</NOMBRE>

Estas etiquetas se utilizan para definir todo lo que se ve (y no se ve) en una página web. Un ejemplo sencillo: la etiqueta 'b' sirve para mostrar un texto (el contenido) en negrita (o bold). <b>esto aparece en negrita</b> es mostrado por un navegador así: esto aparece en negrita. De la misma forma existen etiquetas para mostrar texto en itálica, poner colores, insertar imágenes y muchísimas cosas más.

Si te interesa aprender HTML podés leer este tutorial. Seguimos.

El siguiente es un ejemplo de tags mal anidados:

<div>

texto

<p>

texto

</div>

texto

</p>

En uno de los posts del sitio que revisé había un párrafo de esta forma:

<div>

palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras

</p>

Se abría un tag 'div' y se cerraba uno 'p'. Este error era el que causaba el problema en este sitio en particular. Fue solucionado cambiando <div> por <p>. Puede ocurrir que el error no sea tan trivial, pero en la mayoría de los casos será de la misma familia, aunque esté más oculto.

La siguiente lista enumera 3 reglas para tener en cuenta como forma de prevensión de estos errores.

Reglas prácticas para no tener problemas al publicar en WordPress:

1) Antes de publicar, pasar de la vista Visual a la vista HTML y ver que no haya problemas como el que describí arriba con las etiquetas.

2) Insertar la etiqueta 'more' la vista HTML para asegurarse de que no sea insertada dentro de otras etiquetas:

<div>

texto

<!--more-->

</div>

está mal.

<div>

texto

</div>

<!--more-->

está bien.

3) Es una fuente de errores de este estilo copiar y pegar texto desde otras páginas web o documentos de Word (ya que traen atachadas muchas etiquetas de formato). Una práctica para estar seguros de que no traemos de esas marcas es pasar el texto por el bloc de notas antes de pegarlo en el editor de WordPress. Luego en el editor mismo podemos darle formato (negrita, itálica, etc...)


WP en español

New feauture! Después de algunos años de tener un blog a medio inglés.. este es un link que no quiero perder: http://carrero.es/wordpress-en-castellano/

El punto de inicio para la búsqueda fue: http://codex.wordpress.org/WordPress_in_Your_Language#Spanish_-_Espa.C3.B1ol

Oops! Partes del blog siguen en inglés!

Lamentablemente por más que el sistema este funcionando en español hay textos que estan hardcodeados en los temas.. un intento es traducir algunas palabras.. y cansarse (pueden ver en este blog un ejemplo de eso). A mi en particular no me molesta mucho que haya algunas palabras en inglés y creo que tampoco a la mayoría de mis visitantes.

Pero si queremos usar WP para un sitio no-geek-personal nos van a pedir que esté todo en español. La mejor solución es instalar un tema también en español.

Aquí hay muchos listados:

http://www.anieto2k.com/wiki/index.php?title=Themes_castellano#Themes_para_Wordpress_en_Espa.C3.B1ol

Este es un lindo:

http://carrero.es/coolblue-tema-gratis-en-castellano-para-wordpress/ (download)


wp-print en español

Acabo de instalar el plug-in wp-print para wordpress. Permite presentar una versión imprimible (sin colores, sin estrafalarios encabezados, pies o barras) de los artículos que uno tiene en el blog.

Le hice algunos pequeños cambios para que se vea en español. Contra: el plug-in no está preparado para ser traducido, hay que cambiar varias archivos y el texto en inglés aparece de heterogéneas formas :). Pro: yo ya hice algo de esto, así que se los dejo por si les sirve: wp-print-es-2.06.

Para instalarlo, además de descomprimirlo en la carpeta plugins y habilitarlo, hay que llamar a print_link() o print_link_image() o ambas desde el código del template del blog, yo agregué:

<?php if(function_exists('wp_print')) {

echo "<div align='right'>"; print_link_image(); echo " "; print_link(); echo "</div>"; } ?>

en index.php, page.php, single.php y archive.php.


2 nuevos plug-ins en mi WP!

Hoy agregé dos plug-ins en mi instación de WordPress (el sistema que uso como blog).

Estadísticas de visitantes

Hace un tiempo tenía instalado un sistema de estadísticas llamado.. bueno no recuerdo como se llamaba, pero no importa por que era bastante malo. Hoy leyendo en el blog de César M. Sandrigo descubrí otro y tal vez mi búsqueda (casi abandonada) de una buena forma de conocer sobre mis visitantes haya llegado por fin a Ítaca. El plug-in se llama PopStats.

Votar los artículos

Desde hoy, abajo de cada artículo, hay 5 estrellitas con las que los visitantes pueden rankear los posts publicados. La verdad, está muy lindo: Post Star Rating.

Cuando dejé mi primer voto me pareció gracioso leer "1 votos" :) Luego pensé que no debería ser difícil de corregir, acá está la receta:

Hay que hacer un pequeño cambio en dos métodos de la clase PSR (psr.class.php). Tanto en _drawStars($votes, $points) como en _drawVotingStars($votes, $points) cambiar ('votos') por ($votes == 1 ? 'voto' : 'votos').

En la misma clase también se puede cambir el texto que se muestra.

Otro detallecito que encontré fué que el texto que acompaña a las estrellitas, por ejemplo "2 votos" se veía cortado abajo, revisando el código fuente de la clase anterior encontré el método css() que le da el estilo; en una parte decía:

           <code><pre> .PSR_stars {

              height: 15px;

              overflow: hidden;

              padding: 0;

              margin: 0;

            }</pre></code>

PSR_starts es la clase del div que contiene a las estrellitas y el texto. Simplemente comenté el límite impuesto a la altura:

           <code><pre> .PSR_stars {

              /*height: 15px;*/

              overflow: hidden;

              padding: 0;

              margin: 0;

            }</pre></code>

Seguro que a más de uno le sirve!

Saludos!