Descubre cómo añadir automáticamente una clase CSS a cada elemento del bloque de listado de contenido basándose en el valor de un campo personalizado.
El bloque nativo de WordPress que permite mostrar un listado de entradas (query block) es muy potente y flexible. Una de las funcionalidades más útiles es poder personalizar la apariencia de cada entrada individualmente mediante clases CSS.
En este tutorial te voy a mostrar cómo puedes añadir automáticamente una clase CSS a cada elemento <li> del bloque de listado de contenido basándose en el valor de un campo personalizado de cada entrada.
Esto es especialmente útil cuando quieres aplicar estilos diferentes según el estado, categoría o cualquier otro valor personalizado de cada entrada.
Código para añadir clase CSS basada en campo personalizado
Añade el siguiente snippet al fichero functions.php o a tu plugin de funcionalidades:
Para ver este código y los otros 2107 snippets de esta web,
identifícate o suscríbete aquí.
El código de arriba:
- Utiliza el filtro
render_block_core/queryque se ejecuta cada vez que se renderiza un bloque de listado de contenido. Este filtro nos permite modificar el HTML generado antes de que se muestre al usuario. - Verifica que el plugin Advanced Custom Fields (ACF) esté activo antes de intentar obtener el campo. Para este ejemplo usamos campo creado con ACF.
- Usa la clase
WP_HTML_Tag_Processornos permite procesar el HTML de forma segura y eficiente. Iteramos sobre cada elemento `<li>` del listado. - WordPress añade automáticamente una clase con el formato
post-{ID}a cada elemento del listado. Usamos una expresión regular para extraer el ID del post. - Obtenemos el valor del campo personalizado para el post específico.
Si queremos personalizar el código solo tenemos que cambiar el nombre del campo personalizado. Para ello modifica esta línea para usar tu campo personalizado:
$estado_curso = get_field( 'tu_campo_personalizado', $post_id );Ya lo tienes, ahora solo te queda aplicar el CSS que quieras en base al campo personalizado.
Conclusiones
Gracias a este código puedes añadir automáticamente clases CSS a cada elemento del bloque de listado de contenido basándose en los valores de campos personalizados, lo que te permite crear diseños dinámicos y personalizados sin esfuerzo manual.
Esta técnica es especialmente útil para sitios web que manejan diferentes estados, categorías o tipos de contenido que requieren estilos visuales distintos.
Si tienes alguna duda o quieres que expanda este snippet en un tutorial paso a paso, déjame un comentario aquí mismo o envíamelo a través del formulario de contacto.
Todo ventajas de ser suscriptor. 😉
