Lightweight Accordion plugin for WordPress allows you to add collapse elements to posts using a Gutenberg block or a shortcode (via classic editor). By using the details HTML tag and a few lines of CSS this allows for a javascript-free accordion for minimum page load.
Extremadamente ligero (<1kb): Sin usar Javascript, el plugin usa la etiqueta HTML nativa ‘details’ y unas pocas líneas de código para tener un impacto mínimo en la vista pública.
Personalizable: Las opciones incluyen la personalización de la etiqueta HTML usada para el título del acordeón, la apertura por defecto, el orden y los colores.
Ejemplos de uso del shortcode
Aquí hay algunos ejemplos de uso del plugin de acordeón con shortcodes.
[lightweight-accordion title="My Accordion"]My Content[/lightweight-accordion]
Además, al cargar, puedes mostrar el acordeón abierto con la opción `accordion_open`.
[lightweight-accordion title="My Accordion" accordion_open=true]My Content[/lightweight-accordion]
También puedes cambiar la etiqueta HTML que envuelve el título del acordeón usando la opción `title_tag`.
[lightweight-accordion title="My Accordion" title_tag="h3"]My Content[/lightweight-accordion]
Si quieres incluir el esquema de preguntas frecuentes puedes añadir la opción de esquema y establecerlo como «faq».
[lightweight-accordion title="What is your return policy?" schema="faq"]You have 1 week to return your items[/lightweight-accordion]
Si quieres poner un borde alrededor del contenido del acordeón, puedes utilizar el atributo «bordered».
[lightweight-accordion title="Bordered Content" bordered=true]My Content[/lightweight-accordion]
Opciones del shortcode
Aquí está la lista completa de opciones del shortcode. Además, todas estas opciones son accesibles cuando se usar el bloque para Gutenberg.
- title (obligatorio por defecto: null) El título de tu acordeón se mostrará en la parte superior para que los usuarios hagan clic. Un buen ejemplo podría ser incluir una pregunta al usuario para que pueda hacer clic en ella para obtener más detalles.
- content (obligatorio por defecto: null). Contenido que va en el elemento de tu acordeón.
- title_tag (por defecto: span) Esto establece la etiqueta HTML que envuelve el título en el resumen del acordeón. Es útil si quieres convertirla en una etiqueta de encabezado para propósitos de SEO.
- accordion_open (Por defecto: «false»). Establece esto en «true» si quieres que tu acordeón esté abierto por defecto.
- bordered (Por defecto: false) Establece este valor en «true» si quieres un borde alrededor del contenido del acordeón.
- title_text_color (Por defecto: false) Establece un valor hexadecimal o un color CSS para cambiar el color del texto del título del acordeón.
- title_background (Por defecto: false) Establece un valor hexadecimal o un color CSS para cambiar el color del texto del título del acordeón.
- schema (Por defecto: false) Establece esto como «faq» si quieres que se incluya el esquema de preguntas frecuentes.
- class (Por defecto: false) Se usa para añadir una clase personalizada al contenedor padre del acordeón.
- anchor (Por defecto: null) Añade el valor como ID al div del acordeón como ancla.
- autop (Default: true) By default the shortcode will wrap text in a ‘p’ tag. Set this to false if you’d like this disabled for the specific accordion.
Detalles adicionales
Si quieres quitar el archivo «lightweight-accordion.css» de la cola de tu sitio, usa el siguiente filtro. Se recomienda que tu mismo modifiques el estilo del acordeón si usas este filtro.
add_filter('lightweight_accordion_include_frontend_stylesheet', '__return_false' );
Si quieres quitar el archivo «lightweight-accordion/editor-styles.css» para que no se cargue en el área de administración de tu sitio, puedes usar el siguiente filtro.
add_filter('lightweight_accordion_include_admin_stylesheet', '__return_false' );
Si quieres eliminar el procesamiento de los shortcodes en el contenido del acordeón, puedes usar este filtro.
add_filter('lightweight_accordion_process_shortcodes', '__return_false' );
If you’d like to use inline Microdata for FAQ schema you can use this filter. (Not recommended)
add_filter('lightweight_accordion_output_microdata', '__return_true' );
If you’d like to force «lightweight-accordion.css» to load on all of your site you can use this filter. By default the plugin will detect if the block or shortcode is used and enqueue the CSS.
add_filter('lightweight_accordion_always_include_frontend_stylesheet', '__return_true' );