Una vez que vea lo fácil que es colapsar el texto en WordPress, puede preocuparse menos por saturar su sitio con fragmentos de contenido que afectan la legibilidad.
El contenido plegable se puede agregar con un interruptor o creando menús de acordeón. Algunos temas de WP vienen con códigos abreviados personalizados para inyectar menús de acordeón en cualquier lugar de su sitio.
Si su tema no admite contenido contraíble, puede agregarlo manualmente con complementos o editando los archivos de su tema.
Incluso funcionará en los planes gratuitos de WordPress.com, solo que sin ningún estilo.
Cómo contraer texto en WordPress
Use complementos de 'acordeón' o complementos de código abreviado con la función 'acordeón' o 'alternar' para colapsar el texto en WordPress. Los planes gratuitos de WordPress.com pueden hacer que el contenido sea contraíble agregando
La diferencia entre alternar y acordeón en WordPress
Las funciones de acordeón y alternar son dos métodos que funcionan para contraer texto en WordPress.
La diferencia entre alternar y texto de acordeón es esta...
- Con un elemento de acordeón, cuando se hace clic en una sección, solo se carga esa sección de contenido. Cuando se 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 colapsables se pueden cargar y permanecer abiertas. Los cuadros de contenido que se muestran con elementos de alternancia no se cierran automáticamente.
En páginas largas, es preferible el elemento de acordeón, ya que evita que las pantallas se llenen de preguntas sobre las que el usuario no tiene interés en leer.
Pueden desplazarse por los títulos en una página de preguntas frecuentes, luego, cuando encuentran una pregunta que quieren que se responda, pueden hacer clic para ver solo esa sección de contenido específico.
Piénsalo de esta manera…
Si quisiera saber '¿cuánto cuesta la entrega?', ¿Qué preferiría tener...
a) ¿Barras de título individuales con preguntas específicas en las etiquetas de encabezado?
uno kapamilya ir oráculo arena
O
b) ¿Desplazarse por 80 preguntas y respuestas hasta encontrar la que buscaba?
Los elementos de acordeón hacen que su contenido sea más fácil de leer.
4 formas de contraer texto en WordPress
1. Usa un bloque de acordeón en el Editor de Gutenberg
Para aquellos que usan el nuevo editor de 'bloques' o Gutenberg' en un sitio web de WordPress autohospedado, se pueden agregar complementos de acordeón desde la barra lateral de su editor de bloques.
Es el mismo proceso que el método anterior para agregar complementos para ampliar la funcionalidad de su sitio. Simplemente más conveniente ya que ya no necesita ir al menú de complementos para agregar un nuevo complemento.
Cargue su editor de bloques, haga clic en el ícono + para agregar un nuevo bloque, luego busque 'acordeón'.
No hay bloques de acordeón preinstalados. Debe agregar un complemento de bloque de acordeón.
Para nuestras pruebas, el complemento agregado fue ' Acordeón ” por “WPDeveloper”.
La capacidad de agregar complementos desde el panel del editor de bloques WP se agregó en la versión 5.6 de WordPress.
Si está ejecutando 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 disponible.
La ventaja de usar los nuevos bloques para el contenido de estilo acordeón es que las consultas de JavaScript necesarias para habilitarlo solo se ejecutan cuando se carga el bloque.
Solía ser que ocultar las imágenes dentro de un menú de acordeón podría ayudar a aumentar la velocidad del sitio. Ahora, WordPress tiene la 'carga diferida' habilitada de forma predeterminada. Aún así, mejora la presentación.
Para incluir imágenes en secciones de contenido expandido, haga clic en los tres puntos verticales, seleccione 'Editar como HTML' y agregue el código fuente de su 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="###">
La URL de la imagen se muestra en su biblioteca de medios.
2. Agregue una sección de acordeón solo con HTML (requerido en los planes gratuitos de WordPress.com)
En los planes gratuitos de WordPress.com, hay una desventaja.
No puede ejecutar consultas de JavaScript y no puedo instalar complementos de WordPress o. Todavía puede colapsar el texto dentro del editor de texto.
Abra su página o publicación en modo de edición y use el editor de 'texto'. No el editor visual.
El código para agregar 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>
(repetir tantas veces como sea necesario)
La ventaja de esto es que puede agregarlo sin complementos adicionales y también funciona en cuentas gratuitas de WordPress.com.
Como es HTML sin formato, el resultado es texto sin formato.
Para incluir elementos de estilo en un acordeón o alternar elementos, use un complemento o codifique su plantilla de tema.
Los complementos son más simples, por lo que si tiene miedo de editar código, vaya con un complemento. El complemento Ultimate Shortcodes tiene múltiples íconos.
Para los temibles, continúe leyendo para obtener instrucciones sobre cómo codificar su tema para cargar un acordeón jQuery UI personalizado.
3. Use complementos para colapsar el texto en el editor clásico de WordPress
Millones de usuarios de WP todavía trabajan con el editor clásico. Si lo hace, necesita un complemento compatible.
Uno de los plugins más simples de usar es…
Acordeón de PickPlugins
Este complemento se conecta a la biblioteca Font Awesome. Agregue el código HTML del icono para cualquier elemento de Font Awesome para anular las flechas predeterminadas.
Una vez instalado, se agrega un nuevo menú a su barra lateral de administración. Haga clic en 'agregar nuevo' para crear tantos menús de acordeón como necesite.
El texto contraído se puede mostrar en cualquier parte de su sitio que acepte HTML.
Esto puede estar dentro de publicaciones, páginas y áreas de widgets usando el widget HTML. Agregue el widget, asígnele un título, inserte el código abreviado y se mostrará el menú de acordeón.
comer bulaga agosto 29 2015
El ancho del contenido se ajusta automáticamente, por lo que no se requiere CSS para corregir los tamaños de visualización para varias pantallas.
Dentro del menú de acordeón, puede usar HTML e insertar imágenes.
En lugar de solo eliminar publicaciones recientes en WordPress , puede ir más allá utilizando este complemento de acordeón para crear un widget con estilo completo para mostrar su contenido más popular, guías detalladas, reseñas principales y guías de compra directamente dentro de un solo widget de acordeón.
En otras palabras, le brinda un mejor uso del espacio del widget en los sitios web de WordPress.
… Todo mientras evita abarrotar el área de widgets de la barra lateral.
4. Agregue un acordeón jQuery UI a los temas de WordPress
Este proceso es algo complicado porque WordPress no permite ejecutar JavaScript dentro del archivo de encabezado.
En cambio, los scripts JS ya están registrados de forma predeterminada en una instalación de WordPress. Todo lo que necesitas hacer es 'engancharte' en ellos.
A menos que esté desarrollando su propio tema o complemento personalizado, no debería necesitar aprender a colapsar el texto en WordPress usando ganchos de WordPress.
Aún así, no estará de más saber cómo se hace porque así podrás hacer correcciones si algo deja de funcionar. como después de un actualización de wordpress .
Los desarrolladores de temas de WP usan ganchos en el Codex de WordPress para conectarse a muchas de las bibliotecas preempaquetadas.
La función 'jQuery UI Accordion' es la que debe ejecutarse para crear texto contraíble en WP.
Los scripts y archivos para contraer texto en WordPress
Primero, cree el archivo JavaScript.
Use un editor de texto sin formato como el Bloc de notas y pegue lo siguiente
san miguel vs lluvia o sol
//jQuery-ui-accordion
jQuery(document).ready(function($) {
$( "#accordion" ).accordion({
collapsible: true, active: false, heightStyle: "content"
});
});Guarde el archivo como 'accordion.js'.
Lo que hace este código...
La última línea de código es hacer que todos los elementos sean plegables.
Establecer el estado 'activo' en falso significa que el usuario tiene que hacer clic para cargar la sección de contenido. Establecer esto en 'verdadero' precargará el primer elemento en su sección de acordeón.
La última parte de 'heightStyle:' content 'significa que no hay un conjunto de altura máxima. Configurarlo en 'contenido' cargará todo el contenido dentro del elemento div sin necesidad de desplazarse hacia abajo o hacia el otro lado.
En el código anterior, el #accordion es para el 'ID de div' y el .accordion es para una 'clase div'. Con esos estos agregados, cuando colocas
<div ID="accordion"> and <div class="accordion">
… dentro de 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, luego busque la carpeta llamada 'JS'. Aquí es donde colocar cualquier archivo JavaScript.
Algunos temas tendrán la carpeta en la raíz de los archivos del tema Ruta del archivo: WP Content > Themes > Your Theme > JS.
Otros pueden usar una subcarpeta como una carpeta de 'activos' dentro de la Carpeta de temas. Eso seguiría la ruta del archivo: WP Content > Themes > Your Theme > Assets > JS.
La carpeta para todos los archivos JavaScript es JS. Si su tema no tiene uno, cree uno.
Abra la carpeta JS para su tema, haga clic en 'cargar archivo' y suelte su archivo 'accordion.js'.
Edite functions.php para cargar el JavaScript
Esta parte es para decirle a WordPress que cargue el archivo JavaScript. En la mayoría de las otras plataformas, esto se hace en el archivo de encabezado. Como WordPress se ejecuta en PHP, JavaScript no se puede cargar usando la etiqueta Todos Los Derechos Reservados | creme-de-la-creme.jp | Política De Privacidad