• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Asignar una imagen a las categorías con Advanced Custom Fields y mostrarla en la página de archivos de Essence Pro

Descubre en este tutorial cómo usar Advanced Custom Fields para asignar y mostrar la imagen de la categoría en la página de archivos del child theme de Genesis Essence Pro.

Una de las características del tema Essence Pro es el apartado superior donde muestra una imagen hero bajo el título.

imagen cabecera hero Essence Pro
Ejemplo de la cabecera hero del tema Essence Pro

En un tutorial anterior te expliqué como combinar el tutorial que te permite añadir una imagen destacada a las categorías con poco de código para mostrarlas en la cabecera de Essence Pro.

En este caso, vas a aprender cómo conseguir lo mismo pero usando Advanced Custom Fields si ya estás usando el plugin en el proyecto, ahorrándote así bastante código.

El resultado final sería algo así:

imagen destacada categoria pagina archivos Essence Pro
Imagen destacada categoria pagina archivos Essence Pro

Vamos a ver cómo puedes conseguirlo:

Pasos para para mostrar la imagen destacada de las categorías en la página de archivos de Essence Pro usando Advanced Custom Field

1. Crea un campo personalizado de relación con ACF

Si no lo has hecho ya, descarga e instala el plugin Advanced Custom Fields. Con la versión gratuita del repositorio de WordPress es suficiente en este caso.

Una vez activado, ve a Campos personalizados > Añadir nuevo y crea un campo de imagen.

Rellena los campos de la siguiente forma:

imagen destacada categoria Advanced Custom Fields
Ajustes campo personalizado de imagen en ACF

Puedes personalizar alguno de ellos a tu gusto (por ejemplo, hacerlo obligatorio), pero respeta los campos que están en recuadros rojos para que el código de los siguientes pasos funcione correctamente. 😉

Esto sería:

  • Nombre del campo: imagen_categoria
  • Formato de retorno: array de imagen

Una vez que hayas creado y configurado el campo personalizado, indica en Ubicación > Reglas que quieres que se muestre en la «taxonomía» de categoría.

regla imagen destacada categoria Advanced Custom Fields
Seleccionar ubicación para mostrar el campo

Tras este paso, asigna una imagen a cada categoría.

elegir imagen destacada categoria Advanced Custom Fields

Ahora, crea un fichero category.php en la raíz del child theme con el siguiente código:

Para ver este código y los otros 1801 snippets de esta web,
identifícate o suscríbete aquí.

Ya lo tienes.

Ahora la página de archivos de las categorías de Essence Pro muestra la imagen que has asignado a cada categoría.

Imagen destacada categoria pagina archivos Essence Pro

Conclusiones

Ahora ya sabes cómo mostrar la imagen destacada de una categoría en la página de archivos en el child theme de Genesis Essence Pro usando Advanced Custom Fields.

Además, este ejemplo te puede servir de inspiración para usar esta estrategia en proyectos en los que uses Advanced Custom Fields independientemente del child theme.

Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.

Todo ventajas de ser suscriptor. 😉

Advanced Custom Fields CPT Essence Pro Genesis Framework PHP

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?