Cum de a adăuga un jQuery FAQ Accordion în WordPress

Recent, unul dintre utilizatorii noștri ne-a întrebat dacă există o modalitate pentru ei de a adăuga un acordeon de întrebări frecvente pe site-ul lor WordPress. Există multe pluginuri disponibile care vă permit să adăugați o întrebare frecventă întrebări sau întrebări frecvente în WordPress. În acest articol vă vom arăta cum să adăugați un acordeon jQuery FAQ în site-ul dvs. WordPress.

Ce este Accordion?

În designul web, acordeonul este un termen utilizat pentru un model de design al interfeței utilizator care are file sau blocuri de conținut care se prăbușesc sau se extind la interacțiunea utilizatorului. Fiecare filă are conținut de sub acestea care se extinde atunci când utilizatorul face clic pe elementul din meniu. În termeni simpli, este ca un meniu care se extinde când faceți clic pe el. Am folosit un efect similar asupra paginii noastre de instalare a blogului WordPress gratuit. Mai jos este o captură de ecran a unui eșantion de acordeon.

Tutorial video

Dacă nu vă place videoclipul sau aveți nevoie de mai multe instrucțiuni, continuați să citiți.

Adăugarea unui jQuery FAQ Accordion

Înainte de a adăuga un jQuery FAQ acordeon, trebuie să vă asigurați că aveți o secțiune de întrebări frecvente. Începeți cu adăugarea unei secțiuni frecvente, urmând tutorialul nostru despre cum să adăugați o secțiune de întrebări frecvente în WordPress.

Acum, să mergem mai departe cu adăugarea jQuery FAQ acordeon. WordPress vine cu biblioteca jQuery dar nu are tematici jquery. Vom încărca acest lucru din Google CDN și cozi aceste scripturi în WordPress. Vom crea, de asemenea, un scurtcod care afișează întrebările noastre frecvente. Cel mai important, vom face totul prin crearea unui plugin WordPress.

Creați un dosar pe desktop și denumiți-mi acordeonul. Deschideți Notepad sau orice alt editor de text la alegere. Creați un fișier numit mi-accordion.php și lipiți acest cod în interiorul acestuia:

  10, 'orderby' => 'menu_order', 'comanda' => 'ASC', 'post_type' => 'întrebare',)); // Generarea rezultatului $ faq. = ''; // Deschiderea foreach-ului containerului ($ posturi ca $ post) // Generarea marcajului pentru fiecare intrebare $ faq. = Sprintf (('
% 1 $ s
% 2 $ s '), $ post-> post_title, wpautop ($ post-> post_content));  $ faq. = ''; // Închideți returul recipientului $ faq; // Returnați codul HTML.  add_shortcode ('faq_accordion', 'accordion_shortcode'); 

După salvarea modificărilor în fișierul respectiv, deschideți un nou fișier gol. Salvați-o ca accordion.js. Apoi lipiți acest cod în interiorul acestuia și salvați fișierul:

 jQuery (document) .ready (funcția () jQuery ("# ​​acordeon"). acordeon ();) (); 

Acum, pluginul nostru este gata de încărcare. Deschideți Clientul FTP și încărcați folderul meu / acordeon în directorul / wp-contnt / plugins / pe site-ul dvs. WordPress. Apoi, trebuie să activați plugin-ul accesând ecranul plugin-ului dvs. în zona de administrare WordPress.

Adăugarea unei pagini de întrebări frecvente cu Accordion

Pentru a afișa aceste întrebări frecvente într-un format de acordeon, trebuie să creați o pagină nouă. Mergi la Pagini »Adăugați noi. Dați paginii dvs. un titlu, de ex. Întrebări frecvente și în zona de editare a paginii introduceți acest cod scurt:

[Faq_accordion]

Salvați și publicați pagina și previzualizați-o. Veți vedea întrebările dvs. frecvente afișate într-un meniu frumos de acordeon.

Schimbarea stilului și culorilor acordeonului tău

Pentru culori și stil, acest Accordion FAQ utilizează temele UI jQuery găzduite pe Google. Este în principiu o foaie de stil, iar dacă preferați, puteți să o descărcați și să o puneți pe propriul site. Site-ul jQuery are o secțiune tematică UI cu jQuery cu câteva teme gata de utilizare. După cum puteți vedea că am folosit tema omenirii în plugin-ul nostru. Puteți să o înlocuiți cu oricare dintre temele disponibile, cum ar fi netezirea, cupertino etc. Puteți, de asemenea, crea sau modifica aceste teme pe Themeroller.

Sperăm că acest articol v-a ajutat să adăugați o acordeon FAQ JQuery pe site-ul dvs. WordPress. Pentru feedback și întrebări, lăsați un comentariu mai jos.