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).

WordPress en HTML5

Pues si, eso es nada más y nada menos en lo que se quiere meter Enric Enrich, en pasar todo el código de WordPress a HTML5. No le arriendo la ganancia, por supuesto y, sinceramente, no creo que llegue a hacerlo, además de que si se termina de animar lo que le recomiendo es que se una al equipo de desarrollo y se deje arropar del resto de desarrolladores.

Porque la idea es buena, lo que no lo es tanto es abordarla como un concepto personal ¿por qué?, pues porque WordPress no es un proyecto personal, es de la comunidad. Otra cosa es que haga un tema en HTML5, como ya hizo con TwentyFive, pero plantarse como objetivo "personal" pasar WordPress a HTML5 me parece, no una locura, una insensatez, y que me perdone por ser tan sincero.

Así que, Enric, mi consejo es que te lo pienses bien, y concentres tus esfuerzos en - una de dos - unirte al equipo de desarrollo de WordPress, colaborando con el código, o en desarrollar temas en HTML5, que todos agradeceremos. Pero vamos, que es mi opinión, que no quiero desanimarte, solo que lo veo desde otro prisma.

Por cierto, Enric, si lees esto, a ver si pones un feed a tu blog, que ni Google Reader te lo reconoce y no hay manera de seguirte salvo en bitácoras.com ;)

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

¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Plantillas y temas para wordpress recomendados.2


Otra nueva recopilación de plantillas y temas para wordpress casi gratis que seguro te resultará muy interesante y completa para crear tu sitio web.

  • Auguste HTML Premium Site, una plantilla muy interesante en rojo y blanco por solo 17$.
  • Plantilla NN Studio Premium para montar tu portafilio y web de empresa.
  • UMBOOM es un plantilla de gran calidad y muy profesional en xhtml+css.
  • OpenHouse para wordpress para crear su web inmobiliaria con buscador de viviendas.
  • The glamour es un tema para wordpress pensado para los negocios y mostrar tu portafolio.
  • Socket una plantilla y gestor de contenidos en PHP para montar tu web corporativa con todo tipo de detalles.
  • .honorem es un tema perfecto para tu web corporativa, de negocios y portafolio.
  • Asylum es un conjunto de originales plantillas para montar sitios corporativos con distinción.
  • Distinct es una plantilla html para portafoliso y negocios.
  • Naturel es una plantilla profesional en xhtml+css para crear tu sitio de diseño web, negocios o portafolio.
  • MicroSite una plantilla sencilla y limpia para montar tu curriculum web.

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

Plantillas y temas para wordpress recomendados.2

HTML5: todas las nuevas etiquetas

HTML5 viene con una buena cantidad de nuevas etiquetas de código así que si eres desarrollador o simplemente quieres empezar a conocerlas apunta, cada elemento de la lista está enlazado a la página de la descripción y modo de uso:

Muy pronto vas a empezar a verlas por todas partes, WordPress y sus temas incluidos, así que toma buena nota, hay importantes novedades, sobre todo no pierdas de vista las tags <article>, <nav>, <aside> y <section>.

Si quieres empezar a probar códigos aquí tienes una lista de temas WordPress en HTML5:

Referencias: w3schools y quackit

¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!