Fancier Author Box (o cómo añadir un atractivo recuadro de autor a tu blog)

Cuando tienes un blog en marcha, una de las primeras funcionalidades que puedes encontrar interesante es la posibilidad de añadir una ficha de autor en cada artículo publicado (sobre todo si dentro de tu blog existe más de una persona desarrollando contenidos). Gracias a esto, así, los lectores podrán conocer de forma más atractiva quién ha escrito cada artículo, con datos personales sobre la biografía del autor. También es posible de esta forma facilitar una lista completa de artículos escritos por esa misma persona,  e incluso facilitar diferentes formas de contactar con el autor.

En una instalación básica de WordPress ya existe una forma de hacer esta ficha de autor,  aunque esto depende en gran parte del tema que se tenga activo para el sitio. Así, si accedemos desde el área de administrador al menú Usuarios – Tu perfil, encontraremos un área con la ficha del usuario, a través de la cual poder añadir cierta información de contacto:

Info contacto

Así, por ejemplo, si tenemos activo el tema Twenty eleven, al rellenar la información del campo “Información bibliográfica”, el tema está desarrollado de forma que después de cada post se añade un pequeño recuadro con esta información, incluyéndose además la foto del perfil de usuario (si está estuviera definida a través de gravatar). Esto siempre que existan artículos escritos por más de un usuario.

Sin embargo, puede ser que nos interese, como era mi caso, presentar algo con un poco más de diseño, o incluso que incorpore algo más de información (datos por ejemplo del twitter, facebock, linkedin,… del autor). Pues si esta es nuestra idea, tenemos entonces dos opciones:

  • Modificar manualmente nuestro tema. Este es el camino más complicado, ya que requiere hacer modificaciones directamente en el código de algunos ficheros de tu tema (functions.php, single.php, style.css,..). Esta sería la opción que te permitirá desarrollar la funcionalidad exactamente tal y como la has imaginado, pero requiere un nivel algo mayor de conocimientos técnicos. En cualquier caso, si te decantas por esta opción, existe un post sobre el tema que me parece de los que mejor y más gráficamente explica el proceso.
  • Utilizar alguno de los plugins existentes para resolver esta funcionalidad. En este sentido existen bastantes plugins que resuelven esta funcionalidad, algunos de pago, y otros muchos gratuitos, como por ejemplo:
    • WP Biographia.
    • Custom About Author.
    • Author Box With Different Description.
    • WP About Author.
    • Author Box After Posts.
    • Fancier Author Box.

Fancier Author Box

Yo, después de probar diferentes opciones, he resuelto el tema utilizando el plugin Fancier Author Box, que fue el que más simplicidad y mejores resultados de diseño ofrece.

http://wordpress.org/plugins/fancier-author-box/

En realidad este plugins tiene dos versiones, una gratuita y otra de pago (Fanciest Author Box). La versión de pago ofrece una organización más elegante de la información,  a través de más pestañas. Y  solo cuesta 10$. Pero si te estás iniciando en este mundo, la versión gratuita es mas que de sobra.

Como os comentaba, yo recientemente he incorporado este plugin a mi blog. Al final de este mismo artículo podéis ver como “queda” el Fancier Author Box.

Fancier Author Box - BioFancier Author Box - Ultimos posts

 Cuando se instala este plugin, en el menú de Herramientas (dentro del área de administración) se incluye un nuevo apartado, Fancier Author Box, donde se nos permite configurar algunos aspectos relacionados con su funcionalidad:

Conf - Fancier Author Box

  • Los objetos donde añadir el recuadro de autor, permitiéndose añadirlo o no tanto en los posts como en las páginas (en la imagen que adjunto aparece también la opción de añadirlo al aviso de utilización de cookies, funcionalidad que incorporo a través de otro plugin, Cookie law info, y que está integrada con Fancier Author Box).
  • El lugar donde añadir el recuadro de autor en cada uno de estos objetos. Se permite elegir al inicio, al final, en ambos sitios, o en ninguno.
  • El número de posts del autor que ofrecer en la pestaña de “últimos Post”. Permite un valor entre 1 y 5.
  • Los estilos de la presentación. Permitiendo cambiar el color, bordes y background tanto de la pestaña activa como del resto de pestañas y contenido de las mismas.

Aparte de estos aspecto de configuración, la información a presentar en la ficha se completa, den nuevo desde el menú de administración, a través de la ficha de datos de usuario (Menú Usuarios – Tu perfil).

Info - Fancier Author BoxEn principio, completado la nueva información de usuario, y configurando los parámetros ya comentados para que aparezca donde y como nos interesa, sería suficiente para dejarlo todo funcionando perfectamente. Pero no iba a ser todo tan fácil, amigos. Porque resulta que, y aunque este sea el método que mejor solución me ha dado, el plugin no está del todo bien construido, lo cual genera algunos problemas de puesta en marcha que hay que corregir.

Primer problema. Aparte de los nuevos campos que incorpora el plugin al perfil de usuario (y presentados en la imagen anterior), Fancier Author Box  utiliza también el campo Información biográfica existente de serie en WordPress. Con la información contenida en este campo muestra en la primera pestaña los datos sobre el autor. ¿Problema? Si tu tema ya ofrece “de serie”, como comentaba, una ficha de autor cuando este campo de Información biográfica se completa (Twenty eleven así lo hace), el resultado va a ser la aparición de dos recuadros de autor, el de Fancier Author Box, donde lo hayas configurado, y el de tu tema.

Para evitar esto, vamos a eliminar manualmente este segundo recuadro (el que aparece por defecto). Esto se realiza eliminado (o comentando) el siguiente trozo de código (o similar, puede variar ligeramente dependiendo del tema):

<?php if ( get_the_author_meta( 'description' ) && ( ! function_exists( 'is_multi_author' ) || is_multi_author() ) ) :  ?>
<div id="author-info">
<div id="author-avatar">
<?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'twentyeleven_author_bio_avatar_size', 68 ) );?>
</div>
<div id="author-description">
<h2><?php printf( __( 'About %s', 'twentyeleven' ), get_the_author() ); ?></h2>
<?php the_author_meta( 'description' ); ?>
<div id="author-link">
<a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">
<?php printf( __( 'View all posts by %s <span class="meta-nav">&rarr;</span>', 'twentyeleven' ), get_the_author() ); ?>
</a>
</div>
</div>
</div>
<?php endif; ?>

Este fragmento está incluido, bien en el fichero single.php, bien content-single.php (de nuevo depende del tema. En el caso de Twenty eleven es en este último).

Segundo problema. Fancier Author Box no está preparado para soportar multi-idioma. Los textos generales del recuadro de autor no solo no pueden modificarse por configuración, sino que aparecen siempre en inglés. Por tanto si tu Blog es más “castizo”, te interesara poder cambiarlos. Para ello tendremos en entrar en la opción de menú Plugins – editor, seleccionar en la parte superior el plugin a editar Fancier Author Box, y modificar unos cuantos textos del archivo ts-fab-construct-tabs.php:

  • Para los títulos de las pestañas. Cambiar el texto “Bio” (este se puede mantener por ser bastante universal) y el de “‘Latest posts” (por ejemplo por “últimos posts”):
$ts_fab .= '<li><a href="#ts-fab-bio-' . $context . '">' . __( 'Bio', 'ts-fab' ) . '</a></li>';
$ts_fab .= '<li><a href="#ts-fab-latest-posts-' . $context . '">' . __( 'Latest posts', 'ts-fab' ) . '</a></li>';
  • Para el contenido de la segunda pestaña. Cambiar el texto “Latest posts by” (por ejemplo por “Últimos posts por”) y el de “See all” (por ejemplo por “Ver todos”):
<div class="ts-fab-header">
<h4>' . __('Latest posts by ', 'ts-fab' ) . $author->display_name . ' <span class="latest-see-all">(<a href="' . get_author_posts_url( $author->ID ) . '">' . __( 'See all', 'ts-fab' ) . '</a>)</span></h4>
</div>

Y con estos pequeños cambios, deberíamos tener el plugin listo y totalmente operativo. Espero os haya servido.

The following two tabs change content below.

Angel Sierra

"Saber escuchar no siempre significa no tener nada que decir." Cinéfilo, tecnólogo, deportista, tímido, imaginativo, trabajador, viajero, comunicador, compañero, disfrutón, tranquilo, loco, músico, cocinero, gestor, bailarín, empático, friki, complicado, géminis... siempre diferente. Huye de encasillamientos; de lo que has sido o dicen que eres. Sé lo que quieras ser... sobre todo buena gente.

Últimos posts Angel Sierra (Ver todos)

7 comentarios en «Fancier Author Box (o cómo añadir un atractivo recuadro de autor a tu blog)»

    1. Angel Sierra Autor

      ¡Buenos días! Perdón por la tardanza en responder, he estado unos días bastante ocupado.Vamos a ello. Entiendo te refieres a la foto de autor que aparece en el recuadro. Resulta que Fancier Author Box no permite incorporar a tus datos una foto cualquiera elegida por ti mismo (creo que la versión de pago sí que lo permite), sino que «toma prestada» la foto que tengas predefinido en tu cuenta de gravatar (la misma que por ejemplo se utiliza para los comentarios). Por tanto sería necesario que, si no lo tienes ya, te crees un usuario en este sistema http://www.gravatar.com, (que eso sí, permite utilizar la misma cuanta que tengas en wordpress.com), y que el perfil del autor en tu blog (básicamente el correo electrónico) sea equivalente. Con eso debería ser suficiente. De todas formas si tienes dudas sobre como hacerlo, o te encuentras algún problema, me dices.

      Un saludo.

      1. desdelprobador

        Hola Angel,
        Gracias por tu respuesta. Ya tenía la cuenta en Gravatar, pero me pasa una cosa rara, desde el movil se ve perfecta la foto, pero desde pc no 🙁 Imagino que eso es tema de diseño o algo así? de la plantilla?
        Un saludo,

        1. Angel Sierra Autor

          Buenas Patricia. He revisado tu Web y efectivamente existe un problema que hace que este pluging «choque» parcialmente con tu tema o con alguno de los otros plugins que tienes instalados. En realidad no es que no salga tu foto, si te fijas bien sale, pero al principio del todo de la pagina, totalmente a la izquierda. Eso sucede por un problema con las capas, y la culpa parece una capa mal cerrada en las secciones anteriores. En la versión móvil no sucede porque el tema de tu Blog utiliza un formato diferente para presentar en móvil, y con ese no existe el problema. Creo que simplemente cerrando la «capa perdida» a mano dentro del código del pluging de fancier se resolvería el problema, pero esto requiere un poco más de trasteo, aparte que sin poder yo probarlo antes no puedo asegurarlo al 100%.

          1. desdelprobador

            Hola Angel,
            Muchas gracias por las molestias que te estás tomando.
            Yo no me atrevo a ticar nada porque sinceramente creo que la liare más. Y si desinstalo e instalo de nuevo el plugging?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.