¿Cómo agregar un campo de autor en el tema GeneratePress? – Aprendermarketing.es/

GeneratePress es uno de los temas ligeros y de carga rápida para sitios de WordPress. Aunque hay una versión gratuita disponible en el repositorio de temas de WordPress, tiene muchas limitaciones. El cuadro de autor es una cosa importante que extrañará al crear publicaciones de blog en el tema GeneratePress. Sin embargo, es muy fácil crear un campo de autor en el tema GeneratePress y personalizar el aspecto de su diseño.

¿Qué necesitas para crear un cuadro de autor?

Aquí están las cosas que necesita:

Tenga en cuenta que necesita la versión gratuita o premium de GenerateBlocks para instalar cualquier demostración desde la sección Biblioteca del sitio, por lo que el complemento GP Premium es lo único que necesita para crear un cuadro de autor.

Agregue un campo de autor debajo del contenido de la publicación

El campo de autor, explicado en este tutorial, contiene tres elementos: una imagen de autor, una descripción y un título. Si es necesario, también puede agregar enlaces sociales debajo de la descripción como enlaces de texto o como íconos. Siga los pasos a continuación para agregar un campo de autor debajo del contenido de la publicación y arriba del contenedor de comentarios.

Paso 1 – Preparando la imagen de autor

El primer paso es mantener su imagen de autor lista para usar en la configuración. Tienes dos opciones:

• gravatar – Si su correo electrónico de administrador de WordPress está asociado con una cuenta de gravatar.com, asegúrese de cargar una foto decente allí, luego vaya a la sección Configuración> Discusión en el panel de administración y habilite la opción Mostrar avatares.
• Imagen personalizada – almacena una imagen PNG o JPEG de tu foto con un tamaño de 200 x 200 píxeles.

Nota: También puede usar un complemento para usar una imagen de avatar personalizada en lugar de un gravatar. Sin embargo, aún necesita una imagen de perfil claramente visible para cargar. En este tutorial, usamos una imagen personalizada sin un complemento adicional, que es adecuada para un blog de un solo autor. Si tiene varios autores, use gravatar y opciones dinámicas como se explica en el paso 5.

Paso 2 – Activar elementos

Elements es un módulo que viene con el complemento premium GeneratePress. Debe habilitar esto para insertar ganchos y bloques en el diseño.

• Asegúrese de tener instalado y activado el complemento GeneratePress GP Premium.
• Luego ve a la pestaña "Apariencia > GeneratePress".
• Busque el módulo Elementos y actívelo.

Nota: "Deshabilitar elementos" es un módulo diferente y asegúrese de haber habilitado el módulo "Elementos" correctamente.

Paso 3: crea un gancho de bloque de cuadro de autor

Una vez que el módulo Elementos esté activado, agregará un elemento de menú a la barra lateral izquierda del panel de administración.

• Vaya a la sección Apariencia > Elementos y haga clic en el botón Agregar nuevo elemento.

• Esto mostrará una ventana emergente "Seleccionar tipo de elemento". Seleccione "Bloquear" en el menú desplegable y haga clic en el botón "Crear".

Paso 4: complete los detalles para el gancho

• Vaya a la pestaña Elementos en la sección Configuración de la barra lateral derecha.
• Expanda la sección Bloquear elemento y complete los detalles a continuación:
  • Ancho del editor: déjelo por defecto al 100%
  • Nombre del enlace – before_comments_container

Como se mencionó, el gancho "before_comments_container" es para insertar el campo del autor antes del campo de comentarios. Puede elegir una posición diferente del gancho si desea cambiar la posición del campo del autor en su diseño. La prioridad 10 se usa para mostrar el autor como el primer elemento en el enlace Asegúrese de utilizar una prioridad superior a 10 para todos los demás "Elementos" que utilicen el mismo enlace.

Paso 5: agregue el contenido del cuadro de autor

Esta es una parte importante y a continuación se muestra cómo se verá la "Vista de lista" final en la configuración final. Este es un cuadro de autor minimalista y puede agregar colores y fondo de acuerdo con su diseño.

• Primero inserte un bloque contenedor, establezca pads de 40px (arriba, abajo, derecha e izquierda) y luego 20px arriba/abajo.
• Agregue un bloque de cuadrícula dentro del contenedor y seleccione la opción de división 1/3 + 2/3.

• En el primer 1/3 de columna, agregue un bloque de imagen y cargue su imagen de perfil tal como está preparado en el paso 1. Si desea utilizar una imagen gravatar, agregue un bloque de imagen y seleccione los siguientes detalles de la sección "Datos dinámicos" en la barra lateral derecha Configuración del bloque.
  • Habilitar datos dinámicos: active este botón Fuente de datos: seleccione la publicación actual Fuente de imagen: seleccione el avatar del autor.
  • Origen del enlace: seleccione un archivo de autor si desea vincularlo; de lo contrario, déjelo en blanco.

• Vaya a la configuración de Espaciado y cambie el radio del borde al 100% para las cuatro esquinas.
• En la segunda columna 2/3, agregue dos bloques con encabezados GenerateBlocks uno debajo del otro. Cambie el primer encabezado a H3, haga clic en el icono de la base de datos "Opciones dinámicas" y seleccione los siguientes detalles.
  • Tipo de texto dinámico: seleccione el nombre del autor de la publicación.
  • Antes del texto, escriba Acerca de.
  • Tipo de vínculo dinámico: seleccione Archivos de autor si desea vincular la página de archivo del autor con el nombre del autor en el campo. De lo contrario, déjelo en blanco si ha deshabilitado el archivo de autor usando complementos como Yoast SEO (debe ser el caso de un blog de un solo autor para evitar contenido duplicado con una página de blog).

• Seleccione el segundo encabezado, cámbielo a Párrafo y agregue las siguientes "Opciones dinámicas".
  • Tipo de texto dinámico: elige un metaautor.
  • Nombre del metacampo: simplemente ingrese una descripción.
  • Antes del texto: déjelo en blanco.
  • Tipo de vínculo dinámico: déjelo en blanco.

Tenga en cuenta que para ambos títulos, simplemente puede completar el texto estático para el nombre del autor y la descripción del autor, lo cual es perfecto para un blog de un solo autor. El ejemplo anterior recuperará dinámicamente el nombre del autor de la publicación y la descripción del perfil de usuario del autor (Usuarios > Perfil > Información biográfica). Utilice estas opciones dinámicas (incluso para el bloque de imágenes) cuando desee agregar dinámicamente los detalles del autor, como en el caso de un blog de varios autores.

Paso 6: agregue colores al campo de autor

Este es un paso opcional porque no necesita colores cuando usa cuadros separados para cada elemento en su diseño. De lo contrario, seleccione el bloque superior del contenedor y cambie el color desde la configuración de la barra lateral derecha. Si elige un fondo oscuro para un contenedor principal, asegúrese de elegir colores claros para el nombre y la descripción del autor.

Paso 7: establezca una ubicación para el campo de autor

Necesita que el campo de autor aparezca en todas las publicaciones del blog.

• Vaya a la pestaña Reglas de visualización que aparece debajo del área de contenido.
• Haga clic en el botón Agregar regla de ubicación en la sección Ubicación y seleccione la opción Publicar en el menú desplegable.
• Mostrará automáticamente un segundo menú desplegable "Todas las publicaciones" y lo dejará como está.

Si es necesario, también puede agregar una exclusión de función de usuario y aplicabilidad para restringir la visualización de su campo de autor. De lo contrario, deja estas dos opciones como están.

Paso 8: publique y verifique su campo de autor

Finalmente, haz clic en el botón "Publicar" y abre cualquier artículo de tu blog en la nueva pestaña del navegador. Deberías ver el cuadro del autor justo encima del contenedor de comentarios según el gancho seleccionado.

Puede marcar la casilla de autor en su teléfono móvil o probar con la opción "Verificar" del elemento del navegador.

Si la alineación no es buena, puede editar el campo de autor en la sección Apariencia > Elementos para agregar los márgenes y el relleno necesarios.

Copie y pegue el código para el campo de autor

Si es perezoso o no puede crear el campo de autor como se explicó anteriormente, siga los primeros 4 pasos. Luego simplemente copie y pegue el siguiente código en el área de contenido (debajo del título). Verá un campo de autor creado exactamente como se muestra arriba. Agregue su título, regla de visualización de ubicación y haga clic en el botón 'Publicar'.

<!-- wp:generateblocks/container {"uniqueId":"02d854d8","backgroundColor":"#000000","textColor":"var(u002du002dbase-3)","isDynamic":true,"blockVersion":3,"useInnerContainer":true,"alignmentMobile":"center","marginTop":"20","marginBottom":"20","paddingTop":"40","paddingRight":"40","paddingBottom":"40","paddingLeft":"40","paddingSyncUnits":true} -->
<!-- wp:generateblocks/grid {"uniqueId":"47bce4c6","columns":2,"horizontalGap":20,"verticalAlignment":"center","verticalGapMobile":20,"isDynamic":true,"blockVersion":3,"useLegacyRowGap":true} -->
<!-- wp:generateblocks/container {"uniqueId":"f4a9fdfa","isGrid":true,"gridId":"47bce4c6","isDynamic":true,"blockVersion":3,"useInnerContainer":true,"sizing":{"width":"22%","widthMobile":"100%"}} -->
<!-- wp:generateblocks/image {"uniqueId":"7f7f29ab","mediaId":87,"sizeSlug":"full","width":"100px","height":"100px","objectFit":"contain","alignment":"center","borderRadiusTopRight":"100","borderRadiusBottomRight":"100","borderRadiusBottomLeft":"100","borderRadiusTopLeft":"100","borderRadiusUnit":"%","useDynamicData":true,"dynamicContentType":"author-avatar"} /-->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"9d875209","isGrid":true,"gridId":"47bce4c6","flexBasisUnit":"%","removeVerticalGapMobile":true,"isDynamic":true,"blockVersion":3,"useInnerContainer":true,"sizing":{"width":"78%","widthMobile":"100%"}} -->
<!-- wp:generateblocks/headline {"uniqueId":"92f52333","element":"h3","blockVersion":2,"fontSize":18,"marginBottom":"10","backgroundColor":"","textColor":"var(u002du002dbase-3)","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":"","className":"","gpDynamicTextType":"post-author","gpDynamicTextReplace":"Post author name","gpDynamicTextBefore":"About "} -->
<h3 class="gb-headline gb-headline-92f52333 gb-headline-text">Post author name</h3>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"ff3f4ce4","element":"p","blockVersion":2,"fontSize":17,"marginBottom":"15","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":"","className":"","gpDynamicTextType":"user-meta","gpDynamicTextReplace":"User meta","gpDynamicTextCustomField":"description"} -->
<p class="gb-headline gb-headline-ff3f4ce4 gb-headline-text">User meta</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->