En esta entrada te explico como crear una caja de Autor que se añadirá a todas tus entradas de WordPress, ayudando así a mejorar el EEAT de tu sitio web. Información concisa, clara, con todo el código, sin plugins y grautita.
- Tiempo de implementación:15/20 min
- Nivel de dificultad: Fácil
Esta implementación además inserta el Schema Person en cada entrada, con los datos del autor correspondiente.
Añadir campos personalizados en la pantalla de edición del usuario
Añade el siguiente código en el archivo functions.php
de tu tema hijo:
function custom_user_profile_fields($user) {
?>
<h3>Configuración del Author Box</h3>
<table class="form-table">
<tr>
<th><label for="author_bio">Bio del Autor</label></th>
<td>
<textarea name="author_bio" id="author_bio" rows="5" cols="30"><?php echo esc_textarea(get_the_author_meta('author_bio', $user->ID)); ?></textarea><br />
<span class="description">Introduce tu biografía para el Author Box.</span>
</td>
</tr>
<tr>
<th><label for="show_author_box">Mostrar Author Box</label></th>
<td>
<input type="checkbox" name="show_author_box" id="show_author_box" value="yes" <?php checked(get_the_author_meta('show_author_box', $user->ID), 'yes'); ?> />
<span class="description">Marca esta casilla para mostrar el Author Box al final de tus entradas.</span>
</td>
</tr>
<tr>
<th><label for="author_photo_url">URL de la Foto del Autor</label></th>
<td>
<input type="text" name="author_photo_url" id="author_photo_url" value="<?php echo esc_attr(get_the_author_meta('author_photo_url', $user->ID)); ?>" class="regular-text" /><br />
<span class="description">Introduce la URL de tu foto para el Author Box.</span>
</td>
</tr>
</table>
<?php
}
add_action('show_user_profile', 'custom_user_profile_fields');
add_action('edit_user_profile', 'custom_user_profile_fields');
function save_custom_user_profile_fields($user_id) {
if (!current_user_can('edit_user', $user_id)) {
return false;
}
update_user_meta($user_id, 'author_photo_url', $_POST['author_photo_url']);
update_user_meta($user_id, 'author_bio', $_POST['author_bio']);
update_user_meta($user_id, 'show_author_box', $_POST['show_author_box']);
}
add_action('personal_options_update', 'save_custom_user_profile_fields');
add_action('edit_user_profile_update', 'save_custom_user_profile_fields');
Crear el Author Box
Añade el siguiente código en el archivo functions.php
de tu tema hijo:
function display_author_box($content) {
if (is_single() && get_the_author_meta('show_author_box') == 'yes') {
$author_id = get_the_author_meta('ID');
$author_name = get_the_author();
$author_linkedin = get_the_author_meta('linkedin', $author_id); // Obtener la URL de LinkedIn
$author_bio = get_the_author_meta('author_bio', $author_id);
$author_posts_url = get_author_posts_url($author_id);
$photo_url = get_the_author_meta('author_photo_url', $author_id);
$author_box = '<div class="author-box" itemscope itemtype="http://schema.org/Person">';
$author_box .= '<meta itemprop="name" content="' . esc_attr($author_name) . '">';
if (!empty($author_linkedin)) {
$author_box .= '<meta itemprop="url" content="' . esc_url($author_linkedin) . '">';
}
if (!empty($photo_url)) {
$author_box .= '<a href="' . esc_url($author_posts_url) . '"><img src="' . esc_url($photo_url) . '" alt="' . esc_attr($author_name) . '" itemprop="image" /></a>';
}
$author_box .= '<div class="author-bio" itemprop="description">' . esc_html($author_bio) . ' ';
$author_box .= '<a href="' . esc_url($author_posts_url) . '">Ver más</a></div>';
$author_box .= '</div>';
$content .= $author_box;
}
return $content;
}
add_filter('the_content', 'display_author_box');
Agregar estilos
Es poco ortodoxo, pero los vamos a añdir a través de functions.php:
function author_box_styles() {
echo '
<style>
.author-box {
display: flex;
border: 1px solid #e5e5e5;
padding: 20px;
margin-top: 20px;
}
.author-box img {
margin-right: 20px;
}
.author-box .author-bio {
flex: 1;
}
</style>
';
}
add_action('wp_head', 'author_box_styles');