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

 

Recientemente, uno de nuestros usuarios nos preguntó si había alguna forma de que agreguen un acordeón de preguntas frecuentes en su sitio de WordPress. Hay muchos complementos que puede usar para agregar preguntas frecuentes o preguntas frecuentes en WordPress. En este artículo, le mostraremos cómo agregar un acordeón de preguntas frecuentes de jQuery a su sitio de WordPress.

Que es el acordeón

En diseño web, acordeón es un término que se utiliza para describir un patrón de diseño de interfaz de usuario que contiene pestañas o bloques de contenido que se contraen o expanden con la interacción del usuario. Debajo de cada pestaña hay contenido que se expande cuando el usuario hace clic en el elemento del menú. En términos simples, 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.

Un menú de acordeón para preguntas frecuentes

Video tutorial

Suscríbete a WPBeginner

Si no le gusta el video o necesita más instrucciones, siga leyendo.

Agregar un acordeón de preguntas frecuentes de jQuery

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 agreguemos el acordeón jQuery FAQ. WordPress viene con la biblioteca jQuery, pero no tiene ningún tema jquery. Vamos a cargar eso desde Google CDN y poner en cola estos scripts en WordPress. También crearemos un código corto que mostrará nuestras preguntas frecuentes. Lo más importante es que hacemos todo esto 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 u otro editor de texto de su elección. Crea un archivo llamado my-accordion.php y pega este código:

<?php
/** 
Plugin Name: WPBeginner's FAQ Accordion
Description: A jQuery powered Accordion for FAQs based on a tutorial by WPBeginner
Version: 1.0
Author: WPBeginner
Author URI: https://www.wpbeginner.com
License: GPL2
*/
function accordion_shortcode() { 

// Registering the scripts and style
wp_register_style('wpb-jquery-ui-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/humanity/jquery-ui.css', false, null);
wp_enqueue_style('wpb-jquery-ui-style');
wp_register_script('wpb-custom-js', plugins_url('/accordion.js', __FILE__ ), array('jquery-ui-accordion'), '', true);
wp_enqueue_script('wpb-custom-js');

// Getting FAQs from WordPress FAQ Manager plugin's custom post type questions
$posts = get_posts(array(  
'posts_per_page' => 10,
'orderby' => 'menu_order',
'order' => 'ASC',
'post_type' => 'question',
));
	
// Generating Output 
$faq  .= '<div id="accordion">'; //Open the container
foreach ( $posts as $post ) { // Generate the markup for each Question
$faq .= sprintf(('<h3><a href="">%1$s</a></h3><div>%2$s</div>'),
$post->post_title,
wpautop($post->post_content)
);
}
$faq .= '</div>'; //Close the container
return $faq; //Return the HTML.
}
add_shortcode('faq_accordion', 'accordion_shortcode');

Después de guardar sus cambios en este archivo, abra un nuevo archivo en blanco. Guardarlo como accordion.js. A continuación, pegue este código y guarde el archivo:

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

Ahora tenemos nuestro complemento listo para ser cargado. Abra su cliente FTP y cargue la carpeta my-akkordeon 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.

Agregar una página de preguntas frecuentes con acordeón

Para ver estas preguntas frecuentes en formato de acordeón, deberá crear una nueva página. Ir Páginas »Agregar nuevo. Dale un título a tu página, p. Ej. B. Preguntas frecuentes e ingrese este código corto en el área de edición de la página:

[faq_accordion]

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

Cambiar el estilo y los colores de tu acordeón

Para los colores y el estilo, este acordeón de preguntas frecuentes utiliza diseños de interfaz de usuario de jQuery 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 Temas de interfaz de usuario de jQuery Sección con algunos temas ya preparados. Como puede ver, usamos 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 Theme Roller.

Temas de interfaz de usuario de jQuery

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