Utilizzo di WordPress per creare un sistema FAQ con tipi di post personalizzati

Di recente ho lavorato con un mio cliente, che lavora come consulente professionale nella sua area di lavoro. Mi ha chiesto se potevo implementare un sistema di domande e risposte, o una pagina di FAQ, per essere precisi. Ho detto, "Certo, possiamo semplicemente creare una pagina e incollare le domande e rispondere lì con uno stile diverso", ma ha detto che avrebbe creato pagine diverse e categorizzato domande e risposte, e per il gusto di essere più organizzata, aveva bisogno di un approccio diverso.

A tal fine, ti mostrerò come ho gestito le sue richieste con alcune semplici righe di codice utilizzando tipi di post personalizzati, tassonomie e codici brevi.

Il tipo di posta personalizzato e la tassonomia

Di cosa abbiamo bisogno per costruire un sistema di FAQ?

Abbiamo bisogno di campi per domande e risposte.
Abbiamo bisogno di categorie per classificare e separare diversi tipi di domande e le loro risposte.
Nel nostro caso, abbiamo bisogno di uno shortcode per incorporare questi gruppi di domande o tutte le domande in una pagina o in un post.

Iniziamo creando il tipo di post personalizzato.

Passaggio 1: creazione del tipo di post personalizzato

Naturalmente, iniziamo impostando un tipo di post personalizzato per le nostre voci FAQ. Creeremo un nuovo tipo di post personalizzato con l'aiuto di register_post_type () funzione, ma se si desidera una GUI per creare il proprio tipo di post, è possibile generarlo con lo strumento Generatore del tipo di post di GenerateWP come ho fatto in questo esempio:

 _x ("Domande frequenti", "Nome generale tipo di post", "tuts_faq"), "singular_name" => _x ("Domande frequenti", "Nome singolo tipo post", "tuts_faq"), "menu_name" => __ ("Domande frequenti ',' tuts_faq '),' parent_item_colon '=> __ (' Parent Item: ',' tuts_faq '),' all_items '=> __ (' Tutti gli articoli ',' tuts_faq '),' view_item '=> __ (' Visualizza elemento ',' tuts_faq '),' add_new_item '=> __ (' Aggiungi nuovo elemento FAQ ',' tuts_faq '),' add_new '=> __ (' Aggiungi nuovo ',' tuts_faq '),' edit_item '=> __ ('Modifica elemento', 'tuts_faq'), 'update_item' => __ ('Aggiorna elemento', 'tuts_faq'), 'search_items' => __ ('Cerca elemento', 'tuts_faq'), 'not_found' = > __ ('Not found', 'tuts_faq'), 'not_found_in_trash' => __ ('Non trovato nel cestino', 'tuts_faq'),); $ args = array (// usa le etichette sopra 'labels' => $ labels, // avremo bisogno solo del titolo, dell'editor Visual e dei campi estratti per il nostro tipo di post 'supports' => array ('title' , 'editor', 'excerpt',), // creeremo questa tassonomia nella prossima sezione, ma dobbiamo collegare il nostro tipo di post ad esso ora 'taxonomies' => array ('tuts_faq_tax'), / / rendilo pubblico in modo che possiamo vederlo nel pannello di amministrazione e mostrarlo nel front-end 'public' => true, // mostra la voce di menu sotto l'elemento Pages 'menu_position' => 20, // mostra archivi, se non hai bisogno dello shortcode 'has_archive' => true,); register_post_type ('tuts_faq', $ args);  // si aggancia all'azione 'init' add_action ('init', 'tuts_faq_cpt', 0); ?>

Mancia: Se il tuo progetto coinvolgerà più tipi di post personalizzati che possono essere più complessi di questo semplice tipo di post FAQ, posso suggerire un fantastico strumento chiamato SuperCPT che ti permette di creare nuovi tipi di post con codice ancora più semplice. Ho anche scritto un tutorial su SuperCPT, puoi verificarlo qui.

Passaggio 2: creazione della tassonomia personalizzata

Per separare diversi tipi di domande (come le domande e le risposte del mio cliente sull'aborto e la depressione postpartum), avremo bisogno di un sistema di categoria. Come molti di voi già sanno, WordPress fornisce questa funzionalità con tassonomie personalizzate.

La funzione essenziale qui è register_taxonomy () ma ancora, è possibile utilizzare lo strumento Generator Taxonomy di GenerateWP se è necessaria un'interfaccia grafica.

Ecco il codice:

 _x ('Categorie FAQ', 'Nome generale tassonomia', 'tuts_faq'), 'singular_name' => _x ('Domande frequenti Categoria', 'Nome tassonomo singolare', 'tuts_faq'), 'menu_name' => __ ('FAQ Categories ',' tuts_faq '),' all_items '=> __ (' Tutte le FAQ Cats ',' tuts_faq '),' parent_item '=> __ (' Parent FAQ Cat ',' tuts_faq '),' parent_item_colon '=> __ ('Parent FAQ Cat:', 'tuts_faq'), 'new_item_name' => __ ('New FAQ Cat', 'tuts_faq'), 'add_new_item' => __ ('Aggiungi nuovo FAQ Cat', 'tuts_faq'), 'edit_item' => __ ('Modifica FAQ Cat', 'tuts_faq'), 'update_item' => __ ('Update FAQ Cat', 'tuts_faq'), 'separate_items_with_commas' => __ ('Separare gli elementi con virgole', 'tuts_faq'), 'search_items' => __ ('Cerca elementi', 'tuts_faq'), 'add_or_remove_items' => __ ('Aggiungi o rimuovi elementi', 'tuts_faq'), 'choose_from_most_used' => __ ('Scegli dagli elementi più usati ',' tuts_faq '),' not_found '=> __ (' Not Found ',' tuts_faq '),); $ args = array (// usa le etichette sopra 'labels' => $ labels, // taxonomy dovrebbe essere gerarchico in modo che possiamo mostrarlo come una sezione di categoria 'hierarchical' => true, // again, rendere la tassonomia pubblica ( come il tipo di post) 'public' => true,); // il contenuto dell'array sottostante specifica quali tipi di post devono essere collegati alla tassonomia a register_taxonomy ('tuts_faq_tax', array ('tuts_faq'), $ args);  // si aggancia all'azione 'init' add_action ('init', 'tuts_faq_tax', 0); ?>

Questo è tutto! Ora hai un tipo di messaggio di domande frequenti con una tassonomia chiamata "Categorie FAQ" collegate tra loro! Controlla il tuo pannello di amministrazione e vedrai la voce di menu "Categorie FAQ" sotto "Domande frequenti".

Proprio come le normali categorie di post, puoi aggiungerli, modificarli o rimuoverli nella pagina "Categorie FAQ", oppure puoi aggiungere nuove categorie mentre stai scrivendo una nuova voce FAQ.

Passaggio 3: creazione di `[FAQ]` Codice corto

Ecco la parte divertente: costruire lo shortcode. (Se hai letto i miei post precedenti, sai che io sono un enorme fan degli shortcode di WordPress.) Fondamentalmente faremo in modo che le domande frequenti siano incorporabili in post e pagine.

Ecco cosa sta per succedere:

interrogare all'interno del nostro nuovo tipo di messaggio personalizzato,
filtra le sue categorie con un parametro shortcode,
mostra le domande e le risposte come titoli e contenuti,
mostra un estratto della risposta con un link "Altro ...", controllato da un altro parametro di shortcode.

Iniziamo a creare lo shortcode. Come il codice sopra, includerò alcuni commenti utili:

", // full content o excerpt attribute - default al contenuto completo 'excerpt' => 'false',), $ atts)); $ output ="; // imposta gli argomenti della query $ query_args = array (// mostra tutti i post che corrispondono a questa query 'posts_per_page' => -1, // mostra il tipo di post personalizzato 'tuts_faq' 'post_type' => 'tuts_faq', // mostra il post corrispondenti allo slug della categoria FAQ specificata con l'attributo shortcode 'tax_query' => array (array ('taxonomy' => 'tuts_faq_tax', 'field' => 'slug', 'terms' => $ category,)) , // dì a WordPress che non ha bisogno di contare le righe totali - questo piccolo trucco riduce il carico sul database se non hai bisogno dell'impaginazione 'no_found_rows' => true,); // ottiene i post con i nostri argomenti di query $ faq_posts = get_posts ($ query_args); $ output. = ''; // gestisce il nostro ciclo personalizzato foreach ($ faq_posts come $ post) setup_postdata ($ post); $ faq_item_title = get_the_title ($ post-> ID); $ faq_item_permalink = get_permalink ($ post-> ID); $ faq_item_content = get_the_content (); if ($ excerpt == 'true') $ faq_item_content = get_the_excerpt (). ''. __ ('Altro ...', 'tuts_faq'). ''; $ output. = ''; $ output. = ''. $ faq_item_title. '
'; $ output. = ''. $ faq_item_content. '
'; $ output. = '
';  wp_reset_postdata (); $ output. = '
'; restituire $ output;  add_shortcode ('faq', 'tuts_faq_shortcode'); ?>

Questo è tutto! Ora abbiamo uno shortcode pulito per integrare le nostre domande e risposte. Puoi modellarlo con i nomi delle classi tuts-faq, tuts-faq-item, tuts-faq-item-titolo, e tuts-faq-item-content. Anche se dovrebbe andare bene anche se non includi uno stile aggiuntivo.

Passaggio 4: avvolgimento del codice

Dal momento che questi bit di codice non riguardano solo lo styling del front-end, ma introducono anche nuove funzionalità, esso conta come territorio dei plug-in. Ecco perché dobbiamo salvare il codice come plugin. E mentre ci siamo, dovremmo anche svuotare le regole di riscrittura al momento dell'attivazione e disattivazione.

Ecco il codice completo:

[FAQ] Versione: 1.0 Autore: Barış Ünver Autore URI: http://hub.tutsplus.com/authors/baris-unver Licenza: Public Domain * / if (! Function_exists ('tuts_faq_cpt')) // registra funzione di tipo di post personalizzata tuts_faq_cpt () // queste sono le etichette nell'interfaccia di amministrazione, modificale come preferisci $ labels = array ('name' => _x ('FAQs', 'Post Type General Name', 'tuts_faq'), 'singular_name' => _x ('FAQ', 'Post Type Singular Name', 'tuts_faq'), 'menu_name' => __ ('FAQ', 'tuts_faq'), 'parent_item_colon' => __ ('Parent Item:', ' tuts_faq '),' all_items '=> __ (' Tutti gli elementi ',' tuts_faq '),' view_item '=> __ (' Visualizza elemento ',' tuts_faq '),' add_new_item '=> __ (' Aggiungi nuovo elemento FAQ ',' tuts_faq '),' add_new '=> __ (' Aggiungi nuovo ',' tuts_faq '),' edit_item '=> __ (' Modifica elemento ',' tuts_faq '),' update_item '=> __ (' Aggiorna Item ',' tuts_faq '),' search_items '=> __ (' Cerca elemento ',' tuts_faq '),' not_found '=> __ (' Non trovato ',' tuts_faq '),' not_found_in_trash '=> __ (' Non trovato nel Cestino ',' tuts_faq '),); $ args = array (// usa le etichette sopra 'labels' => $ labels, // avremo bisogno solo del titolo, dell'editor Visual e dei campi estratti per il nostro tipo di post 'supports' => array ('title' , 'editor', 'excerpt',), // creeremo questa tassonomia nella prossima sezione, ma dobbiamo collegare il nostro tipo di post ad esso ora 'taxonomies' => array ('tuts_faq_tax'), / / rendilo pubblico in modo che possiamo vederlo nel pannello di amministrazione e mostrarlo nel front-end 'public' => true, // mostra la voce di menu sotto l'elemento Pages 'menu_position' => 20, // mostra archivi, se non hai bisogno dello shortcode 'has_archive' => true,); register_post_type ('tuts_faq', $ args);  // si aggancia all'azione 'init' add_action ('init', 'tuts_faq_cpt', 0);  if (! function_exists ('tuts_faq_tax')) // registra la funzione di tassonomia personalizzata tuts_faq_tax () // di nuovo, etichette per il pannello di amministrazione $ labels = array ('name' => _x ('Categorie FAQ', 'Tassonomia Nome Generale ',' tuts_faq '),' singular_name '=> _x (' Domande frequenti Categoria ',' Nome tassonomo singolare ',' tuts_faq '),' menu_name '=> __ (' Categorie FAQ ',' tuts_faq '),' all_items '=> __ (' Tutte le FAQ Cats ',' tuts_faq '),' parent_item '=> __ (' Parent FAQ Cat ',' tuts_faq '),' parent_item_colon '=> __ (' Parent FAQ Cat: ',' tuts_faq '),' new_item_name '=> __ (' New FAQ Cat ',' tuts_faq '),' add_new_item '=> __ (' Aggiungi nuovo FAQ Cat ',' tuts_faq '),' edit_item '=> __ (' Modifica Domande frequenti Cat ',' tuts_faq '),' update_item '=> __ (' Domande frequenti sull'aggiornamento Cat ',' tuts_faq '),' separate_items_with_commas '=> __ (' Elementi separati con virgole ',' tuts_faq '),' search_items '= > __ ('Cerca elementi', 'tuts_faq'), 'add_or_remove_items' => __ ('Aggiungi o rimuovi elementi', 'tuts_faq'), 'choose_from_most_used' => __ ('Scegli tra gli elementi più usati', 'tuts_faq '),' not_found '=> __ (' Not Found ',' tuts_faq '),); $ args = array (// usa le etichette sopra 'labels' => $ labels, // taxonomy dovrebbe essere gerarchico in modo che possiamo mostrarlo come una sezione di categoria 'hierarchical' => true, // again, rendere la tassonomia pubblica ( come il tipo di post) 'public' => true,); // il contenuto dell'array sottostante specifica quali tipi di post devono essere collegati alla tassonomia a register_taxonomy ('tuts_faq_tax', array ('tuts_faq'), $ args);  // si aggancia all'azione 'init' add_action ('init', 'tuts_faq_tax', 0);  if (! function_exists ('tuts_faq_shortcode')) function tuts_faq_shortcode ($ atts) extract (shortcode_atts (array (// categoria slug attributo - defaults to blank 'category' => ", // full content o excerpt attribute - defaults a contenuto completo 'excerpt' => 'false',), $ atts)); $ output = "; // imposta gli argomenti della query $ query_args = array (// mostra tutti i post che corrispondono a questa query 'posts_per_page' => -1, // mostra il tipo di post personalizzato 'tuts_faq' 'post_type' => 'tuts_faq', // mostra il post corrispondenti allo slug della categoria FAQ specificata con l'attributo shortcode 'tax_query' => array (array ('taxonomy' => 'tuts_faq_tax', 'field' => 'slug', 'terms' => $ category,)) , // dì a WordPress che non ha bisogno di contare le righe totali - questo piccolo trucco riduce il carico sul database se non hai bisogno dell'impaginazione 'no_found_rows' => true,); // ottiene i post con i nostri argomenti di query $ faq_posts = get_posts ($ query_args); $ output. = ''; // gestisce il nostro ciclo personalizzato foreach ($ faq_posts come $ post) setup_postdata ($ post); $ faq_item_title = get_the_title ($ post-> ID); $ faq_item_permalink = get_permalink ($ post-> ID); $ faq_item_content = get_the_content (); if ($ excerpt == 'true') $ faq_item_content = get_the_excerpt (). ''. __ ('Altro ...', 'tuts_faq'). ''; $ output. = ''; $ output. = ''. $ faq_item_title. '
'; $ output. = ''. $ faq_item_content. '
'; $ output. = '
';  wp_reset_postdata (); $ output. = '
'; restituire $ output;  add_shortcode ('faq', 'tuts_faq_shortcode');  function tuts_faq_activate () tuts_faq_cpt (); flush_rewrite_rules ();  register_activation_hook (__FILE__, 'tuts_faq_activate'); function tuts_faq_deactivate () flush_rewrite_rules ();  register_deactivation_hook (__FILE__, 'tuts_faq_deactivate'); ?>

Margini di miglioramento

Il mio cliente era soddisfatto dei risultati quando le ho mostrato come usarlo. Ma qui, possiamo espandere il codice con più funzionalità, come ...

Effetto fisarmonica: Se desideri rendere più attraenti le tue sezioni FAQ con alcuni effetti di attivazione, puoi utilizzare alcuni formidabili plugin jQuery. Se vuoi usare l'interfaccia utente di jQuery, c'è un sorprendente tutorial di Shane Osbourne che mostra come farlo.
impaginazione: Se hai molte domande e risposte per una categoria e non vuoi visualizzare tutti gli elementi contemporaneamente, puoi limitare il numero di post cambiando il posts_per_page parametro nella query personalizzata del nostro shortcode e aggiungere il codice richiesto per i collegamenti di paginazione sotto la linea con il wp_reset_postdata (); codice. Ricordarsi di rimuovere il 'no_found_rows' => true, linea, però - l'impaginazione non funzionerà se non lo rimuovi!
Domanda Casuale: Supponiamo che tu voglia visualizzare una domanda e una risposta casuali sulla home page e che desideri che cambi ogni aggiornamento di pagina. Tutto quello che devi fare è passare alla query personalizzata, cambiare il posts_per_page parametro da -1 a 1 e aggiungi un'altra riga con il codice 'orderby' => 'random', e sei a posto!

Conclusione

Ecco come si costruisce un semplice sistema di FAQ in WordPress attraverso l'uso di tipi di post personalizzati, tassonomie personalizzate e codici brevi. Spero che questo tutorial ti sia piaciuto e puoi utilizzarlo nel tuo prossimo progetto. Non dimenticare di condividere l'articolo, se ti è piaciuto!

Hai qualche idea per migliorare questo sistema FAQ? Condividi i tuoi commenti qui sotto!

Codice