Recientemente, uno de nuestros usuarios nos preguntó si había alguna forma de que agregaran preguntas frecuentes sobre el acordeón 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.
¿Qué es el acordeón?
En diseño web, acordeón es un término que se usa para un patrón 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 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 de WordPress gratuita. A continuación se muestra una captura de pantalla de un ejemplo de acordeón.
Videotutorial
Si no le gusta el video o necesita más instrucciones, siga leyendo.
Preguntas frecuentes sobre cómo agregar un jQuery Accordion
Antes de que pueda agregar preguntas frecuentes de jQuery Accordion, debe asegurarse de tener una sección de preguntas frecuentes. Comience a agregar una sección de preguntas frecuentes siguiendo nuestro tutorial sobre cómo agregar una sección de preguntas frecuentes en WordPress.
Ahora sigamos agregando el acordeón jQuery FAQ. WordPress viene con la biblioteca jQuery pero no tiene temas jquery. Lo cargaremos desde Google CDN y pondremos en cola estos scripts en WordPress. También crearemos un código abreviado que muestre nuestras preguntas frecuentes. Lo más importante es que haremos todo esto creando un complemento para 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 de su elección. Crea un archivo llamado my-accordion.php y pega este código en él:
<?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 los cambios en ese archivo, abra un nuevo archivo en blanco. guardarlo como accordion.js. Luego pegue este código en él y guarde el archivo:
jQuery(document).ready(function() {
jQuery("#accordion").accordion();
})();
Ahora tenemos nuestro complemento listo para cargar. 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 del complemento en el área de administración de WordPress.
Se agregó 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 Páginas »Agregar nuevo. Asigne un título a su página, como Preguntas frecuentes y, en el área de edición de la página, ingrese este código abreviado:
[faq_accordion]
Guarde y publique su página y obtenga una vista previa. Verá sus preguntas frecuentes en un agradable menú de acordeón.
Cambia el estilo y los colores de tu acordeón
Para los colores y el estilo, estas preguntas frecuentes sobre acordeón utilizan temas de jQuery UI alojados en Google. Es básicamente una hoja de estilo, y si lo prefiere, puede descargarla y colocarla en su sitio web.El sitio web jQuery tiene un Temas de la interfaz de usuario de JQuery sección con algunos temas listos para usar. Como puede ver, hemos utilizado el tema de la humanidad en nuestro complemento. Puedes reemplazarlo con cualquiera de los temas disponibles como smoothness, cupertino, etc. También puede crear o editar estos temas en Themeroller.
Esperamos que este artículo le haya ayudado a agregar un acordeón de preguntas frecuentes de jQuery en su sitio web de WordPress. Para comentarios y preguntas, deje un comentario a continuación.
