Cómo contraer y expandir texto a voluntad dentro del contenido

¿No te ha pasado alguna vez que tienes un texto muy largo que te gustaría que solo se mostrarse al hacer clic en él? A me me pasa constantemente, tanto en entradas de blog como en la descripción de los productos en algunas tiendas online.

Y no me refiero al típico enlace de «Leer más» o «Sigue leyendo» que se hace con el bloque de «Más» (o el icono en el editor clásico) o «Salto de página».

Y digo que no valen porque el bloque de «Más» no tiene ningún efecto dentro de una entrada o producto y, aunque sí funciona en algunos casos el de salto de página, no funciona en los productos de WooCommerce, por ejemplo.

Además, el bloque de salto de página genera un problema de SEO, al crear nuevas URLs adicionales, y requerir cambiar de página, algo que no es viable en muchas situaciones, y nunca en un Ecommerce.

Otra posibilidad sería instalar alguna colección de bloques que incluya el típico de efecto acordeón, por ejemplo, pero tampoco te servirá en todas las situaciones, y actualmente no vale de nada en el editor de productos, por ejemplo, pues todavía usa el editor clásico.

Así que, buscando una solución que me sirviese para todas las situaciones encontré el remedio que todo lo cura: Collapse-O-Matic.

Este plugin es una maravilla de la ciencia WordPress. Una vez instalado tienes una pantalla de ajustes, totalmente recomendable de visitar, aunque normalmente no hace falta cambiar nada para que funcione.

¿Y cómo funciona? te preguntarás.

Pues sencillo, para hacer que un texto se pueda contraer y expandir solo tienes que envolverlo con un shortcode, así:

[expand]Texto a mostrar contraído hasta que se haga clic para expandirlo[/expand]

Y es magia pura.

Lo mejor es que puedes empezar y terminar el texto expansible abarcando varios bloques.

Cuando guardes los cambios, en vez del shortcode aparecerá una flechita en la que, al hacer clic, se mostrará el texto dentro de los shortcodes.

Y este es su uso más básico, pues puedes personalizar los shortcodes para, por ejemplo, añadir un texto visible antes o después de expandir o contraer.

Sería así:

[expand title="Mostrar más" swaptitle="Mostrar menos"]Texto a mostrar contraído hasta que se haga clic para expandirlo[/expand]

Y se vería de este modo…

Te recomiendo encarecidamente pasarte por la página de la documentación para comprobar todo lo que puedes hacer con un simple shortcode y unos pocos modificadores, es sorprendente.

Por defecto el texto aparece contraído, pero puede mostrarse expandido, y muchas más posibilidades.

También es interesante conocer la página de ajustes del tema, pues tiene un montón de tags que puedes utilizar para modificar el comportamiento del plugin.

Y lo mejor es que funciona con el editor de bloques, el clásico, y en todo tipo de contenidos, también en la descripción de productos de WooCommerce.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(4 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido