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.
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í:
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:
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.
Tras este paso, asigna una imagen a cada categoría.
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.
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. 😉
