¿Cómo colocar un texto desplegable en WordPress?

Bienvenido nuevamente a otro de nuestros artículos, hoy te mostraremos cómo colocar un texto desplegable en WordPress. Con este recurso, podrás presentar de manera organizada y dinámica los contenidos en tu sitio web, sin saturar la página de información y permitiendo al usuario desplegarla a su conveniencia.

Texto desplegable en WordPress

Texto desplegable en WordPress

En ocasiones, nos encontramos con una gran cantidad de contenido valioso para nuestro sitio web, pero la presentación de esta información de manera directa puede resultar abrumadora para el visitante. En este sentido, el texto desplegable ofrece una solución práctica y estéticamente agradable, permitiendo ocultar y mostrar la información según sea necesario.

Además, siempre buscamos formas de enriquecer la experiencia del usuario y evitar que nuestra página web se vea simple o básica. Añadir elementos interactivos y efectos visuales puede ser una excelente forma de lograr esto. Si bien los temas o plantillas interactivas pueden ofrecer una variedad de estas opciones, agregar un texto desplegable en WordPress puede potenciar aún más la funcionalidad de tu sitio.

El texto desplegable en WordPress es una herramienta de diseño versátil y eficaz. En primer lugar, ofrece una alternativa estética y diferenciadora a las páginas web más tradicionales o estáticas. En segundo lugar, permite alojar una amplia variedad de contenidos, desde texto escrito hasta imágenes y videos, en un formato compacto y ordenado. Por último, al evitar la sobrecarga de información en la página, facilita la navegación y mejora la experiencia del usuario.

Es importante mencionar que la implementación de texto desplegable puede realizarse a través de plugins específicos para esta función. Algunos plugins populares son ‘Accordion’, ‘Easy Accordion’, y ‘Shortcodes Ultimate’. Además, dependiendo de la complejidad de tu sitio y tus habilidades técnicas, también es posible implementar textos desplegables con código HTML y CSS.

Recuerda, mantener la funcionalidad y la estética de tu sitio web equilibradas es vital para mantener a tus usuarios comprometidos y para proporcionarles la mejor experiencia posible. Con el texto desplegable en WordPress, puedes lograr ambos objetivos de manera efectiva.

Texto desplegable en WordPress

Tener información detallada en las páginas de un sitio web es una práctica fundamental, pero hay situaciones en las que se requiere introducir contenido adicional de una forma organizada y no intrusiva. Aquí es donde entra en juego el texto desplegable en WordPress.

El uso del texto desplegable en WordPress nos permite presentar al usuario una variedad de contenidos de manera organizada y accesible. Esto puede ser especialmente útil en ciertos tipos de sitios web. Consideremos, por ejemplo, un sitio web de recetas de cocina. Con la funcionalidad de texto desplegable, podrías presentar la información de manera clara y estructurada:

  • Ingredientes.
  • Medidas.
  • Preparación.
  • Resultado.

Estos serían los títulos principales que el usuario vería en la página. Al hacer clic en cada uno, se desplegaría el contenido correspondiente, proporcionando una experiencia de usuario más fluida y ordenada. Eso es exactamente lo que ofrece el texto desplegable en WordPress.

Pero, por supuesto, las posibilidades no se limitan a este ejemplo. El texto desplegable puede ser útil en muchos otros contextos y puede contener una amplia variedad de contenido, desde enlaces a otros recursos hasta bloques de texto, imágenes y videos.

Ahora que hemos explorado un poco lo que puedes hacer con los textos desplegables en WordPress, es momento de abordar cómo puedes añadir esta funcionalidad a tu sitio. Esto se puede lograr utilizando plugins específicos. Algunos de los más populares y eficientes son ‘Accordion’, ‘Easy Accordion’ y ‘Shortcodes Ultimate’. Estos plugins te permiten implementar y personalizar textos desplegables de manera sencilla y rápida, sin necesidad de tener conocimientos de programación. Además, la mayoría de ellos son compatibles con los principales constructores de páginas, lo que facilita aún más su uso.

Texto desplegable en WordPress

Plugin para el texto desplegable en WordPress

Ciertamente, los plugin dentro de WordPress, ayudan a tus proyectos y a todas tus páginas, a cambiar ciertas cosas y mejorarlas de forma positiva.

Utilizar varios plugins dentro de WordPress, puede ser un no ético, pero no hablaremos de eso en este momento. Hablamos de la herramienta que te servirá como plugin para texto desplegable.

Este plugin, lleva por nombre “Collapse O Matic”. Dicho plugin, añade diversas modalidades y funcionalidades dentro de todos tus proyectos y, una de estas funcionalidades es la del texto desplegable.

Con este plugin, puedes hacer que todos los usuarios que visiten tu página web oculten y muestren cualquier tipo de información como por ejemplo: contenido, imágenes, textos y otros.

Quizá te preguntes ¿Cómo se maneja la información dentro de la opción desplegable?, muy fácil. Dentro de este plugin, se maneja algo conocido como “shortcodes”, lo cual esto significa traducido al español como “códigos cortos”. Los códigos cortos, son los que ya vienen añadidos al formato de representación de las opciones desplegables. Si deseas ver cada uno de estos códigos cortos dentro del formato, aquí te los dejamos:

  • [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]

Este sería el formato que ofrece los códigos cortos dentro del texto desplegable en WordPress.

Para poder estudiar un poco este código y entenderlo, nos damos cuenta que cada etiqueta contiene una función diferente.

En primera parte, encontramos la etiqueta “expand” donde esta englobará tanto la función para ocultar y mostrar, el título y el contenido.

En segunda parte encontramos la descripción “title”, donde básicamente representa el título de presentación antes de desplegar el contenido.

Luego encontramos la descripción “swaptitle”. Hay que tener mucho cuidado con la interpretación de esta etiqueta, ya que suele ser un poco confusa. Esta descripción, lo que hace es intercambiar el título principal que se encuentra en la etiqueta “title”, por el título o la palabra que se la haya colocado dentro de esta etiqueta. Para que se pueda entender mejor, vamos a explicarlo de la siguiente manera:

  • Si en un texto desplegable se encuentra la etiqueta “swaptitle” con la palabra “Presentación” y se encuentra la etiqueta “title” con la palabra “Presentación (desplegar)”, antes de desplegar el texto se va a mostrar la palabra “Presentación (desplegar)”. Ahora, cuando se da clic para desplegar toda la información, la etiqueta “swaptitle” va actuar cambiando la palabra “Presentación (desplegar)”, por la palabra “Presentación”.

Esto es lo que hace esta etiqueta. Cambia el estado del título principal cuando se despliega para ver la información. Al ocultar la misma, volverá a su estado normal.

De esta forma es como trabajarían cada una de las etiquetas en las sentencias de los códigos cortos.

Insertar texto desplegable en WordPress

Para incorporar la funcionalidad de texto desplegable a tu sitio WordPress a través del plugin «Collapse-O-Matic», primero necesitarás instalarlo y activarlo. Aquí te explicamos cómo hacerlo paso a paso.

Primero, ingresa a tu sitio WordPress y accede al panel de administración o dashboard. En la barra lateral izquierda, selecciona la opción «Plugins», y luego haz clic en «Añadir nuevo».

En la página de «Añadir plugins», utiliza la barra de búsqueda para buscar «Collapse-O-Matic». Una vez que aparezca en los resultados, haz clic en «Instalar ahora» y espera a que se complete la instalación. A continuación, haz clic en «Activar» para que el plugin comience a funcionar en tu sitio.

Una vez activado el plugin, puedes configurar sus opciones según tus necesidades. Para acceder a la configuración del plugin, dirígete nuevamente al dashboard y selecciona «Ajustes». Aquí deberías ver la opción «Collapse-O-Matic». Haz clic en ella para acceder a la página de configuración del plugin.

En la configuración de «Collapse-O-Matic», podrás ajustar varios aspectos de los textos desplegables. Además, encontrarás una documentación detallada que te ayudará a entender mejor cómo usar el plugin y sacarle el máximo provecho.




Es importante destacar que, a pesar de que la mayoría de los plugins de WordPress son bastante intuitivos y fáciles de usar, siempre es recomendable dedicar un tiempo a explorar sus opciones y leer la documentación proporcionada por los desarrolladores para entender mejor cómo funciona y cómo puedes utilizarlo de manera más eficaz en tu sitio.

Personalización de opciones en el plugin

El plugin «Collapse-O-Matic» te ofrece una gran variedad de opciones de personalización que te permitirán ajustar los textos desplegables a las necesidades específicas de tu sitio. Aquí te presentamos una descripción de estas opciones:

  • Estilo: Esta opción te permite ajustar el estilo del texto desplegable para que combine con el diseño de tu sitio.
  • Tipo de etiqueta: Te permite seleccionar qué etiquetas HTML quieres utilizar para los textos desplegables.
  • Asignación de clase: Esta opción te permite asignar clases a tus textos desplegables, lo que te da más control sobre su apariencia y comportamiento.
  • Orden de tabulación: Con esta opción puedes establecer el orden en que los usuarios pueden navegar a través de los textos desplegables utilizando la tecla Tab.
  • Añadir touchstart: Esta opción añade la funcionalidad touchstart, permitiendo el despliegue de los textos al hacer tap en dispositivos táctiles.
  • Pausa inicial: Permite establecer un retraso (en milisegundos) antes de que se active la funcionalidad desplegable.
  • Duración contraer y expandir: Aquí puedes definir el tiempo (en milisegundos) que tarda en expandirse o contraerse el texto.
  • Estilo personalizado: Te permite agregar tu propio código CSS para personalizar aún más los textos desplegables.
  • Filtro: Esta opción permite agregar el filtro «the_content» a la etiqueta que contiene el contenido desplegable.
  • Cargar script con shortcode: Esta opción carga los scripts necesarios para la funcionalidad desplegable solo cuando se utiliza el shortcode del plugin en una página o entrada.
  • Cargar CSS con shortcode: Al igual que la opción anterior, esta opción carga el CSS necesario solo cuando se utiliza el shortcode del plugin.
  • Localización del script: Te permite elegir si los scripts del plugin se cargarán en el encabezado (header) o el pie de página (footer) de tu sitio.

Además de estas opciones, si tienes conocimientos de CSS, puedes hacer modificaciones más específicas a través de la hoja de estilos.

En resumen, el uso de textos desplegables en WordPress es una excelente forma de organizar y presentar tu contenido de manera efectiva y atractiva para tus visitantes. Te animamos a explorar las posibilidades que ofrece «Collapse-O-Matic» en tus proyectos web.

Si este artículo te ha gustado, te dejamos los siguientes enlaces para que puedas visitarlos y continuar leyendo:

¿Cómo usar la papelera de WordPress fácilmente?

¿Cómo funciona el contador de visitas de WordPress?

¿Cómo editar un pie de página en WordPress?

Deja un comentario