En Wordpress, me he encontrado con varias plantillas o themes que no cumplen el requisito de mezclar el texto y la imagen al lado (o viceversa). Normalmente, si alineamos cierta imagen a la izquierda o la derecha, y escribimos en la misma línea texto, este se adaptará en el espacio restante que quede al lado de la imagen. Pero hay plantillas que parecen no cumplir este requisito que muchos usuarios buscan.

Estos serían los ejemplos. El de la izquierda, sería el correcto, y el de la derecha, la situación que se encontrará alguien cuando el texto no se alinee bien con la imagen.

He buscado qué podría arreglarlo, y tan sólo debemos copiar este código en nuestra hoja de estilos, o style.css de nuestra plantilla.

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 0px;
margin: 0px 0px 0px 10px;
display: inline;
}

img.alignleft {
padding: 0px;
margin: 0px 10px 0px 0px;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left;
}

Si os fijáis, en las líneas margin: 0px 10px 0px 0px; ó margin: 0px 0px 0px 10px;, definen el espacio de marco o distancia que queremos entre las imágenes y el texto. Así, si queremos un marco mayor, podemos sustituir ese 10 por un 20 o lo que queramos.

A veces, puede que te roben ancho de banda al incrustar imágenes de tu página en otras páginas que no sean tuyas, tal y como nos habló Polo recientemente en su blog. Este proceso, denominado Hotlinking, Inline linking o putada en el idioma de Cervantes, te hará gastar ancho de banda y transferencia, saturando el servidor donde se aloje la página y gastando la cantidad de transferencia por mes asignada.

Esto último no es un gran problema últimamente, ya que los planes de hosting te dan una gran cantidad de transferencia por mes, pero lo más molesto es que te saturen el servidor con peticiones de imágenes, haciendo que la página se muestre lenta. Para más inri, si se supone que el servidor lo pagas tú, estás haciendo el primo innecesariamente.

Me hace gracia ver que en Taringa.net, hayan publicado un artículo sobre cómo evitar el Hotlinking, cuando todo este portal copia contenidos de otras páginas y deja los enlaces de las imágenes de tal forma. En otras palabras, Taringa.net es una máquina de hacer Hotlinking a todos los sitios de los que encima, copia el contenido.

Una forma de protegerte de este robo de ancho de banda, es añadir un código al fichero .htaccess de tu blog. Yo aquí lo explico para Wordpress, donde mejor que incluirlo en el .htaccess de la raíz del blog, coloco otro fichero .htaccess en la carpeta wp-content/uploads/

Uno de los problemas de parar los pies a todas las peticiones de imágenes del blog, es que Google imágenes y otros servicios que necesiten leer nuestras imágenes, no van a poder pasar, y eso es un contratiempo para la indexación y nuestras posiciones en buscadores. Una manera de frenar a todos menos unos sitios que elijas, es añadir excepciones al código que escribiremos en el fichero .htaccess.

Este es un ejemplo que tengo puesto en mi blog, donde añado excepciones de algunos sitios que sí nos interesa que puedan rastrearnos. Tan sólo debemos cambiar el texto que os he coloreado en verde (blogodisea.com) por el de nuestro dominio para adaptarlo a nuestras necesidades. Este texto lo copiáis en un fichero de texto al que llamaréis .htaccess y lo meteréis en en la carpeta wp-content/uploads/ de vuestra instalación Wordpress.

RewriteEngine  on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http?://(www\.)?blogodisea.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http?://(www\.)?add.my.yahoo.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http?://(www\.)?bloglines.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http?://(www\.)?feedlounge.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http?://(www\.)?feedness.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http?://(www\.)?feeds2.feedburner.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http?://(www\.)?feeds.feedburner.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http?://(www\.)?bing.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http?://(www\.)?google.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http?://(www\.)?google\/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http?://(www\.)?images\google\/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http?://(www\.)?live.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http?://(www\.)?feedburner.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http?://(www\.)?netvibes.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http?://(www\.)?newsalloy.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http?://(www\.)?newsgator.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http?://(www\.)?yahoo.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http?://(www\.)?yahoo.es/.*$ [NC]
RewriteRule \.*$ – [R,F,NC]

Una ves que lo hayáis instalado, podéis comprobar si ha funcionado en Altlab. Al final de la página, podéis introducir la ruta o URL de alguna imagen de vuestro blog, y si aparece ahí, es que no tenéis bien protegidas las imágenes del blog.

Suele ocurrir un error en Wordpress a veces, que a mi me ha pasado sobre todo cuando he hecho cambios de servidor en los blogs. En las mudanzas, algunas cosas se desajustan, y cuando tenemos el blog mudado y todo parece ir bien, nos sale un error inesperado.

Uno de los más significativos, es que al intentar subir imágenes por el gestor de subida de archivos, nos sale un mensaje como este:

No se pudo crear el directorio /homepages/772/htdocs/blogodisea/wp-content/uploads/2009/03. Asegúrate de que el servidor tiene permisos de escritura para el directorio superior.

Seguramente os saldrá un texto parecido, aunque la parte que os he señalado en verde, variará dependiendo de vuestro servidor y blog, ya que es un ejemplo que os he puesto.

De esta manera, no hay forma de subir las imágenes. Intentas hacer caso al error, entras por FTP y te lias a cambiar los permisos de escritura (CHMOD) de todas las carpetas del blog dándole 777 o más, pero nada, el error persiste.

Al final, di con la clave, que seguramente también será la solución para el que tenga el mismo problema. En el panel de control de nuestro Wordpress, acudimos a OPCIONES > MISCELÁNEAS (en el ejemplo de la imagen de abajo, rodeado por círculos rojos). Allí os fijáis en la línea donde pone “Guardar los archivos subidos en esta carpeta” y rectificais lo que haya escrito por esto: wp-content/uploads

Seguramente os habréis encontrado una línea de texto más larga, que es la ruta antigua del blog, por eso en el nuevo servidor, os da error. Con poner sólo wp-content/uploads, os empezarán a funcionar de nuevo las subidas de imágenes o ficheros al blog.

ACTUALIZACIÓN

Hace poco he migrado blogs a algunas empresas de hosting, y me he encontrado con el mismo problema de no poder subir las imágenes, pero este sistema no funcionaba. Al final, lo logré realizando un truquito extraño.

Para poder hacerlo, se sigue el mismo sistema que describo arriba, pero en vez de escribir solamente wp-content/uploads, debemos escribir la ruta completa que tiene esa carpeta en el hosting. Ni siquiera vale escribir la dirección web completa, como el ejemplo sería http://www.blogodisea.com/wp-content/uploads, sino otra más compleja. Suele llevar algo como home, homepages o htdocs y nombres o referencias de las máquinas del servidor donde estamos alojados.

Para averiguar la vuestra, podréis hacerlo fácilmente si consultáis la pantalla de opciones del plugin XML-Sitemap. Dando por supuesto que todo el mundo que tiene un blog de Wordpress, tiene ese esencial plugin, seguro que lo tenéis instalado, y si no, ya tardáis.

En el panel de control, buscamos las opciones de XML Sitemap, y nos fijamos en el campo Localización de su fichero Sitemap (Location of your sitemap file). Ahí podremos ver la ruta absoluta, que nos guiará para adivinar la ruta absoluta de la configuración de subida de archivos (o imágenes).

Así, si en el ejemplo es /home/.audrey/madonnar/blogodisea.com/sitemap.xml, debemos despreciar todo lo que siga al nombre del dominio y quedarnos con el principio.

/home/.audrey/madonnar/blogodisea.com/sitemap.xml
/home/.audrey/madonnar/blogodisea.com/

y le añadimos la coletilla que explicábamos al principio de esta entrada, wp-content/uploads

Finalmente quedaría así el ejemplo:

/home/.audrey/madonnar/blogodisea.com/wp-content/uploads

Esta sería la ruta que debemos escribir en las opciones de subida de archivos (ver el principio de este post). Aunque eso sí, es un ejemplo, la ruta vuestra será diferente en su primera parte, aplicadlo a vuestro caso.

A mi este truco me funcionó después de  estar probando mucho tiempo, no parecía coger bien la ruta, y tras esto, ya todo empezó a funcionar. Lo curioso es que después de escribir yo esa ruta larga, el propio panel de Worpress volvió a reescribir la ruta y dejó el corto y típico wp-content/uploads, pero esta vez ya funcionaba todo bien.

En Wordpress, podemos utilizar el plugin Moremoney para decidir a quién enseñamos la publicidad del blog. Por ejemplo, podemos enseñar la publicidad sólo a los lectores que vienen desde buscadores, y no mostrarla a nuestros lectores habituales. Una de las cosas que más me gustaba de este plugin, era que incluso podía mostrar la cadena literal que la gente había buscado en Google, característica que llamaba la atención del lector.

Pero desde la pasada primavera, Google cambió los engranajes en la URL que generaba en una búsqueda, y el plugin Moremoney dejaba de pillar lo que la gente buscaba en Internet. Parece que los creadores de Moremoney, no realizan actualizaciones del plugin, por eso he estado buscando alternativas.

No he encontrado gran cosa, pero he visto al menos un plugin interesante porque también es compatible con el plugin WP-Cache, y podemos customizar algunas cosillas interesantes: diferenciar a los lectores que comentan de los que no comentan, si están logueados o no, si provienen de cierta URL o la entrada tiene una antigüedad superior a un mes…

No tiene aquella utilidad antigua del Moremoney, que era capaz de mostrar el referer o cadena literal que la gente había escrito en Google para entrar en tu blog, pero veo que puede superar al Moremoney en que esté más optimizado y consuma menos recursos. Según tengo entendido, el plugin Moremoney no estaba muy perfeccionado y saturaba el servidor un poco.

El plugin se llama No adverts for friends en Holy Shmoly!

Para mostrar HTML en webs y blogs, debemos tener cuidado que el propio explorador, no interprete esas líneas como HTML y las muestre procesadas, sino que las muestre como texto plano. Para ello, podemos ir manualmente, reemplazando los símbolos menor y mayor ( < >) por estos códigos:

< por &lt;

> por &gt;

Un ejemplo, lo tendríamos con esta instrucción:

<img src=”" alt=”" />

donde deberíamos escribir esto para que el explorador no lo interprete como HTML.

&lt;img src=”" alt=”" /&gt;

Pero para lo que he hecho esta entrada, es precisamente para mostrar cómo existen ya algunas páginas que te ahorran la engorrosa tarea de reescribir los códigos y lo hacen automáticamente.

En Blogcrowds, tenemos una herramienta que nos servirá para procesar los códigos de Adsense, de tal forma que los podamos insertar en la edición HTML de plantillas de Blogger, pues no sé porqué, pero el código tal y como nos lo da Adsense, no parece funcionar en la edición de plantillas de Blogger. Si lo hacemos con gadgets, la cosa funciona bien, pero si queremos insertar el código de Adsense en algún lugar específico de la plantilla, debemos procesarlo con la herramienta antes mencionada.

Las definiciones de las URL, permalinks o enlaces permanentes de las páginas que creemos en nuestro blog de Wordpress, son vitales para optimizar nuestra presencia en la red.

El permalink o URL de cualquier página de nuestro blog, es la dirección que tiene una página en Internet. Así como nuestro blog tiene muchas páginas, existe un permalink para cada una de ellas. La forma más rápida de ver una URL de una página, es mirar en la barra de navegación de nuestro explorador. En la imagen de ejemplo de abajo, lo he rodeado en un círculo rojo.

Así, hay que tener cuidado de que estos permalinks sean correctos y óptimos para los robots de búsqueda, como los de Google. En caso contrario, podría significar que una página en concreto no pueda ser indexada u olvidada al ostracismo.

DEFINIR LA ESTRUCTURA DE LOS PERMALINKS

Uno de los primeros pasos nada más montar un blog en Wordpress, es definir cómo serán los permalinks. Por defecto, en Wordpress vienen configurados de una forma deficiente, pues añade otros datos como fecha o el número del artículo, datos que no sirven a los buscadores para darles información relevante del contenido que hemos escrito.

Ejemplos:

http://www.blogodisea.com/?p=123

http://www.blogodisea.com/2009/07/03/casa-simpson/

http://www.blogodisea.com/2009/07/casa-simpson/

http://www.blogodisea.com/archives/123

Para optimizarlo, yo opto por mostrar primero la raíz del dominio, luego el nombre de la entrada, y al final, la categoría. De esta forma, cuando el robot de búsqueda venga a indexar la página, obtendrá la información más útil.

http://DOMINIO/ENTRADA/CATEGORÍA

Ejemplo:
http://www.blogodisea.com/casa-simpson/arquitectura-construcciones/

Como véis, este permalink le da información más relevante al rastreador, ya que proporciona palabras clave sobre la temática.

Para configurar correctamente esto, iremos en el panel de control de Wordpress, a la sección ENLACES PERMANENTES que encontraremos bajo el grupo de OPCIONES.

Una vez allí, marcaremos la opción ESTRUCTURA PERSONALIZADA y escribiremos nosotros mismos /%postname%/%category%/

Luego guardamos los cambios realizados con GUARDAR CAMBIOS.

PERMALINKS LARGOS

Ahora voy a comentar otro tema, aunque este se deberá tener en cuenta cada vez que escribamos un artículo o entrada en el blog. Al escribir el nombre de la entrada, el sistema define el permalink de esa entrada según lo que hayamos escrito, pero habrá que revisar si es correcto o lo podemos mejorar.

Primeramente, se desaconsejan las URL excesivamente largas, así que siempre podremos retocar las URL en el campo de ENLACE PERMANENTE que tenemos debajo del título de la entrada. En la imagen de abajo, podéis ver coloreado de amarillo, la URL que definió Wordpress al escribir el título de la entrada. En el ejemplo: la-casa-de-los-simpson

Para rectificarlo, le damos al botón EDITAR.

Y retocamos nosotros mismos la URL, eliminando todo lo que no sirva o no sean palabras clave: Ejemplos: la, el, los, de, un, que, y

En este caso, de la-casa-de-los-simpson, nos quedamos con casa-simpson. Como véis, siempre hay que poner guiones entre las palabras clave. Luego guardamos con el botón GUARDAR.

PERMALINKS CON SIGNOS DE PUNTUACIÓN

También debemos tener mucho cuidado con los signos de exclamación como interrogantes y exclamaciones, nunca deben aparecer en el campo de la URL, pues luego crean permalinks que los buscadores no indexan. Así, una entrada con una URL mal escrita, puede ser un fracaso porque los rastreadores no la siguen.

En el ejemplo de abajo, podéis ver señalado con una flecha, un interrogante ¿

Esto no debe suceder nunca, en el campo de la URL, sólo deben aparecer palabras y guiones. Esto no significa que el título de la entrada, no puedan existir interrogantes, exclamaciones u otros signos de puntuación. De hecho, la entrada se puede titular con interrogantes

¿La casa de los Simpson?

pero la URL deberá ser correcta, como por ejemplo:

http://www.blogodisea.com/casa-simpson/arquitectura-construcciones/

ELIMINAR CATEGORY

Finalmente, otro truco para corregir los permalinks de las categorías de Wordpress. Por defecto, cualquier URL de categoría de Wordpress, viene con un molesto CATEGORY por medio. Ejemplo:

http://www.blogodisea.com/category/arquitectura-construcciones/

Esto se puede corregir, añadiendo este código en el fichero .htaccess de nuestro blog

RewriteRule ^category/(.+)$ http://www.tublog.com/$1 [R=301,L]

He colorerado en verde, lo que deberemos cambiar por nuestro nombre de dominio.

Aun así, hay que tener mucho cuidado con este truco que os he contado, pues no es aconsejable para blogs antiguos que ya tienen una indexación prolongada de las antiguas URL, podría haber un bajón de visitas al perder potencia en la red.

Este sería un código estandar para insertar ficheros flash .SWF en cualquier página web o blog. Tan sólo deberemos cambiar algunos parámetros para adecuarlo a nuestras necesidades. Estos parámetros los he coloreado en verde para resaltarlos.

<object width=”ANCHO” height=”ALTURA” data=”URLDELFICHEROSWF” type=”application/x-shockwave-flash”><param name=”id” value=”FlashGame” /><param name=”quality” value=”high” /><param name=”src” value=”URLDELFICHEROSWF” /></object>

Así, un ejemplo podría ser este.

<object width=”640” height=”480” data=”http://www.blogodisea.com/carretera.swf” type=”application/x-shockwave-flash”><param name=”id” value=”FlashGame” /><param name=”quality” value=”high” /><param name=”src” value=”http://www.blogodisea.com/carretera.swf” /></object>

• Si no utilizamos el fichero xmlrpc.php que tenemos en la raíz del blog, podemos borrarlo tranquilamente, pues sólo podría servir para malas acciones de spammers.

• Revisar que no falten ficheros en la instalación de Wordpress. Si no se hallara por ejemplo el fichero favicon.ico, el blog perdería tiempo en buscarlo y no encontrarlo, lo que representaría un retardo.

• Evitar usar javascript. Si lo hacemos de manera remota, añadirlo justo antes de la etiqueta </body>.

• Para evitar revisiones de posts, las cuales inflan las bases de datos de manera “innecesaria”, podemos añadir este código en el fichero .htaccess.

define(‘WP_POST_REVISIONS’, false);
define(‘AUTOSAVE_INTERVAL’, 3600);

Si ya tenemos revisiones en las bases de datos, podemos borrarlas con esta consulta SQL:

DELETE FROM wp_posts WHERE post_type = “revision”;

• Utilizar algún plugin para cachear el blog y ahorrar esfuerzos a la CPU.

Hyper Cache o WP Super Cache para realizar una buena caché del blog.

DB Cache para realizar la caché de la base de datos.

• Utilizar un plugin antispam como Akismet, que no consume muchos recursos.

• Utilizar sólo los plugins necesarios, evitar en lo posible los menos necesarios, y tenerlos siempre actualizados. Si no utilizas un plugin, bórralo del todo de la carpeta de plugins, no bastará sólo con desactivarlo.

• Crear un fichero de texto que llamaremos .htaccess y que dispondremos en la carpeta wp-content/uploads/ para evitar el hotlinking, o que nos roben ancho de banda al utilizar nuestras imágenes en otros sitios. Abajo he coloreado de color verde el nombre del dominio que cada uno debe cambiar por el suyo. Los demás dominios de la lista, son los permitidos y que no son perniciosos de hacer hotlinking.

RewriteEngine  on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?blogodisea.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?add.my.yahoo.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?alesti.org/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?attensa.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?bitty.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?bloglines.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?feedlounge.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?feedness.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?feeds.feedburner.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?fusion.google.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?google.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?google\/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?images\google\/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?live.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?mix.excite.eu/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?netvibes.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?newsalloy.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?newsgator.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?pageflakes.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?plusmo.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?rojo.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?thefreedictionary.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?yahoo.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?yahoo.es/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?yourminis.com/.*$ [NC]
RewriteRule \.*$ – [F,NC]

Si usas Wordpress, y Firefox se te cuelga últimamente cuando subes algún fichero: imágenes, vídeos, etc., posiblemente tengas que desinstalar el complemento Gears que causa alguna clase de conflicto desde hace unos 2 o 3 días. No sé si será un error que durará mucho tiempo o lo arreglarán pronto, pero aquí muestro lo que hay que hacer para solucionarlo.

En nuestro navegador Firefox, vamos a la pestaña de HERRAMIENTAS y luego al submenú de COMPLEMENTOS.

En la ventana que nos aparezca, localizamos el apartado de GOOGLE GEARS y lo anulamos con el botón de DESACTIVAR. Nos pedirá reiniciar y… solucionado.