Poner una caja con el autor es algo muy importante de cara al SEO, sobre todo para temáticas YMYL, relacionadas con esos temas que requieren una autoridad especial al ser tratados.
Si en tu blog o el de tu web escriben distintos profesionales, querrás que cada post tenga la caja de dicho profesional.
Existen algunos plugins como Simple Author Box que te ayudan a hacerlo, pero si quieres personalizarlo lo mejor es insertar una caja de autor condicional usando un snippet de código en PHP.
Qué necesitamos para crear el Snippet
Necesitarás lo siguiente:
- Plugin de inserción de código. En mi caso uso el tema GeneratePress Premium, con su módulo de «Elementos» puedes añadir un hook de código dónde tú lo desees. Podrías usar algún otro plugin que te permita insertar código conde quieras. En este caso al final del contenido de los posts.
- Imagen del autor: una foto que pese poco del autor del post.
- Resumen de los logros académicos del autor: texto corto que indique sus estudios y número de colegiado.
- Enlace a linkedin.
Snippet de Código para mostrar el autor de un post de forma condicional usando PHP y HTML
Para que quedara perfecto primero hice las cajas en WordPress y luego copié el código, así ya trae las clases CSS de los bloques.
Importante revisar las instrucciones de uso tras el código.
<?php $post_id = get_the_ID(); $author_id = get_post_field( 'post_author', $post_id ); $AlvaroCuesta = 1; $ArturLago = 7; if($author_id == $AlvaroCuesta) echo ' <div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns cajadeautor--blog__div"> <div class="wp-block-column" style="flex-basis:33.33%"> <figure class="wp-block-image size-full is-style-rounded"><img src="/wp-content/uploads/2022/10/Alvaro-Cuesta.jpg" alt="Alvaro Cuesta Podólogo"/></figure> </div> <div class="wp-block-column" style="flex-basis:66.66%"> <p class="cajadeautor--blog__p-h2"><strong>Álvaro Cuesta, Podólogo</strong></p> <p>Graduado en Medicina podológica/Podología por la Universidade da Coruña. Master en Nutrición Deportiva por European Quality Formación. Colegiado número 987 por el Colegio de podólogos oficial de Galicia.</p> <ul class="wp-container-2 wp-block-social-links"><li class="wp-social-link wp-social-link-linkedin cajadeautor--blog__linkedin wp-block-social-link" style="width: fit-content;"><a href="https://www.linkedin.com/in/%C3%A1lvaro-cuesta-clinicapegadas/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z"></path></svg><span class="wp-block-social-link-label screen-reader-text">LinkedIn</span></a></li></ul> </div> '; if($author_id == $ArturLago) echo ' <div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns cajadeautor--blog__div"> <div class="wp-block-column" style="flex-basis:33.33%"> <figure class="wp-block-image size-full is-style-rounded"><img src="/wp-content/uploads/2022/10/Artur-Lago.jpg" alt="Artur Lago"/></figure> </div> <div class="wp-block-column" style="flex-basis:66.66%"> <p class="cajadeautor--blog__p-h2"><strong>Artur Lago, Podólogo</strong></p> <p>Titulado en Podología, y quiromasajista por la Escuela Europea Parasanitaria.</p> <ul class="wp-container-2 wp-block-social-links"><li class="wp-social-link wp-social-link-linkedin cajadeautor--blog__linkedin wp-block-social-link" style="width: fit-content;"><a href="https://www.linkedin.com/in/artur-lago-ram%C3%B3n-8a1b57210/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z"></path></svg><span class="wp-block-social-link-label screen-reader-text">LinkedIn</span></a></li></ul> </div> </div> '; else echo '' ?>
Instrucciones de uso
Todo lo que sale en negrita deberás modificarlo.
- Modifica los nombres de usuario y el ID para que coincida con tus usuarios de WordPress (el ID lo ves editando a los usuarios, en la URL).
- Modifica también los nombres de usuario en el código.
- Pon la URL de tus imágenes, en el Alt pones el nombre de tu usuario.
- Modifica el texto con los estudios de tu usuario.
- Modifica el enlace a Linkedin para que lleve al perfil del usuario en cuestión.
Añadir clases CSS para mostrarlo con un diseño personalizado
Si quieres personalizar el diseño de la caja, puedes usar estas clases CSS que ya van en el código
.cajadeautor--blog__div { padding: 20px; border: 2px solid #367bbe; border-radius:10px; } .cajadeautor--blog__linkedin svg { color: white; } .cajadeautor--blog__div .wp-block-column { padding-right: 20px; } .cajadeautor--blog__p-h2 { font-size: 20px; }