Cómo agregar un acordeón de preguntas frecuentes de jQuery en WordPress

Recientemente, uno de nuestros usuarios nos preguntó si había una manera de agregar un acordeón de preguntas frecuentes en su sitio de WordPress. Hay muchos complementos disponibles que le permiten agregar una sección de preguntas frecuentes o preguntas frecuentes en WordPress. En este artículo, le mostraremos cómo agregar un acordeón de preguntas frecuentes de jQuery en su sitio de WordPress.

Que es el acordeon?

En diseño web, acordeón es un término utilizado para un patrón de diseño de interfaz de usuario que tiene pestañas o bloques de contenido que colapsan o amplían la interacción del usuario. Cada pestaña tiene contenido debajo que se expande cuando el usuario hace clic en el elemento del menú. En términos simples, es como un menú que se expande al hacer clic en él. Hemos utilizado un efecto similar en nuestra página de configuración gratuita del blog de WordPress. A continuación se muestra una captura de pantalla de una muestra de acordeón.

Video Tutorial

Si no te gusta el video o necesitas más instrucciones, continúa leyendo.

Agregando un jQuery FAQ Acordeón

Antes de que pueda agregar un acordeón de preguntas frecuentes de jQuery, debe asegurarse de tener una sección de preguntas frecuentes. Comience por agregar una sección de preguntas frecuentes siguiendo nuestro tutorial sobre cómo agregar una sección de preguntas frecuentes en WordPress.

Ahora continuemos con la adición del acordeón de preguntas frecuentes de jQuery. WordPress viene con la biblioteca jQuery sin embargo, no tiene temas de jQuery. Cargaremos eso desde Google CDN y pondremos en cola estos scripts en WordPress. También crearemos un código corto que muestre nuestras preguntas frecuentes. Lo más importante es que haremos todo eso mediante la creación de un complemento de WordPress..

Crea una carpeta en tu escritorio y llámala mi acordeón. Abra el Bloc de notas o cualquier otro editor de texto de su elección. Crear un archivo llamado mi acordeon y pega este código en su interior:

  10, 'orderby' => 'menu_order', 'order' => 'ASC', 'post_type' => 'question',)); // Generando salida $ faq. = ''; // Abra el contenedor foreach ($ posts como $ post) // Genere el marcado para cada pregunta $ faq. = Sprintf (('
% 1 $ s
% 2 $ s '), $ post-> post_title, wpautop ($ post-> post_content));  $ faq. = ''; // Cerrar el contenedor return $ faq; // Devolver el HTML.  add_shortcode ('faq_accordion', 'accordion_shortcode'); 

Después de guardar los cambios en ese archivo, abra un nuevo archivo en blanco. Guardalo como accordeon.js. Luego pegue este código dentro de él y guarde el archivo:

 jQuery (document) .ready (function () jQuery ("# ​​accordion"). accordion ();) (); 

Ahora tenemos nuestro plugin listo para subir. Abra su cliente FTP y cargue la carpeta my-accordion en el directorio / wp-contnt / plugins / en su sitio web de WordPress. A continuación, debe activar el complemento yendo a la pantalla de su complemento en el área de administración de WordPress.

Adición de una página de preguntas frecuentes con el acordeón

Para mostrar estas preguntas frecuentes en un formato de acordeón, debe crear una página nueva. Ir Páginas »Añadir Nuevo. Dale a tu página un título, por ejemplo. Preguntas frecuentes y en el área de edición de la página ingrese este código corto:

[faq_accordion]

Guarde y publique su página y obtenga una vista previa. Verá sus preguntas frecuentes en un buen menú de acordeón.

Cambio de estilo y colores de tu acordeón

Para los colores y el estilo, esta pregunta frecuente Accordion utiliza los temas de jQuery UI alojados en Google. Es básicamente una hoja de estilo, y si lo prefiere, puede descargarla y ponerla en su propio sitio web. El sitio web de jQuery tiene una sección de temas de jQuery UI con algunos temas listos para usar. Como puede ver, hemos utilizado el tema de la humanidad en nuestro complemento. Puede reemplazarlo con cualquiera de los temas disponibles, como suavidad, cupertino, etc. También puede crear o modificar estos temas en Themeroller.

Esperamos que este artículo te haya ayudado a agregar un acordeón de preguntas frecuentes de jQuery en tu sitio web de WordPress. Para comentarios y preguntas por favor deje un comentario a continuación.