Cómo agregar un cuadro de autor en el tema GeneratePress. [2021]

¿Sabe que puede agregar un cuadro de autor en el tema Generatepress sin instalar un complemento adicional?

Entonces, para ayudar a los blogueros, he preparado una guía detallada sobre cómo agregar un cuadro de autor usando la función Elemento del tema Generatepress.

Sé que muchos de ustedes preguntan por qué no agregar un complemento de cuadro de autor en WordPress y simplificar el trabajo. Porque la instalación de un complemento adicional puede afectar la velocidad de su sitio web. Es mejor usar algún código HTML y CSS personalizado para generar el cuadro de autor usando la característica nativa Generatepress Element.

Nota: solo puede usar este truco si tiene instalado el complemento premium Generatepress en su sitio web de WordPress.

¿Por qué necesita un cuadro de autor en su sitio web?

Agregar un cuadro de autor al final de la publicación del blog ayuda a su lector y motor de búsqueda como Google, Bing a conocer al hombre detrás del artículo.

Construye una buena relación y confianza entre el lector y el autor y también ayuda a construir autoridad en la comunidad de Internet.

¿Conoces el algoritmo EAT ? Para obtener una buena clasificación en Google, debe crear una marca desarrollando su experiencia, autoridad y confiabilidad , que es exactamente lo que EAT representa. Author Box es el primer paso para lograrlo.

Pasos para agregar el cuadro de autor en el tema de generatePress.

Antes de agregar el cuadro de autor en su tema Generatepress, debe realizar algunas configuraciones básicas en WordPress.

1. Agregue una foto de perfil y una descripción del autor

Vaya al panel de control de WordPress y haga clic en la sección Usuario . Ahora haga clic en el botón Editar justo debajo del nombre de usuario.

Ahora desplácese hacia abajo y verá una opción llamada " Acerca de usted ". Aquí, en la " Información biográfica ", escriba la descripción de su autor y establezca su imagen de perfil justo debajo de ella.

Nota: También puede agregar un enlace a su página acerca de nosotros en el cuadro Autor usando un truco simple. En la información biográfica pega el enlace en este formato.

<a href=”https://key2blogging.co/about-us/”>página sobre nosotros</a>

De este modo, puede agregar fácilmente texto de anclaje con un enlace en el cuadro Autor del Tema GeneratePress.

Si no ha agregado el Gravatar, puede hacerlo haciendo clic en el siguiente enlace como se muestra aquí.

Lo redirigirá al sitio web de Gravatar, donde debe crear una cuenta con su dirección de correo electrónico mencionada en WordPress y luego cargar su imagen de perfil allí. Obtendrá automáticamente la foto de perfil en su cuenta de WordPress.

2. Activar módulo Elemento

Para activar el módulo Elemento, vaya a Apariencia > GeneratePress > Elementos > Activar

Si ya lo ha hecho, puede pasar al tercer paso.

3. Crear un nuevo elemento de gancho

Ahora haz clic en la sección Apariencia y verás una opción llamada “ Elemento ”, haz clic en ella. Ahora haga clic en " Agregar nuevo elemento " y seleccione Gancho .

4. Establezca el título como "Cuadro de autor" y pegue el código HTML

Debe configurar el título como Cuadro de autor y pegar el siguiente código HTML en el editor de código.

Copie el siguiente código

 <div class="author-box"> <div class="avatar"> <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?> </div> <div class="author-info"> <h5 class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person"> <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span> </h5> <div class="author-summary"> <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p></div> <div class="author-links"> <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more"></a> </div> </div> </div>

5. Ajuste del gancho de configuración

Después de pegar el código, debe configurar la configuración de Hook. En la opción Hook, seleccione " generar después del contenido " y luego haga clic en " Ejecutar PHP " y establezca la prioridad en " 20 ".

6. Configuración de la regla de visualización

Ahora haga clic en la regla de visualización justo a la derecha de la configuración. Ahora en la Ubicación, seleccione " Todo singular " y en la pestaña Excluir, seleccione " Página principal ".

Ahora ha completado la configuración de Hook. Entonces, presiona el botón publicar .

7. Agregar código CSS

Ahora tienes que diseñar tu caja de autor usando código CSS. Entonces, para hacer eso, vaya a apariencia>> Personalizar>> CSS adicional y pegue el código a continuación, y presione el botón publicar.

Copie el código CSS:

 .author-box { padding: 3%; padding-bottom: 10px; margin-top: 30px; font-size: 0.9em; background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-shadow: 0 9px 28px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); } .author-box .avatar { width: 450px; height: auto; border-radius: 100%; margin-right: 30px; } h5.author-title { margin-bottom: 0.1em; font-weight: 800; } .author-description { line-height: 1.6em } .author-links a { margin-top: -1.5em; font-size: 2em; line-height: 2em; float: left; } @media (max-width: 768px) { .author-box { padding: 20px; padding-bottom: 25px; margin-top: 60px; flex-direction: column; text-align: center; } .author-box .avatar { margin-right: 0; width: 100%; margin-top: -25px; } .author-box .avatar img { max-width: 100px; } .author-links a { float: none; align-self: center; } .author-description { margin-bottom: -0.1em; } }

Felicitaciones , ha agregado con éxito el cuadro Autor en su tema Generatepress sin ningún complemento.

Guía de vídeo:

Nota : si está utilizando la versión gratuita del tema Generatepress, debe agregar el cuadro de autor mediante un complemento.

Conclusión

Ahora hemos cubierto el proceso paso a paso para agregar el cuadro Autor en el tema Generatepress en WordPress. Si tienes alguna duda pregúntame en la sección de comentarios , o conéctame en Twitter .

Si le gusta esta guía, compártala con su comunidad de blogs y aprecie los esfuerzos. Gracias.

Lea también : Las 10 extensiones de Chrome útiles para bloggers