4 mejores formas de reducir el texto en WordPress - Aprender Marketing
Consejos

4 mejores formas de reducir el texto en WordPress

Una vez que comprenda lo fácil que es doblar texto en WordPress, no tendrá que preocuparse de que una gran cantidad de contenido en su sitio comprometa la legibilidad.

El contenido plegable se puede agregar cambiando o creando menús de acordeón. Algunos temas de WP vienen con códigos abreviados personalizados para ingresar menús de acordeón en cualquier lugar de su sitio.

Si su tema no admite contenido contraíble, puede usar un complemento para agregarlo manualmente o editar su archivo de tema.

Incluso está disponible en el plan gratuito de WordPress.com, solo que sin ningún estilo.

Cómo reducir el texto en WordPress

Use el complemento «acordeón» o el complemento de código corto con la función «acordeón» o «cambiar» para reducir el texto en WordPress. El plan gratuito de WordPress.com puede hacer que el contenido sea plegable agregando

HTML a editor de texto. En un sitio autohospedado, el tema se puede codificar para usar el gancho de WordPress para cargar el jQuery UI Accordion.

Diferencia entre Toggle y Accordion en WordPress

Los acordeones y los interruptores son dos formas de reducir el texto en WordPress.

La diferencia entre un interruptor de texto y un acordeón es…

  • Con el elemento de acordeón, cuando se hace clic en una pestaña, solo se cargan los contenidos de esa pestaña. Cuando hace clic en el siguiente elemento de acordeón, la sección de texto anterior se cierra automáticamente.
  • Con la función de alternar, todas las áreas de contenido plegables se pueden cargar y abrir. Los campos de contenido que se muestran mediante elementos de alternancia no se cierran automáticamente.

Para páginas largas es preferible el elemento plegable, ya que no permite que la pantalla se llene de preguntas que a los usuarios no les interesa leer.

Pueden desplazarse por los encabezados de la página de preguntas frecuentes y, luego, cuando encuentran una pregunta que desean que se responda, pueden hacer clic para ver solo esa sección de contenido en particular.

Piénsalo de esta manera …

Si se pregunta «¿cuál es el precio de la entrega?», ¿Qué preferiría tener …

a) ¿Una sola barra de título con una pregunta específica en la etiqueta del título?

o

b) Desplácese por las preguntas y respuestas de los años 80 hasta que encuentre lo que está buscando.

Los elementos de acordeón hacen que su contenido sea más fácil de navegar.

4 formas de reducir el texto en WordPress

1. Usando el módulo Accordion en el editor Gutenberg

Para aquellos que usan el nuevo editor de «Bloques» o Gutenberg en un sitio de WordPress autohospedado, el complemento de acordeón se puede agregar desde la barra lateral del editor de bloques.

Esta es la misma forma antigua de agregar complementos para ampliar la funcionalidad del sitio. Mucho más conveniente, ya que ya no necesita ingresar al menú de complementos para agregar nuevos complementos.

Cargue el editor de bloques, haga clic en el ícono + para agregar un nuevo bloque y busque «acordeón».

No hay bloques de acordeón preinstalados. Debe agregar un complemento para el bloque de acordeón.

Para nuestra prueba, el complemento agregado es «acordeónDe WPDeveloper

La capacidad de agregar complementos desde el panel de WP Block Editor se agregó en la versión 5.6 de WordPress.

Si está utilizando una versión anterior de WordPress, deberá agregar el complemento de la manera estándar.

Alternativamente, actualice su versión de WordPress a la última versión disponible.

La ventaja de usar el nuevo bloque de contenido estilo acordeón es que la solicitud de JavaScript requerida para la activación se ejecuta solo cuando se carga el bloque.

En el pasado, ocultar imágenes en los menús de acordeón ayudó a mejorar la velocidad del sitio. WordPress ya tiene la «carga diferida» habilitada de forma predeterminada. Aún así, mejora las presentaciones.

Para incluir una imagen en la sección de contenido avanzado, haga clic en los tres puntos verticales, seleccione «Editar como HTML» y agregue la fuente de la imagen usando la siguiente cadena HTML

<img src="http://yoursite.com/wp-content/uploads/2021/09/your-image-title.jpg" alt="give it an alternative title" width="###" height="###">

Las URL de las imágenes se muestran en su biblioteca de medios.

2. Agregue una sección de acordeón solo en HTML (requerido para el plan gratuito de WordPress.com)

Hay un obstáculo en el plan gratuito de WordPress.com.

No puede ejecutar consultas de JavaScript y no puede instalar complementos de WordPress. Todavía puede comprimir texto en un editor de texto.

Abra su página en modo de edición o publíquela y use el editor de texto. No es un editor visual.

El código de adición es

<details>
<summary>Question 1</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</details>

(repita tantas veces como sea necesario)

La ventaja de esto es que puede agregarlo sin complementos adicionales, y también funciona con cuentas gratuitas de WordPress.com.

Debido a que esto es HTML sin formato, el resultado es texto sin formato.

Para incluir elementos de estilo en acordeones o elementos de conmutación, use un complemento o codifique firmemente su plantilla de tema.

Los complementos son más simples, así que úsalos si eres tímido para editar código. El complemento Ultimate Shortcodes tiene muchos íconos.

Para el miedo, sigue leyendo para obtener instrucciones sobre temas codificados para cargar acordeones personalizados en la interfaz de usuario de jQuery.

3. Dobla el texto en WordPress Classic Editor usando un complemento

Millones de usuarios de WP todavía usan el editor clásico. Si hace esto, necesita un complemento compatible.

Uno de los plugins más fáciles es…

Acordeón para PickPlugins

Este complemento se conecta a la biblioteca Font Awesome. Agregue código HTML al ícono para anular la flecha predeterminada para cada elemento en Font Awesome.

Después de la instalación, se agrega un nuevo menú a la barra lateral de administración. Haga clic en Agregar nuevo para crear tantos menús de acordeón como desee.

El texto en negrita se puede mostrar en cualquier parte de su sitio que acepte HTML.

Esto se puede usar en publicaciones, páginas y áreas con widgets usando widgets HTML. Agregue el widget, asígnele un título, coloque un código corto y muestre el menú de acordeón.

El ancho del contenido se ajusta automáticamente, por lo que no necesita usar CSS para ajustar el tamaño de visualización para diferentes pantallas.

Puede usar HTML e insertar imágenes en el menú de acordeón.

no es fácil Eliminar la última publicación de WordPress, puede usar este complemento de acordeón para crear un widget completamente estilizado para mostrar su contenido más popular, guías detalladas, reseñas principales y guías de compras en un widget de acordeón.

En otras palabras, le permite hacer un mejor uso del espacio de widgets en su sitio de WordPress.

… mientras evita abarrotar el área con dispositivos de la barra lateral.

4. Agregue el acordeón jQuery UI al tema de WordPress

Este proceso es un poco complicado porque WordPress no permite que JavaScript se ejecute en archivos de encabezado.

En cambio, los scripts JS ya están registrados en las instalaciones predeterminadas de WordPress. Todo lo que tienes que hacer es «atraerlos».

A menos que esté desarrollando su propio tema o complemento personalizado, no necesita aprender a usar los ganchos de WordPress para doblar texto en WordPress.

Aún así, no está de más saber cómo hacerlo, porque si algo deja de funcionar, puedes hacer ajustes. Actualizaciones de WordPress.

Los desarrolladores de temas de WP usan ganchos en WordPress Codex para conectarse a muchas bibliotecas preempaquetadas.

La función «jQuery UI Accordion» es lo que funciona en WP para hacer que el texto sea plegable.

Scripts y archivos para plegar texto en WordPress

Primero, cree un archivo JavaScript.

Use un editor de texto sin formato como el Bloc de notas y pegue lo siguiente

//jQuery-ui-accordion
jQuery(document).ready(function($) {
$( "#accordion" ).accordion({
collapsible: true, active: false, heightStyle: "content"
});
});

Guarde el archivo como «accordion.js».

Qué hace este código …

La última línea de código es para hacer que todos los elementos sean plegables.

Establecer el estado «activo» en falso significa que el usuario debe hacer clic para cargar la sección de contenido. Establecer esto en «verdadero» precargará el primer elemento en su sección de acordeón.

«heightStyle: la última parte de» contenido «significa que no hay una altura máxima establecida, establecerlo en» contenido «cargará todo el contenido en el elemento div sin desplazarse hacia abajo o hacia abajo.

En el código anterior, #accordion se usa para «div ID» y .accordion se usa para «div class». Además, cuando pega

<div ID="accordion"> and <div class="accordion">

… en su editor de texto se activará jQuery.

  • [ # ] es un identificador
  • [ . ] es una clase

Cómo agregar archivos JavaScript personalizados a los temas de WP

Vaya a su cPanel, abra el tema en el que desea ejecutar el script y busque la carpeta llamada «JS». Todos los archivos JavaScript se colocan aquí.

Algunos temas incluirán una ruta al archivo de la carpeta en la raíz del archivo del tema: WP Content> Themes> Your theme> JS.

Otros pueden usar subcarpetas como la carpeta «activos» en la carpeta del tema. Esto seguirá la ruta del archivo: WP Content> Themes> Your Theme> Assets> JS.

La carpeta para todos los archivos JavaScript es JS. Si su tema no existe, cree uno.

Abra la carpeta JS de su tema, haga clic en Cargar archivo y pegue su archivo accordion.js.

Edite functions.php para cargar JavaScript

Esta sección le dice a WordPress que cargue el archivo JavaScript. En la mayoría de las otras plataformas, esto se hace en archivos de encabezado. Debido a que WordPress se ejecuta en PHP, no funcionará.

Botón volver arriba