Contenido desplegable en WordPress para ocultar o mostrar información

Pueden existir muchas razones por las que no queramos mostrar un contenido nada más cargar la página, y que el usuario decida si quiere verlo o no, creando un contenido desplegable conseguimos que la página sea más dinámica y obligamos al usuario a interactuar con ella.

Cómo ocultar y mostrar información con contenido desplegable

Para utilizar este modo de mostrar el contenido en los artículos o páginas de WordPress, usaremos un plugin llamado "Collapse O Matic".

El plugin añade una nueva funcionalidad a WordPress que permite mostrar y ocultar el contenido que se encuentre dentro de unos shortcodes. Este contenido puede ser texto, imágenes, vídeos...

El formato utilizado en la imagen anterior sería el siguiente:

Opciones de personalización de Collapse -O-Matic

Si nuestra intención es utilizar el plugin para ocultar o mostrar el contenido en diferentes apartados, con instalarlo y utilizar los shorcodes donde nos interese es suficiente.

Pero si queremos adaptar la imagen y el estilo del contenido desplegable, o en acordeón, para elegir cómo se mostrarán los elementos, las opciones de configuración son enormes. Con un poco de CSS adaptaremos el formato para que no quede como algo forzado en nuestro sitio.

No podemos empezar la casa por el tejado, por lo que recomiendo, que antes de poner bonito un simple elemento de WordPress, aprendamos un poco cómo se maneja este gran gestor de contenidos.

Opciones que integra el plugin

• Style (Estilo): Dependiendo del color del fondo, podemos elegir entre varias opciones para adaptar mejor la manera de como se verá el contenido en acordeón.
• Tag Attribute (Tipo de etiqueta): Etiqueta HTML utilizada en el título.
• Trigclass Attribute (Asignar clase): Nombre de la clase (class) que afecta a la etiqueta HTML del título.
• Tabindex Attribute (Orden de tabulación): Orden de selección cuando nos desplazamos con el tabulador
• Targtag Attribute (Tipo de etiqueta): Etiqueta HTML utilizada para contener la información a desplegar
• Targclass Attribute (Asignar clase): Nombre de la clase (class) que afecta a la etiqueta HTML del contenido.
• Add touchstart (Añadir touchstart): Agrega un enlace jQuery touchstart a los desplegables.
• Initial Pause (Pausa inicial): Tiempo en milisegundos antes de empezar el despliegue
• Collapse/Expand Duration (Duración Contraer/Expandir): El tiempo que tardará en desplegarse en acordeón o contraerse.
• Animation Effect (Efecto de animación): Efecto utilizado para expandir y contraer el contenido.
• Custom Style (Estilo personalizado): Código CSS para personalizar la forma en que veremos el resultado.
• Content Filter (Filtro): Aplica el filtro the_content a la etiqueta asignada al contenido.
• Shortcode Loads Scripts (Cargar script con shortcode): Sólo cargara el script si detecta que se ha usado el shorcode del plugin.
• Shortcode Loads CSS: (Cargar CSS con shortcode): Sólo cargara el código CSS si detecta que se ha usado el shorcode del plugin.
• Script Load Location (Localización del script): (Indicar si el script se cargará en la cabecera o en el footer.

La mayoría de las opciones tienen un enlace a la página oficial con ejemplos y explicaciones que podemos utilizar para personalizar el resultado.

También encontraremos atributos especiales para personalizar aún más la apariencia y el comportamiento del contenido desplegable.

Cambiar las flechas de Collapse-O-Matic

Dentro de la documentación de la página oficial se explica cómo podemos personalizar las flechas que indican cuando está el contenido oculto o visible.

Primero debemos tener las imágenes creadas, a un tamaño adecuado y en formato .png para que tengan el fondo transparente.

Las imágenes que he utilizado y que podéis descargar si queréis son estas:

Siguiendo las indicaciones de la documentación, en la casilla del código CSS tendremos que añadir las siguientes líneas:

Configurar hojas de estilo - CSS

Si sabes un poco de código CSS no tendrás problemas en adaptar el plugin al aspecto de tu sitio.

A continuación, os dejo el código del contenido desplegable que he utilizado en el ejemplo anterior, para que lo utilicéis a conveniencia o para que os sirva como punto de partida.

El código podemos añadirlo en el apartado de WordPress, dentro del personalizador, en el archivo .css de un tema hijo o dentro de las opciones del mismo plugin, esta última opción es la que recomiendo.

Este código tiene incluidas las flechas mostradas indicadas más arriba, si las queréis eliminar, tenéis que borrar las líneas que hacen referencia a "background-image".