Recientemente, uno de nuestros usuarios nos preguntó si había alguna forma de agregar un acordeón de preguntas frecuentes a 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.
¿Qué es el acordeón?
Contents
En diseño web, acordeón es un término utilizado para una plantilla de diseño de interfaz de usuario que tiene pestañas o bloques de contenido que se contraen o expanden durante la interacción del usuario. Cada pestaña tiene contenido debajo de ellas que se expande cuando el usuario hace clic en el elemento del menú. En pocas palabras, es como un menú que se expande cuando haces clic en él. Usamos un efecto similar en nuestra página de configuración de blog gratuita de WordPress. A continuación se muestra una captura de pantalla de un acordeón de ejemplo.

Video tutorial
Suscríbase a MundoCMS Si no le gusta el video o necesita más instrucciones, siga leyendo.
Agregar un Accordion jQuery FAQ
Antes de poder agregar un acordeón de preguntas frecuentes de jQuery, debe asegurarse de tener una sección de preguntas frecuentes. Comience agregando una sección de preguntas frecuentes siguiendo nuestro tutorial sobre cómo agregar una sección de preguntas frecuentes en WordPress. Ahora vamos a agregar el acordeón jQuery FAQ. WordPress viene con la biblioteca jQuery pero no tiene temas de jquery. Cargaremos esto desde Google CDN y pondremos en cola estos scripts en WordPress. También crearemos un código corto que muestra nuestras preguntas frecuentes. Lo más importante es que haremos todo esto creando un complemento de WordPress. Cree una carpeta en su escritorio y asígnele el nombre my-accordion. Abra el Bloc de notas o cualquier otro editor de texto que desee. Cree un archivo llamado my-accordion.php y pegue este código en él:
10, ‘orderby’ => ‘menu_order’, ‘order’ => ‘ASC’, ‘post_type’ => ‘pregunta’,)); // Genera el resultado $ faq. = ‘
% 1 $ s
‘), $ post-> post_title, wpautop ($ post-> post_content)); } $ faq. = ‘
‘; // Cerrar el contenedor return $ faq; // Devuelve el HTML. } add_shortcode (‘faq_accordion’, ‘accordion_shortcode’); Después de guardar sus cambios en este archivo, abra un nuevo archivo en blanco. Guárdelo como accordion.js. Luego pegue este código dentro y guarde el archivo: jQuery (documento) .ready (function () {jQuery («# accordion»). Accordion ();}) (); Ahora tenemos nuestro complemento listo para descargar. Abra su cliente FTP y cargue la carpeta my-accordion en el directorio / wp-contnt / plugins / de su sitio web de WordPress. A continuación, debe activar el complemento accediendo a la pantalla de su complemento en el área de administración de WordPress.
Agregar una página de preguntas frecuentes con Accordion
Para ver estas preguntas frecuentes en formato de acordeón, debe crear una nueva página. Ir a Páginas »Agregar nuevo. Asigne un título a su página, por ejemplo, Preguntas frecuentes y en el cuadro 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ás tus preguntas frecuentes en un bonito menú de acordeón.
Cambia el estilo y los colores de tu acordeón
En cuanto a colores y estilo, estas preguntas frecuentes sobre Accordion utilizan temas de interfaz de usuario de jQuery alojados en Google. Básicamente es 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 interfaz de usuario de jQuery 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 dulzura, cupertino, etc. También puede crear o modificar estos temas en Themeroller.
Esperamos que este artículo le haya ayudado a agregar las preguntas frecuentes sobre jQuery Accordion en su sitio de WordPress. Para sus comentarios y preguntas, deje un comentario a continuación.