Caja de autor condicional – snippet php para WordPress

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.

Caja de autor con php
Caja de autor condicional con 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.

  1. 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).
  2. Modifica también los nombres de usuario en el código.
  3. Pon la URL de tus imágenes, en el Alt pones el nombre de tu usuario.
  4. Modifica el texto con los estudios de tu usuario.
  5. 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;
}

Resultado final de la caja de autor mostrada

Caja de autor con php
Resultado de la caja de autor

Deja un comentario

Tu mail será tratado por el responsable, David Cuesta, con finalidad de avisos automáticos de comentarios o contacto directo (no comercial) y con legitimización por tu parte.