Caja de autor en WordPress: cómo socializarla si usas un tema Genesis

La caja de autor en WordPress es un elemento al que muchas veces no se le presta la atención que se merece y no se aprovecha el potencial que tiene.

A través de la caja de autor de WordPress no solo podemos contar quiénes somos y cómo ayudamos a nuestros potenciales clientes, sino que nos permite mostrar información de contacto, como la web, el email y los perfiles de redes sociales.

Puesto que esta funcionalidad es visible al final de cada uno de los artículos que publicamos en el blog, cuanto más optimizada esté mejor, ¿verdad?

Bien, pues en este post vamos a ver cómo socializar la caja de autor en WordPress en temas Genesis. En concreto, voy a contarte cómo incluir la información de tus redes sociales, web y email, y editar la meta información para que aumente tu capacidad de conversión, tanto de potenciales clientes como de seguidores y suscriptores.

¡A socializar se ha dicho! 😉

Cómo mostrar la caja de autor en WordPress con tema Genesis

Hay 2 formas de mostrar la caja de autor en WordPress cuando usamos un tema Genesis de HTML5.

La primera de ellas es hacerlo a través de un filtro en functions.php, como te muestro a continuación:

add_filter( 'get_the_author_genesis_author_box_single', '__return_true' );

Y la segunda, a través del Perfil de usuario en el Escritorio de WordPress.

Te lo cuento en detalle.

Mostrar la caja de autor en WordPress en el Escritorio

Cuando aplicas el filtro de arriba al archivo functions.php de tu Child Theme, la caja de autor se mostrará para todos los usuarios en todos tus posts.

caja de autor en wordpress

Y si no lo añades, puedes hacerlo a través de la edición del “usuario” y definir para qué usuarios quieres que se muestre.

habilitar caja de autor en wordpress

La información que se muestre en la caja de autor será tu gravatar de usuario, nombre y cualquier dato biográfico que incluyas en tu perfil.

caja de autor en wordpress

Cambiar la información de contacto de la caja de autor

Una vez que estás dentro de tu perfil de usuario, verás que hay varios campos de información de contacto, entre ellas las cuentas de redes sociales, que puedes quitar o añadir.

Estos métodos de contacto se pueden modificar mediante los métodos de contacto de usuario (user_contactmethods).

function themeprefix_modify_user_contact_methods( $user_contact ){   /* Add user contact methods */   $user_contact['pinterest'] = __( 'Pinterest URL' );   $user_contact['linkedin'] = __( 'LinkedIn URL' );   /* Remove user contact methods */   unset($user_contact['aim']);   unset($user_contact['jabber']);   unset($user_contact['yim']);   return $user_contact;     }  add_filter( 'user_contactmethods', 'themeprefix_modify_user_contact_methods' );

Aquí, puedes modificar las cuentas. En mi caso, estoy quitando AIM, Yahoo y Jabber mediante el campo unset y voy a añadir campos de contacto de Pinterest y LinkedIn, especificándolos como información meta.

El resultado es un perfil de usuario más actualizado.

¡Ya sé cómo mostrar un perfil de usuario en WP más actualizado! Clic para tuitear

Crear y mostrar una nueva caja de autor en WordPress

Lo primero que tenemos que hacer es quitar la actual caja de autor e indicar que queremos mostrar una nueva. Para ello, añade este código en functions.php:

function themeprefix_alt_author_box() {   if( is_single() ) {   }  }  remove_action( 'genesis_after_entry', 'genesis_do_author_box_single', 8 );  add_action( 'genesis_after_entry', 'themeprefix_alt_author_box', 8 ); //change hook for position

Fíjate que la acción “remove_action” se refiere al webhook “genesis_after_entry”, que es el sitio habitual donde se coloca la caja de autor en los Child Themes Genesis.

Pero puede ocurrir que en tu Child Theme, el webhook sea otro. Si es el caso y no te funciona, dímelo en los comentarios y ayudo. 🙂

Lo que estamos haciendo es añadir una nueva función para nuestra caja de autor alternativa y quitar la actual. Además, podemos elegir que la nueva caja de autor se muestre solo en algunos posts determinados.

A continuación, vamos a ir mejorando nuestra caja de autor, añadiendo el título, la Bio, y los enlaces a las redes sociales de nuestro perfil de usuario.

Este código, verifica que perfiles se han rellenado, y si están rellenos, los muestra. Sustituye el código anterior con el siguiente:

function themeprefix_alt_author_box() {   if( is_single( '' ) ) {   ?>   <div class="author-box"><?php echo get_avatar( get_the_author_meta( 'ID' ), '70' ); ?>   <div class="about-author"><h4>Sobre <?php echo get_the_author(); ?></h4><p><?php echo get_the_author_meta( 'description' ); ?>   </div>   <ul class="social-links">   <?php if ( get_the_author_meta( 'facebook' ) != '' ): ?>   <li><a href="<?php echo get_the_author_meta( 'facebook' ); ?>"><i class="fa fa-facebook"></i></a></li>   <?php endif; ?>   <?php if ( get_the_author_meta( 'twitter' ) != '' ): ?>   <li><a href="https://twitter.com/<?php echo get_the_author_meta( 'twitter' ); ?>"><i class="fa fa-twitter"></i></a></li>   <?php endif; ?>   <?php if ( get_the_author_meta( 'googleplus' ) != '' ): ?>   <li><a href="<?php echo get_the_author_meta( 'googleplus' ); ?>"><i class="fa fa-google-plus"></i></a></li>   <?php endif; ?>   <?php if ( get_the_author_meta( 'linkedin' ) != '' ): ?>   <li><a href="<?php echo get_the_author_meta( 'linkedin' ); ?>"><i class="fa fa-facebook"></i></a></li>   <?php endif; ?>   <?php if ( get_the_author_meta( 'pinterest' ) != '' ): ?>   <li><a href="<?php echo get_the_author_meta( 'pinterest' ); ?>"><i class="fa fa-facebook"></i></a></li>   <?php endif; ?>   <?php if ( get_the_author_meta( 'github' ) != '' ): ?>   <li><a href="<?php echo get_the_author_meta( 'github' ); ?>"><i class="fa fa-github"></i></a></li>   <?php endif; ?>   <?php if ( get_the_author_meta( 'user_email' ) != '' ): ?>   <li><a href="mailto:<?php echo get_the_author_meta( 'user_email' ); ?>"><i class="fa fa-envelope-o"></i></a></li>   <?php endif; ?>   <?php if ( get_the_author_meta( 'user_url' ) != '' ): ?>   <li><a href="<?php echo get_the_author_meta( 'user_url' ); ?>"><i class="fa fa-laptop"></i> </a></li>   <?php endif; ?>   </ul>   </div>   <?php    }  }  remove_action( 'genesis_after_entry', 'genesis_do_author_box_single', 8 );  add_action( 'genesis_after_entry', 'themeprefix_alt_author_box', 8 );

modificar código de caja de autor en wordpress

Todo lo que necesitamos ahora es aplicar algunos estilos CSS a los ítems de la lista por medio de la lista no ordenada de estilos de «.social-links».

/* For FontAwesome Icon Stylin */  .social-links {   overflow:auto;   margin-top:10px;  }  .social-links li {   list-style-type: none;   float: left;  }  .social-links a {   border-bottom: none;  }  .social-links i {   background: #205D7A;   color: #fff;   width: 40px;   height: 40px;   border-radius: 20px;   font-size: 25px;   text-align: center;   margin-right: 10px;   padding-top: 15%;   transition-property: opacity;   transition-delay: 0.3s;   transition-duration: .5s;  }  .social-links i:hover {   opacity:.7;  }

Mostrar nuevos métodos de contacto en una nueva caja de autor en WordPress con iconos sociales molones

Primero partimos de iconos normales o texto (en lugar de iconos chulos). Pero aquí tenemos nuestro código definitivo:

Este es el código resultante después de ir haciendo todas las acciones anteriores. Cuando acabes con todos los pasos, este (y solo este) es el código que deberás tener en tu functions.php
/**   * Changing the AuthorBox in WordPress   */  function themeprefix_modify_user_contact_methods( $user_contact ){   /* Add user contact methods */   $user_contact['pinterest'] = __( 'Pinterest URL' );   $user_contact['linkedin'] = __( 'LinkedIn URL' );    /* Remove user contact methods */   unset($user_contact['aim']);   unset($user_contact['jabber']);   unset($user_contact['yim']);   return $user_contact;  }  add_filter( 'user_contactmethods', 'themeprefix_modify_user_contact_methods' );    function themeprefix_fontawesome_styles() {   wp_register_style( 'fontawesome' ,   wp_enqueue_style( 'fontawesome' );  }  add_action( 'wp_enqueue_scripts', 'themeprefix_fontawesome_styles' );   function themeprefix_alt_author_box() {   if( is_single( '' ) ) {     ?>   <div class="author-box"><?php echo get_avatar( get_the_author_meta( 'ID' ), '70' ); ?>   <div class="about-author"><h4>Sobre <?php echo get_the_author(); ?></h4><p><?php echo get_the_author_meta( 'description' ); ?>   </div>   <ul class="social-links">   <?php if ( get_the_author_meta( 'facebook' ) != '' ): ?>   <li><a href="<?php echo get_the_author_meta( 'facebook' ); ?>"><i class="fa fa-facebook"></i></a></li>   <?php endif; ?>   <?php if ( get_the_author_meta( 'twitter' ) != '' ): ?>   <li><a href="https://twitter.com/<?php echo get_the_author_meta( 'twitter' ); ?>"><i class="fa fa-twitter"></i></a></li>   <?php endif; ?>   <?php if ( get_the_author_meta( 'googleplus' ) != '' ): ?>   <li><a href="<?php echo get_the_author_meta( 'googleplus' ); ?>"><i class="fa fa-google-plus"></i></a></li>   <?php endif; ?>   <?php if ( get_the_author_meta( 'linkedin' ) != '' ): ?>   <li><a href="<?php echo get_the_author_meta( 'linkedin' ); ?>"><i class="fa fa-facebook"></i></a></li>   <?php endif; ?>   <?php if ( get_the_author_meta( 'pinterest' ) != '' ): ?>   <li><a href="<?php echo get_the_author_meta( 'pinterest' ); ?>"><i class="fa fa-facebook"></i></a></li>   <?php endif; ?>   <?php if ( get_the_author_meta( 'github' ) != '' ): ?>   <li><a href="<?php echo get_the_author_meta( 'github' ); ?>"><i class="fa fa-github"></i></a></li>   <?php endif; ?>   <?php if ( get_the_author_meta( 'user_email' ) != '' ): ?>   <li><a href="mailto:<?php echo get_the_author_meta( 'user_email' ); ?>"><i class="fa fa-envelope-o"></i></a></li>   <?php endif; ?>   <?php if ( get_the_author_meta( 'user_url' ) != '' ): ?>   <li><a href="<?php echo get_the_author_meta( 'user_url' ); ?>"><i class="fa fa-laptop"></i> </a></li>   <?php endif; ?>   </ul>   </div>   <?php    }  }  remove_action( 'genesis_after_entry', 'genesis_do_author_box_single', 8 );  add_action( 'genesis_after_entry', 'themeprefix_alt_author_box', 8 );

modificar caja de autor en wordpress

Mola, ¿verdad? 😉

Descubre cómo mostrar iconos molones de redes, web y email en tu caja de autor Clic para tuitear

Y con esto, hemos terminado de socializar nuestra caja de autor en WordPress con tema Genesis. Siguiendo estos pasos, tendrás una caja de autor vistosa y tus lectores podrán ponerse en contacto contigo de una forma fácil y rápida.

¿Tienes personalizada de esta forma tu caja de autor? ¿Te has liado con algún paso? Te espero en los comentarios.

Descubre lo que
necesitas ahora
para vender más

Realiza el Quiz ahora y conocerás el resultado al instante

¿Quieres saber qué herramientas uso en mi negocio, cuáles recomiendo a mis clientes y cuál necesitas tú ahora mismo, en el momento actual en el que te encuentras, para vender más o mejor en tu negocio digital?

Realiza ahora mismo el quiz tecnológico que he preparado, para determinar tu fase actual, y decirte en el instante en que deberías enfocarte ahora mismo para vender más o de la mejor forma posible

Mockup escritorio herramientas
Ir arriba