Un cliente nos pide que hagamos una sección que muestre las 3 ultimas noticias de forma dinámica, para colocar ese bloque en algún lugar de la home o bien en cualquier página. Le vamos a desarrollar un shorcode personalizado para que el cliente pueda añadirlo o bien en las paginas que crea con gutenberg, también si utiliza algún constructor visual o incluso si dispone de alguna persona de confianza que entienda como añadir el shortcode a una template de su tema.
Este bloque, el cliente quiere controlar dónde ponerlo, incluso puede utilizar el mismo bloque para mostrar distintas categorías añadiendo en el shorcode únicamente el nombre de la categoría.
¿Qué vamos a hacer?
Según las referencias que nos ha dado el cliente hemos diseñado una aproximación del resultado final esperado (imagen siguiente). El botón de leer más estará siempre oculto y cuando pasemos el raton por encima (hagamos hover), la imagen se oscurece un poco más, se produce una animación con el texto que hace que el texto suba unos cuantos pixeles y aparecerá el botón de leer más. Además queremos que si hacen click en cualquier lado de toda la composición de cada noticia, se hará una redirección hacia la entrada mas detalla.
¿Cómo lo vamos a desarrollar? (Pequeña receta)
Para poder realizar este ejercicio primero tienes que crear 3 entradas con la categoría News o la categoría que quieras o tengas ya creada, después le pones un título a cada entrada y una imagen destacada. Con eso ya tendremos el contenido básico para que visualmente veamos el mismo resultado. En el desarrollo que hice para el cliente real le puse el shortcode con el argumento ‘category_name’ => ‘News’, entonces este bloque para ellos siempre va a mostrar las ultimas entradas con la categoría News. En esta receta he querido ampliar la funcionalidad del shortcode para que lo puedas utilizar con cualquier categoría que ya tengas creada. Simplemente en lugar de poner este shortcode.
[notices-block]
Deberemos utilizar un shortcode mas completo especificando el nombre nuestra categoria tal que así
[notices-block category="News"]
Una vez tengamos todo el contenido creado y todo claro con respecto a cómo tendremos que escribir nuestro shortcode, podemos pasar a copiar el siguiente snippet de código en un archivo del plugin code snippets, o si no esta familiarizado con tener un plugin de funcionalidades, entonces lo pegaremos en el archivo functions.php de nuestro tema hijo. Una vez guardemos los cambios, nuestro WordPress ya puede reconocer el shortcode independientemente de dónde lo coloquemos.
Una de las partes mas importantes que hacen que este shortcode pueda ser personalizado con cualquier categoría es gracias a este código.
Y la guinda del tutorial que hace que cada elemento lleve una clase incremental y que posteriormente podamos manipular mediante el css es gracias a este counter
Imagina todo lo que podemos mostrar con este contenido, anuncios, productos, experiencias, artículos… en definitiva cualquier contenido que tengas en WordPress. Solo variará la forma en la que extraeremos el contenido que queramos mostrar mediante funciones propias de WordPress o si tenemos los datos en campos personalizados a través de funciones de WordPress también. Por último tendremos que presentar la información dentro de la query introduciéndola con un marcado HTML como hemos hecho en el snippet de mas arriba. por ejemplo es muy fácil añadir un grid de productos con su imagen destacada o incluso un slider de imágenes, el titulo, el precio, las categorías…
Te comparto el CSS que he usado yo, con el CSS hay que tener cuidado porque igual no se comporta en tu tema como yo te estoy poniendo aquí, el objetivo de este proyecto siempre ha sido, el añadir una clase incremental (block-notice-0, block-notice-1 y block-notice-2) para luego poder manejar un grid-area sin importarnos el contenido del post
Copia este código CSS y pégalo en tu archivo style.css de tu child theme, en algún plugin tipo simple css o si es solo para probarlo en la hoja de estilos del personalizador llamada css adicional.
Si has seguido todos los pasos anteriores de crear las entradas, luego has puesto el css en tu archivo styles.css y por último has añadido el snippet de php en un archivo nuevo de code snippets… entonces el resultado será parecido a este. Mis pruebas para este tutorial las he hecho con el theme Twenty Twenty. Es posible que tengas que añadir o quitar algo de css si estas utilizando otro tema.
Si inspeccionamos el bloque de notícias podremos ver como se comporta el grid-area con sus margenes y el grid-gap.
Como siempre me gusta, te dejo la compatibilidad de CSS Grid Layout, con mas de un 93% es algo que hay que tener en cuenta si o si en nuestros desarrollos.
Espero que hayas disfrutado de este tutorial y que te sea útil en alguno de tus desarrollos, como has podido comprobar esto puede ser todo lo extenso que uno quiera, porque se le podrían añadir muchísimas funcionalidades extra, estilos o composiciones del grid varios. Gracias por haber llegado hasta aquí, siéntete libre de comentar, de pedirme mas desarrollos random de la vida real siempre o de compartir tu experiencia con el código que te he mostrado.
Esto daría para más tutoriales. ¿Qué más podemos hacer?
- Podríamos tener varias imágenes registradas por noticia, una horizontal y otra vertical, incluso podrían ser distintas entre si, y luego jugar con ellas y mostrarlas según la posicion que ocupen del grid siempre ofreciendo al lector una mejor experiencia de usuario.
- Construye un grid más complejo y con una estructura totalmente personalizada.
- Traslada esta idea a un bloque de gutenberg con mas opciones de personalización y consiguiendo una mejor experiencia de usuario en el area administración pudiendo ver el resultado final en vez de ver un shortcode.
- De igual forma que le hemos dado al shotcode el poder añadir la categoría manualmente, también podríamos hacer lo mismo con el post_type, el posts_per_page o cualquiera de los muchos argumentes de los que dispone la clase WP_Query y que podemos añadir en desarrollos mas completos.
- Los textos pueden estar animados con el efecto hover. O pueden aparecer elementos como por ejemplo un corazón para guardar el artículo en favoritos.
- Algo muy interesante a explicar para otro artículo será controlar mediante css la tipografía responsive como muestro en el código de abajo y que hemos usado con el h2 de los titulares de las noticias.
