¿Cómo colocar un texto desplegable en WordPress?

Bienvenido nuevamente a otro de nuestros artículos, el día de hoy te vamos a enseñar a colocar un texto desplegable en WordPress, o varios textos, con la ayuda de plugins que te permitirán tanto ocultar, como mostrar todo el contenido que tengas dentro de tu sitio web. Sin más atrasos, vayamos a ver cómo puedes hacer esto.

Texto desplegable en WordPress

Se nos ha dado la ocasión en el que tenemos mucho contenido dentro de nuestro sitio web o mucha información, que ciertamente puede ser muy valiosa, pero que necesitamos tener una modalidad para que el usuario pueda ocultarla y mostrarla cuando sea necesario. Así evitar una gran concentración de información.

También, hemos estado en situaciones donde no queremos que nuestra página web se vea simple y básica, sino que queremos añadir diversas configuraciones donde los usuarios puedan interactuar con la página y ver los diferentes efectos que esta pueda mostrar. Es correcto que esto se puede hacer teniendo temas o plantillas muy interactivas dentro de nuestros proyectos.

Sin embargo, podemos añadir una nueva funcionalidad muy categórica dentro de todos los proyectos que desarrollamos como páginas web, el cual esta modalidad es la de los textos desplegables en WordPress.

El texto desplegable en WordPress, es una de las herramientas que podemos tomar como efecto en diseño, que permitirá primeramente añadir un ajuste diferente a diversas páginas que se puedan encontrar en la red que se vean básicas. En segunda parte, el texto desplegable en WordPress puede servir para alojar tanto contenido en forma escrita, imágenes y videos. Como tercera parte, el texto desplegable, nos puede funcionar para no sobre cargar la página de tanta información.

Es cierto que colocar suficiente información dentro de las paginas es totalmente valido, pero en el caso de que ya hayamos organizado nuestro sitio web y queramos introducir algo adicional, podemos hacerlo fácilmente a través del texto desplegable en WordPress.

Como cuarta parte, introducir el texto desplegable en WordPress, es una manera de mostrar al usuario diversos contenido de forma organizada. Para explicarnos mejor, en cuanto a este punto, un ejemplo muy claro de esto puede ser cuando una persona contiene una página o sitio web de recetas. Con el manejo del texto desplegable en WordPress, puedes indicar al usuario que visite su página la información de la siguiente manera:

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

Estos serían los títulos principales, para cuando se haga clic en ellos, se pueda ver toda la información. De esta manera funcionan los textos desplegables en WordPress.

No quiere decir que este sea el único ejemplo que exista para poder colocar un texto desplegable en WordPress. Existen muchas formas de poder hacerlo y que pueden incluir muchos otros vínculos, otro tipo de información y más contenido.

Ahora que ya hablamos un poco sobre los textos desplegables en WordPress y cómo puede manejarse el funcionamiento de los mismos, vamos a pasar a ver qué plugin podemos usar, para añadir textos desplegables.

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 poder tener acceso a todos los ajustes dentro del plugin mencionado anteriormente, lo que tenemos que hacer es ingresar a la plataforma WordPress y dirigirnos hacia el dashboard o menú principal. Luego seleccionamos la opción “plugins” y lo siguiente es dar clic en la opción “añadir nuevo”

Una vez hecho esto, en el pequeño buscado que nos ofrece WordPress, lo que tenemos que hacer es escribir el nombre de plugin que te hemos recomendado, para que pueda aparecer y así logres instalarlo y activarlo.

Después de haber hecho todo esto, debes dirigirte una vez más al dashboard o menú principal de WordPress y buscar la opción que diga “ajustes”. Luego de que la hayas encontrado, das clic en ella y seguidamente hace clic en el plugin que has instalado. Por lo general, este siempre aparece al final de las demás opciones.

Terminado de hacer clic y habiendo ingresado en el plugin, encontrarás todas las opciones necesarias, para que puedas ir ajustando el texto desplegable de WordPress de la manera como mejor te parezca. Dentro de las opciones del plugin, podrás ver la documentación del mismo y todo lo que te mencionamos anteriormente, para que puedas comenzar a tratar con ello.

Dicho esto, ahora vamos a ver que opciones se pueden manejar o editar de acuerdo al plugin que estamos utilizando.

Personalización de opciones en el plugin

Dentro de este plugin para poder colocar el texto desplegable en WordPress, vas a encontrar diversas opciones que te proporciona la misma y que te puede ayudar a configurar esta modalidad de la mejor manera posible.

Estas opciones que puedes lograr personalizar dentro del plugin, son las siguientes:

  • Estilo: este sirve como manera de personalización, para que puedas ajustar el texto desplegable al fondo con el que se tenga que combinar el mismo.
  • Tipo de etiqueta: Utiliza etiquetas básicas de HTML.
  • Asignación de clase: Utiliza clases que son las que sirven para manipular el contenido y que las etiquetas van a interpretar seguidamente.
  • Orden de tabulación: Contiene una tabulación organizada, en caso de que una persona quiera navegar por el texto desplegable mediante el tabulador.
  • Añadir touchstart: Añade la dirección jQuery, para poder hacer el despliegue.
  • Pausa inicial: Aquí se miden los tiempos en milisegundos antes de comenzar la acción.
  • Duración contraer y expandir: Aquí se miden los tiempos cuando el texto se va a expandir o se va a ocultar.
  • Estilo personalizado: Contiene un código CSS para poder personalizar a nuestra manera.
  • Filtro: Este filtro es conocido con el “the_content” y se puede añadir a la etiqueta que lleva el contenido.
  • Cargar script con shortcode: Carga el script en caso de que se haya usado el shortcode del plugin.
  • Cargar CSS con shortcode: Carga el código CSS.
  • Localización del script: Esto solamente es para indicar si el script de carga se establecerá en el header o en el footer.

Estas son las opciones que tienes para poder configurar el texto desplegable de WordPress y puedas estudiar un poco las mismas. Por otra parte, mencionamos que este código incluye diferentes sentencias conformados por una hoja de estilos conocida como CSS. A través de esta hoja de estilos y mediante los códigos que puedas encontrar dentro de ella, puedes realizar las diversas modificaciones manuales si tienes conocimientos básicos de CSS.

Dicho esto, te recomendamos que uses en tus proyectos el texto desplegable de WordPress, para poder distribuir todo tu contenido de manera correcta y organizada.

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