La página de inicio o de posts del blog va creciendo con el tiempo y había pensado que sería útil tener los headings de posts por años expandibles. En WordPress hay plugins para ello, pero indagando, llegué a las etiquetas <summary> y <details>, que son html. En esta sección se explican en w3schools.com.
Hasta ahora, la página de posts de este blog tenía este código (añado una parte solo como ejemplo):
<h3>Posts de 2023:</h3> <ul class="postlist"> <li><a href="https://pedrolr.es/blog/noticias-de-medios-digitales-sobre-mastodon-2022-2023/">Noticias de medios digitales sobre Mastodon (2022-2023)</a> (6 julio, 2023)</li> <li><a href="https://pedrolr.es/blog/algunos-vinilos-y-3-laminas-de-peliculas/">Algunos vinilos y 3 láminas de películas</a> (4 julio, 2023)</li> <li><a href="https://pedrolr.es/blog/sobre-nitter-para-seguir-cuentas-y-busquedas-de-twitter-via-rss/">Sobre Nitter para seguir cuentas y búsquedas de Twitter vía RSS</a> (3 julio, 2023)</li> </ul>
Este código se veía de esta forma:
Ahora, he reconvertido la estructura añadiendo details y summary. El código actual es este:
<details open><summary>Posts de 2023:</summary> <ul class="postlist"> <li><a href="https://pedrolr.es/blog/noticias-de-medios-digitales-sobre-mastodon-2022-2023/">Noticias de medios digitales sobre Mastodon (2022-2023)</a> (6 julio, 2023)</li> <li><a href="https://pedrolr.es/blog/algunos-vinilos-y-3-laminas-de-peliculas/">Algunos vinilos y 3 láminas de películas</a> (4 julio, 2023)</li> <li><a href="https://pedrolr.es/blog/sobre-nitter-para-seguir-cuentas-y-busquedas-de-twitter-via-rss/">Sobre Nitter para seguir cuentas y búsquedas de Twitter vía RSS</a> (3 julio, 2023)</li> </ul> </details>
Consiguiendo que las líneas o secciones de "Posts de 2023", "Posts de 2022", etc., se puedan recoger al haber añadido a details la opción de open.
Además, añadí un poco de CSS al elemento summary para que al pasar el ratón por ese texto el cursor sea del tipo pointer:
summary {cursor: pointer;}
Aquí se ve la lista de "Posts de 2023" recogida y el cursor tipo pointer:
Por lo que he leído, la accesibilidad de estos elementos o etiquetas es buena, quizá solo con algún problema en navegadores como IE (fuente, de 2019). De momento, voy a dejar la página de post usando las etiquetas details y summary, para probar.
He probado las etiquetas details y summary en un blog que tengo en Writefreely y funcionan también en markdown.
Tras un tiempo con la etiquetas en el blog, las he eliminado.