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.
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.
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.
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.
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() ) {
//author box code goes here
}
}
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( '' ) ) {
//author box code goes here
?>
<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 );
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;
}
Primero partimos de iconos normales o texto (en lugar de iconos chulos). Pero aquí tenemos nuestro código definitivo:
/**
* Changing the AuthorBox in WordPress
*/
//Change Default Method Contacts in User Profile
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' );
//Load Fontawesome
function themeprefix_fontawesome_styles() {
wp_register_style( 'fontawesome' , '//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css', '' , '4.4.0', 'all' );
wp_enqueue_style( 'fontawesome' );
}
add_action( 'wp_enqueue_scripts', 'themeprefix_fontawesome_styles' );
function themeprefix_alt_author_box() {
if( is_single( '' ) ) {
//author box code goes here
?>
<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 );
Mola, ¿verdad? 😉
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.
