¿Qué es el acordeón?
En el diseño web, el acordeón es un término que se utiliza para designar un patrón de diseño de interfaz de usuario que tiene pestañas o bloques de contenido que se contraen o expanden con 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 de blog gratuita de WordPress. A continuación se muestra una captura de pantalla de un acordeón de muestra.
Tutorial en video
Si no le gusta el video o necesita más instrucciones, continúe leyendo.
Agregar un acordeón de preguntas frecuentes de jQuery
Antes de que pueda 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 sigamos con la adición del acordeón jQuery FAQ. WordPress viene con la biblioteca jQuery, sin embargo, no tiene temas de jquery. Lo cargaremos desde Google CDN y pondremos en cola estos scripts en WordPress. También crearemos un shortcode que muestra nuestras preguntas frecuentes. Lo más importante es que haremos todo eso creando un WordPress. plugin.
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 dentro de él:
<?php
/**
Plugin Name: 's FAQ Accordion
Description: A jQuery powered Accordion for FAQs based on a tutorial by
Version: 1.0
Author:
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 ese archivo, abra un nuevo archivo en blanco. Guárdalo como accordion.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 cargar. Abra su cliente FTP y cargue la carpeta my-accordion en / wp-contnt /plugins/ directorio en su sitio web de WordPress. A continuación, debe activar el plugin yendo a tu pluginen el área de administración de WordPress.
Agregar una página de preguntas frecuentes con Accordion
Para mostrar 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, por ejemplo, preguntas frecuentes y en el área de edición de la página introduzca esto shortcode:
[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.
Cambio de estilo y colores de su acordeón
Para los colores y el estilo, este Accordion de preguntas frecuentes utiliza temas de interfaz de usuario de jQuery alojados en Google. Básicamente es una hoja de estilo, y si lo prefieres puedes descargarla y ponerla en tu propio sitio web. El sitio web de jQuery tiene un Temas de 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 plugin. 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 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.
.
Fuente: wpbeginner