Organizarea conținutului cu un acordeon FAQ poate îmbunătăți experiența utilizatorului pe site-ul dvs. WordPress. Această funcție vă permite să afișați întrebări și răspunsuri într-un format compact, facilitând vizitatorilor să găsească rapid informații.
În plus, utilizarea jQuery pentru acordeonul dvs. face ca FAQ-urile să fie interactive și ușor de navigat.
La WPBeginner, gestionăm un blog de peste 16 ani și am scris sute de articole, ghiduri și tutoriale. În unele dintre acestea, veți observa că am folosit acordeoane FAQ jQuery pentru a răspunde la întrebările frecvente ale cititorilor noștri.
Această abordare ne-a ajutat să atragem mai mulți vizitatori, să ne îmbunătățim clasamentele în căutare și chiar să generăm lead-uri. Pe scurt, știm cât de valoros poate fi un acordeon FAQ dinamic.
În acest articol, vă vom arăta cum să adăugați cu ușurință un acordeon FAQ jQuery în WordPress, pas cu pas.
De ce să folosești un acordeon FAQ jQuery în WordPress?
În designul web, un acordeon este un instrument pentru organizarea conținutului într-un mod ordonat. Arată ca o listă în care fiecare element se extinde pentru a afișa mai multe detalii atunci când faceți clic pe el și apoi se restrânge când ați terminat. Este o modalitate simplă de a ascunde sau afișa informații suplimentare fără a aglomera pagina.
Între timp, jQuery este o bibliotecă JavaScript care simplifică adăugarea de funcționalități interactive pe site-ul dvs. De exemplu, vă permite să adăugați elemente precum animații, meniuri derulante și butoane clicabile – fără a fi nevoie să scrieți cod complex de la zero.
Acest lucru înseamnă că utilizarea unui acordeon FAQ jQuery în WordPress poate face site-ul dvs. mai organizat și mai ușor de utilizat. Vă permite să afișați întrebările frecvente într-un format pliabil, economisind spațiu și reducând dezordinea.
În acest fel, vizitatorii pot găsi rapid răspunsurile de care au nevoie fără a derula prin blocuri lungi de text. Acest lucru poate oferi site-ului dvs. un aspect curat și poate îmbunătăți SEO prin structurarea mai bună a conținutului dvs., ceea ce motoarele de căutare favorizează.
Acestea fiind spuse, să vedem cum să adăugați cu ușurință un FAQ accordion jQuery în WordPress. Vom discuta mai multe metode în acest tutorial, dar puteți folosi linkurile de mai jos pentru a sări la cea preferată:
- Metoda 1: Adăugați un acordeon FAQ jQuery cu WPCode (Recomandat)
- Metoda 2: Adăugați un acordeon FAQ jQuery cu un plugin gratuit (Ușor)
- Metoda 3: Adăugați un acordeon FAQ jQuery cu SeedProd
- Bonus: Adaugă Schema FAQ în WordPress
Metoda 1: Adăugați un acordeon FAQ jQuery cu WPCode (Recomandat)
Dacă sunteți în căutarea unei modalități ușoare și fiabile de a adăuga un acordeon FAQ jQuery, atunci această metodă este pentru dvs.
Pentru această abordare, veți avea nevoie de WPCode, care este cel mai bun plugin pentru fragmente de cod WordPress de pe piață. Este cea mai ușoară și sigură modalitate de a adăuga cod personalizat pe site-ul dvs. web. În plus, vine cu un fragment de cod prefabricat pentru un acordeon FAQ, ceea ce îl face o alegere ideală.
Mai întâi, trebuie să instalați și să activați pluginul WPCode. Pentru detalii, consultați tutorialul nostru despre cum să instalați un plugin WordPress.
Notă: WPCode are un plan gratuit, dar veți avea nevoie de versiunea premium pentru a debloca biblioteca cloud de fragmente de cod.
La activare, vizitați pagina Code Snippets » + Add Snippet din tabloul de bord WordPress și utilizați formularul de căutare pentru a localiza fragmentul 'FAQ Accordion'.
Odată ce ați făcut acest lucru, pur și simplu faceți clic pe butonul „Utilizați fragmentul” de sub acesta.
Acest lucru vă va direcționa către pagina „Editare fragment”, unde codul personalizat pentru un acordeon FAQ va fi deja adăugat în caseta „Previzualizare cod”.
Aici, trebuie doar să tastezi întrebările și răspunsurile pentru acordeonul tău în cod. Odată ce ai făcut acest lucru, comută comutatorul din partea de sus la „Activ” și apasă butonul „Actualizare”.
Acum deschide pagina sau postarea unde vrei să adaugi secțiunea de acordeon FAQ în editorul de blocuri.
Aici, faceți clic pe butonul „Adăugare bloc” (+) pentru a deschide meniul de blocuri și a adăuga blocul „WPCode” pe pagină. Acum, deschideți meniul derulant din interiorul blocului pentru a alege fragmentul de cod „FAQ Accordion” pe care l-ați creat anterior.
Odată ce acest lucru este făcut, faceți clic pe butonul „Actualizare” sau „Publicare” din partea de sus pentru a vă salva setările.
Acum vizitează site-ul tău WordPress pentru a vedea acordionul FAQ în acțiune.
Rețineți că va trebui să repetați procesul pentru a crea un acordion pentru alte pagini.
Metoda 2: Adăugați un acordeon FAQ jQuery cu un plugin gratuit (Ușor)
Dacă nu doriți să utilizați niciun cod personalizat pe site-ul dvs. web, atunci această metodă este pentru dvs.
Mai întâi, va trebui să instalați și să activați pluginul Advanced Accordion Gutenberg Block. Pentru mai multe informații, consultați ghidul nostru pentru începători despre cum să instalați un plugin WordPress.
După activare, deschideți pagina sau postarea unde doriți să adăugați FAQ-uri și faceți clic pe butonul „Adăugare bloc” (+) din partea de sus. Odată ce apare meniul de blocuri, pur și simplu localizați și adăugați blocul „Acordeon separat” pe pagină.
Apoi, introduceți prima întrebare și răspuns în blocul acordeon.
Apoi, puteți adăuga un schema FAQ din panoul de blocuri, extinzând fila cu același nume și activând comutatorul „Activați-l”.
După aceea, comutați la secțiunea „Stiluri” din coloana din dreapta. De aici, puteți personaliza culoarea textului acordionului, culoarea de fundal, culoarea pictogramei și multe altele.
Apoi, puteți repeta acest proces pentru a adăuga câte FAQ-uri doriți.
În final, faceți clic pe butonul „Actualizare” sau „Publicare” din partea de sus a paginii pentru a salva setările.
Acum, vizitați pagina dvs. de FAQ-uri pentru a vedea acordeonul jQuery în acțiune.
Metoda 3: Adăugați un acordeon FAQ jQuery cu SeedProd
Dacă doriți să adăugați o secțiune interactivă de Întrebări frecvente la o pagină personalizată, atunci această metodă este pentru dvs.
Pentru a face acest lucru, puteți folosi SeedProd. Este cel mai bun constructor de pagini WordPress care vine, de asemenea, cu un bloc special de acordeon pentru a adăuga secțiuni de text care se extind și se restrâng pe paginile dvs.
Mai întâi, trebuie să instalați și să activați pluginul SeedProd. Pentru a afla mai multe, consultați ghidul nostru despre cum să instalați un plugin WordPress.
Notă: SeedProd are un plan gratuit. Cu toate acestea, veți avea nevoie de versiunea pro pentru a debloca blocul „Accordion”.
După activare, accesați pagina SeedProd » Setări pentru a introduce cheia de licență. Puteți găsi aceste informații în contul dumneavoastră de pe site-ul SeedProd.
După aceea, vizitați ecranul SeedProd » Pagini de destinație din bara laterală de administrare WordPress.
De aici, dă clic pe butonul „Adaugă pagină de destinație nouă”.
Acest lucru vă va duce la un nou ecran unde veți vedea o listă de șabloane prefabricate din care să alegeți.
Odată ce ați făcut o alegere, veți vedea o solicitare care vă cere să introduceți un nume de pagină și un URL. Introduceți detaliile și faceți clic pe butonul „Salvați și începeți editarea paginii” pentru a continua.
Constructorul drag-and-drop de la SeedProd se va deschide acum pe ecranul dvs. Aici veți vedea o coloană de blocuri în stânga și o previzualizare a paginii în dreapta.
Acum puteți adăuga orice element pe pagina dvs., inclusiv o imagine, un videoclip, un buton CTA, un titlu sau un bloc de text. După aceea, trageți și plasați blocul „Acordeon” acolo unde doriți să adăugați FAQ-urile dvs.
Apoi, dă clic din nou pe bloc pentru a deschide setările acestuia în coloana din stânga. De aici, extinde fila „Acordion 1” și începe să tastezi primul tău FAQ.
Puteți repeta acum procesul pentru a adăuga alte intrări.
În mod implicit, blocul adaugă doar două acordioane, dar puteți face clic pe butonul „Adăugați un element nou” pentru a adăuga oricâte întrebări frecvente doriți.
Puteți configura chiar și dimensiunea fontului și spațiul dintre fiecare acordeon folosind glisoarele furnizate.
Apoi, comutați la fila „Avansat” din partea de sus.
De aici, puteți schimba culoarea textului, culoarea antetului, culoarea fundalului și culoarea separatorului acordeonului.
Odată ce ați terminat, pur și simplu faceți clic pe butonul „Salvare” și apoi „Publicare” din partea de sus.
Acum puteți vizita pagina personalizată nou creată pentru a vizualiza acordeonul dvs. jQuery FAQ.
Bonus: Adaugă Schema FAQ în WordPress
După ce ați adăugat aceste acordioane jQuery pentru Întrebări Frecvente, este o idee bună să adăugați schema FAQ pentru ele. Acest lucru vă poate îmbunătăți clasamentul SEO și rata de clic organică, făcând ca întrebările dumneavoastră frecvente să apară direct în rezultatele căutării Google.
Pentru aceasta, recomandăm All in One SEO, care este cel mai bun plugin SEO de pe piață. Este o soluție all-in-one care vă optimizează site-ul pentru motoarele de căutare și îl ajută să se claseze mai sus cu doar câteva clicuri.
Folosim acest instrument pe WPBeginner de câțiva ani și, de atunci, am observat îmbunătățiri notabile în clasamentele noastre de căutare. Pentru detalii, consultați recenzia noastră AIOSEO.
Instrumentul vine cu o funcționalitate încorporată de schema markup care poate ajuta motoarele de căutare să înțeleagă mai bine conținutul dvs. La activarea pluginului, deschideți pagina dvs. de Întrebări frecvente în editorul de blocuri.
Apoi, derulați în jos la secțiunea „Setări AIOSEO” și comutați la fila „Schema”. De aici, faceți clic pe butonul „Generare Schema”.
Aceasta va deschide „Catalogul de scheme”, unde trebuie să găsiți opțiunea FAQ și să faceți clic pe butonul „Adăugați schema” de lângă ea.
După aceea, puteți adăuga întrebările frecvente așa cum apar în acordeonul dvs. Odată ce ați terminat, faceți clic pe butonul „Adăugare schemă” pentru a salva setările.
Acum, motoarele de căutare vor indexa aceste întrebări și le vor afișa pe paginile cu rezultate ale căutării, îmbunătățindu-vă clasamentul.
Pentru detalii, consultați tutorialul nostru despre cum să adăugați schema FAQ în WordPress.
Sperăm că acest articol v-a ajutat să învățați cum să adăugați un acordeon jQuery FAQ în WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cum să afișați ușor cod pe site-ul dvs. WordPress și selecțiile noastre de top pentru cele mai bune instrumente de dezvoltare WordPress.
Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.
Dennis Muthomi
Metoda 1 cu WPCode a fost de mare ajutor, este un echilibru excelent între ușurință și personalizare.
Ca dezvoltator WordPress, am mai făcut lucruri similare înainte, dar ghidul tău pas cu pas îl face accesibil și începătorilor.
Un lucru pe care îl voi adăuga la ceea ce am făcut înainte este utilizarea tranzițiilor CSS pentru a netezi animațiile de deschidere/închidere ale acordeonului, ceea ce îl va face și mai bun. Aceasta va fi o resursă excelentă pentru proiectele mele viitoare.
Zac Smith
Bună ziua, am instalat pluginul Quick and Easy FAQ, apoi am urmat acest videoclip. Nu obțin un FAQ cu acordeon, ci singurul lucru care apare este prima întrebare și răspunsul FAQ... iar întrebarea este hiperlegată.
Daniel
Tutorial grozav!
Depanatorul meu s-a plâns de variabila nedefinită $faq.
Variabilă definită la începutul funcției accordion_shortcode() cu $faq = "";
De asemenea, versiunea mea de plugin FAQ introduce valoarea „faq” în loc de „query” în câmpul post_type al tabelului postes.
Liniile 23 ajustate:
‘post_type’ => ‘faq’,
Johan Johnsson
Este ridicol să ne cereți să instalăm un plugin pentru o pagină de Întrebări Frecvente și să urmați tutorialul anterior despre cum să creați acea pagină de Întrebări Frecvente, apoi să copiați (practic să descărcați) pluginul pe care l-ați creat pentru acest tutorial. Deci, practic descărcăm 2 pluginuri deja finalizate.
Nu cred că oamenii vin aici pentru a descărca 2 pluginuri, ci mai degrabă pentru a ÎNVĂȚA cum să-și facă propriul meniu de acordion personalizat. Nu văd de ce ar trebui să urmez acest „ghid de utilizare” când pot pur și simplu să descarc un alt plugin WP care face aceeași treabă, dacă nu mai bine.
Și faptul că acest plugin se bazează pe pluginul FAQ pare destul de inutil. De ce nu ați făcut un plugin independent și l-ați făcut dinamic? Astfel, îl puteți folosi pentru orice conținut de pe orice pagină.
Suport WPBeginner
Salut Johan,
Majoritatea utilizatorilor noștri sunt începători, cărora le-ar fi dificil să copieze și să lipească cod. Acesta este motivul pentru care l-am transformat într-un plugin, astfel încât utilizatorii să îl poată descărca și instala. Dacă doriți să utilizați metoda codului, atunci codul este aici pentru a-l studia și a-l utiliza în tema dvs. sau într-un plugin specific site-ului. Anunțați-ne dacă aveți nevoie de ajutor cu asta.
Admin
Kim
Cum fac ca atunci când dau clic pe titlu să se închidă – văd că se închide când dai clic pe o altă parte a acordionului, dar caut funcția de închidere atunci când este apăsat fiecare titlu.
christina
mulțumesc pentru tutorial. Sunt foarte nou în codare și design de pagini web. Am urmat instrucțiunile pentru a lipi codurile în notepad-ul meu pe Mac. Există o altă modalitate de a salva fișierul, în afară de notepad, ca fișier php sau js în folder? De asemenea, ați putea să-mi spuneți pas cu pas cum să deschid un client FTP (ce este, apropo?) și cum să încarc folderul meu-accordian în directorul /wp-contnt/plugins/ pe site-ul WP. Mulțumesc mult.
christina
când salvez fișierul textedit, acesta este salvat ca my-accordion.php.rtf. Este corect?
Suport WPBeginner
Nu. Trebuie să îl salvezi ca my-accordion.php Programele Windows adaugă uneori această extensie fișierului tău text. Încearcă să folosești opțiunea Salvare fișier ca.
Admin
Suport WPBeginner
Pe Mac aveți un program numit TextEdit. Pentru FTP, consultați ghidul nostru despre cum să folosiți FTP pentru a încărca fișiere WordPress.
Admin
Nurul Amin
Am activat cu succes aceste plugin-uri, dar nu funcționează. Nu afișează nimic pe pagina mea de FAQ.
Echipa WPBeginner
Captura de ecran a codului pe care ați partajat-o nu arată ca și codul pe care l-am partajat mai sus. Cu toate acestea, codul din captură de ecran are etichete HTML care nu ar trebui să fie acolo. Ar trebui să fie așa:
‘posts_per_page’ => ’10’,
Stefan 13
Acest lucru este destul de ciudat. Comentariile tale m-au lăsat perplex, deoarece vedeam clar codul chiar acolo pe ecranul meu. Apoi mi-am dat seama că toate acele etichete de conversie valutară proveneau de la un altul dintre pluginurile mele Firefox, care adaugă dinamic un meniu contextual la numerele de pe paginile web – de unde și sursa arăta diferit.
Mulțumesc pentru ajutor!
Stefan 13
Când încerc să activez pluginul în WP 4.1, primesc acest mesaj de eroare:
Pluginul nu a putut fi activat deoarece a declanșat o eroare fatală.
Parse error: syntax error, unexpected ‘<' in /home2/laurepc3/public_html/shala/wp-content/plugins/my-accordion/my-accordion.php on line 20
Aveți idei care ar putea ajuta în acest sens?
Echipa WPBeginner
Codul pe care l-ați lipit are un caracter neașteptat 10,
Asigurați-vă că posts_per_page este încadrat în ghilimele simple. Asigurați-vă că există un semn egal înainte de semnul mai mare și asigurați-vă că există o virgulă la sfârșitul liniei.
Invitat
Nu am asta pe linia 20. Ceea ce pot vedea pe linia 20 în postarea de mai sus și în fișierul meu este asta:
‘posts_per_page’ => 10,
Captură de ecran atașată.
Deci, postarea de mai sus afișează conținut incorect al fișierului?
Stefan 13
Codul din fișierul meu nu arată ca cel pe care l-ați postat pentru linia 20, dar este același cod ca cel de mai sus:
‘posts_per_page’ => 10,
‘orderby’ => ‘menu_order’
Asta înseamnă că codul din articol este depășit?
Mulțumesc pentru clarificare!
Captură de ecran atașată:
Caroline
Mulțumesc pentru acest tutorial! M-a ajutat foarte mult cu problema mea!
Vreau să pun subiecte de genul: Subiect „Evenimente”: un box acordion și „Evenimente Trecute”: un alt box acordion cu subiectul Evenimente Trecute. Am încercat shortcode-ul [faq_accordion + topic=”events”] dar nu s-a întâmplat nimic. Ce pot face? Vă mulțumesc mult!!!
raouf
salut .. mulțumesc pentru acest tutorial, este util. dar am făcut doar o modificare simplă pentru a face un acordeon pentru o anumită categorie. funcționează, dar îmi arată editorul clasic al postării mele, nu editorul vizual. mă poți ajuta
Mahesh Waghmare
Mulțumesc...
Rana
Salut
Există o modalitate prin care pot afișa doar „titlul categoriei, adică Subiectul FAQ” și subiectul listat sub fiecare.
Nu vreau întregul conținut, doar titlul categoriei și, făcând clic pe el, ar trebui să apară titlul subiectului)
Raba
Chris
Care este cea mai bună modalitate de a face CSS-ul să funcționeze? Am o temă copil cu codul meu CSS personalizat. Trebuie să fac ceva în acel fișier, deoarece nu văd niciunul dintre CSS-urile Google.
Suport WPBeginner
Chris CSS-ul Google este pus în coadă și este preluat doar atunci când acordeonul dvs. FAQ este afișat. Deschideți pagina care conține Acordeonul dvs. FAQ și faceți clic dreapta, apoi selectați Vizualizați sursa. Pe pagina de vizualizare a sursei căutați
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/humanity/jquery-ui.cssdacă este acolo, înseamnă că ați încărcat cu succes tema CSS.Admin
Chris S.
Pot face ca pluginul dvs. să funcționeze corect cu FAQ Manager, dar am avut câteva întrebări. Va afișa doar 10 dintre FAQ-uri (presupun că este un număr implicit). Dacă folosesc shortcode-ul încorporat care vine cu pluginul FAQ Manager, pot obține afișarea listei complete.
Pentru a afișa TOATE: plasați [faq limit="-1"] pe un post / pagină
Aveți sugestii despre cum să gestionați acest lucru?
De asemenea, managerul de FAQ permite crearea de liste diferite pe subiecte. Ar exista o modalitate simplă de a modifica plugin-ul dvs. pentru a utiliza acest lucru?
Afișați totul dintr-o singură categorie de subiecte FAQ: plasați [faq faq_topic=”topic-slug”] pe o postare / pagină
În rest, o treabă excelentă!
Suport WPBeginner
Pentru a afișa FAQ-uri cu subiecte, FAQ Manager folosește acești parametri în shortcode:
[faq faq_topic="topic-slug"][faq limit=”-1″] este destul de explicativ. Va afișa toate FAQ-urile.
Cu toate acestea, dacă doriți să afișați mai multe FAQ-uri în acordeon, trebuie să modificați parametrul de interogare în pluginul FAQ Accordion de la WPBeginner, astfel:.
1-click Use in WordPress
Admin
Chris S.
Excelent – mulțumesc pentru ajutor!
Garrett
Acest lucru nu funcționează pentru mine exact așa cum este intenționat. Pluginul se activează cu succes și shortcode-ul este procesat, dar iată cum arată rezultatul...
Am optat să folosesc pluginul FAQ manager cu codul dvs. pentru a repara stilizarea urâtă pe care o generează pluginul.
Dar când totul este spus și făcut, iată cum arată. Aveți sfaturi?
http://screencast.com/t/K2VfuBOptcn
Mulțumesc anticipat!!
~Garrett
Atlanta, GA
Garrett
Se pare că lista nu moștenește nicio informație de stilizare din jquery-ui.css, deși am verificat că un fișier de legătură către jquery-ui.css ESTE prezent pe pagină.
Linia unde este inclus jquery-ui.css:
Explorarea regulilor CSS:
Cum este posibil acest lucru?
Mulțumesc!
~Garrett
Suport WPBeginner
Încercați să comutați la o temă WordPress implicită pentru a vedea dacă funcționează atunci.
Admin
Richard Morrison
Acest lucru a stricat urmărirea după cea mai recentă actualizare WordPress. Nu mai pot afișa acordeonul. Shortcode-ul afișează acum doar textul din managerul de Întrebări frecvente.
Piet
linia 20 din fișierul dumneavoastră my-accordion.php citește: ‘numberposts’
acea funcție a fost depreciată de... foarte mult timp.
din moment ce sunteți în afacerea de a oferi tutoriale începătorilor, puteți măcar să faceți funcțiile corect?
evident că ar trebui să fie 'posts_per_page'
Personal editorial
Articolul a fost actualizat.
Admin
Mary-Anne
Aș aprecia un ajutor cu asta. Încerc să instalez pe o rețea 3.5.2 pe un site de rețea. Administratorul de rețea are pluginul listat și activat la nivel de rețea.
Cu toate acestea, nu este listat în sub-site-uri.
A fost testat deja cu site-uri de rețea? Pare exact ceea ce este necesar. Mulțumim pentru toate eforturile depuse cu WPBEGINNER.
Mulțumesc.
Personal editorial
Aceasta sună ca o întrebare de suport care trebuie postată pe forumul plugin-ului.
Admin
birge
Salut,
Am creat fișierele my-accordion.php și accordion.js, le-am încărcat și totul, dar tot nu pot vedea plugin-ul în lista de plugin-uri. Ce a mers greșit?
Mulțumesc,
birge
Personal editorial
Ești sigur că locația fișierului plugin-ului este ceva de genul: /wp-content/plugins/accordion/my-accordion.php
Admin
birge
Exact.
alin
I do just what you said but I can’t activate the plugin from plugins dashboard because I can’t se it
curdaneta
Ai uitat să incluzi fișierul script „accordion.js”...
Personal editorial
Am partajat codul accordion.js acolo. Acesta este, de asemenea, inclus folosind enqueue script.
Admin
curdaneta
Îmi pare rău, dar găsesc linkul către fișier
Personal editorial
Nu există un link către fișier. Am partajat codul pe care trebuie să îl copiați într-un fișier nou pe care îl veți crea numit accordion.js
curdaneta
Scuze, greșeala mea
Nu am citit cu atenție. Acum totul funcționează conform așteptărilor
curdaneta
curdaneta
Bună ziua
Nu funcționează pentru mine folosind shortcode-ul în mai multe paragrafe
Cu stimă
curdaneta
Gaelyn
Mulțumesc. Pot vedea unde va fi foarte util.
Drake
Mulțumim pentru articol. Ar fi frumos să avem unul similar care să explice cum să introducem tab-uri jQuery pe pagini/postări.