Planeta WordPress

Habitualmente encontramos sites donde al final del post se muestra una caja con información sobre el autor: su imagen (Gravatar), su nombre, una pequeña reseña biográfica… así como, por ejemplo, la cantidad de artículos que ese autor haya publicado en el site.

Hoy veremos la forma de mostrar todo ello, y proporcionaremos algunos estilos en CSS que nos ayuden a crear los nuestros propios.

Marcelo escribió hace un tiempo sobre el tag fundamental que nos traerá las informaciones de la base de datos, es decir, de la pantalla de información sobre el autor que podemos editar en la Administración de WordPress una vez estamos registrados en el site, y donde podemos rellenar los campos de “Biografía”, “URL”, “Gravatar”, e-mail, etc.

Hoy trataremos pues la parte del CSS para tener el conjunto en una estructura que será fácilmente modificable. Empecemos:

<div id="info-autor">
	<div id="imagen-autor">
		<a href="**Web del Autor**">**Gravatar del Autor**</a>
	</div>
	<div id="bio-del-autor">
		<h4>Escrito por <a href="**Web del Autor**">**Nombre del Autor**</a></h4>
		<p>**Descripción del Autor**</p>
	</div>
</div><!--Infos Autor-->

En el código vemos los distintos elementos que deberemos transformar en PHP para que sean efectivos.

Añadamos pues el PHP necesario:

<div id="info-autor">
	<div id="imagen-autor">
		<a href="<?php the_author_meta('user_url'); ?>"><?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?></a>
	</div>
	<div id="bio-autor">
		<h4>Escrito por <?php the_author_link(); ?></h4>
		<p><?php the_author_meta('description'); ?></p>
	</div>
</div><!--Info Autor-->

Y preparemos ahora el CSS que dará formato al resultado final :

div#author-info {
	background: #eaeaec; padding: 10px; margin: 0 0 15px 0;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	overflow: auto;
}
div#author-info div#author-image {
	float: left; margin: 0 10px 5px 0; border: 5px solid #DCDCE1;
}

Tan sencillo como esto.

Repasemos todos los tags de PHP que hemos utilizado:

<?php the_author_meta('user_url'); ?>

Sirve para extraer varias porciones de información acerca del usuario (autor).

<?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?>

Sirve para extraer la imagen del autor, en función del Gravatar asociado a su cuenta de correo electrónico (que debe coincidir con la registrada en WordPress).

<?php the_author_link(); ?>

Imprime el nombre del autor, automáticamente enlazado a su web (la que haya indicado en su perfil).

<?php the_author_meta('description'); ?>

Muestra la principal información biográfica.

Esperemos que uséis todos estos trucos y creéis unos estupendos sites multi-autor con WordPress.

Hemos visto ya varios modos de combatir el spam de comentarios y hoy vamos a ampliar nuestro arsenal con un truco que activaremos en el fichero functions.php de nuestro tema activo, con lo que es totalmente exportable a otros sitios sin modificar configuración alguna.

Lo único que tienes que hacer es añadir este código:

Puedes, por supuesto, añadir o quitar palabras y/o expresiones tras el array llamado $bad_comment_content para personalizarlo según tu necesidad.

¿Te gustó este post? ¡Compártelo!

Hace dos años ya les hablé de los “custom fields”, o “campos personalizados” de WordPress, como una forma de añadir información extra a los posts.

En Tinta Digital lo utilizamos para asignar a cada post las imágenes que luego verá el usuario. Concretamente, cada post lleva consigo dos imágenes: una para la sección de portada o destacados (post de la categoría “feature”) y otra para la pestañera (imagen en miniatura o “thumbnail”). Y estamos desarrollando una modificación (a implementar en los próximos días) para incluir otro tipo de imagen (más grande que las miniaturas) para las secciones de “Humor” y “Fotografía”.

El código para extraer los valores de los campos personalizados es muy sencillo. Se utilza la función get_post_meta y como parámetros de entrada admite el número identificativo del post ($post->ID), el nombre del campo personalizado (por ejemplo, “post_thumbnail”) y “true” para indicar que se devuelva el resultado como una tira de caracteres.

De esa forma, dentro del loop de Wordpress, podemos mostrar una imagen así:

<img src=”<?php echo get_post_meta($post->ID, post_thumbnail, true); ?>” alt=”imagen” />

Para asignar metadatos a los posts, utilizando los campos personalizados, solamente hay que escribir el nombre del campo (si es la primera vez que lo asignamos) o elegirlo en el desplegable (si ya lo asignamos a otro post antes), rellenar el valor (si es una imagen de Flickr, por ej., escribiremos una de sus urls) y pinchar en “Add custom field” (añadir campo personalizado). Todo ello en el editor de posts y antes de pulsar “Publish”.

Para los twitteradictos que a la vez tengan un blog, John Resig (creador de jQuery) ha escrito un magnífico script que nos permitirá añadir un botón de Re-twittea este artículo que incorporará a su vez un contador de clicks.

Demo

Para conseguirlo, tendremos que abrir el single.php o el index.php de nuestro tema y, dentro del loop, añadir lo siguiente:

<a class="retweet" href="<?php the_permalink(); ?>">
     <?php the_title(); ?>
</a>

Es decir, un segundo the_title (debajo del primero por ejemplo, o al final del todo del artículo, tras the_content) que esté dentro de un link con class=”retweet”.

Salvaremos y cerraremos, y nos dirigiremos a header.php.

Allí tendremos que insertar el script en cuestión, que buscará cada link con clase “retweet” y le asignará el botón de retweet, el contador y la función de conexión a Twitter.

Para incluir un script en header.php (dentro de los tags “head”) haremos lo siguiente :

<script src="<?php bloginfo('template_directory'); ?>/js/retweet/retweet.js" type="text/javascript"></script>

Suponiendo que dentro de nuestro tema tengamos un directorio llamado js y, dentro de él, el script de John Resig, al que nombraremos igualmente retweet.js.

Bajar el script (copiar/pegar, salvar y alojar en un directorio especial de nuestro tema).

Esperamos que os sea de utilidad, y aprovechamos desde aquí para saludar a John por jQuery y este magnífico script.

CDN es el acrónimo de Content Delivery Network. Dicho así tampoco aclara mucho, ¿no? Una CDN es una red de servidores que replican el contenido de una web entre varias máquinas, para hacer que esté siempre disponible y que además sea accesible de una forma más rápida.

Pongamos un ejemplo. Si tienes un blog alojado en un hosting, todo el contenido del mismo lo servirá ese hosting, usando su propio ancho de banda. Si aún no tienes muchas visitas, puede que no tengas mayor problema, pero si tu blog empieza a crecer, el ancho de banda se puede ir colapsando. Aún peor, imagina que un día das con tu súper-post, que atrae a miles de visitas y se te cae el hosting, o tardan tanto tiempo en acceder a tu página que acaban no leyendo el artículo. Un CDN, entre otras cosas, evita esto.

Al estar tu contenido repartido entre varios servidores la carga y el ancho de banda se reparten, por lo que es mucho menos probable que tu hosting se sature. De esta forma podrás asegurar que no se te caiga el servidor o que responda más rápido.

En general, las CDNs son de pago (la más famosas son Akamai y Amazon Cloud Front), sin embargo puedes usar ya mismo en tu blog una CDN gratuita, CoralCDN. Es una red P2P destinada a alojar el contenido de los usuarios en varios servidores. De forma muy simple, para usar CoralCDN basta con añadir .nyud.net a la URL que queramos que use CoralCDN.

Por ejemplo, podéis probar a poner esta URL en vuestro navegador: http://www.todowp.org.nyud.net. Lo que ocurrirá en ese momento es que la página web se cargará normalmente, pero tratará de usar y descargar el contenido de los servidores de CoralCDN, y no sólo de nuestro hosting.

¿Cómo puedes usar esta red desde Wordpress? Muy sencillo, mediante el plugin FreeCDN (website de FreeCDN). Una vez instalado, en el panel de administración del plugin solo tenéis que activar aquellos elementos que os gustaría que pasaran por CoralCDN:

JavaScripts, imágenes, CSS, HTMLs… El plugin insertará automáticamente .nyud.net y hará que estos contenidos se alojen en CoralCDN y que se descarguen de ahí. Si no queréis que ciertos contenidos se carguen, también se puede configurar para añadirlos o quitarlos específicamente. Podéis ver el efecto de su uso en la siguiente captura de Firebug:

Se puede ver como varios archivos JavaScript y CSS han sido servidos por CoralCDN. Puede ocurrir que al activar el plugin algunos de vuestros elementos no se vean bien por problemas con los estilos. Si os ocurre esto, podéis utilizar los paneles de exclude, para indicar que el contenido de los CSS no lo tenga en cuenta.

En resumen, el uso de CoralCDN y FreeCDN en Wordpress os permitirá, de una forma muy fácil, optimizar vuestro blog haciendo que la carga de ciertos elementos de la página, y parte del ancho de banda de vuestro hosting, usen una CDN gratuita.

En estos dias la empresa de hosting donde tengo mis sitios ha estado sufriendo algunas demoras... Esto me ocasionó grandes inconvenientes al momento de actualizar unos más de 10 sitios que utilizan WordPress...

Es por eso que preparé una lista de consejos y recomendaciones a tener en cuenta al momento de actualizar, ya sea directamente desde el Panel de WordPress o vía FTP.

Quizás, como yo, ya te hayas mal acostumbrado a actualizar con un simple click desde el panel... Es simple, rápido y muy fácil. Pero esto puede dar mas dolores de cabeza que comodidad si algo sale mal en medio del procedimiento. Alguno de los problemas más comunes son:

La pantalla que avisa a tus visitantes que regresen en un minuto mientras se actualiza el sistema, no desaparece...

Esto puede solucionarse fácil! Entras por FTP al sitio y borras el archivo .manteinance que se ha creado. Ten en cuenta que de acuerdo a las configuraciones de hosting puede que aparezca como archivo oculto! Al borrar dicho archivo, accedes nuevamente al panel y le das a actualizar nuevamente. Si se repite el error, recomendaría que actualices vía FTP.

Luego de darle click en actualizar, demora demasiado tiempo...

Recuerda que todos los hosting cuentan con una limitación en el uso de sus recursos, tanto de memoria PHP como de RAM. Esto puede hacer que el proceso sea mas lento o incluso entre en un bucle sin fin y arroje errores 500 (internal server error). La mejor solución a esto, es actualizar tu versión de WordPress con el viejo método por FTP.

Luego de actualizar hay errores, el panel y el blog andan muy lentos, incluso hay algunas incoherencias en los datos...

Personalmente creo que actualizar un WordPress no debe limitarse a un simple click o subir archivos y remplazarlos por FTP. Es todo un procedimiento... Personalmente luego de actualizar, me tomo el trabajo de optimizar las tablas de la base de datos (ver más abajo), borrar la caché del navegador, cerrarlo, volverlo a abrir, etc... Si usas algún plugin de cacheo, también deberás borrar los documentos en caché del hosting.

SIEMPRE, pero SIEMPRE, haz backup semanal... Y antes de actualizar, también...

Me ha tocado con clientes que simplemente le dan al click, no leen, no se preocupan... También amigos que luego te llaman a las 3 de la madrugada por que su blog dejó de funcionar. SIEMPRE debe hacerse backup semanal (o mensual, de acuerdo a la actividad y ritmo de cada sitio) y SIEMPRE un backup antes de actualizar cualquier cosa... Cuando digo "backups" me refiero tanto a la base de datos como también a los archivos. En especial si vas actualizar plugins importantes, a veces no son compatibles con nuevas versiones.

NUNCA esperes a que la empresa de hosting haga backups, nada mejor que TU lo hagas, te tomes un tiempo o uses algún plugin o método que te facilite el trabajo.

No actualizar a la primera:

Muchas veces, a quienes somos seguidores y conocedores de WordPress, nos ha pasado que sale una versión y a los pocos días otra que corrige quizás unos pocos fallos... Es interesante esperar un tiempo prudente (a criterio de cada uno, quizás una semana esté bien) para actualizar... Ojo! Hay que ver de a que esperamos y que actualizamos con urgencia, si la actualización cubre fallos de seguridad o simplemente adiciona funciones.

Recuerda que SIEMPRE existen ALTERNATIVAS:

Por más que avance muchisimo el desarrollo de WordPress, NUNCA debes olvidar que tienes la alternativa de actualizar a mano, subiendo los archivos por FTP, remplazando, etc...

Para leer:

Como hacer backup de WordPress

Como instalar WordPress con un click! (actualizaciones automáticas)

Como actualizar WordPress "a la antigua" por FTP

Como optimizar las bases de datos y aquí otra forma de hacerlo

Como instalar un WordPress desde cero

Y SIEMPRE tienes una comunidad de millones de buenas personas que te ayudarán ante cualquier problema... Pero recuerda: siempre mejor prevenir que luego curar! Se felíz!

Contenido exclusivo para suscriptores al Feed

¡Gracias por seguirnos a diario!. Premiamos tu fidelidad ofreciéndote habitualmente contenidos exclusivos. Hoy puedes descargar:

Guía Windows Live Writer

¿Te gustó este post? ¡Compártelo!

Hoy os voy a hablar de un plugin que hace que nuestro escritorio de Wordpress sea mucho más atractivo. Gran parte del tiempo que pasamos en nuestro blog lo hacemos en el escritorio, y tener un escritorio atractivo y productivo nos puede facilitar la vida.

Algunas de sus características principales son los siguientes:

1. Menú flotante: hace que al pasar por encima de cada menú del escritorio se desplieguen todas sus opciones.
2. Teclas de acceso rápido a los menús: cada menú lleva asociado una tecla de acceso directo lo que hace más fácil su activación sin tener que dejar el teclado.
3. Ventana del login personalizada: permite cambiar la ventana de login de forma que también se ajuste al estilo de Fluency Admin. Además, incluye la posibilidad de mostrar un icono personalizado en la entrada del administrador, opción que puede ser interesante para aquellos blogs corporativos o en los que participan varios redactores.

El plug-in se puede descargar de la página de WordPress o bien directamente de la web del autor y es totalmente compatible con la última versión de WP. Es un plugin bastante utilizado con unas 20.000 descargas y una puntuación media de cinco sobre cinco de un total de diecinueve votos. La última versión es de diciembre de 2009. Yo lo vengo usando desde hace tiempo tanto en Firefox como en Chrome aunque he decir que el comportamiento de los menús parece que funcionar algo mejor en este último.

Web de Fluency Admin: http://deanjrobinson.com/projects/fluency-admin/

Web oficial de descarga de Wordpress.org: http://wordpress.org/extend/plugins/fluency-admin/

Si quieres insertar un vídeo del popular servicio de Vimeo en tu blog de WordPress.com el proceso es sencillo. Solo tienes que tomar la URL del vídeo e insertar en el editor (visual si quieres) de tu sitio de este modo … 

o también así … 

El tamaño por defecto a que lo incrustará será de 400x300, si quieres personalizarlo deberías modificar el código de este modo:

o también … 

Al final tienes un bonito vídeo como este …

Hay un vídeo en este post, me temo que tendrás que hacer clic aquí para verlo

Fuente: Soporte WordPress.com

¿Te gustó este post? ¡Compártelo!

Si queremos crear un índice o unos archivos donde se haga un uso extensivo de imágenes (al lado de los extractos, por ejemplo), siempre puede ser interesante hacerlo sin depender de plugins.

Hoy vamos a proponeros un código que lo hará posible, y que deberemos pegar en functions.php.

Se nos permitirá entonces disponer de un nuevo ‘template tag’, que podremos usar dentro de nuestros Loops, con el que imprimir la imagen en cuestión.

El código es el siguiente :

function catch_that_image() {
	global $post, $posts;
	$first_img = '';
	ob_start();
	ob_end_clean();
	$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
	$first_img = $matches [1] [0];

	if(empty($first_img)){
	$first_img = "/images/default.jpg"; // default image
	}
return $first_img;
}

Recordemos que este código debe ir dentro de las declaraciones de apertura y cierre de php, que ya encontraremos en nuestro functions.php, o que habrá que añadir.

Nos dirigiremos ahora a nuestros archivos o índice, y usaremos el siguiente template tag, que equivaldrá a la primera imagen del post:

<?php echo catch_that_image(); ?>

Si lo quisiéramos linkando a la página final:

<a href="<?php the_permalink(); ?>"><?php echo catch_that_image(); ?></a>

Si usas habitualmente el shortcode "more" para cortar tus entradas más largas puedes personalizarlo de manera que ofrezcas algo más que lo que por defecto traiga incluido el código de tu tema activo.

Ya vimos como personalizarlo manualmente desde el mismo editor de entradas pero una personalización permanente, bastante práctica, es añadir el título de la misma entrada.

Hacerlo es bien sencillo, solo tienes que localizar en el fichero (normalmente) index.php de tu tema la "llamada" al "more", algo así … 

Y sustituirla por este otro código que, además, añadirá el título de la entrada:

Lo que te ofrece es un enlace del tipo … 'Sigue leyendo la entrada ... Agregar el título del post al "more"'. Mucho mejor ¿no?

¿Te gustó este post? ¡Compártelo!