Att organisera innehåll med ett FAQ-dragspel kan förbättra användarupplevelsen på din WordPress-webbplats. Den här funktionen gör det möjligt att visa frågor och svar i ett kompakt format, vilket gör det lättare för besökare att snabbt hitta information.
Dessutom gör användningen av jQuery för ditt dragspel dina vanliga frågor interaktiva och lätta att navigera.
På WPBeginner har vi drivit en blogg i över 16 år och har skrivit hundratals artiklar, guider och handledningar. I vissa av dessa kommer du att märka att vi har använt jQuery FAQ-dragspel för att besvara vanliga frågor från våra läsare.
Detta tillvägagångssätt har hjälpt oss att attrahera fler besökare, förbättra våra sökrankningar och till och med generera leads. Sammanfattningsvis vet vi precis hur värdefull en dynamisk FAQ-dragspelsmeny kan vara.
I den här artikeln visar vi dig hur du enkelt lägger till ett jQuery FAQ-dragspel i WordPress, steg för steg.
Varför använda ett jQuery FAQ-dragspel i WordPress?
Inom webbdesign är ett dragspel ett verktyg för att organisera innehåll snyggt. Det ser ut som en lista där varje objekt expanderar för att visa mer detaljer när du klickar på det och sedan kollapsar när du är klar. Det är ett enkelt sätt att dölja eller visa extra information utan att röran till sidan.
Under tiden är jQuery ett JavaScript-bibliotek som förenklar tillägget av interaktiva funktioner till din webbplats. Till exempel gör det det möjligt för dig att lägga till saker som animationer, rullgardinsmenyer och klickbara knappar – utan att behöva skriva komplex kod från grunden.
Detta innebär att användningen av ett jQuery FAQ-dragspel i WordPress kan göra din webbplats mer organiserad och användarvänlig. Det låter dig visa vanliga frågor i ett kollapsbart format, vilket sparar utrymme och minskar röran.
På så sätt kan besökare snabbt hitta de svar de behöver utan att behöva skrolla igenom långa textblock. Detta kan ge din webbplats ett rent utseende och förbättra SEO genom att göra ditt innehåll mer strukturerat, vilket sökmotorer gynnar.
Med det sagt, låt oss titta på hur man enkelt lägger till ett jQuery FAQ-dragspel i WordPress. Vi kommer att diskutera flera metoder i den här handledningen, men du kan använda länkarna nedan för att hoppa till den du väljer:
- Metod 1: Lägg till ett jQuery FAQ-dragspel med WPCode (rekommenderas)
- Metod 2: Lägg till ett jQuery FAQ-dragspel med ett gratis plugin (enkelt)
- Metod 3: Lägg till ett jQuery FAQ-dragspel med SeedProd
- Bonus: Lägg till FAQ Schema i WordPress
Metod 1: Lägg till ett jQuery FAQ-dragspel med WPCode (rekommenderas)
Om du letar efter ett enkelt och pålitligt sätt att lägga till ett jQuery FAQ-dragspel, då är den här metoden för dig.
För detta tillvägagångssätt behöver du WPCode, vilket är det bästa pluginet för kodavsnitt för WordPress på marknaden. Det är det enklaste och säkraste sättet att lägga till anpassad kod på din webbplats. Dessutom kommer det med ett färdigt kodavsnitt för ett FAQ-dragspel, vilket gör det till ett idealiskt val.
Först måste du installera och aktivera pluginet WPCode. För detaljer, se vår handledning om hur man installerar ett WordPress-plugin.
Notera: WPCode har en gratis plan, men du behöver premiumversionen för att låsa upp molnbiblioteket med kodavsnitt.
Efter aktivering, besök sidan Kodavsnitt » + Lägg till kodavsnitt från WordPress-instrumentpanelen och använd sökformuläret för att hitta kodavsnittet 'FAQ Accordion'.
När du har gjort det, klickar du bara på knappen 'Använd kodavsnitt' under den.
Detta kommer att leda dig till sidan 'Redigera kodsnutt', där den anpassade koden för en FAQ-dragspel redan har lagts till i rutan 'Kodförhandsgranskning'.
Här behöver du bara skriva frågorna och svaren för ditt dragspel inom koden. När du har gjort det, växla omkopplaren högst upp till ‘Aktiv’ och klicka på knappen ‘Uppdatera’.
Öppna nu sidan eller inlägget där du vill lägga till FAQ-sektionen med dragspel i blockredigeraren.
Klicka här på knappen "Add Block" (+) för att öppna blockmenyn och lägg till blocket "WPCode" på sidan. Öppna nu rullgardinsmenyn i blocket för att välja kodsnutten "FAQ Accordion" som du skapade tidigare.
När det är klart, klicka på knappen ‘Uppdatera’ eller ‘Publicera’ högst upp för att spara dina inställningar.
Besök nu din WordPress-webbplats för att se FAQ-dragspelsmenyn i aktion.
Tänk på att du kommer att behöva upprepa processen för att skapa ett dragspel för andra sidor.
Metod 2: Lägg till ett jQuery FAQ-dragspel med ett gratis plugin (enkelt)
Om du inte vill använda någon anpassad kod på din webbplats, då är den här metoden för dig.
Först måste du installera och aktivera pluginet Advanced Accordion Gutenberg Block. Mer information finns i vår nybörjarguide om hur man installerar ett WordPress-plugin.
Efter aktivering, öppna sidan eller inlägget där du vill lägga till FAQ och klicka på knappen ‘Lägg till block’ (+) högst upp. När blockmenyn visas, leta helt enkelt upp och lägg till blocket ‘Separata dragspel’ på sidan.
Skriv sedan din första fråga och ditt svar inom dragspelsblocket.
Sedan kan du lägga till ett FAQ-schema från blockpanelen genom att expandera fliken med samma namn och aktivera omkopplaren 'Gör det möjligt'.
Byt sedan till sektionen "Styles" i den högra kolumnen. Härifrån kan du anpassa textfärgen för dragspelsmenyn, bakgrundsfärgen, ikonfärgen och mycket mer.
Sedan kan du upprepa denna process för att lägga till så många vanliga frågor som du vill.
Klicka slutligen på knappen 'Uppdatera' eller 'Publicera' högst upp på sidan för att spara dina inställningar.
Besök nu din FAQ-sida för att se jQuery-drag spelet i aktion.
Metod 3: Lägg till ett jQuery FAQ-dragspel med SeedProd
Om du vill lägga till en interaktiv FAQ-sektion på en anpassad sida, då är den här metoden för dig.
För att göra detta kan du använda SeedProd. Det är den bästa WordPress-sidbyggaren som också kommer med ett speciellt dragspelsblock för att lägga till textavsnitt som expanderar och kollapsar på dina sidor.
Först måste du installera och aktivera pluginet SeedProd. För att lära dig mer, se vår guide om hur man installerar ett WordPress-plugin.
Notera: SeedProd har en gratisversion. Du behöver dock proversionen för att låsa upp blocket 'Accordion'.
Vid aktivering, gå till sidan SeedProd » Inställningar för att ange din licensnyckel. Du hittar denna information på ditt konto på SeedProd-webbplatsen.
Besök sedan skärmen SeedProd » Landningssidor från sidomenyn i WordPress-administrationen.
Härifrån, klicka på knappen 'Lägg till ny landningssida'.
Detta tar dig till en ny skärm där du kommer att se en lista över färdiga mallar att välja mellan.
När du har gjort ett val ser du en uppmaning där du ombeds ange ett sidnamn och en URL. Ange detaljerna och klicka på knappen ‘Spara och börja redigera sidan’ för att fortsätta.
SeedProds dra-och-släpp-byggare öppnas nu på din skärm. Här ser du en kolumn med block till vänster och en sidförhandsgranskning till höger.
Du kan nu lägga till vilket element som helst på din sida, inklusive en bild, video, CTA-knapp, rubrik eller textblock. Dra och släpp sedan blocket 'Dragspel' dit du vill lägga till dina FAQ.
Klicka sedan på blocket igen för att öppna dess inställningar i den vänstra kolumnen. Härifrån, expandera fliken 'Dragspel 1' och börja skriva din första FAQ.
Du kan nu upprepa processen för att lägga till andra poster.
Som standard lägger blocket bara till två dragspel, men du kan klicka på knappen 'Lägg till nytt objekt' för att lägga till så många vanliga frågor som du vill.
Du kan till och med konfigurera teckenstorlek och utrymme mellan varje dragspel med hjälp av de givna reglagen.
Växla sedan till fliken ‘Avancerat’ högst upp.
Härifrån kan du ändra textfärg, rubrikfärg, bakgrundsfärg och avdelarfärg för dragspelsmenyn.
När du är klar, klicka bara på knappen ‘Spara’ och sedan ‘Publicera’ högst upp.
Du kan nu besöka den nyskapade anpassade sidan för att se din jQuery FAQ-dragspel.
Bonus: Lägg till FAQ Schema i WordPress
När du har lagt till dessa jQuery FAQ-dragspel är det en bra idé att lägga till FAQ-schema för dem. Detta kan öka dina SEO-rankingar och organiska klickfrekvens genom att dina vanliga frågor visas direkt i Googles sökresultat.
För detta rekommenderar vi All in One SEO, vilket är bästa SEO-pluginet på marknaden. Det är en allt-i-ett-lösning som optimerar din webbplats för sökmotorer och hjälper den att ranka högre med bara några få klick.
Vi har använt det här verktyget på WPBeginner under de senaste åren, och sedan dess har vi sett märkbara förbättringar i våra sökrankningar. För mer information, se vår AIOSEO-recension.
Verktyget levereras med en inbyggd funktion för schema-markup som kan hjälpa sökmotorer att bättre förstå ditt innehåll. Efter pluginaktivering, öppna bara din FAQ-sida i blockredigeraren.
Rulla sedan ner till avsnittet 'AIOSEO Settings' och byt till fliken 'Schema'. Klicka härifrån på knappen 'Generate Schema'.
Detta öppnar ‘Schema Catalog,’ där du behöver hitta alternativet FAQ och klicka på knappen ‘Add Schema’ bredvid det.
Därefter kan du lägga till dina FAQ:er som de visas i din dragspelsmeny. När du är klar klickar du bara på knappen 'Lägg till schema' för att spara dina inställningar.
Nu kommer sökmotorer att indexera dessa frågor och visa dem på sökresultatsidorna, vilket förbättrar dina rankningar.
För detaljer, se vår handledning om hur man lägger till FAQ-schema i WordPress.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en jQuery FAQ-dragspel i WordPress. Du kanske också vill se vår guide om hur du enkelt visar kod på din WordPress-webbplats och våra toppval för bästa WordPress-utvecklingsverktyg.
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Dennis Muthomi
Metod 1 med WPCode var verkligen hjälpsam, det är en bra balans mellan enkelt och anpassningsbart.
Som WordPress-utvecklare har jag gjort liknande saker tidigare, men din steg-för-steg-guide gör det tillgängligt även för nybörjare.
En sak som jag kommer att lägga till utöver vad jag har gjort tidigare är att använda CSS-övergångar för att jämna ut öppnings-/stängningsanimationerna av dragspelsmenyn, det kommer att göra den ännu bättre. Detta kommer att vara en stor resurs för mina framtida projekt.
Zac Smith
Hej, jag installerade pluginet Quick and Easy FAQ och följde sedan den här videon. Jag får inte ett dragspels-FAQ, utan det enda som visas är den första FAQ-frågan och svaret ... och frågan är hyperlänkad.
Daniel
Bra handledning!
Min felsökare klagade på den odefinierade variabeln $faq.
Definierad variabel i början av funktionen accordion_shortcode() med $faq = "";
Dessutom anger min version av FAQ-plugin värdet 'faq' istället för 'query' i fältet post_type i tabellen postes.
Justerade rad 23:
‘post_type’ => ‘faq’,
Johan Johnsson
Det är löjligt att ni vill att vi ska installera ett plugin för en FAQ-sida och följa er tidigare handledning om hur man skapar den FAQ-sidan, och sedan kopiera (i princip ladda ner) det plugin ni skapade för den här handledningen. Så vi laddar i princip ner 2 redan färdiga plugins.
Jag tror inte att folk kommer hit för att ladda ner 2 plugins, utan snarare för att LÄRA sig hur man gör en egen anpassad dragspelsmeny. Jag förstår inte varför jag ska följa den här "hur man gör-guiden" när jag bara kan ladda ner ett annat WP-plugin som gör samma jobb, om inte bättre.
Och det faktum att detta plugin är beroende av FAQ-pluginet verkar ganska onödigt. Varför gjorde ni inte ett fristående plugin och gjorde det dynamiskt? Så att ni kan använda det för allt innehåll på alla sidor.
WPBeginner Support
Hej Johan,
De flesta av våra användare är nybörjare som skulle ha svårt att kopiera och klistra in kod. Det är därför vi gjorde det till ett plugin så att användare kan ladda ner och installera det. Om du vill använda kodmetoden, så finns koden här för dig att studera och använda den i ditt tema eller ett webbplatsspecifikt plugin. Låt oss veta om du behöver hjälp med det.
Admin
Kim
Hur gör jag så att när jag klickar på titeln så kollapsar den – jag ser att den kollapsar när du klickar på en annan del av dragspelsmenyn men jag letar efter funktionen för att kollapsa när varje titel klickas på.
christina
tack för handledningen. Jag är väldigt ny inom kodning och webbdesign. Jag har följt instruktionerna för att klistra in koderna i mitt anteckningsblock på min Mac. Finns det ett annat sätt att spara filen än i anteckningsblock som en php- eller js-fil i mappen? Kan du också berätta steg för steg hur jag öppnar en FTP-klient (vad är det förresten?) och hur jag laddar upp min-accordian-mappen till /wp-contnt/plugins/katalogen till WP-webbplatsen. Tack så mycket.
christina
när jag sparar textedit-filen sparas den som my-accordion.php.rtf. Är det korrekt?
WPBeginner Support
Nej. Du måste spara den som my-accordion.php Windows-program lägger ibland till den här filändelsen till din textfil. Försök att använda alternativet Spara fil som.
Admin
WPBeginner Support
På Mac har du ett program som heter TextEdit. För FTP, se vår guide om hur man använder FTP för att ladda upp WordPress-filer.
Admin
Nurul Amin
Jag har aktiverat dessa plugins framgångsrikt, men det fungerar inte. Visar ingenting på min FAQ-sida.
WPBeginner Staff
Skärmdumpen av koden du delade ser inte ut som koden vi delade ovan. Koden i skärmdumpen har dock HTML-taggar som inte borde finnas där. Det borde se ut så här:
‘posts_per_page’ => ’10’,
Stefan 13
Det här är ganska konstigt. Dina kommentarer gjorde mig förbryllad, eftersom jag tydligt såg koden där på min skärm. Jag insåg sedan att alla dessa valutaomvandlare-taggar kom från ett annat av mina Firefox-plugins, som dynamiskt lägger till en kontextmeny till siffror på webbsidor – därav att källan såg annorlunda ut.
Tack för din hjälp!
Stefan 13
När jag försöker aktivera pluginet i WP 4.1 får jag detta felmeddelande:
Plugin kunde inte aktiveras eftersom det utlöste ett kritiskt fel.
Parse error: syntax error, unexpected ‘<' in /home2/laurepc3/public_html/shala/wp-content/plugins/my-accordion/my-accordion.php on line 20
Några idéer som kan hjälpa till med detta?
WPBeginner Staff
Koden du klistrade in har ett oväntat tecken 10,
Se till att posts_per_page är inom enkla citattecken. Se till att det finns ett likhetstecken före större än-tecknet och se till att det finns ett kommatecken i slutet av raden.
Gäst
Jag har inte det på rad 20. Vad jag kan se på rad 20 i inlägget ovan och i min fil är detta:
‘posts_per_page’ => 10,
Skärmdump bifogad.
Visar inlägget ovan felaktigt filinnehåll?
Stefan 13
Koden i min fil ser inte ut som det du postade för rad 20, men det är samma kod som ovan:
‘posts_per_page’ => 10,
‘orderby’ => ‘menu_order’
Betyder det att koden i artikeln är föråldrad?
Tack för att du klargjorde!
Skärmdump bifogad:
Caroline
Tack för den här handledningen! Det hjälper verkligen med mitt problem!
Jag vill lägga upp ämnen som detta: Ämne "Events": en dragspelsruta och "Past Events": en annan dragspelsruta med ämnet Past Events. Jag försökte med kortkoden [faq_accordion + topic="events"] men ingenting hände. Vad kan jag göra? Tack så mycket!!!
raouf
hej .. tack för den här handledningen, den är hjälpsam. men jag gör bara en enkel modifiering för att göra en dragspelsmeny för en specifik kategori. det fungerar men det visar mig den klassiska redigeraren för mitt inlägg, inte den visuella redigeraren. kan du hjälpa mig
Mahesh Waghmare
Tack...
Rana
Hej
Finns det ett sätt att bara visa "kategorinamnet, dvs FAQ-ämne" och ämnet som listas under varje.
Jag vill inte ha hela innehållet, bara kategorinamnet och att klicka på det skulle visa ämnesnamnet)
Raba
Chris
Vad är det bästa sättet att få CSS att fungera? Jag har ett barn-tema med min anpassade CSS-kod. Behöver jag göra något i den filen eftersom jag inte ser någon av Google CSS.
WPBeginner Support
Google CSS:en är köad och hämtas endast när ditt FAQ-dragspel visas. Öppna sidan som innehåller ditt FAQ-dragspel och högerklicka och välj sedan Visa källa. På sidan Visa källa leta efter
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/humanity/jquery-ui.cssom den finns där betyder det att du har laddat CSS-temat framgångsrikt.Admin
Chris S.
Jag kan få ditt plugin att fungera korrekt med FAQ Manager men hade några frågor. Det visar bara 10 av FAQ (vilket jag antar är ett standardnummer). Om jag använder den inbyggda kortkoden som följer med FAQ Manager-pluginet kan jag få hela listan att visas
För att visa ALLT: placera [faq limit="-1"] på ett inlägg / en sida
Har du några förslag på hur man hanterar detta?
Dessutom tillåter FAQ-hanteraren att skapa olika listor efter ämne. Finns det ett enkelt sätt att modifiera ditt plugin för att utnyttja detta?
Lista alla från en enskild FAQ-ämne kategori: placera [faq faq_topic=”topic-slug”] på ett inlägg / en sida
Bra arbete annars!
WPBeginner Support
För att visa FAQ med ämnen använder FAQ Manager dessa parametrar i kortkoden:
[faq faq_topic="topic-slug"][faq limit=”-1″] är ganska självförklarande. Det kommer att visa alla FAQ.
Om du däremot vill visa fler FAQ:er i dragspelsmenyn behöver du ändra frågeparametern i WPBeginners FAQ Accordion-plugin, så här:
1-click Use in WordPress
Admin
Chris S.
Toppen – tack för din hjälp med detta!
Garrett
Detta fungerar inte för mig riktigt som avsett. Plugin aktiveras framgångsrikt och kortkoden bearbetas, men här är hur utdata ser ut...
Jag valde att använda FAQ-hanteringspluginet med din kod för att fixa den vidriga stylingen som pluginet spottar ur sig.
Men när allt är sagt och gjort, här är hur det ser ut. Några tips?
http://screencast.com/t/K2VfuBOptcn
Tack så mycket på förhand!!
~Garrett
Atlanta, GA
Garrett
Det verkar som att listan inte ärver någon stilinformation från jquery-ui.css, även om jag verifierade att en länkfil till jquery-ui.css FINNS på sidan.
Rad där jquery-ui.css inkluderas:
Utforskar CSS-regler:
Hur kan detta vara?
Tack!
~Garrett
WPBeginner Support
Prova att byta till ett standard WordPress-tema för att se om det fungerar då.
Admin
Richard Morrison
Detta har förstört följandet av den senaste Wordpress-uppdateringen. Jag kan inte längre få dragspelen att visas. Kortkod visar nu bara texten från FAQ-hanteraren.
Piet
rad 20 i din my-accordion.php-fil lyder: ‘numberposts’
den funktionen har varit föråldrad sedan... mycket länge sedan.
eftersom ni sysslar med att ge handledningar till nybörjare, kan ni åtminstone få funktionerna rätt?
uppenbarligen borde detta vara 'posts_per_page'
Redaktionell personal
Uppdaterade artikeln.
Admin
Mary-Anne
Jag skulle uppskatta lite hjälp med detta. Jag försöker installera på en 3.5.2 på en nätverkswebbplats. Nätverksadministratören har pluginet listat och nätverksaktiverat.
Det listas dock inte på undersajterna.
Har detta testats med nätverkswebbplatser ännu? Det ser ut att vara precis vad som behövs. Tack för alla dina ansträngningar med WPBEGINNER.
Tack.
Redaktionell personal
Det här låter som en supportfråga som behöver ställas på pluginforumet.
Admin
birge
Hej,
Jag har gjort min-accordion.php och accordion.js, laddat upp dem och allt, men jag kan fortfarande inte se pluginet i listan över plugins. Vad gick fel?
Tack,
birge
Redaktionell personal
Är du säker på att pluginfilens plats är något i stil med: /wp-content/plugins/accordion/my-accordion.php
Admin
birge
Exakt.
alin
I do just what you said but I can’t activate the plugin from plugins dashboard because I can’t se it
curdaneta
Du glömde inkludera skriptfilen "accordion.js"...
Redaktionell personal
Vi delade med oss av accordion.js-koden där. Den inkluderas också med hjälp av enqueue script.
Admin
curdaneta
Tyvärr, men jag hittar länken till filen
Redaktionell personal
Det finns ingen länk till filen. Vi har delat koden som du behöver klistra in i en ny fil som du kommer att skapa kallad accordion.js
curdaneta
Ursäkta, mitt fel
Jag läste inte noga. Nu fungerar allt som förväntat
curdaneta
curdaneta
Hej
Det fungerar inte för mig att använda kortkoden i flera stycken
Hälsningar
curdaneta
Gaelyn
Tack. Jag förstår var detta kommer att vara mycket användbart.
Drake
Tack för artikeln. Det vore trevligt att ha en liknande som förklarar hur man introducerar jQuery-flikar på sidor/inlägg.