Så här lägger du till en jQuery FAQ Accordion i WordPress

Nyligen frågade en av våra användare om det fanns ett sätt för dem att lägga till ett FAQ-dragspel på deras WordPress-webbplats. Det finns många plugins tillgängliga som låter dig lägga till vanliga frågor eller vanliga frågor i WordPress. I den här artikeln visar vi hur du lägger till ett jQuery FAQ-dragspel på ditt WordPress-webbplats.

Vad är Accordion?

I webbdesign är dragspel en term som används för ett användargränssnittsmönster som har flikar eller innehållsblock som kollapser eller expanderar vid användarens interaktion. Varje flik har innehåll under dem som expanderar när användaren klickar på menyalternativet. Enkelt sett är det som en meny som expanderar när du klickar på den. Vi har använt en liknande effekt på vår kostnadsfria WordPress blogg installationssida. Nedan följer en skärmdump av ett provspel.

Video Tutorial

Om du inte gillar videon eller behöver mer instruktioner, fortsätt läsa.

Lägga till en jQuery FAQ Accordion

Innan du kan lägga till ett jQuery FAQ-dragspel måste du se till att du har en FAQ-sektion. Börja med att lägga till en FAQ-sektion genom att följa vår handledning om hur du lägger till en FAQ-sektion i WordPress.

Låt oss nu gå vidare med att lägga till jQuery FAQ-dragspelet. WordPress kommer med jQuery-biblioteket men det har inte jquery-teman. Vi laddar det från Google CDN och köar dessa skript i WordPress. Vi kommer även att skapa en kortnummer som visar våra vanliga frågor. Viktigast av allt kommer vi att göra allt det genom att skapa ett WordPress-plugin.

Skapa en mapp på skrivbordet och namnge det my-dragspelet. Öppna anteckningsblock eller någon annan textredigerare efter eget val. Skapa en fil som heter my-accordion.php och klistra in den här koden inuti den:

  10, 'orderby' => 'menu_order', 'order' => 'ASC', 'post_type' => 'fråga',))); // Generera Output $ faq. = ''; // Öppna behållaren foreach ($ inlägg som $ post) // Generera markeringen för varje Question $ faq. = Sprintf (('
% 1 $ s
% 2 $ s '), $ post-> post_title, wpautop ($ post-> post_content));  $ faq. = ''; // Stäng behållaren returnera $ faq; // Återgå HTML.  add_shortcode ('faq_accordion', 'accordion_shortcode'); 

När du har sparat dina ändringar i den filen öppnar du en ny blank fil. Spara det som accordion.js. Nästa klistra in den här koden inuti den och spara filen:

 jQuery (dokument) .ready (function () jQuery ("# ​​accordion"). dragspel ();) (); 

Nu har vi vårt plugin redo att ladda upp. Öppna din FTP-klient och ladda upp my-accordion-mappen till / wp-contnt / plugins / directory på din WordPress-webbplats. Därefter måste du aktivera pluginet genom att gå till pluginens skärm i WordPress admin-området.

Lägga till en FAQ-sida med Accordion

För att visa dessa vanliga frågor i ett dragspelformat måste du skapa en ny sida. Gå till Sidor »Lägg till nytt. Ge din sida en titel, t.ex. Vanliga frågor och i sidoredigeringsområdet anger du denna kortnummer:

[Faq_accordion]

Spara och publicera din sida och förhandsgranska den. Du får se dina vanliga frågor som visas i en trevlig dragspelmeny.

Ändra stil och färger i din accordion

För färger och styling använder denna FAQ-överenskommelse jQuery UI-teman som finns på Google. Det är i princip ett stilark, och om du föredrar kan du ladda ner och lägga den på din egen hemsida. jQuery webbplats har en jQuery UI teman avsnitt med några färdiga att använda teman. Som du kan se att vi har använt mänsklighetstemat i vårt plugin. Du kan ersätta det med någon av de tillgängliga teman som jämnhet, cupertino, etc. Du kan också skapa eller ändra dessa teman på Themeroller.

Vi hoppas att den här artikeln hjälper dig att lägga till en jQuery FAQ-överenskommelse på din WordPress-webbplats. För feedback och frågor, vänligen lämna en kommentar nedan.