Come aggiungere una FAQ di jQuery Fisarmonica in WordPress

Recentemente uno dei nostri utenti ci ha chiesto se c'era un modo per loro di aggiungere una fisarmonica FAQ sul loro sito WordPress. Sono disponibili molti plug-in che ti consentono di aggiungere una sezione delle domande frequenti o delle domande frequenti in WordPress. In questo articolo ti mostreremo come aggiungere una fisarmonica FAQ jQuery nel tuo sito WordPress.

Cos'è la fisarmonica?

Nel web design, fisarmonica è un termine usato per un modello di progettazione dell'interfaccia utente che ha tabulazioni o blocchi di contenuti che collassano o si espandono in seguito all'interazione dell'utente. Ogni scheda ha il contenuto sotto di loro che si espande quando l'utente fa clic sulla voce di menu. In termini semplici, è come un menu che si espande quando si fa clic su di esso. Abbiamo usato un effetto simile sulla nostra pagina di configurazione del blog WordPress gratuita. Di seguito è uno screenshot di una fisarmonica campione.

Video Tutorial

Se il video non ti piace o hai bisogno di ulteriori istruzioni, continua a leggere.

Aggiunta di una FAQ di jQuery Fisarmonica

Prima di poter aggiungere una fisarmonica FAQ jQuery, devi assicurarti di avere una sezione FAQ. Inizia con l'aggiunta di una sezione FAQ seguendo il nostro tutorial su come aggiungere una sezione FAQ in WordPress.

Ora andiamo avanti con l'aggiunta della fisarmonica FAQ jQuery. WordPress viene fornito con la libreria jQuery ma non ha temi jquery. Lo caricheremo da Google CDN e accodiamo questi script in WordPress. Creeremo anche uno shortcode che mostra le nostre domande frequenti. Soprattutto faremo tutto ciò creando un plugin per WordPress.

Crea una cartella sul desktop e chiamala my-fisarmonica. Apri Blocco note o qualsiasi altro editor di testo a tua scelta. Crea un file chiamato my-accordion.php e incolla questo codice al suo interno:

  10, 'orderby' => 'menu_order', 'order' => 'ASC', 'post_type' => 'domanda',)); // Generating Output $ faq. = ''; // Apri il contenitore foreach ($ post come $ post) // Genera il markup per ogni domanda $ faq. = Sprintf (('
% 1 $ s
% 2 $ s '), $ post-> post_title, wpautop ($ post-> post_content));  $ faq. = ''; // Chiudi il contenitore restituisce $ faq; // Restituisce l'HTML.  add_shortcode ('faq_accordion', 'accordion_shortcode'); 

Dopo aver salvato le modifiche a quel file, apri un nuovo file vuoto. Salva come accordion.js. Successivamente incolla questo codice al suo interno e salva il file:

 jQuery (document) .ready (function () jQuery ("# ​​fisarmonica"). accordion ();) (); 

Ora abbiamo il nostro plugin pronto per essere caricato. Apri il tuo client FTP e carica la mia cartella fisarmonica nella directory / wp-contnt / plugins / nel tuo sito Web WordPress. Successivamente, è necessario attivare il plug-in accedendo alla schermata del plugin nell'area di amministrazione di WordPress.

Aggiunta di una pagina di domande frequenti con Fisarmonica

Per visualizzare queste domande frequenti in un formato di fisarmonica, è necessario creare una nuova pagina. Vai a Pagine »Aggiungi nuovo. Assegna un titolo alla tua pagina, ad es. Domande frequenti e nell'area di modifica della pagina inserisci questo shortcode:

[Faq_accordion]

Salva e pubblica la tua pagina e visualizzala in anteprima. Vedrai le tue FAQ visualizzate in un bel menu di fisarmonica.

Cambiando stile e colori della tua fisarmonica

Per i colori e lo stile, questa FAQ della Fisarmonica utilizza i temi dell'interfaccia utente jQuery ospitati su Google. È fondamentalmente un foglio di stile e, se preferisci, puoi scaricarlo e metterlo sul tuo sito web. Il sito Web jQuery ha una sezione temi dell'interfaccia utente jQuery con alcuni temi pronti per l'uso. Come puoi vedere, abbiamo usato il tema dell'umanità nel nostro plugin. Puoi sostituirlo con uno qualsiasi dei temi disponibili come levigatezza, cupertino, ecc. Puoi anche creare o modificare questi temi su Themeroller.

Speriamo che questo articolo ti abbia aiutato ad aggiungere una jQuery FAQ Fisarmonica sul tuo sito Web WordPress. Per feedback e domande si prega di lasciare un commento qui sotto.