Hoe een jQuery FAQ Accordion in WordPress toe te voegen

Onlangs vroeg een van onze gebruikers ons of er een manier was om een ​​FAQ-accordeon toe te voegen op hun WordPress-site. Er zijn veel plug-ins beschikbaar waarmee je veelgestelde vragen of veelgestelde vragen kunt toevoegen in WordPress. In dit artikel laten we u zien hoe u een jQuery FAQ-accordeon kunt toevoegen aan uw WordPress-site.

Wat is accordeon?

Bij webontwerp is accordeon een term die wordt gebruikt voor een ontwerppatroon voor gebruikersinterfaces met tabbladen of inhoudsblokken die samenvouwen of uitbreiden na gebruikersinteractie. Elk tabblad bevat onderliggende inhoud die groter wordt wanneer de gebruiker op het menu-item klikt. In eenvoudige bewoordingen is het als een menu dat groter wordt wanneer je erop klikt. We hebben een vergelijkbaar effect gebruikt op onze gratis pagina met WordPress-bloginstellingen. Hieronder is een screenshot van een voorbeeldaccordeon.

Video-instructies

Als je de video niet leuk vindt of meer instructies nodig hebt, ga dan door met lezen.

Een jQuery veelgestelde vragen-accordeon toevoegen

Voordat je een jQuery FAQ-accordeon kunt toevoegen, moet je zeker weten dat je een FAQ-sectie hebt. Begin met het toevoegen van een FAQ-sectie door onze tutorial te volgen over het toevoegen van een FAQ-sectie in WordPress.

Laten we nu verder gaan met het toevoegen van de jQuery FAQ-accordeon. WordPress wordt geleverd met de jQuery-bibliotheek, maar heeft geen jQuery-thema's. We laden dat van Google CDN en zetten deze scripts in de wachtrij in WordPress. We zullen ook een shortcode maken die onze veelgestelde vragen weergeeft. Het belangrijkste is dat we dat allemaal doen door een WordPress-plug-in te maken.

Maak een map op je bureaublad en noem die mijn-accordeon. Open Notepad of een andere teksteditor van uw keuze. Maak een bestand met de naam mijn-accordion.php en plak deze code erin:

  10, 'orderby' => 'menu_order', 'order' => 'ASC', 'post_type' => 'vraag',)); // Output genereren $ faq. = ''; // Open de container foreach ($ posts als $ post) // Genereer de markup voor elke vraag $ faq. = Sprintf (('
% 1 $ s
% 2 $ s '), $ post-> post_title, wpautop ($ post-> post_content));  $ faq. = ''; // Sluit de containerretour $ faq; // Retourneer de HTML.  add_shortcode ('faq_accordion', 'accordion_shortcode'); 

Sla een nieuw, leeg bestand op nadat u uw wijzigingen in dat bestand hebt opgeslagen. Bewaar het als accordion.js. Plak deze code erin en sla het bestand op:

 jQuery (document) .ready (function () jQuery ("# ​​accordeon"). accordeon ();) (); 

Nu hebben we onze plug-in klaar om te uploaden. Open uw FTP-client en upload mijn-accordion-map naar / wp-contnt / plugins / directory op uw WordPress-website. Vervolgens moet u de plug-in activeren door naar het scherm van uw plug-in in het WordPress-beheergebied te gaan.

Een FAQ-pagina toevoegen met Accordion

Om deze veelgestelde vragen in een harmonica-indeling weer te geven, moet u een nieuwe pagina maken. Ga naar Pagina's »Nieuw toevoegen. Geef uw pagina een titel, bijvoorbeeld Veelgestelde vragen en in het gedeelte voor het bewerken van pagina's geeft u deze shortcode in:

[Faq_accordion]

Sla uw pagina op en publiceer deze en bekijk er een voorbeeld van. Je zult je FAQ's zien verschijnen in een leuk accordeonmenu.

De stijl en kleuren van je accordeon veranderen

Voor kleuren en styling gebruikt deze FAQ-accordeon jQuery UI-thema's gehost op Google. Het is eigenlijk een stylesheet en als je dat liever hebt, kun je het downloaden en op je eigen website zetten. jQuery-website heeft een jQuery UI-thema-gedeelte met een paar kant-en-klare thema's. Zoals je kunt zien hebben we het humanity-thema gebruikt in onze plug-in. Je kunt het vervangen door een van de beschikbare thema's zoals zachtheid, cupertino, enz. Je kunt deze thema's ook maken of wijzigen op Themeroller.

We hopen dat dit artikel u heeft geholpen om een ​​jQuery FAQ-accordeon toe te voegen aan uw WordPress-website. Laat voor feedback en vragen hieronder een reactie achter.