Organizar el contenido con un acordeón de preguntas frecuentes puede mejorar la experiencia del usuario en tu sitio de WordPress. Esta función te permite mostrar preguntas y respuestas en un formato compacto, lo que facilita que los visitantes encuentren información rápidamente.
Además, usar jQuery para tu acordeón hace que tus preguntas frecuentes sean interactivas y fáciles de navegar.
En WPBeginner, hemos estado administrando un blog durante más de 16 años y hemos escrito cientos de artículos, guías y tutoriales. En algunos de ellos, notarás que hemos utilizado acordeones de preguntas frecuentes con jQuery para abordar preguntas comunes de nuestros lectores.
Este enfoque nos ha ayudado a atraer más visitantes, mejorar nuestros rankings de búsqueda e incluso generar clientes potenciales. En resumen, sabemos lo valioso que puede ser un acordeón de preguntas frecuentes dinámico.
En este artículo, te mostraremos cómo agregar fácilmente un acordeón de preguntas frecuentes con jQuery en WordPress, paso a paso.
¿Por qué usar un acordeón de preguntas frecuentes con jQuery en WordPress?
En diseño web, un acordeón es una herramienta para organizar el contenido de forma ordenada. Parece una lista donde cada elemento se expande para mostrar más detalles cuando haces clic en él y luego se contrae cuando terminas. Es una forma sencilla de ocultar o mostrar información adicional sin saturar la página.
Mientras tanto, jQuery es una biblioteca de JavaScript que simplifica la adición de funciones interactivas a tu sitio web. Por ejemplo, te permite agregar cosas como animaciones, menús desplegables y botones clickeables, sin tener que escribir código complejo desde cero.
Esto significa que usar un acordeón de preguntas frecuentes (FAQ) con jQuery en WordPress puede hacer que tu sitio sea más organizado y fácil de usar. Te permite mostrar preguntas frecuentes en un formato colapsable, ahorrando espacio y reduciendo el desorden.
De esa manera, los visitantes pueden encontrar rápidamente las respuestas que necesitan sin tener que desplazarse por largos bloques de texto. Esto puede darle a tu sitio una apariencia limpia y mejorar el SEO al hacer que tu contenido sea más estructurado, algo que los motores de búsqueda prefieren.
Dicho esto, veamos cómo agregar fácilmente un acordeón de preguntas frecuentes con jQuery en WordPress. Discutiremos varios métodos en este tutorial, pero puedes usar los enlaces a continuación para saltar al que prefieras:
- Método 1: Agregar un acordeón de preguntas frecuentes con jQuery usando WPCode (Recomendado)
- Método 2: Agregar un acordeón de preguntas frecuentes con jQuery usando un plugin gratuito (Fácil)
- Método 3: Agregar un acordeón de preguntas frecuentes con jQuery usando SeedProd
- Bono: Agregar Schema de FAQ en WordPress
Método 1: Agregar un acordeón de preguntas frecuentes con jQuery usando WPCode (Recomendado)
Si buscas una forma fácil y confiable de agregar un acordeón de preguntas frecuentes con jQuery, entonces este método es para ti.
Para este enfoque, necesitarás WPCode, que es el mejor plugin de fragmentos de código para WordPress del mercado. Es la forma más fácil y segura de agregar código personalizado a tu sitio web. Además, viene con un fragmento de código prehecho para un acordeón de preguntas frecuentes, lo que lo convierte en una opción ideal.
Primero, necesitas instalar y activar el plugin WPCode. Para más detalles, consulta nuestro tutorial sobre cómo instalar un plugin de WordPress.
Nota: WPCode tiene un plan gratuito, pero necesitarás la versión premium para desbloquear la biblioteca en la nube de fragmentos de código.
Una vez activado, visita la página Fragmentos de código » + Agregar fragmento desde el panel de WordPress y usa el formulario de búsqueda para localizar el fragmento 'FAQ Accordion'.
Una vez que hagas eso, simplemente haz clic en el botón ‘Usar fragmento’ debajo de él.
Esto te dirigirá a la página ‘Editar fragmento’, donde el código personalizado para un acordeón de preguntas frecuentes ya estará agregado en el cuadro ‘Vista previa del código’.
Aquí, solo necesitas escribir las preguntas y respuestas para tu acordeón dentro del código. Una vez que lo hagas, activa el interruptor en la parte superior a ‘Activo’ y haz clic en el botón ‘Actualizar’.
Ahora abre la página o publicación donde deseas agregar la sección de acordeón de preguntas frecuentes en el editor de bloques.
Aquí, haz clic en el botón ‘Agregar bloque’ (+) para abrir el menú de bloques y agrega el bloque ‘WPCode’ a la página. Ahora, abre el menú desplegable dentro del bloque para elegir el fragmento de código ‘Acordeón de preguntas frecuentes’ que creaste anteriormente.
Una vez hecho esto, haz clic en el botón ‘Actualizar’ o ‘Publicar’ en la parte superior para guardar tu configuración.
Ahora visita tu sitio de WordPress para ver el acordeón de preguntas frecuentes en acción.
Ten en cuenta que deberás repetir el proceso para crear un acordeón para otras páginas.
Método 2: Agregar un acordeón de preguntas frecuentes con jQuery usando un plugin gratuito (Fácil)
Si no deseas usar ningún código personalizado en tu sitio web, entonces este método es para ti.
Primero, necesitarás instalar y activar el plugin Advanced Accordion Gutenberg Block. Para más información, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.
Al activarlo, abre la página o publicación donde deseas agregar las preguntas frecuentes y haz clic en el botón ‘Agregar Bloque’ (+) en la parte superior. Una vez que aparezca el menú de bloques, simplemente localiza y agrega el bloque ‘Separate Accordion’ a la página.
A continuación, escribe tu primera pregunta y respuesta dentro del bloque de acordeón.
Luego, puedes agregar un esquema de preguntas frecuentes desde el panel de bloques expandiendo la pestaña con el mismo nombre y activando el interruptor ‘Hacerlo habilitar’.
Después de eso, cambia a la sección ‘Estilos’ dentro de la columna derecha. Desde aquí, puedes personalizar el color del texto del acordeón, el color de fondo, el color del ícono y mucho más.
Luego, puedes repetir este proceso para agregar tantas preguntas frecuentes como desees.
Finalmente, haz clic en el botón ‘Actualizar’ o ‘Publicar’ en la parte superior de la página para guardar tu configuración.
Ahora, visita tu página de preguntas frecuentes para ver el acordeón jQuery en acción.
Método 3: Agregar un acordeón de preguntas frecuentes con jQuery usando SeedProd
Si deseas agregar una sección interactiva de preguntas frecuentes a una página personalizada, este método es para ti.
Para hacer esto, puedes usar SeedProd. Es el mejor constructor de páginas de WordPress que también viene con un bloque de acordeón especial para agregar secciones de texto que se expanden y contraen en tus páginas.
Primero, necesitas instalar y activar el plugin SeedProd. Para obtener más información, consulta nuestra guía sobre cómo instalar un plugin de WordPress.
Nota: SeedProd tiene un plan gratuito. Sin embargo, necesitarás la versión pro para desbloquear el bloque 'Acordeón'.
Después de la activación, dirígete a la página SeedProd » Configuración para ingresar tu clave de licencia. Puedes encontrar esta información en tu cuenta en el sitio web de SeedProd.
Después de eso, visita la pantalla SeedProd » Páginas de destino desde la barra lateral de administración de WordPress.
Desde aquí, haz clic en el botón 'Agregar nueva página de destino'.
Esto te llevará a una nueva pantalla donde verás una lista de plantillas prefabricadas para elegir.
Una vez que elijas una, verás un aviso pidiéndote que ingreses un nombre y una URL para la página. Ingresa los detalles y haz clic en el botón 'Guardar y comenzar a editar la página' para continuar.
El constructor de arrastrar y soltar de SeedProd se abrirá ahora en tu pantalla. Aquí, verás una columna de bloques a la izquierda con una vista previa de la página a la derecha.
Ahora puedes agregar cualquier elemento a tu página, incluyendo una imagen, video, botón de llamada a la acción, encabezado o bloque de texto. Después de eso, arrastra y suelta el bloque 'Acordeón' donde quieras agregar tus preguntas frecuentes.
Luego, haz clic de nuevo en el bloque para abrir su configuración en la columna izquierda. Desde aquí, expande la pestaña ‘Acordeón 1’ y empieza a escribir tu primera pregunta frecuente.
Ahora puedes repetir el proceso para añadir otras entradas.
Por defecto, el bloque añade solo dos acordeones, pero puedes hacer clic en el botón ‘Añadir nuevo elemento’ para agregar tantas preguntas frecuentes como desees.
Incluso puedes configurar el tamaño de la fuente y el espacio entre cada acordeón usando los controles deslizantes proporcionados.
A continuación, cambia a la pestaña ‘Avanzado’ desde la parte superior.
Desde aquí, puedes cambiar el color del texto, el color del encabezado, el color de fondo y el color del divisor del acordeón.
Una vez que hayas terminado, simplemente haz clic en el botón ‘Guardar’ y luego en ‘Publicar’ en la parte superior.
Ahora puedes visitar la página personalizada recién creada para ver tu acordeón de preguntas frecuentes con jQuery.
Bono: Agregar Schema de FAQ en WordPress
Una vez que hayas añadido estos acordeones de preguntas frecuentes con jQuery, es una buena idea añadirles el esquema de preguntas frecuentes. Esto puede mejorar tus rankings SEO y tu tasa de clics orgánica al hacer que tus preguntas frecuentes aparezcan directamente en los resultados de búsqueda de Google.
Para esto, recomendamos All in One SEO, que es el mejor plugin de SEO del mercado. Es una solución todo en uno que optimiza tu sitio para los motores de búsqueda y te ayuda a clasificar más alto con solo unos pocos clics.
Hemos estado usando esta herramienta en WPBeginner durante los últimos años y, desde entonces, hemos visto mejoras notables en nuestros rankings de búsqueda. Para más detalles, consulta nuestra reseña de AIOSEO.
La herramienta viene con una función de marcado de esquema incorporada que puede ayudar a los motores de búsqueda a comprender mejor tu contenido. Una vez activado el plugin, simplemente abre tu página de Preguntas Frecuentes en el editor de bloques.
Luego, desplázate hacia abajo hasta la sección 'Configuración de AIOSEO' y cambia a la pestaña 'Esquema'. Desde aquí, haz clic en el botón 'Generar Esquema'.
Esto abrirá el 'Catálogo de Esquema', donde deberás encontrar la opción de Preguntas Frecuentes y hacer clic en el botón 'Agregar Esquema' junto a ella.
Después de eso, puedes agregar tus Preguntas Frecuentes tal como aparecen en tu acordeón. Una vez que hayas terminado, simplemente haz clic en el botón 'Agregar Esquema' para guardar tu configuración.
Ahora, los motores de búsqueda indexarán estas preguntas y las mostrarán en las páginas de resultados de búsqueda, mejorando tus rankings.
Para más detalles, consulta nuestro tutorial sobre cómo agregar esquema de Preguntas Frecuentes en WordPress.
Esperamos que este artículo te haya ayudado a aprender cómo agregar un acordeón de preguntas frecuentes con jQuery en WordPress. También te puede interesar ver nuestra guía sobre cómo mostrar código fácilmente en tu sitio de WordPress y nuestras mejores opciones para las mejores herramientas de desarrollo de WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Dennis Muthomi
El Método 1 con WPCode fue de gran ayuda, es un gran equilibrio entre fácil y personalizable.
Como desarrollador de WordPress, he hecho cosas similares antes, pero tu guía paso a paso la hace accesible también para principiantes.
Una cosa que añadiré a lo que he hecho antes es usar transiciones CSS para suavizar las animaciones de apertura/cierre del acordeón, lo hará aún mejor. Este será un gran recurso para mis proyectos futuros.
Zac Smith
Hola, instalé el plugin Quick and Easy FAQ y luego seguí este video. No obtengo un acordeón de preguntas frecuentes, sino que lo único que aparece es la primera pregunta y respuesta de la FAQ... y la pregunta está enlazada.
Daniel
¡Gran tutorial!
Mi depurador se quejó de la variable indefinida $faq.
Variable definida al principio de la función accordion_shortcode() con $faq = "";
Además, mi versión del plugin FAQ introduce el valor 'faq' en lugar de 'query' en el campo post_type de la tabla postes.
Línea 23 ajustada:
‘post_type’ => ‘faq’,
Johan Johnsson
Es tonto que nos hagas instalar un plugin para una página de preguntas frecuentes y seguir tu tutorial anterior sobre cómo hacer esa página de preguntas frecuentes, y luego copiar (esencialmente descargar) el plugin que hiciste para este tutorial. Así que esencialmente estamos descargando 2 plugins ya terminados.
No creo que la gente venga aquí a descargar 2 complementos, sino más bien a APRENDER a hacer su propio menú de acordeón personalizado. No veo por qué debería seguir esta “guía de cómo hacerlo” cuando puedo simplemente descargar otro complemento de WP que haga el mismo trabajo, si no mejor.
Y el hecho de que este complemento dependa del complemento de preguntas frecuentes parece bastante innecesario. ¿Por qué no hiciste un complemento independiente y lo hiciste dinámico? Así puedes usarlo para cualquier contenido en cualquier página.
Soporte de WPBeginner
Hola Johan,
La mayoría de nuestros usuarios son principiantes a quienes les resultaría difícil copiar y pegar código. Es por eso que lo hicimos un complemento para que los usuarios puedan descargarlo e instalarlo. Si deseas usar el método del código, aquí tienes el código para que lo estudies y lo uses en tu tema o en un complemento específico del sitio. Avísanos si necesitas ayuda con eso.
Administrador
Kim
¿Cómo hago para que al hacer clic en el título se colapse? Veo que se colapsa cuando haces clic en otra parte del acordeón, pero busco la función para que se colapse al hacer clic en cada título.
christina
Gracias por el tutorial. Soy muy nuevo en la codificación y el diseño de páginas web. He seguido las instrucciones para pegar los códigos en mi bloc de notas en mi Mac. ¿Hay una forma diferente de guardar el archivo que no sea en bloc de notas como un archivo php o js en la carpeta? Además, ¿podrías indicarme paso a paso cómo abrir un cliente FTP (¿qué es, por cierto?) y cómo subir mi carpeta my-accordian a /wp-contnt/plugins/directory a mi sitio web de WP. Muchas gracias.
christina
Cuando guardo el archivo de TextEdit, se guarda como my-accordion.php.rtf. ¿Es correcto?
Soporte de WPBeginner
No. Necesitas guardarlo como my-accordion.php. Los programas de Windows a veces agregan esta extensión a tu archivo de texto. Intenta usar la opción Guardar archivo como.
Administrador
Soporte de WPBeginner
En Mac tienes un programa llamado TextEdit. Para FTP, consulta nuestra guía sobre cómo usar FTP para subir archivos de WordPress.
Administrador
Nurul Amin
He activado este plugin con éxito, pero no funciona. No muestra nada en mi página de Preguntas Frecuentes.
Personal de WPBeginner
El código de la captura de pantalla que compartiste no se parece al código que compartimos arriba. Sin embargo, el código en la captura de pantalla tiene etiquetas HTML que no deberían estar ahí. Debería ser así:
‘posts_per_page’ => ’10’,
Stefan 13
Esto es bastante raro. Tus comentarios me dejaron desconcertado, ya que claramente estaba viendo el código ahí mismo en mi pantalla. Luego me di cuenta de que todas esas etiquetas de conversión de divisas provenían de otro de mis complementos de Firefox, que agrega dinámicamente un menú contextual a los números en las páginas web, de ahí que el código fuente pareciera diferente.
¡Gracias por tu ayuda!
Stefan 13
Cuando intento activar el plugin en WP 4.1, recibo este mensaje de error:
No se pudo activar el plugin porque provocó un error fatal.
Parse error: syntax error, unexpected ‘<' in /home2/laurepc3/public_html/shala/wp-content/plugins/my-accordion/my-accordion.php on line 20
¿Alguna idea que pueda ayudar con esto?
Personal de WPBeginner
El código que pegaste tiene un carácter inesperado 10,
Asegúrate de que posts_per_page esté entre comillas simples. Asegúrate de que haya un signo igual antes del signo mayor que y asegúrate de que haya una coma al final de la línea.
Invitado
No tengo eso en la línea 20. Lo que puedo ver en la línea 20 en la publicación anterior y en mi archivo es esto:
‘posts_per_page’ => 10,
Captura de pantalla adjunta también.
¿Entonces la publicación anterior muestra contenido de archivo incorrecto?
Stefan 13
El código en mi archivo no se parece a lo que publicaste para la línea 20, pero es el mismo código que está arriba:
‘posts_per_page’ => 10,
‘orderby’ => ‘menu_order’,
¿Eso significa que el código del artículo está desactualizado?
¡Gracias por aclarar!
Captura de pantalla adjunta:
Caroline
¡Gracias por este tutorial! ¡Realmente me ayuda con mi problema!
Quiero poner temas como este: Tema "Eventos": un cuadro de acordeón y "Eventos Pasados": otro cuadro de acordeón con el tema Eventos Pasados. Intenté el shortcode [faq_accordion + topic="events"] pero no pasó nada. ¿Qué puedo hacer? ¡¡¡Muchas gracias!!!
raouf
hola .. gracias por este tutorial, es útil. pero solo hice una modificación simple para hacer un acordeón para una categoría específica. funciona, pero me muestra el editor clásico de mi publicación, no el editor visual. ¿puedes ayudarme
Mahesh Waghmare
Gracias…
Rana
Hola
¿Hay alguna forma en la que solo pueda mostrar el “título de la categoría, es decir, Tema de preguntas frecuentes” y el tema que aparece debajo de cada uno?
No quiero todo el contenido, solo el título de la categoría y al hacer clic en él se mostraría el título del tema)
Raba
Chris
¿Cuál es la mejor manera de hacer que el CSS funcione? Tengo un tema hijo con mi código CSS personalizado. ¿Necesito hacer algo en ese archivo ya que no veo ningún CSS de Google?
Soporte de WPBeginner
Chris, el CSS de Google está en cola y solo se carga cuando se muestra tu acordeón de Preguntas Frecuentes. Abre la página que contiene tu acordeón de Preguntas Frecuentes y haz clic derecho y selecciona Ver código fuente. En la página de ver código fuente, busca
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/humanity/jquery-ui.csssi está ahí, entonces significa que has cargado correctamente el tema CSS.Administrador
Chris S.
Pude hacer que tu plugin funcione correctamente con el Administrador de Preguntas Frecuentes, pero tenía algunas preguntas. Solo muestra 10 de las Preguntas Frecuentes (lo que supongo que es un número predeterminado). Si uso el shortcode incorporado que viene con el plugin Administrador de Preguntas Frecuentes, puedo obtener la lista completa para mostrar
Para mostrar TODAS: coloca [faq limit="-1"] en una publicación / página
¿Tienes alguna sugerencia sobre cómo manejar esto?
Además, el Administrador de Preguntas Frecuentes permite crear diferentes listas por tema. ¿Habría una forma sencilla de modificar tu plugin para hacer uso de esto?
Lista todo de una sola categoría de tema de preguntas frecuentes: coloca [faq faq_topic="topic-slug"] en una publicación / página
¡Gran trabajo de lo contrario!
Soporte de WPBeginner
Para mostrar las preguntas frecuentes, el Administrador de preguntas frecuentes utiliza estos parámetros en el shortcode:
[faq faq_topic="topic-slug"][faq limit="-1"] es bastante autoexplicativo. Mostrará todas las preguntas frecuentes.
Sin embargo, si deseas mostrar más preguntas frecuentes en el acordeón, necesitas modificar el parámetro de consulta en el plugin FAQ Accordion de WPBeginner, de la siguiente manera:
1-click Use in WordPress
Administrador
Chris S.
¡Genial, gracias por tu ayuda con esto!
Garrett
Esto no me está funcionando como esperaba. El plugin se activa correctamente y el shortcode se está procesando, pero así es como se ve la salida...
Opté por usar el plugin FAQ manager con tu código para arreglar el horrible estilo que genera el plugin.
Pero al final, esto es lo que parece. ¿Algún consejo?
http://screencast.com/t/K2VfuBOptcn
¡Muchas gracias de antemano!!
~Garrett
Atlanta, GA
Garrett
Parece que la lista no está heredando ninguna información de estilo de jquery-ui.css, aunque verifiqué que un enlace al archivo jquery-ui.css SÍ está presente en la página.
Línea donde se incluye jquery-ui.css:
Explorando reglas CSS:
¿Cómo puede ser esto?
¡Gracias!
~Garrett
Soporte de WPBeginner
Intenta cambiar a un tema predeterminado de WordPress para ver si funciona entonces.
Administrador
Richard Morrison
Esto se ha roto después de la última actualización de Wordpress. Ya no puedo hacer que se muestre el acordeón. El shortcode ahora solo muestra el texto del FAQ manager.
Piet
la línea 20 de tu archivo my-accordion.php dice: ‘numberposts’
esa función ha sido deprecada desde... hace mucho tiempo.
ya que ustedes se dedican a dar tutoriales a principiantes, ¿pueden al menos poner las funciones correctas?
obviamente esto debería ser ‘posts_per_page’
Personal editorial
Artículo actualizado.
Administrador
Mary-Anne
Agradecería algo de ayuda con esto. Estoy intentando instalar en una 3.5.2 en un sitio de red. El Administrador de Red tiene el Plugin listado y Activado en Red.
Sin embargo, no está listado en los sub-sitios.
¿Se ha probado esto con sitios de red todavía? Parece justo lo que se necesita. Gracias por todos sus esfuerzos con WPBEGINNER.
Gracias.
Personal editorial
Esto suena como una pregunta de soporte que debe publicarse en el foro del plugin.
Administrador
birge
Hola,
Hice mi-accordion.php y accordion.js, los subí y todo, pero aún así no veo el plugin en la lista de plugins. ¿Qué salió mal?
Gracias,
birge
Personal editorial
¿Estás seguro de que la ubicación del archivo del plugin es algo como esto: /wp-content/plugins/accordion/my-accordion.php
Administrador
birge
Exactamente.
alin
I do just what you said but I can’t activate the plugin from plugins dashboard because I can’t se it
curdaneta
Olvidaste incluir el archivo de script “accordion.js”...
Personal editorial
Compartimos el código de accordion.js ahí. También se está incluyendo usando enqueue script.
Administrador
curdaneta
Lo siento, pero encuentro el enlace al archivo
Personal editorial
No hay enlace al archivo. Hemos compartido el código que necesitas pegar en un nuevo archivo que crearás llamado accordion.js
curdaneta
Perdón, fue mi error
No leí con atención. Ahora todo funciona como se esperaba
curdaneta
curdaneta
Hola
No me funciona usando el shortcode en varios párrafos
Saludos
curdaneta
Gaelyn
Gracias. Puedo ver dónde esto será muy útil.
Drake
Gracias por el artículo. Sería bueno tener uno similar que explique cómo introducir pestañas de jQuery en páginas/entradas.