Cómo añadir un acordeón de jQuery FAQ en WordPress

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

¿Qué es el acordeón?

En el 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 se expanden al interactuar con el usuario. Cada pestaña tiene un contenido debajo de ellas 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 usado un efecto similar en nuestra página gratuita de configuración de blog de WordPress. A continuación se muestra una captura de pantalla de un acordeón de muestra.

Video Tutorial

Suscribirse a AprenderWP

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

Adición de un acordeón de preguntas frecuentes de jQuery

Antes de poder añadir un acordeón de preguntas frecuentes de jQuery, debe asegurarse de que tiene una sección de preguntas frecuentes. Empieza por añadir una sección de preguntas frecuentes siguiendo nuestro tutorial sobre cómo añadir una sección de preguntas frecuentes en WordPress.

Ahora vamos a seguir adelante con la adición del acordeón jQuery FAQ. WordPress viene con la librería jQuery pero no tiene temas jquery. Lo cargaremos desde la CDN de Google y pondremos en cola estos scripts en WordPress. También crearemos un código abreviado que muestra nuestras preguntas más frecuentes. Lo más importante es que haremos todo eso creando un plugin de WordPress.

Cree una carpeta en su escritorio y llámela mi-acordeón. Abra el Bloc de notas o cualquier otro editor de texto de su elección. Cree un archivo llamado my-accordion.php y pegue este código dentro de él:

1234567891011121314141516171819202122232425262728293031323334353637 10,'orderby'=> 'menu_order','order'=> ` ASC','post_type'=> `pregunta',)); // Generando una salida $faq .= Abrir el contenedor para cada una de las preguntas ($postsas$post) { // Generar el marcado para cada pregunta (Question$faq.= sprintf(')

1$s

%2$s'),$post->post_title,wpautop($post->post_content));}$faq.= ''; //Cerrar el retorno del contenedor$faq; //Regresar el HTML.}add_shortcode('faq_accordion', 'accordion_shortcode');

Después de guardar los cambios en ese archivo, abra un nuevo archivo en blanco. Guárdalo como acordeón.js. A continuación, pegue este código en su interior y guarde el archivo:

123jQuery(document).ready(function() {jQuery("#accordion").accordion();})();

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

Adición de una página de preguntas frecuentes con Accordion

Para mostrar estas preguntas frecuentes en formato de acordeón, debe crear una nueva página. Vaya a Páginas " Añadir nuevo . Dale un título a tu página, por ejemplo, preguntas frecuentes y en el área de edición de página introduce este código abreviado:

[faq_accordion]

Guarde y publique su página y obtenga una vista previa de la misma. Verás tus preguntas frecuentes en un bonito menú de acordeón.

Cambiar el estilo y los colores de su acordeón

Para los colores y el estilo, este FAQ Accordion utiliza jQuery UI Themes alojado 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 interfaz de usuario de jQuery con algunos temas listos para usar. Como puedes ver, hemos usado el tema de la humanidad en nuestro plugin. Puede sustituirlo por cualquiera de los temas disponibles como suavidad, cupertino, etc. También puede crear o modificar estos temas en Themeroller.

Esperamos que este artículo le haya ayudado a añadir un acordeón de preguntas frecuentes de jQuery en su sitio web de WordPress. Para comentarios y preguntas, por favor deje un comentario a continuación.