Organizzare i contenuti con un accordion FAQ può migliorare l'esperienza utente sul tuo sito WordPress. Questa funzionalità ti consente di visualizzare domande e risposte in un formato compatto, rendendo più facile per i visitatori trovare rapidamente le informazioni.
Inoltre, l'uso di jQuery per il tuo accordion rende le tue FAQ interattive e facili da navigare.
Noi di WPBeginner gestiamo un blog da oltre 16 anni e abbiamo scritto centinaia di articoli, guide e tutorial. In alcuni di questi, noterai che abbiamo utilizzato accordion FAQ con jQuery per rispondere alle domande comuni dei nostri lettori.
Questo approccio ci ha aiutato ad attrarre più visitatori, migliorare il nostro posizionamento nei motori di ricerca e persino a generare lead. In sintesi, sappiamo quanto possa essere prezioso un accordion FAQ dinamico.
In questo articolo, ti mostreremo come aggiungere facilmente un accordion FAQ con jQuery in WordPress, passo dopo passo.
Perché usare un accordion FAQ con jQuery in WordPress?
Nel web design, un accordion è uno strumento per organizzare i contenuti in modo ordinato. Assomiglia a un elenco in cui ogni elemento si espande per mostrare maggiori dettagli quando ci clicchi sopra e poi si contrae quando hai finito. È un modo semplice per nascondere o mostrare informazioni aggiuntive senza ingombrare la pagina.
Nel frattempo, jQuery è una libreria JavaScript che semplifica l'aggiunta di funzionalità interattive al tuo sito web. Ad esempio, ti consente di aggiungere elementi come animazioni, menu a discesa e pulsanti cliccabili, senza dover scrivere codice complesso da zero.
Ciò significa che l'utilizzo di un fisarmonica FAQ jQuery in WordPress può rendere il tuo sito più organizzato e facile da usare. Ti consente di visualizzare le domande frequenti in un formato comprimibile, risparmiando spazio e riducendo il disordine.
In questo modo, i visitatori possono trovare rapidamente le risposte di cui hanno bisogno senza dover scorrere lunghi blocchi di testo. Questo può dare al tuo sito un aspetto pulito e migliorare la SEO rendendo il tuo contenuto più strutturato, cosa che i motori di ricerca favoriscono.
Detto questo, diamo un'occhiata a come aggiungere facilmente una fisarmonica FAQ jQuery in WordPress. Discuteremo più metodi in questo tutorial, ma puoi usare i link qui sotto per saltare a quello di tua scelta:
- Metodo 1: Aggiungere una fisarmonica FAQ jQuery con WPCode (Consigliato)
- Metodo 2: Aggiungere una fisarmonica FAQ jQuery con un plugin gratuito (Facile)
- Metodo 3: Aggiungere una fisarmonica FAQ jQuery con SeedProd
- Bonus: Aggiungere lo schema FAQ in WordPress
Metodo 1: Aggiungere una fisarmonica FAQ jQuery con WPCode (Consigliato)
Se stai cercando un modo semplice e affidabile per aggiungere una fisarmonica FAQ jQuery, allora questo metodo fa per te.
Per questo approccio, avrai bisogno di WPCode, che è il miglior plugin per snippet di codice WordPress sul mercato. È il modo più semplice e sicuro per aggiungere codice personalizzato al tuo sito web. Inoltre, viene fornito con uno snippet di codice predefinito per una fisarmonica FAQ, rendendolo una scelta ideale.
Innanzitutto, devi installare e attivare il plugin WPCode. Per maggiori dettagli, consulta il nostro tutorial su come installare un plugin di WordPress.
Nota: WPCode ha un piano gratuito, ma avrai bisogno della versione premium per sbloccare la libreria cloud di snippet di codice.
Dopo l'attivazione, visita la pagina Snippet di codice » + Aggiungi snippet dalla dashboard di WordPress e utilizza il modulo di ricerca per individuare lo snippet 'FAQ Accordion'.
Una volta fatto ciò, fai semplicemente clic sul pulsante ‘Usa Snippet’ sotto di esso.
Questo ti indirizzerà alla pagina ‘Modifica Snippet’, dove il codice personalizzato per un fisarmonica FAQ sarà già stato aggiunto nella casella ‘Anteprima Codice’.
Qui, devi solo digitare le domande e le risposte per la tua fisarmonica all'interno del codice. Una volta fatto ciò, attiva l'interruttore in alto su ‘Attivo’ e fai clic sul pulsante ‘Aggiorna’.
Ora apri la pagina o il post in cui desideri aggiungere la sezione fisarmonica FAQ nell'editor a blocchi.
Qui, fai clic sul pulsante ‘Aggiungi Blocco’ (+) per aprire il menu dei blocchi e aggiungi il blocco ‘WPCode’ alla pagina. Ora, apri il menu a discesa all'interno del blocco per scegliere lo snippet di codice ‘Fisarmonica FAQ’ che hai creato in precedenza.
Una volta fatto ciò, fai clic sul pulsante ‘Aggiorna’ o ‘Pubblica’ in alto per salvare le tue impostazioni.
Ora visita il tuo sito WordPress per vedere la fisarmonica FAQ in azione.
Tieni presente che dovrai ripetere il processo per creare una fisarmonica per altre pagine.
Metodo 2: Aggiungere una fisarmonica FAQ jQuery con un plugin gratuito (Facile)
Se non vuoi utilizzare alcun codice personalizzato sul tuo sito web, allora questo metodo fa per te.
Innanzitutto, dovrai installare e attivare il plugin Advanced Accordion Gutenberg Block. Per maggiori informazioni, consulta la nostra guida per principianti su come installare un plugin WordPress.
Dopo l'attivazione, apri la pagina o il post in cui desideri aggiungere le FAQ e fai clic sul pulsante ‘Aggiungi blocco’ (+) in alto. Una volta che appare il menu dei blocchi, individua e aggiungi semplicemente il blocco ‘Separate Accordion’ alla pagina.
Successivamente, digita la tua prima domanda e risposta all'interno del blocco fisarmonica.
Quindi, puoi aggiungere uno schema FAQ dal pannello dei blocchi espandendo la scheda con lo stesso nome e attivando l'interruttore ‘Rendi abilitato’.
Dopodiché, passa alla sezione ‘Stili’ all'interno della colonna di destra. Da qui, puoi personalizzare il colore del testo dell'accordion, il colore di sfondo, il colore dell'icona e molto altro.
Quindi, puoi ripetere questo processo per aggiungere tutte le FAQ che desideri.
Infine, fai clic sul pulsante ‘Aggiorna’ o Pubblica’ nella parte superiore della pagina per salvare le tue impostazioni.
Ora, visita la tua pagina FAQ per vedere l'accordion jQuery in azione.
Metodo 3: Aggiungere una fisarmonica FAQ jQuery con SeedProd
Se desideri aggiungere una sezione FAQ interattiva a una pagina personalizzata, allora questo metodo fa per te.
Per fare ciò, puoi utilizzare SeedProd. È il miglior page builder di WordPress che include anche un blocco accordion speciale per aggiungere sezioni di testo che si espandono e si comprimono nelle tue pagine.
Innanzitutto, devi installare e attivare il plugin SeedProd. Per saperne di più, consulta la nostra guida su come installare un plugin WordPress.
Nota: SeedProd ha un piano gratuito. Tuttavia, avrai bisogno della versione pro per sbloccare il blocco ‘Accordion’.
Dopo l'attivazione, vai alla pagina SeedProd » Impostazioni per inserire la tua chiave di licenza. Puoi trovare queste informazioni nel tuo account sul sito web di SeedProd.
Dopodiché, visita la schermata SeedProd » Landing Page dalla barra laterale di amministrazione di WordPress.
Da qui, fai clic sul pulsante ‘Aggiungi nuova landing page’.
Questo ti porterà a una nuova schermata dove vedrai un elenco di modelli predefiniti tra cui scegliere.
Una volta fatta la tua scelta, vedrai un prompt che ti chiederà di inserire un nome e un URL per la pagina. Inserisci i dettagli e fai clic sul pulsante ‘Salva e inizia a modificare la pagina’ per continuare.
Il builder drag-and-drop di SeedProd si aprirà ora sul tuo schermo. Qui vedrai una colonna di blocchi a sinistra con un'anteprima della pagina a destra.
Ora puoi aggiungere qualsiasi elemento alla tua pagina, inclusi un'immagine, un video, un pulsante CTA, un'intestazione o un blocco di testo. Dopodiché, trascina e rilascia il blocco ‘Accordion‘ dove vuoi aggiungere le tue FAQ.
Quindi, fai di nuovo clic sul blocco per aprirne le impostazioni nella colonna di sinistra. Da qui, espandi la scheda ‘Accordion 1’ e inizia a scrivere la tua prima FAQ.
Ora puoi ripetere il processo per aggiungere altre voci.
Per impostazione predefinita, il blocco aggiunge solo due accordion, ma puoi fare clic sul pulsante ‘Aggiungi nuovo elemento’ per aggiungere tutte le FAQ che desideri.
Puoi persino configurare la dimensione del carattere e lo spazio tra ciascun accordion utilizzando gli slider forniti.
Successivamente, passa alla scheda ‘Avanzate’ dall’alto.
Da qui, puoi cambiare il colore del testo, il colore dell’intestazione, il colore dello sfondo e il colore del divisore dell’accordion.
Una volta terminato, fai semplicemente clic sul pulsante ‘Salva’ e poi su ‘Pubblica’ in alto.
Ora puoi visitare la pagina personalizzata appena creata per visualizzare il tuo accordion FAQ jQuery.
Bonus: Aggiungere lo schema FAQ in WordPress
Una volta aggiunti questi accordion FAQ jQuery, è una buona idea aggiungere uno schema FAQ per essi. Questo può aumentare il tuo posizionamento SEO e il tasso di clic organico facendo apparire le tue domande frequenti direttamente nei risultati di ricerca di Google.
Per questo, consigliamo All in One SEO, che è il miglior plugin SEO sul mercato. È una soluzione all-in-one che ottimizza il tuo sito per i motori di ricerca e lo aiuta a posizionarsi più in alto con pochi clic.
Abbiamo utilizzato questo strumento su WPBeginner negli ultimi anni e da allora abbiamo visto miglioramenti notevoli nei nostri ranking di ricerca. Per maggiori dettagli, consulta la nostra recensione di AIOSEO.
Lo strumento è dotato di una funzionalità integrata di schema markup che può aiutare i motori di ricerca a comprendere meglio i tuoi contenuti. Dopo l'attivazione del plugin, apri semplicemente la tua pagina FAQ nell'editor a blocchi.
Quindi, scorri verso il basso fino alla sezione 'Impostazioni AIOSEO' e passa alla scheda 'Schema'. Da qui, fai clic sul pulsante 'Genera Schema'.
Questo aprirà il 'Catalogo Schema', dove dovrai trovare l'opzione FAQ e fare clic sul pulsante 'Aggiungi Schema' accanto ad essa.
Dopodiché, puoi aggiungere le tue FAQ così come appaiono nel tuo accordion. Una volta terminato, fai semplicemente clic sul pulsante 'Aggiungi Schema' per salvare le tue impostazioni.
Ora, i motori di ricerca indicizzeranno queste domande e le mostreranno nelle pagine dei risultati di ricerca, migliorando i tuoi ranking.
Per maggiori dettagli, consulta il nostro tutorial su come aggiungere lo schema FAQ in WordPress.
Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere un accordion FAQ con jQuery in WordPress. Potresti anche voler consultare la nostra guida su come visualizzare facilmente il codice sul tuo sito WordPress e le nostre migliori scelte per i migliori strumenti di sviluppo WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Dennis Muthomi
Il Metodo 1 con WPCode è stato davvero utile, è un ottimo equilibrio tra facilità e personalizzazione.
Come sviluppatore WordPress ho fatto cose simili prima, ma la tua guida passo passo la rende accessibile anche ai principianti.
Una cosa che aggiungerò a quello che ho fatto prima è usare le transizioni CSS per smussare le animazioni di apertura/chiusura dell'accordion, lo renderà ancora migliore. Questa sarà una grande risorsa per i miei progetti futuri.
Zac Smith
Ciao, ho installato il plugin Quick and Easy FAQ, e poi ho seguito questo video. Non ottengo un accordion FAQ, piuttosto l'unica cosa che appare è la prima domanda e risposta della FAQ... e la domanda è collegata.
Daniel
Ottimo tutorial!
Il mio debugger si è lamentato della variabile non definita $faq.
Variabile definita all'inizio della funzione accordion_shortcode() con $faq = "";
Inoltre, la mia versione del plugin FAQ inserisce il valore 'faq' invece di 'query' nel campo post_type della tabella postes.
Linea 23 modificata:
'post_type' => 'faq',
Johan Johnsson
È sciocco che ci facciate installare un plugin per una pagina FAQ e seguire il vostro tutorial precedente su come creare quella pagina FAQ, e poi copiare (essenzialmente scaricare) il plugin che avete creato per questo tutorial. Quindi, stiamo essenzialmente scaricando 2 plugin già finiti.
Non credo che le persone vengano qui per scaricare 2 plugin, ma piuttosto per IMPARARE a creare il proprio menu a fisarmonica personalizzato. Non vedo perché dovrei seguire questa "guida pratica" quando posso semplicemente scaricare un altro plugin WP che fa lo stesso lavoro, se non meglio.
E il fatto che questo plugin si basi sul plugin FAQ sembra piuttosto non necessario. Perché non hai creato un plugin autonomo e lo hai reso dinamico? Così puoi usarlo per qualsiasi contenuto su qualsiasi pagina.
Supporto WPBeginner
Ciao Johan,
La maggior parte dei nostri utenti sono principianti a cui sarebbe difficile copiare e incollare codice. Ecco perché lo abbiamo trasformato in un plugin in modo che gli utenti possano scaricarlo e installarlo. Se desideri utilizzare il metodo del codice, il codice è qui per te da studiare e utilizzare nel tuo tema o in un plugin specifico per il sito. Facci sapere se hai bisogno di aiuto con questo.
Amministratore
Kim
Come faccio a fare in modo che quando clicco sul titolo si chiuda – vedo che si chiude quando clicchi su un'altra parte dell'accordion, ma sto cercando la funzione per chiudere quando viene cliccato ogni titolo.
christina
grazie per il tutorial. Sono molto nuovo alla programmazione e al web design. Ho seguito le istruzioni per incollare i codici nel mio blocco note sul mio Mac. C'è un modo diverso per salvare il file oltre che in blocco note come file php o js nella cartella? Inoltre, potresti per favore dirmi passo dopo passo come aprire un client FTP (cos'è tra l'altro?) e come caricare la mia cartella-fisarmonica in /wp-contnt/plugins/directory sul sito web WP. Grazie mille.
christina
quando salvo il file textedit, viene salvato come my-accordion.php.rtf. È corretto?
Supporto WPBeginner
No. Devi salvarlo come my-accordion.php. I programmi Windows a volte aggiungono questa estensione al tuo file di testo. Prova a usare l'opzione Salva file con nome.
Amministratore
Supporto WPBeginner
Su Mac hai un programma chiamato TextEdit. Per l'FTP consulta la nostra guida su come usare FTP per caricare file su WordPress.
Amministratore
Nurul Amin
Ho attivato questo plugin con successo, ma non funziona. Non visualizza nulla nella mia pagina FAQ.
Staff di WPBeginner
Lo screenshot del codice che hai condiviso non sembra il codice che abbiamo condiviso sopra. Tuttavia, il codice nello screenshot contiene tag HTML che non dovrebbero esserci. Dovrebbe essere così:
'posts_per_page' => '10',
Stefan 13
Questo è piuttosto strano. I tuoi commenti mi hanno lasciato perplesso, dato che vedevo chiaramente il codice proprio lì sullo schermo. Mi sono poi reso conto che tutti quei tag del convertitore di valuta provenivano da un altro dei miei plugin di Firefox, che aggiunge dinamicamente un menu contestuale ai numeri nelle pagine web – da qui l'aspetto diverso della sorgente.
Grazie per il tuo aiuto!
Stefan 13
Quando provo ad attivare il plugin in WP 4.1, ricevo questo messaggio di errore:
Impossibile attivare il plugin perché ha causato un errore fatale.
Errore di analisi: errore di sintassi, inatteso ‘<' in /home2/laurepc3/public_html/shala/wp-content/plugins/my-accordion/my-accordion.php alla riga 20
Qualche idea che possa aiutare con questo?
Staff di WPBeginner
Il codice che hai incollato ha un carattere inatteso 10,
Assicurati che posts_per_page sia racchiuso tra virgolette singole. Assicurati che ci sia un segno di uguale prima del segno maggiore e assicurati che ci sia una virgola alla fine della riga.
Ospite
Non ho quello alla riga 20. Quello che posso vedere alla riga 20 nel post sopra e nel mio file è questo:
‘posts_per_page’ => 10,
Screenshot allegato.
Quindi il post sopra visualizza contenuti di file errati?
Stefan 13
Il codice nel mio file non assomiglia a quello che hai pubblicato per la riga 20, ma è lo stesso codice di quello sopra:
‘posts_per_page’ => 10,
‘orderby’ => ‘menu_order’,
Ciò significa che il codice nell'articolo è obsoleto?
Grazie per aver chiarito!
Screenshot allegato:
Caroline
Grazie per questo tutorial! Mi ha davvero aiutato con il mio problema!
Voglio mettere argomenti come questo: Argomento "Eventi": una casella a soffietto e "Eventi passati": un'altra casella a soffietto con l'argomento Eventi passati. Ho provato lo shortcode [faq_accordion + topic="events"] ma non è successo nulla. Cosa posso fare? Grazie mille!!!
raouf
ciao .. grazie per questo tutorial, è utile. ma ho solo apportato una semplice modifica per creare un fisarmonica per una categoria specifica. funziona ma mi mostra l'editor classico del mio post, non l'editor visivo. puoi aiutarmi
Mahesh Waghmare
Grazie...
Rana
Ciao
C'è un modo per visualizzare solo il "titolo della categoria, ad esempio Argomento FAQ" e l'argomento elencato sotto ciascuno.
Non voglio l'intero contenuto, solo il titolo della categoria e cliccandoci sopra mostrerebbe il titolo dell'argomento)
Raba
Chris
Qual è il modo migliore per far funzionare il CSS? Ho un tema figlio con il mio codice CSS personalizzato. Devo fare qualcosa in quel file dato che non vedo nessuno dei CSS di Google.
Supporto WPBeginner
Chris il CSS di Google è in coda e viene recuperato solo quando viene visualizzata la tua fisarmonica FAQ. Apri la pagina contenente la tua fisarmonica FAQ e fai clic destro, quindi seleziona Visualizza sorgente. Nella pagina di visualizzazione sorgente cerca
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/humanity/jquery-ui.cssse è presente, significa che hai caricato correttamente il tema CSS.Amministratore
Chris S.
Sono in grado di far funzionare correttamente il tuo plugin con FAQ Manager ma ho alcune domande. Visualizza solo 10 delle FAQ (che presumo sia un numero predefinito). Se utilizzo lo shortcode integrato fornito dal plugin FAQ Manager, riesco a visualizzare l'elenco completo
Per visualizzare TUTTE: inserisci [faq limit="-1"] su un post / pagina
Hai qualche suggerimento su come gestire questo?
Inoltre, FAQ Manager consente di creare elenchi diversi per argomento. Ci sarebbe un modo semplice per modificare il tuo plugin per utilizzarlo?
Elenca tutto da una singola categoria di argomento FAQ: inserisci [faq faq_topic="topic-slug"] su un post / pagina
Ottimo lavoro altrimenti!
Supporto WPBeginner
Per visualizzare le FAQ con argomenti, FAQ Manager utilizza questi parametri nello shortcode:
[faq faq_topic="topic-slug"][faq limit=”-1″] è abbastanza autoesplicativo. Visualizzerà tutte le FAQ.
Tuttavia, se desideri visualizzare più FAQ nell'accordion, devi modificare il parametro della query nel plugin FAQ Accordion di WPBeginner, in questo modo:
1-click Use in WordPress
Amministratore
Chris S.
Ottimo, grazie per il tuo aiuto!
Garrett
Questo non sta funzionando come previsto. Il plugin si attiva correttamente e lo shortcode viene elaborato, ma ecco come appare l'output...
Ho scelto di utilizzare il plugin FAQ manager con il tuo codice per correggere lo stile orribile che il plugin genera.
Ma alla fine, ecco come si presenta. Qualche consiglio?
http://screencast.com/t/K2VfuBOptcn
Molte grazie in anticipo!!
~Garrett
Atlanta, GA
Garrett
Sembra che l'elenco non stia ereditando alcuna informazione di stile da jquery-ui.css, sebbene abbia verificato che un link al file jquery-ui.css SIA presente nella pagina.
Riga in cui viene incluso jquery-ui.css:
Esplorazione delle regole CSS:
Come è possibile?
Grazie!
~Garrett
Supporto WPBeginner
Prova a passare a un tema WordPress predefinito per vedere se funziona allora.
Amministratore
Richard Morrison
Questo si è rotto dopo l'ultimo aggiornamento di Wordpress. Non riesco più a far visualizzare l'accordion. Lo shortcode ora visualizza solo il testo di FAQ manager.
Piet
la riga 20 del tuo file my-accordion.php dice: ‘numberposts’
quella funzione è deprecata da... molto tempo.
dato che siete nel settore della fornitura di tutorial per principianti, potete almeno usare le funzioni corrette?
ovviamente questo dovrebbe essere ‘posts_per_page’
Staff editoriale
Articolo aggiornato.
Amministratore
Mary-Anne
Apprezzerei un aiuto con questo. Sto tentando di installare su una versione 3.5.2 su un sito di rete. L'amministratore di rete ha il plugin elencato e attivato a livello di rete.
Tuttavia, non è elencato nei sotto-siti.
È già stato testato con siti di rete? Sembra esattamente ciò di cui ho bisogno. Grazie per tutti i tuoi sforzi con WPBEGINNER.
Grazie.
Staff editoriale
Questo sembra una domanda di supporto che deve essere postata sul forum del plugin.
Amministratore
birge
Ciao,
Ho creato il mio my-accordion.php e accordion.js, li ho caricati e tutto, ma ancora non vedo il plugin nell'elenco dei plugin. Cosa è andato storto?
Grazie,
birge
Staff editoriale
Sei sicuro che la posizione del file del plugin sia qualcosa del tipo: /wp-content/plugins/accordion/my-accordion.php
Amministratore
birge
Esattamente.
alin
I do just what you said but I can’t activate the plugin from plugins dashboard because I can’t se it
curdaneta
Hai dimenticato di includere il file di script "accordion.js"...
Staff editoriale
Abbiamo condiviso il codice di accordion.js lì. Viene anche incluso utilizzando enqueue script.
Amministratore
curdaneta
Scusa, ma trovo il link al file
Staff editoriale
Non c'è nessun link al file. Abbiamo condiviso il codice che devi incollare in un nuovo file che creerai chiamato accordion.js
curdaneta
Scusa, colpa mia
Non ho letto attentamente. Ora tutto funziona come previsto
curdaneta
curdaneta
Ciao
Non funziona per me usando lo shortcode in diversi paragrafi
Saluti
curdaneta
Gaelyn
Grazie. Capisco dove questo sarà molto utile.
Drake
Grazie per l'articolo. Sarebbe bello averne uno simile che spieghi come introdurre le schede jQuery nelle pagine/post.