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:
1 2 3 4 5 6 7 8 9 10 11 | [expand title="Presentación (desplegar)" swaptitle="Presentación" expanded="true"] Contenido [/expand] [expand title="Ingredientes (desplegar)" swaptitle="Ingredientes"] Contenido [/expand] [expand title="Pasos a seguir"] Contenido [/expand] |
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:
1 2 3 4 5 6 | .collapseomatic { background-image: url(la url de la imagen para desplegar) !important; } .colomat-close { background-image: url(la url de la imagen para ocultar) !important; } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .collapseomatic { background-image: url(http://wordpress.aprendepasoapaso.com/wp-content/uploads/2018/02/flechaabajo.png) !important; padding: 3px 40px; background-color: orange; border-bottom: 2px solid grey; border-top: 2px solid grey; background-position-y: center !important; background-position-x: 5px; padding: 3px 40px !important; color: white; border-radius: 5px ; text-decoration: none !important; } .colomat-close { background-image: url(http://wordpress.aprendepasoapaso.com/wp-content/uploads/2018/02/flechaarriba.png) !important; color: black; background-color: lightgrey; text-decoration: none !important; border-bottom: none; } .collapseomatic_content { border-bottom: 2px solid grey; margin-bottom: 20px; border-radius: 5px; margin-left: 0px !important; padding: 15px 15px 0px 15px !important; } |
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".
Configurar de forma fácil una cuenta de PayPal en Woocommerce- Añadir funciones personalizadas en WordPress sin usar un tema hijo
- Cómo destacar un texto o párrafo en WordPress sin plugins
- Personalizar error 404 en WordPress con Divi
- Instalar WordPress como multisitio para administrar varias webs
- Acelerar la carga de WordPress optimizando las imágenes
Gracias, buena explicación.
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?
Hola Fernando, ¿puedes indicarme algún ejemplo de otra web para ver lo que quieres hacer?