[{"@context":"https:\/\/schema.org\/","@type":"BlogPosting","@id":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-agregar-un-acordeon-de-preguntas-frecuentes-de-jquery-en-wordpress\/#BlogPosting","mainEntityOfPage":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-agregar-un-acordeon-de-preguntas-frecuentes-de-jquery-en-wordpress\/","headline":"C\u00f3mo agregar un acorde\u00f3n de preguntas frecuentes de jQuery en WordPress","name":"C\u00f3mo agregar un acorde\u00f3n de preguntas frecuentes de jQuery en WordPress","description":"Recientemente, uno de nuestros usuarios nos pregunt\u00f3 si hab\u00eda alguna forma de agregar un acorde\u00f3n de preguntas frecuentes en su sitio de WordPress. Hay muchos ... Leer m\u00e1s<\/a>","datePublished":"2021-06-29","dateModified":"2021-06-29","author":{"@type":"Person","@id":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/#Person","name":"adrimadise\u00f1o","url":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/","image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Organization","name":"adrimadise\u00f1o.com","logo":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","width":450,"height":90}},"image":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/Como-agregar-un-acordeon-de-preguntas-frecuentes-de-jQuery-en.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/Como-agregar-un-acordeon-de-preguntas-frecuentes-de-jQuery-en.png","height":380,"width":520},"url":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-agregar-un-acordeon-de-preguntas-frecuentes-de-jquery-en-wordpress\/","about":["Tutoriales Wordpress"],"wordCount":863,"articleBody":"Recientemente, uno de nuestros usuarios nos pregunt\u00f3 si hab\u00eda alguna forma de agregar un acorde\u00f3n de preguntas frecuentes en su sitio de WordPress. Hay muchos complementos disponibles que le permiten agregar una secci\u00f3n de preguntas frecuentes o preguntas frecuentes en WordPress. En este art\u00edculo, le mostraremos c\u00f3mo agregar un acorde\u00f3n de preguntas frecuentes de jQuery en su sitio de WordPress. \u00bfQu\u00e9 es el acorde\u00f3n?En el dise\u00f1o web, el acorde\u00f3n es un t\u00e9rmino que se usa para designar un patr\u00f3n de dise\u00f1o de interfaz de usuario que tiene pesta\u00f1as o bloques de contenido que se colapsan o se expanden con la interacci\u00f3n del usuario. Cada pesta\u00f1a tiene contenido debajo que se expande cuando el usuario hace clic en el elemento del men\u00fa. En t\u00e9rminos simples, es como un men\u00fa que se expande al hacer clic en \u00e9l. Hemos utilizado un efecto similar en nuestra p\u00e1gina de configuraci\u00f3n de blog gratuita de WordPress. A continuaci\u00f3n se muestra una captura de pantalla de un acorde\u00f3n de muestra.Tutorial en videoSi no le gusta el video o necesita m\u00e1s instrucciones, contin\u00fae leyendo.Agregar un acorde\u00f3n de preguntas frecuentes de jQueryAntes de que pueda agregar un acorde\u00f3n de preguntas frecuentes de jQuery, debe asegurarse de tener una secci\u00f3n de preguntas frecuentes. Comience agregando una secci\u00f3n de preguntas frecuentes siguiendo nuestro tutorial sobre c\u00f3mo agregar una secci\u00f3n de preguntas frecuentes en WordPress.Ahora sigamos con la adici\u00f3n del acorde\u00f3n 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\u00e9n crearemos un c\u00f3digo corto que muestra nuestras preguntas frecuentes. Lo m\u00e1s importante es que haremos todo eso creando un complemento de WordPress.Cree una carpeta en su escritorio y as\u00edgnele el nombre my-accordion. Abra el Bloc de notas o cualquier otro editor de texto de su elecci\u00f3n. Crea un archivo llamado my-accordion.php y pega este c\u00f3digo dentro de \u00e9l:<?php\/** Plugin Name: adrimadise\u00f1o's FAQ AccordionDescription: A jQuery powered Accordion for FAQs based on a tutorial by adrimadise\u00f1oVersion: 1.0Author: adrimadise\u00f1oAuthor URI: https:\/\/www.wpbeginner.comLicense: GPL2*\/function accordion_shortcode() { \/\/ Registering the scripts and stylewp_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',));\t\/\/ Generating Output $faq .= '<div id=\"accordion\">'; \/\/Open the containerforeach ( $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 containerreturn $faq; \/\/Return the HTML.}add_shortcode('faq_accordion', 'accordion_shortcode');Despu\u00e9s de guardar sus cambios en ese archivo, abra un nuevo archivo en blanco. Gu\u00e1rdalo como accordion.js. Luego pegue este c\u00f3digo dentro de \u00e9l 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\u00f3n, debe activar el complemento yendo a la pantalla de su complemento en el \u00e1rea de administraci\u00f3n de WordPress.Agregar una p\u00e1gina de preguntas frecuentes con AccordionPara mostrar estas preguntas frecuentes en formato de acorde\u00f3n, debe crear una nueva p\u00e1gina. Ir P\u00e1ginas \u00bbAgregar nuevo. Asigne un t\u00edtulo a su p\u00e1gina, por ejemplo, preguntas frecuentes y en el \u00e1rea de edici\u00f3n de la p\u00e1gina ingrese este c\u00f3digo corto: [faq_accordion]Guarde y publique su p\u00e1gina y obtenga una vista previa. Ver\u00e1s tus preguntas frecuentes en un bonito men\u00fa de acorde\u00f3n. Cambio de estilo y colores de su acorde\u00f3nPara los colores y el estilo, este Accordion de preguntas frecuentes utiliza temas de interfaz de usuario de jQuery alojados en Google. B\u00e1sicamente 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\u00f3n 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 suavidad, cupertino, etc. Tambi\u00e9n puede crear o modificar estos temas en Themeroller. Esperamos que este art\u00edculo le haya ayudado a agregar un acorde\u00f3n de preguntas frecuentes de jQuery en su sitio web de WordPress. Para comentarios y preguntas, deje un comentario a continuaci\u00f3n. 4.4 \/ 5 ( 325 votos ) "},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Tutoriales Wordpress","item":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/#breadcrumbitem"},{"@type":"ListItem","position":2,"name":"C\u00f3mo agregar un acorde\u00f3n de preguntas frecuentes de jQuery en WordPress","item":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-agregar-un-acordeon-de-preguntas-frecuentes-de-jquery-en-wordpress\/#breadcrumbitem"}]}]