Contenido desplegable en WordPress para ocultar o mostrar información

13 de marzo - 2018

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.

Suscríbete:

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...

contenido desplegable con collapse o matic

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

Suscríbete:

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".

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

3 Comentarios

  1. Leopoldo Pino Carrasco

    Gracias, buena explicación.

    Responder
  2. Fernando

    Hola Juan
    Estoy intentando crear una lista desplegable con este plugin Collapse, pero simplemente quiero hacer una lista tipo FAQ de preguntas frecuentes para una pagina de mi web de WordPress.
    No xonsigo hacer que funcione de manera simple pulsando a l titulo y que se despliege debajo la descripción en una lista de varios títulos.

    Como puedo generar una lista de preguntas frecuentes?

    Responder
    • Juan

      Hola Fernando, ¿puedes indicarme algún ejemplo de otra web para ver lo que quieres hacer?

      Responder

Enviar un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Mi canal de Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Anuncio - WordPress Gestionado de SiteGround - Potente pero simple de usar. Haz clic para aprender más. Descuento directo DIVI -  10 por ciento