Comprueba tu web con varios navegadores


browserlab Comprueba tu web con varios navegadores

Entre tanto navegador y estándares web muchos diseñadores y programadores nos volvemos locos a la hora de hacer que una página web funcione bien en cualquier sistema operativo y navegador. Y es que quien no sufre cada día que una web se vea igual en Firefox, Internet Explorer, Chrome, Opera, Safari, ….

Para facilitarnos el trabajo hay una serie de herramientas o aplicaciones online que permite realizar pruebas de como se ven nuestras páginas webs en diferentes navegadores y versiones de los mismos.

Aquí os dejo una pequeña lista:

  • BrowserLab de Adobe.
    Actualmente es mi preferido, aunque no los tiene todos, tiene los principales desde Internet Explorer 6, 7, 8 y 9 beta, firefox 2, 3 y 4 beta, Safari 4 y 5, chrome 8 y 9, …. Carga casi en tiempo real. Funciona bien en Windows, Linux y Mac.
  • Browsershots
    Otro servicio con una gran variedad de navegadores disponibles (algunos como Netscape, Flock, SeaMonkey, Konqueror, …), realmente completo. Es gratis pero igual desesperas con lo que tarda en generarse la captura. Siempre puede pagar 29,95 dólares para tener prioridad de carga. Además tienen parte de su código bajo licencia GPL para colaborar con las capturas.
  • Spoon
    Este permite además visitas interactivas con algunos navegadores como Chrome, Firefox y Opera (parece que Explorer por petición de Microsoft no está soportado). Es totalmente gratis. Aunque desde mi Mac se niega funcionar.
  • Browserling
    Ejecuta los navegadores en instancias virtuales para permitir interactividad. Ahora mismo es gratis durante el tiempo que dure su Beta pero necesitas registro para tener sesiones de 5 minutos si no quieres que tu sesión sea de poco más de 90 segundos. Tiene muy buena pinta y soporta Explorer, Firefox, Safari, Opera y Chrome. Y además funciona sin problemas en Mac.
  • Multi-Browser Viewer
    Programa para windows que requiere suscripción y permite probar tu web en más de 20 navegadores. Además tiene soporte para navegadores móviles. Se puede probar gratis, pero después tendrás que pagar. Creo que no merece la pena con las opciones gratis que existen.
  • IETester
    Para probar la compatibilidad de tus páginas webs con las antiguas versiones de Internet Explorer 5.5 hasta las nuevas, las 9.0.
  • BrowserSeal
    Otra opción para instalar en Windows y probar la compatibilidad de tu web con navegadores explorer, firefox, chrome, opera y safari. Es comercial aunque podéis probarlo.

¿Conoces más opciones para probar la compatibilidad de tu web en múltiples navegadores web?

Original Post / Entrada Original: Carrero.es. Si quieres Juegos Gratis disfruta aquí o decora tu casa.

Comprueba tu web con varios navegadores

Añadir tablas en WordPress de manera sencilla

Ya hemos visto varios modos de crear tablas en WordPress, a saber:

Pero, fíjate por donde, nunca hemos visto como hacerlo de la manera más fácil, con plugins. Vamos a ver los más sencillos de usar:

  • WP Table – Sencillo editor de tablas para WordPress. Olvídate de cuando el editor visual truncaba tus tablas creadas en HTML.
  • WP Table reloaded – Una versión del anterior que añade una página de creación de tablas de modo visual.
  • MCE Table buttons – Un plugin muy liviano que añade la fila de botones de gestión de tablas al editor por defecto de WordPress. Lo instalas, lo activas y lo tienes.
  • Tiny Table – Similar al anterior, devuelve al editor TinyMCE de WordPress la fila de botones de gestión de tablas que, por defecto, no tiene.
  • Easy table creator – Con este plugin se añade un botón que, al pulsarlo, se abre una ventana emergente en la que crear tu tabla. Sencillo y eficaz.
  • TinyMCE advanced – Sustituto del editor TinyMCE por defecto, con página de configuración en la que, por ejemplo, puedes añadir múltiples botones más, incluida una fila entera de creación y modificación de tablas, por supuesto.

Y te preguntarás ¿cual es mejor?, pues tu verás. Yo, ya puestos, usaría el TinyMCE advanced, pues también te ofrece otros interesantes y útiles botones que puedes añadir al editor. Pero vamos, lo mejor es que los pruebes todos y te quedes con el que más te convenza.

Forzar el editor por defecto (visual o HTML)

Si tienes algún sitio y quieres, por algún motivo, forzar a que el editor por defecto sea el HTML o el Visual solo tienes que añadir uno de estos códigos al fichero functions.php del tema activo:

PHP:
  1. # Editor HTML por defecto #
  2. add_filter('wp_default_editor', create_function('', 'return "html";'));

PHP:
  1. # Editor Visual por defecto #
  2. add_filter('wp_default_editor', create_function('', 'return "tinymce";'));

Guardas los cambios y ya lo tienes.

Como crear un agregador de blogs respetuoso con las fuentes

Ya expliqué hace tiempo los sistemas de creación de entradas desde feeds RSS pero se quedó un poco corta la entrada, pues me limité a citar los distintos plugins o scripts que permitían la importación de contenidos, hoy quiero contaros una experiencia concreta de como llevar a cabo un agregador de blogs, un planeta si preferís llamarlo así, que respete las fuentes de los contenidos.

Me estoy refiriendo al agregador de blogs de UPyD que creé hace unos días, que creo es un buen ejemplo de como crear una web de este tipo de manera respetuosa. El paso a paso sería más o menos así …

  1. Elige una temática bien definida para el agregador. Un sitio de este tipo solo tiene sentido si concentra publicaciones de una categoría específica y permite a los visitantes encontrar en un solo lugar la información más relevante acerca de los temas de su interés. De nada vale un agregador "de todo un poco", para eso ya tenemos los portales de información general. ¡Segmenta!.
  2. Elegir un tema estilo revista (o magazine), que entiendo son los más adecuados para este tipo de webs que van a mostrar mucho contenido. En un tema formato blog no se mostraría en todo su esplendor la cantidad de publicaciones que vamos a compartir. Además, este tipo de temas ya vienen preparados para dos cuestiones vitales:
    • Normalmente solo muestran los extractos de las entradas
    • Suelen tener un sistema de publicación automática de una miniatura de la imagen que ilustrará el extracto

    Esto es importante porque lo que vamos a procurar es no robar visitas a los sitios generadores del contenido ofreciendo los textos completos sino solo extractos y una imagen que anime a visitar la web original.

    También, por supuesto, podemos hacerlo con cualquier tema, simplemente editando el fichero 'index.php' y, donde encontremos …

    PHP:
    1. <? php the_content(); ?>

    lo sustituimos por …

    PHP:
    1. <? php the_excerpt(); ?>

    Con esto conseguimos mostrar solo parte de la entrada, requiriendo hacer clic para verla completa.

    En el agregador de la blogosfera de UPyD he elegido Magazine Basic de Bavota San ya que, además, permite elegir entre varias estructuras y me pareció muy interesante una de ellas que destaca mucho la publicación más reciente, un poco menos las dos siguientes más actualizadas y menos para el resto, además de ser bastante personalizable y fácil de usar.

  3. Lo siguiente es instalar un sistema que importe entradas de otros sitios. A estos efectos el más actualizado, sencillo y configurable es FeedWordPress. Una vez instalado solo hay que ir añadiendo las URLs de los sitios que queremos promocionar desde nuestro agregador. El plugin te permite añadirlos uno a uno o en bloque, lo que facilita mucho las cosas. Además, no hace falta que conozcas la dirección del feed RSS de los sitios, simplemente añades la URL y el plugin detecta los feeds disponibles, tu simplemente eliges cual es que vas a utilizar.

    Luego, puedes configurar un montón de personalizaciones para cada feed o globales, como cada cuanto buscará el plugin nuevas entradas, si los títulos de las entradas enlazarán a la copia local o el sitio original, si en los posts generados se permitirán pingbacks y comentarios y mucho más.

    Aquí, para que nuestro agregador sea respetuoso con las fuentes, debes marcar siempre las opciones de que los enlaces siempre dirijan a la fuente original, y que no se permitan comentarios y/o pingbacks en tu agregador. De este modo fuerzas al visitante a leer el artículo completo en el sitio original, reconociendo la autoría.

    Hay muchas más opciones, pero estas son las vitales para un agregador respetuoso.

  4. Hay ocasiones en que FeedWordPress tiene la mala costumbre de publicar entradas duplicadas, así que si ves que te pasa esto instala también el plugin FeedWordPress duplicate post filter, que revisa la base de datos en tiempo real y borra los posibles duplicados. No obstante, no lo recomiendo por defecto, solo si ves que te pasa, porque en algunos servidores este plugin a veces bloquea las actualizaciones de FeedWordPress. Te toca probar.
  5. Siempre, siempre, pregunta a los sitios que quieres incluir en tu agregador si están de acuerdo en que sus publicaciones sean incluidas en tu planeta. Crear un agregador eficaz y respetuoso con las fuentes les ofrecerá más visitas y mejorará su "link building" y posicionamiento, pero la elección es del creador del contenido original, que no se te olvide.
  6. Elige bien los sitios a incluir en el agregador. Los sitios "donantes" de contenido deben actualizarse frecuentemente y estar muy centrados en la temática elegida para aportar valor a los visitantes y a los mismos aportadores de contenido. Si el visitante no ve satisfechas sus expectativas de información segmentada y clasificada se buscará otro lugar donde encontrar la información de su interés.
  7. Crea una página bien visible con un formulario de contacto para que cualquiera pueda ofrecer su sitio (relacionado con la temática) para aparecer también en el agregador. Con esto crecerá la visibilidad, aportarás más valor al agregador y darás más beneficios a los sitios incluidos.
  8. Fuerza que los enlaces se abran en una nueva ventana (o pestaña) siempre. El objetivo de esto es para que el visitante habitual del agregador no pierda el foco del sitio cuando quiera revisar una noticia concreta, y que le sea más fácil luego revisar más noticias de su interés. Para ello te recomiendo usar el plugin Open external links in a new window ya que cumple XHTML estricto y si un navegador no soporta Javascript no devuelve errores. Simple y efectivo.
  9. Difunde - más si cabe - el contenido creando una cuenta de Twitter y una página de Facebook que publiquen automáticamente los contenidos del agregador. Con Tweetable tienes todo lo que necesitas para Twitter y para Facebook y otras redes prueba alguna de estas posibilidades o esta guía de mi compañero David. Con esto, que tampoco te quitará tiempo, ayudas a atraer visitas también y a difundir el contenido.
  10. No instales ningún plugin de SEO en el WordPress del agregador, recuerda que el objetivo es ceder visitas y posicionamiento a los creadores de contenidos, no atraerlo hacia el agregador. Además, este tipo de sitios, por lo segmentado de la información y frecuencia de actualizaciones, ya suelen atraer bastante bien a los buscadores pues los alimentan de contenido frecuente y en gran cantidad, lo que no es tampoco malo en sí mismo pues a su vez facilitará la popularidad (compartida) de las fuentes del contenido.
  11. Ofrece una versión móvil del sitio con WPTouch y WiPad, que no se te olvide facilitar la visualización a los usuarios siempre conectados. Con esto también aportarás valor, ofreciendo funcionalidades que muchas veces los generadores de contenidos no están ofreciendo y, como siempre, las visitas les siguen llegando a ellos.

Y eso es todo, a partir de que lo montes y, si quieres, lo personalices un poco, tendrás un sitio que se actualiza solo con el contenido de los sitios originales. Solo tendrás que incluir nuevos sitios que soliciten su inclusión y, de vez en cuando, revisar la pantalla de feeds sindicados para comprobar que las actualizaciones se están automatizando normalmente y sin errores (a veces pasa que hay feeds originales que tienen fallos y dejan de sindicarse).

Además, este tipo de agregadores, cuando se hacen bien, he comprobado producen unos interesantes (y buenos) efectos colaterales, a saber …

  • Los generadores de contenido se fuerzan en actualizar más sus sitios para "ganar portada" gracias a la distribución de entradas de los temas de estilo revista, que suelen dar más visibilidad a las entradas más recientes.
  • Enseñan a los generadores de contenido a crear mejores titulares, pues el agregador les permite compararse - a efectos de visibilidad - con sitios de contenido similar y aprenden la importancia de un buen titular.
  • Generan comunidad, pues a los mismos generadores de contenido les muestra otros sitios que tratan su misma temática que muchas veces desconocían.
  • Enseña a los generadores de contenido que una imagen vale más que mil palabras, animándoles a acompañar siempre sus entradas con imágenes que ilustren el contenido y, en el agregador, atraigan visitas.

Personalmente estoy muy contento con como ha quedado el agregador de blogs de UPyD, y los generadores de los contenidos ahí publicados están muy satisfechos con el aumento de visitas y visibilidad de sus blogs.

¡Que lo pases bien y respetes a los creadores de contenido!

Insertar tweets en WordPress

Si hasta ahora podíamos insertar tweets en nuestro blog mediante HTML desde ya podemos hacerlo sin necesidad de servicios internos.

Tanto en WordPress.com como en tu WordPress alojado puedes insertar un tuit concreto solo con pegar la URL del mismo, solo tienes que usar el sistema Blackbird Pie, ya integrado en los blogs de WordPress.com o mediante un plugin en tu WordPress alojado.

Solo tienes que pegar la URL del tweet que quieres mostrar y se mostrará de manera visual, completo con todos sus enlaces incluidos, como en este ejemplo … 

Digamos que quieres incluir esta actualización de estado de Twitter (o tuit):

http://twitter.com/fernandot/status/494837174370304

Solo tienes que pegar la URL (en WordPress.com o tras instalar el plugin en tu WordPress alojado) y verás esto:


De WordPress a Twitter (el ping pong 2.0) http://bit.ly/9Dj74K #wordpressFri Nov 05 10:29:13 via twitterfeed

Chulo ¿eh?

Contenido exclusivo para suscriptores al Feed

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

Clic aquí para iniciar la descarga Guía para Administrar WordPress

WordPress para iOS 2.6.2

Llevábamos unos cuantos días ya desde la última actualización con problemas en la aplicación de WordPress para iOS que, parece, ahora se solucionan con la actualización a la versión 2.6.2.

Lo nuevo es lo siguiente:

  • Mejoras en la orientación apaisada al editar entradas
  • Solución al problema de fecha y hora incorrectas en la publicación
  • Solución a los problemas de sincronización en la visualización de entradas (menos mal, era un horror)
  • Solución a los problemas al conectar con WordPress alojados usando HTTP Auth
  • Solución al cuelgue en el autoguardado tras publicar
  • Solución a varios fallos al tratar de cargar medios
  • Solución al cuelgue al configurar ajustes en WordPress alojados
  • Mejoras en la codificación HTML de las cargas de medios
  • Mejoras en la gestión de conexiones XML-RPC en WordPress alojados
  • Mejoras en el UX al añadir WordPress alojados
  • Se ha añadido un sistema de informe de errores de la aplicación
  • Se ha añadido la opción de usar tags HTML 4 al incrustar vídeo en las entradas

Iba haciendo falta, la verdad.

Contenido exclusivo para suscriptores al Feed

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

Clic aquí para iniciar la descarga Guía Windows Live Writer

Texto en columnas

Si quieres mostrar el contenido de tus textos en columnas, como en las revistas o periódicos digitales, puedes hacerlo de varias maneras. Quizás la más obvia es elegir un tema que ya use ese tipo de formato, o lo mismo prefieres usar tablas para hacerlo manualmente, pero ambos métodos tienen algún inconveniente.

Usar un tema predeterminado en columnas no siempre sirve, pues podrías querer columnas en unos sitios si y en otros no. No digamos las tablas, un método algo engorroso. Por supuesto, no hablaremos de modificar el código del tema pues tampoco podría ser todo lo flexible que necesitamos.

Pero podemos hacerlo con Magazine Columns, un plugin que nos facilita esta tarea mediante quicktags. Instalarlo es tan fácil como cualquier otro, y ni siquiera hay nada que configurar. Ahora bien, hay que conocer un poco el modo de usarlo. Vamos a verlo …

Lo que el plugin hace es registrar 3 nuevas tags o shortcodes que usar en nuestro editor HTML, ya sea manualmente o mediante los botones que añade. Para usar adecuadamente estas nuevas tags solo tienes que seguir las convenciones de estos ejemplos:

1. Todo el texto en columnas

Puedes separar el texto en varias columnas (4 como máximo) simplemente añadiendo la tag al principio del mismo, por ejemplo:

<!--column-->
ARMADYAZ Corporation is a dynamic and energetic multi-disciplinary professional services and management consultancy company, providing holistic solutions to clients all over the world, driven by experienced team of professional.

ARMADYAZ Corporation is a subsidiary of Jeevus Markeevu Corporation, a Government-backed agency under Ministry of Works and owned by Minister of Finance Incorporated. ARMADYAZ Corporation is entrusted with the corporate agenda to assume the critical role of representing the interests of Professional Services industries to the world.

It is established with the objective of facilitating and guiding all Professional Service Providers irrespective of the spectrum of industries, to venture into international and global market. We foster these through cooperative management approach that is reinforced through sound management system.

Formed by an entrepreneurial group of professionals with a vision of transforming professional services landscape, ARMADYAZ Corporation, supported by its strategic partners, have earned an enviable reputation for delivering some of the largest and most successful programs in international corporate history.

Si quieres dividir el texto en más columnas simplemente añades la tag más veces, así …

<!--column--><!--column--><!--column-->
ARMADYAZ Corporation is a dynamic and energetic multi-disciplinary professional services and management consultancy company, providing holistic solutions to clients all over the world, driven by experienced team of professional.

ARMADYAZ Corporation is a subsidiary of Jeevus Markeevu Corporation, a Government-backed agency under Ministry of Works and owned by Minister of Finance Incorporated. ARMADYAZ Corporation is entrusted with the corporate agenda to assume the critical role of representing the interests of Professional Services industries to the world.

It is established with the objective of facilitating and guiding all Professional Service Providers irrespective of the spectrum of industries, to venture into international and global market. We foster these through cooperative management approach that is reinforced through sound management system.

Formed by an entrepreneurial group of professionals with a vision of transforming professional services landscape, ARMADYAZ Corporation, supported by its strategic partners, have earned an enviable reputation for delivering some of the largest and most successful programs in international corporate history.

2. Solo parte del texto en columnas

Si solo quieres usar columnas en parte del texto coloca la tag donde quieras que empiecen las mismas y donde quieres que termine. Para separar el texto en las distintas columnas usa la tag .

Sería algo así:

ARMADYAZ Corporation is a dynamic and energetic multi-disciplinary professional services and management consultancy company, providing holistic solutions to clients all over the world, driven by experienced team of professional.
<!--startcolumns-->
ARMADYAZ Corporation is a subsidiary of Jeevus Markeevu Corporation, a Government-backed agency under Ministry of Works and owned by Minister of Finance Incorporated. ARMADYAZ Corporation is entrusted with the corporate agenda to assume the critical role of representing the interests of Professional Services industries to the world.
<!--column-->(aquí separamos el texto)
It is established with the objective of facilitating and guiding all Professional Service Providers irrespective of the spectrum of industries, to venture into international and global market. We foster these through cooperative management approach that is reinforced through sound management system.
<!--startcolumns-->
Formed by an entrepreneurial group of professionals with a vision of transforming professional services landscape, ARMADYAZ Corporation, supported by its strategic partners, have earned an enviable reputation for delivering some of the largest and most successful programs in international corporate history.

Vamos, que no es complicado, solo tienes que enredar un poco y te acostumbras rápido a hacerlo, y con los botones del editor HTML se facilitan las cosas.

El sacrosanto, pero olvidado, W3C

Hubo un tiempo en que era muy importante que el código HTML de un blog estuviese bien escrito. Por ello, organismos con el W3C se encargaban de dictar normas y gente como Diego Martín o Walter Kobylanski dedicaban gran parte de su tiempo a enseñarnos cómo hacer las cosas bien. Les hablo de allá por 2003 y a mi todo aquello se me quedó grabado a fuego.

Hoy, existen muchos afamados y exitosos blogs que no validan correctamente, lo que demuestra posiblemente que todo eso no sirve para nada. Que sea un factor a tener en cuenta por parte de los buscadores, al fin y al cabo, es lo de menos. Pero no poner el atributo alt en un img puede impedir a alguien, con visión reducida, el acceso a tu blog, ya que al dispositivo, capaz de interpretar el código y convertirlo en voz, le faltará algo (ver Algunas reglas sencillas para validar tu blog).

Tener un blog en una plataforma como WordPress no te garantiza tener un código que valide correctamente. El theme puede estar desarrollado perfectamente pero hay tres vías por donde puedes empezar a hacer aguas. Una son los widgets, sobretodo los que permiten añadir código html. Algunos fallan si están vacios como, por ejemplo, el de comentarios recientes.

Otro camino tortuoso es el de los plugins. Hay desarrolladores que no tienen en cuenta la validación XHTML. A continuación, algunos ejemplos que he sufrido recientemente:

Facebook Social Plugins. Uno de los plugins más recomendables para añadir el botón “I like”. Sin embargo, se añade el atributo “allowTransparency” que no es correcto. Afortunadamente, se puede eliminar del script y no afecta al funcionamiento.

El botón de Twitter. Si quieres incluir un texto personalizado y una url, como puede ser necesario para intergrarlo en WP, se añaden los atributos data-text y data-url que no pasan el test de validación. En este caso, la única forma de solventarlo es configurarlo con la URL de la pagina y el título de la pagina en que esta el botón.

Compartir en Tuenti. Todas las imágenes se construyen sin “alt”.

Y, por último, habrá que tener mucho cuidado al escribir nuevas entradas, especialmente si conllevan código (el embed de YouTube no valida, sin ir más lejos).

Yo seré un romántico pero me gusta que mi blog conteste lo siguiente, cuando le paso el test de validación Valid XHTML 1.0 Transitional.

documento válido xhtml
Blogpocket.com: blog ganador en los Premios Bitacoras.com 2010, en la categoría Premio Especial Honorífico

También puedes leerme en Twitter y en Weblog Magazine

Y si te gusta la música, no dejes de suscribirte a Acordes Modernos, finalista en los Premios Bitacoras.com 2010, en la categoría Mejor Blog Cultural

El cuerpo humano en HTML y PHP

Ahí es nada la currada que se han pegado en Alvaro Go! para hacer este, que sería el código del cuerpo humano (hasta con esponsor) en HTML y PHP …

Vía Microsiervos

Contenido exclusivo para suscriptores al Feed

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

Clic aquí para iniciar la descarga Guía para Administrar WordPress

Tutorial: crear una barra con los datos del autor

Si nuestro blog es unipersonal, es probable que no nos interese el siguiente tutorial. Pero si tenemos un en blog multipersonal, ya sea con una cantidad determinada de colaboradores  o abierto todo aquel que quiera colaborar (como éste), puede ser una buena idea mostrar de forma dinámica los datos del autor de la entrada actualizados al día.

Seguramente existe más de un plugin para realizar esto o algo por el estilo, pero como soy un fanático del hágalo usted mismo les voy a mostrar cómo hacerlo por código utilizando las mismas funciones de Wordpress.

Cabe aclarar que más allá del código php y html, seguramente cada uno necesitará adaptar un poco los estilos css a su theme. De todas formas sobre utilizar el theme por defecto de wordpress 2.9.2. La idea por supuesto es que tengan alguna idea de html, php y css, pero sino copiar y pegar el código final también vale. Comencemos entonces con el código:

Creemos primero el div que va a contener todo:

HTML:
  1. <!--div contenedor -->
  2. <div id="author-data">
  3. </div>

Vamos a comenzar mostrando el gravatar del autor. Para eso vamos a utilizar la función "get_avatar()" que recibe el id del usuario y el ancho en pixeles del avatar, y retorna el código html listo para insertar. A su vez para obtener el id del autor usaremos la función "get_the_author_meta()" que nos servirá para obtener casi cualquier información acerca del mismo, recibe como parámetro el dato a recuperar. Una vez obtenido el código lo imprimimos:

PHP:
  1. echo get_avatar(get_the_author_meta('ID'),80);

Ahora lo segundo seria agregar un título con un enlace al sitio web del autor, para eso utilizaremos la función "the_author_link()" que imprime el nombre publico del autor como link a su sitio.

HTML:
  1. <h4>Acerca de <?php the_author_link(); ?>:</h4>

Si pensamos en el SEO y preferimos que el enlace sea nofollow (o sea que los bots como el de Google no lo considere). Podriamos hacer lo siguiente:

PHP:
  1. <h4>Acerca de <a rel="nofollow" title="web del autor" href="<?php the_author_meta('user_url'); ?>;" <?php the_author(); ?></a>/h4>

Como verán usamos la función "the_author()" que imprime el nombre publico del author y la función "the_author_meta()" para obtener el link de su web.

Ahora utilicemos nuevamente la función "the_author_meta()" pero para obtener su descripción:

PHP:
  1. <p><?php the_author_meta('user_description'); ?>
  2. </p>

Si por cuestiones de diseño quisiéramos recortarla a no mas de una x cantidad de caracteres podemos usar la función "substr()" de php. Recibe la cadena a recortar, el punto de inicio y la cantidad de caracteres. Para recuperar la descripción usamos "get_the_author_meta()", como ya habrán deducido, cuando lo usamos con get_ adelante recuperamos el valor y cuando lo usamos sin el, directamente lo imprimimos. Por ejemplo si quisiéramos recortar la descripción a 140 caracteres:

PHP:
  1. <p>
  2. <?php
  3. //Con esto imprimimos los primeros 140 caracteres (a lo twitter) de la descripción
  4. echo substr( get_the_author_meta('user_description') , 0 , 140 );
  5. ?>
  6. </p>

Ahora la idea va a ser mostrar la cantidad de post del autor (una pavada que hacemos con la función "the_author_posts()") pero que a su vez funcione como un link a la pagina con los post del author. Esta página en un blog con permalinks "bonitos" tendría la siguiente forma tu-dominio.com/author/el-autor/. Pero como dependiendo de la configuración, esto puede cambiar, vamos a obtener primero el link a la página con los posts del autor.

Para nuestra tarea vamos a hacer uso de la función "get_author_posts_url()" que recibe el id del autor y devuelve el link que mostramos. Para obtener el id, volvemos a usar la función "get_the_author_meta()":

PHP:
  1. get_author_posts_url(get_the_author_meta('ID'));

Ya el link armado para mostrar todo lo que queríamos queda así:

PHP:
  1. <p>
  2. Ha publicado <a title="otros posts del autor" href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>" <<?php the_author_posts() ?> posts </a>
  3. </p>

Para finalizar los datos a mostrar nos queda un detalle mas, los comentarios realizados por el autor. Dado que no existe (o más bien, yo no conozco) una función para obtener directamente la cantidad de comentarios de un autor, vamos a crear una, basándonos en el sql que Fernando me facilito tan amablemente hace un tiempo,que a su vez esta basado en el del plugin wordpress-plugin-nofollow-free:

PHP:
  1. //La idea es que esta función reciba el id del autor y devuelva la cantidad de comentarios que realizó.
  2. function get_the_author_comments($author_id){
  3.  
  4. /*Obtenemos algunos datos del autor que vamos a necesitar*/
  5. $nick = get_the_author_meta( 'nickname' , $author_id);
  6. $username = get_the_author_meta( 'user_login' , $author_id);
  7. $displayname = get_the_author_meta( 'display_name' , $author_id);
  8. $email = get_the_author_meta( 'user_email' , $author_id);
  9.  
  10. /*Usamos el objeto global $wpdb (algo así como una interfaz de wp para acceder a la base de datos)*/
  11. global $wpdb;
  12.  
  13. /*
  14. Armamos un sql para que cuente la cantidad de registros (o sea comentarios) cuando
  15. el id de usuario sea igual que el del autor, o cuando su email coincida con el campo comment_author_email o cuando su nombre de usuario o su nombre publico o su nickname coincidan con el campo comment_author.
  16. */
  17. $sql = "SELECT COUNT(*) AS contador FROM " . $wpdb-&gt;comments . " WHERE " .
  18. " user_id = $author_id " .
  19. " or comment_author_email = '$email' " .
  20. " or comment_author IN ('" . $displayname . "','" . $username . "','" . $nick . "')";
  21.  
  22. //retornamos el resultado
  23. return  $wpdb-&gt;get_var($sql);
  24.  
  25. }

Debido al hecho de que si los comentarios del blog son abiertos al que quiera comentar, nos vamos a encontrar con un mismo usuario que comenta con 2 email y nombres distintos o 2 usuarios que comentan con el mismo nombre; el resultado de la función no siempre va a ser exacto. Pero dentro de todo funciona bastante bien.

Ahora vamos a insertarla en el archivo functions.php de nuestro theme para poder utilizarla. En nuestro código vamos a utilizarla así (insertándola en el mismo párrafo que la de los posts del autor):

PHP:
  1. <p>
  2. Ha publicado <a title="otros posts del autor" href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>"&gt; &lt;?php the_author_posts() ?&gt; posts &lt;/a&gt; | Ha realizado <?php echo get_the_author_comments(get_the_author_meta('ID')); ?> comentarios
  3. </p>

Todo nuestro código insertado dentro del div contenedor y puesto en forma de función por una cuestión de practicidad queda así:

PHP:
  1. <!--div contenedor -->
  2. <div><?php
  3. //le pongo show_author_data por ponerle un nombre
  4. function show_author_data(){ ?>
  5. <!--div contenedor -->
  6. <div>
  7. <?php echo get_avatar(get_the_author_meta('ID'),80); ?>
  8. <h4>Acerca de <a rel="nofollow" title="web del autor" href="<?php the_author_meta('user_url'); ?>"><?php the_author(); ?></a></h4>
  9. <p>
  10. <?php
  11. //Con esto imprimimos los primeros 140 caracteres (a lo twitter) de la descripción
  12. echo substr( get_the_author_meta('user_description') , 0 , 140 );
  13. ?>
  14. </p>
  15. <p>
  16. Ha publicado <a title="otros posts del autor" href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>"> <?php the_author_posts() ?> posts </a> | Ha realizado <?php echo get_the_author_comments(get_the_author_meta('ID')); ?> comentarios
  17. </p>
  18. </div>
  19. <?php } ?>
  20. </div>

Si al colocar ambas funciones en su archivo functions.php empiezan a saltarles errores diciendo que las cabeceras no se han podido enviar, lo mas probable es que hayan dejado saltos de línea o espacios por fuera de las etiquetas de php.

Por último vamos a agregar a la hoja de estilos de nuestro theme algunos retoques para embellecer nuestra barrita (por lo menos para que en Kubrick se vea bien):

CSS:
  1. #author-data {
  2. color: #000000; /* o sea negro */
  3. font-size: 14px;
  4. background: #cccccc;
  5. width: 100%;
  6. margin: 10px 0px;
  7. padding: 3px;
  8. float: left;
  9.  
  10. /*si ponen lo siguiente su css no va a validar */
  11. border-radius: 5px; /*para opera*/
  12. moz-border-radius: 5px; /*para firefox */
  13. webkit-border-radius: 5px; /*para safari y chrome*/
  14. khtml-border-radius: 5px; /* para konkeror */
  15. box-shadow: 2px 2px 5px #000000; /*para opera*/
  16. -moz-box-shadow: 2px 2px 5px #000000;/*para firefox*/
  17. -webkit-box-shadow: 2px 2px 5px #000000;/*para safari y chrome*/
  18. -khtml-box-shadow: 2px 2px 5px #000000;/*para konkeror*/
  19. }
  20.  
  21. #author-data .avatar {
  22. margin: 4px;
  23. float: left;
  24. }
  25.  
  26. #author-data h4 {
  27. font-size: 17px;
  28. margin: 3px;
  29. }
  30.  
  31. #author-data p {
  32. margin: 0px;
  33. padding: 4px;
  34. }

En lo personal inserte la barrita arriba del título (llamando a la función show_author_data), pero cada uno colóquela donde quiera (siempre y cuando sea adentro del bucle).

Mi barrita en Kubrick se ve así (no se ve el gravatar porque al momento de tomar la captura me encuentro offline):

Para que funcione en Twenty Ten (el tema por defecto en wp 3.0) hay que armar una estructura un poco más compleja en cuanto a divs y css:

PHP:
  1. function show_author_data(){ ?>
  2. <!--div contenedor -->
  3. <div>
  4. <div><?php echo get_avatar(get_the_author_meta('ID'),80); ?></div>
  5. <div>
  6. <h4>Acerca de <a rel="nofollow" title="web del autor" href="<?php the_author_meta('user_url'); ?>"><?php the_author(); ?></a></h4>
  7. <p>
  8. <?php
  9. //Con esto imprimimos los primeros 140 caracteres (a lo twitter) de la descripción
  10. echo substr( get_the_author_meta('user_description') , 0 , 140 );
  11. ?>
  12. </p>
  13. <p>
  14. Ha publicado <a title="otros posts del autor" href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>"> <?php the_author_posts() ?> posts </a> | Ha realizado <?php echo get_the_author_comments(get_the_author_meta('ID')); ?> comentarios
  15. </p>
  16. </div>
  17. </div>
  18. <?php } ?>

Y los css:

CODE:
  1. #author-data {
  2. color: #000000; /* o sea negro */
  3. font-size: 14px;
  4. background: #cccccc;
  5. margin: 10px 0;
  6. padding: 3px;
  7. float: left;
  8. clear: both;
  9. width: 100%;
  10.  
  11. /*si ponen lo siguiente su css no va a validar */
  12. border-radius: 5px; /*para opera*/
  13. moz-border-radius: 5px; /*para firefox */
  14. webkit-border-radius: 5px; /*para safari y chrome*/
  15. khtml-border-radius: 5px; /* para konkeror */
  16. box-shadow: 2px 2px 5px #000000; /*para opera*/
  17. -moz-box-shadow: 2px 2px 5px #000000;/*para firefox*/
  18. -webkit-box-shadow: 2px 2px 5px #000000;/*para safari y chrome*/
  19. -khtml-box-shadow: 2px 2px 5px #000000;/*para konkeror*/
  20. }
  21.  
  22. #author-data #author-gravatar {
  23. margin: 4px;
  24. float: left;
  25. margin: 4px -104px 4px 4px;
  26. }
  27.  
  28. #author-data #author-info {
  29. float: left;
  30. margin: 0 0 0 104px;
  31. }
  32.  
  33. #author-info h4 {
  34. font-size: 17px;
  35. margin: 2px;
  36. padding: 0;
  37. }
  38.  
  39. #author-info p {
  40. margin: 2px;
  41. padding: 4px;
  42. }

El resultado es el siguiente:

Palabras Finales

Espero que algún valiente haya llegado hasta acá. La idea del tutorial no era tanto hacer la barrita en si, sino colaborar a que de a poco muchos empiecen a perderle el miedo al código y no sean tan plugin dependientes.

Además tenía tiempo queriendo colaborar con algún post para esta bodega de conocimiento que es AyudaWordpress. Espero les sea útil.

PD: para el que no entendió un pomo pero igual quiere la barrita acá la tiene en forma de plugin(eso si, en versión súper minimalista, no esperen panel de control, opciones, ni nada por el estilo).