Slik legger du til en jQuery FAQ-sammenhengen i WordPress

Nylig spurte en av brukerne oss om det var en måte for dem å legge til et FAQ-trekkspill på deres WordPress-nettsted. Det er mange plugins tilgjengelig som lar deg legge til vanlige spørsmål eller ofte stillede spørsmål i WordPress. I denne artikkelen vil vi vise deg hvordan du legger til et jQuery FAQ-trekkspill på ditt WordPress-nettsted.

Hva er Accordion?

I webdesign er trekkraft et uttrykk som brukes til et brukergrensesnittdesignmønster som har faner eller innholdsblokker som kollapser eller utvides ved brukermedvirkning. Hver fane har innhold under dem som utvides når brukeren klikker på menyelementet. Enkelt sagt er det som en meny som utvides når du klikker på den. Vi har brukt en lignende effekt på vår gratis WordPress blog oppsett side. Nedenfor er et skjermbilde av et samspillstraktord.

Videoopplæring

Hvis du ikke liker videoen eller trenger mer instruksjoner, fortsett å lese.

Legge til en jQuery FAQ Accordion

Før du kan legge til et jQuery FAQ-trekkspill, må du sørge for at du har en FAQ-seksjon. Start med å legge til en FAQ-seksjon ved å følge vår veiledning om hvordan du legger til en FAQ-seksjon i WordPress.

La oss nå gå videre med å legge til jQuery FAQ-trekkspillet. WordPress kommer med jQuery-biblioteket, men det har ikke jquery-temaer. Vi laster det fra Google CDN og køer disse skriptene i WordPress. Vi vil også opprette en kortkode som viser våre vanlige spørsmål. Viktigst av alt vil vi gjøre alt det ved å lage et WordPress-plugin.

Lag en mappe på skrivebordet ditt og nev det my-accordion. Åpne Notisblokk eller andre tekstredigeringsprogrammer etter eget valg. Opprett en fil som heter my-accordion.php og lim inn denne koden i den:

  10, 'orderby' => 'menu_order', 'order' => 'ASC', 'post_type' => 'spørsmål',)); // Generere Output $ faq. = ''; // Åpne beholderen foreach ($ innlegg som $ post) // Generer markeringen for hver Question $ faq. = Sprintf (('
% 1 $ s
% 2 $ s '), $ post-> post_title, wpautop ($ post-> post_content));  $ faq. = ''; // Lukk beholderen returnere $ faq; // Returner HTML.  add_shortcode ('faq_accordion', 'accordion_shortcode'); 

Når du har lagret endringene i filen, åpner du en ny blank fil. Lagre det som accordion.js. Neste lim inn denne koden inni den og lagre filen:

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

Nå har vi vårt plugin klar til å laste opp. Åpne FTP-klienten og last opp my-accordion-mappen til / wp-contnt / plugins / katalog på WordPress-webområdet ditt. Deretter må du aktivere plugin ved å gå til plugin-skjermen i WordPress admin-området.

Legge til en FAQ-side med Accordion

For å vise disse vanlige spørsmålene i et trekkspill, må du opprette en ny side. Gå til Sider »Legg til ny. Gi siden din en tittel, f.eks. Vanlige spørsmål og på siden Redigeringsområde skriv inn denne koden:

[Faq_accordion]

Lagre og publiser siden din, og forhåndsvis den. Du vil se dine vanlige spørsmål som vises i en fin trekkspill-meny.

Endre stil og farger av din akkord

For farger og styling bruker denne FAQ Accordion jQuery UI-temaer som er hostet på Google. Det er i utgangspunktet et stilark, og hvis du foretrekker det, kan du laste ned og sette det på ditt eget nettsted. jQuery nettstedet har en jQuery UI temaer seksjon med noen få klar til bruk temaer. Som du kan se at vi har brukt menneskets tema i vårt plugin. Du kan erstatte det med noen av de tilgjengelige temaene som glatthet, cupertino, etc. Du kan også opprette eller endre disse temaene på Themeroller.

Vi håper denne artikkelen hjalp deg med å legge til en jQuery FAQ-akkord på ditt WordPress-nettsted. For tilbakemelding og spørsmål, vennligst legg igjen en kommentar nedenfor.