Bruke WordPress til å lage et FAQ-system med egendefinerte innleggstyper

Jeg har nylig jobbet med en klient av meg, som jobber som en profesjonell konsulent i sitt arbeidsområde. Hun spurte om jeg kunne implementere et Q & A-system, eller en FAQ-side, for å være nøyaktig. Jeg sa, "Jo, vi kan bare lage en side og lime inn spørsmålene og svare på det med forskjellig styling," men hun sa at hun ville lage forskjellige sider og kategorisere spørsmål og svar, og for å være mer organisert, trengte hun en annen tilnærming.

Til dette formål skal jeg vise deg hvordan jeg håndterte hennes forespørsler med noen enkle linjer med kode ved hjelp av egendefinerte innleggstyper, taksonomier og kortkoder.

Den egendefinerte innleggstypen og taxonomien

Hva trenger vi å bygge et FAQ-system?

Vi trenger felt for spørsmål og svar.
Vi trenger kategorier for å klassifisere og skille ulike typer spørsmål og deres svar.
I vårt tilfelle trenger vi en kortkode for å legge inn disse spørsmålene eller alle spørsmålene på en side eller et innlegg.

La oss begynne med å opprette egendefinert innleggstype.

Trinn 1: Opprette egendefinert innleggstype

Selvfølgelig skal vi starte med å sette opp en egendefinert innleggstype for våre FAQ-elementer. Vi skal lage en ny tilpasset posttype med hjelp av register_post_type () funksjon, men hvis du vil ha en GUI for å lage posttypen din, kan du generere den med GenerateWPs posttype Generator-verktøy som jeg gjorde i dette eksempelet:

 _x ('Ofte stilte spørsmål', 'Innlegg Type Singular Name', 'Tuts_faq'), 'menu_name' => __ ('Ofte stilte spørsmål' '' tuts_faq '),' parent_item_colon '=> __ (' Parent Item: ',' tuts_faq '),' all_items '=> __ (' Alle elementer ',' tuts_faq '),' view_item '=> __ Vis element ',' tuts_faq '),' add_new_item '=> __ (' Legg til ny FAQ-artikkel ',' tuts_faq '),' add_new '=> __ (' Legg til nytt ',' tuts_faq '),' edit_item '=> __ ('Edit Item', 'tuts_faq'), 'update_item' => __ ('Oppdateringselement', 'tuts_faq'), 'search_items' => __ ('Søkeelement', 'tuts_faq'), 'not_found' = ' > __ ('Ikke funnet', 'tuts_faq'), 'not_found_in_trash' => __ ('Ikke funnet i søppel', 'tuts_faq'),); $ args = array (// bruk etikettene over 'labels' => $ etiketter, // vi trenger bare tittelen, den visuelle editoren og utdragsfeltene for posttypen 'supports' => array ('title' , 'editor', 'excerpt',), // vi skal lage denne taksonomien i neste avsnitt, men vi må koble vår posttype til den nå 'taxonomies' => array ('tuts_faq_tax'), / / gjør det offentlig slik at vi kan se det i administrasjonspanelet og vise det i front-end 'public' => true, // vis menyelementet under Sider-elementet 'menu_position' => 20, // vis arkiver, hvis du ikke trenger kortkoden 'has_archive' => true,); register_post_type ('tuts_faq', $ args);  // krok til 'init' action add_action ('init', 'tuts_faq_cpt', 0); ?>

Tips: Hvis prosjektet ditt skal involvere mer egendefinerte innleggstyper som kan være mer komplekse enn denne enkle FAQ-posttypen, kan jeg foreslå et kjølig verktøy som heter SuperCPT, som lar deg lage nye posttyper med enda enklere kode. Jeg har skrevet en opplæring om SuperCPT, også, du kan sjekke det ut her.

Trinn 2: Opprette egendefinert taksonomi

For å skille ulike typer spørsmål (som kundens spørsmål og svar om abort og postpartum depresjon), skal vi ha et kategorisystem. Som mange av dere allerede vet, gir WordPress denne funksjonaliteten med egendefinerte taksonomier.

Den viktigste funksjonen her er register_taxonomy () men igjen, kan du bruke GenerateWP's Taxonomy Generator verktøy hvis du trenger et grafisk grensesnitt.

Her er koden:

 _x ('FAQ-kategorier', 'Taxonomy-generell navn', 'tuts_faq'), 'singular_name' => _x ('FAQ kategori', 'Taxonomy Singular Name', 'tuts_faq'), 'menu_name' => __ Kategorier ',' tuts_faq '),' all_items '=> __ (' Alle FAQ-katter ',' tuts_faq '),' parent_item '=> __ (' Eldre FAQ-katt ',' tuts_faq '),' parent_item_colon '=> __ ('Eldre FAQ Cat:', 'tuts_faq'), 'new_item_name' => __ ('Ny FAQ Cat', 'tuts_faq'), 'add_new_item' => __ ('Legg til ny FAQ Cat', 'tuts_faq'), 'edit_item' => __ ('Rediger FAQ Cat', 'tuts_faq'), 'update_item' => __ ('Oppdater FAQ Cat', 'tuts_faq'), 'separate_items_with_commas' => __ ('Separate elementer med komma' 'tuts_faq'), 'search_items' => __ ('Søkeelementer', 'tuts_faq'), 'add_or_remove_items' => __ ('Legg til eller fjern elementer', 'tuts_faq'), 'choose_from_most_used' => __ fra de mest brukte elementene ',' tuts_faq '),' not_found '=> __ (' Ikke funnet ',' tuts_faq '),); $ args = array (// bruk etikettene over 'labels' => $ etiketter, // taksonomi bør være hierarkisk slik at vi kan vise det som en kategoriseksjon 'hierarkisk' => sann, // igjen, gjør taksonomien offentlig ( som posttype) 'public' => true,); // innholdet i arrayet nedenfor angir hvilke posttyper skal taksonomien være knyttet til register_taxonomy ('tuts_faq_tax', array ('tuts_faq'), $ args);  // krok til 'init' action add_action ('init', 'tuts_faq_tax', 0); ?>

Det er det! Nå har du en FAQ posttype med en taksonomi kalt "FAQ kategorier" knyttet til hverandre! Kontroller administrasjonspanelet, og du vil se menypunktet "Vanlige spørsmål" under "FAQ".

Akkurat som vanlige postkategorier, kan du legge til, redigere eller fjerne dem på siden "FAQ-kategorier", eller du kan legge til nye kategorier mens du skriver en ny FAQ-artikkel.

Trinn 3: Opprette `[FAQ]` Kort kode

Her kommer den morsomme delen: å bygge kortnummeret. (Hvis du har lest mine tidligere innlegg, vet du at jeg er en enorm fan av WordPress-kortkoder.) Vi kommer i utgangspunktet til å gjøre FAQ-elementene inkorporerbare i innlegg og sider.

Her er hva som skal skje:

spørring inne i vår nye tilpassede innleggstype,
filtrer kategorier med en kortkodeparameter,
vise spørsmålene og svarene som titler og innhold,
vis et utdrag av svaret med en "Mer ..." -link, styrt av en annen shortcode-parameter.

La oss begynne å bygge kortnummeret. Som koden ovenfor, skal jeg inkludere noen nyttige kommentarer:

", // full innhold eller utdrag attributt - standard til fullt innhold 'excerpt' => 'false',), $ atts)); $ output ="; // angi forespørselsargumentene $ query_args = array (// vis alle innlegg som samsvarer med dette spørsmålet 'posts_per_page' => -1, // vis 'tuts_faq' tilpasset innleggstype 'post_type' => 'tuts_faq', // vis innlegg som samsvarer med sluggen i FAQ-kategorien som er angitt med kortkodens attributt 'tax_query' => array (array ('taxonomy' => 'tuts_faq_tax', 'field' => 'slug', 'terms' => $ kategori,)) , // fortell WordPress at det ikke trenger å telle totale rader - dette lille trikset reduserer belastningen på databasen hvis du ikke trenger paginering 'no_found_rows' => true); // få innleggene med våre søkeargumenter $ faq_posts = get_posts ($ query_args); $ output. = ''; // håndtere vår tilpassede loop foreach ($ faq_posts som $ 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 (); hvis ($ excerpt == 'true') $ faq_item_content = get_the_excerpt (). ''. __ ('Mer ...', 'tuts_faq'). ''; $ output. = ''; $ output. = ''. $ faq_item_title. '
'; $ output. = ''. $ faq_item_content. '
'; $ output. = '
';  wp_reset_postdata (); $ output. = '
'; returnere $ output;  add_shortcode ('faq', 'tuts_faq_shortcode'); ?>

Det er det! Nå har vi en fin kortkode for å legge inn våre spørsmål og svar. Du kan stile den med klassenavnene Tuts-faq, tuts-faq-element, tuts-faq-element-tittel, og tuts-faq-post-innhold. Selv om det skulle være bra selv om du ikke inkluderer ekstra styling.

Trinn 4: Pakking opp koden

Siden disse kodebitene ikke bare handler om styling av fronten, men også å introdusere ny funksjonalitet, teller det som plugin-område. Derfor må vi lagre koden som et plugin. Og mens vi er på det, bør vi også spyle omskrivningsregler ved aktivering og deaktivering.

Her er den fulle koden:

[FAQ] Versjon: 1.0 Forfatter: Barış Ünver Forfatter URI: http://hub.tutsplus.com/authors/baris-unver Lisens: Offentlig domene * / hvis (! Function_exists ('tuts_faq_cpt')) // register tilpasset posttype funksjon tuts_faq_cpt () // Disse er etikettene i admingrensesnittet, rediger dem som du liker $ labels = array ('name' => _x ('FAQs', 'Post Type General Name', 'tuts_faq'), 'singular_name' => _x ('FAQ', 'Posttype Singular Name', 'tuts_faq'), 'menu_name' => __ ('FAQ', 'tuts_faq'), 'parent_item_colon' => __ ('Parent Item:', ' tuts_faq '),' all_items '=> __ (' Alle elementer ',' tuts_faq '),' view_item '=> __ (' Vis element ',' tuts_faq '),' add_new_item '=> __ ',' tuts_faq '),' add_new '=> __ (' Legg til nytt ',' tuts_faq '),' edit_item '=> __ (' Rediger element ',' tuts_faq '),' update_item '=> __ Element ',' tuts_faq '),' search_items '=> __ (' Søkeelement ',' tuts_faq '),' not_found '=> __ (' Ikke funnet ',' tuts_faq '),' not_found_in_trash '=> __ Ikke funnet i søppel ',' tuts_faq '),); $ args = array (// bruk etikettene over 'labels' => $ etiketter, // vi trenger bare tittelen, den visuelle editoren og utdragsfeltene for posttypen 'supports' => array ('title' , 'editor', 'excerpt',), // vi skal lage denne taksonomien i neste avsnitt, men vi må koble vår posttype til den nå 'taxonomies' => array ('tuts_faq_tax'), / / gjør det offentlig slik at vi kan se det i administrasjonspanelet og vise det i front-end 'public' => true, // vis menyelementet under Sider-elementet 'menu_position' => 20, // vis arkiver, hvis du ikke trenger kortkoden 'has_archive' => true,); register_post_type ('tuts_faq', $ args);  // krok til 'init' action add_action ('init', 'tuts_faq_cpt', 0);  hvis (! function_exists ('tuts_faq_tax')) // registrer egendefinert taksonomi funksjon tuts_faq_tax () // igjen, etiketter for admin panelet $ labels = array ('name' => _x ('FAQ kategorier', 'Taxonomy Generell navn ',' tuts_faq '),' singular_name '=> _x (' FAQ kategori ',' Taxonomy Singular Name ',' tuts_faq '),' menu_name '=> __ (' FAQ kategorier ',' tuts_faq '),' all_items '=> __ (' All FAQ Cats ',' tuts_faq '),' parent_item '=> __ (' Eldre FAQ Cat ',' tuts_faq '),' parent_item_colon '=> __ (' Eldre FAQ Cat: ',' tuts_faq '),' new_item_name '=> __ (' Ny FAQ Cat ',' tuts_faq '),' add_new_item '=> __ (' Legg til ny FAQ Cat ',' tuts_faq '),' edit_item '=> __ Vanlige spørsmål med katt, 'tuts_faq'), 'search_items' = ' > __ ('Søkeelementer', 'tuts_faq'), 'add_or_remove_items' => __ ('Legg til eller fjern elementer', 'tuts_faq'), 'choose_from_most_used' => __ ('Velg blant de mest brukte elementene', 'tuts_faq '),' not_found '=> __ (' Ikke funnet ',' tuts_faq '),); $ args = array (// bruk etikettene over 'labels' => $ etiketter, // taksonomi bør være hierarkisk slik at vi kan vise det som en kategoriseksjon 'hierarkisk' => sann, // igjen, gjør taksonomien offentlig ( som posttype) 'public' => true,); // innholdet i arrayet nedenfor angir hvilke posttyper skal taksonomien være knyttet til register_taxonomy ('tuts_faq_tax', array ('tuts_faq'), $ args);  // krok til 'init' action add_action ('init', 'tuts_faq_tax', 0);  hvis (! function_exists ('tuts_faq_shortcode')) funksjon tuts_faq_shortcode ($ atts) ekstrakt (shortcode_atts (array (// kategori slug attributten - standard til blank 'category' => ", // fullstendig innhold eller utdrag attributt - standard til hele innholdet 'excerpt' => 'false',), $ atts)); $ output = "; // angi forespørselsargumentene $ query_args = array (// vis alle innlegg som samsvarer med dette spørsmålet 'posts_per_page' => -1, // vis 'tuts_faq' tilpasset innleggstype 'post_type' => 'tuts_faq', // vis innlegg som samsvarer med sluggen i FAQ-kategorien som er angitt med kortkodens attributt 'tax_query' => array (array ('taxonomy' => 'tuts_faq_tax', 'field' => 'slug', 'terms' => $ kategori,)) , // fortell WordPress at det ikke trenger å telle totale rader - dette lille trikset reduserer belastningen på databasen hvis du ikke trenger paginering 'no_found_rows' => true); // få innleggene med våre søkeargumenter $ faq_posts = get_posts ($ query_args); $ output. = ''; // håndtere vår tilpassede loop foreach ($ faq_posts som $ 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 (); hvis ($ excerpt == 'true') $ faq_item_content = get_the_excerpt (). ''. __ ('Mer ...', 'tuts_faq'). ''; $ output. = ''; $ output. = ''. $ faq_item_title. '
'; $ output. = ''. $ faq_item_content. '
'; $ output. = '
';  wp_reset_postdata (); $ output. = '
'; returnere $ output;  add_shortcode ('faq', 'tuts_faq_shortcode');  funksjon tuts_faq_activate () tuts_faq_cpt (); flush_rewrite_rules ();  register_activation_hook (__FILE__, 'tuts_faq_activate'); funksjon tuts_faq_deactivate () flush_rewrite_rules ();  register_deactivation_hook (__FILE__, 'tuts_faq_deactivate'); ?>

Rom for forbedring

Min klient var fornøyd med resultatene da jeg viste henne hvordan han skulle bruke den. Men her kan vi utvide koden med mer funksjonalitet, som ...

Accordion Effect: Hvis du ønsker å gjøre vanlige spørsmålene dine mer attraktive med noen bytteeffekter, kan du bruke noen kjempefint jQuery-plugins. Hvis du vil bruke jQuery UI, er det en fantastisk opplæring av Shane Osbourne som viser hvordan du gjør det.
paginering: Hvis du har mange spørsmål og svar for en kategori og ikke vil vise alle elementene samtidig, kan du begrense antall innlegg ved å endre posts_per_page parameter i den egendefinerte spørringen av vår kortkode, og legg til den nødvendige koden for paginasjonslenkene under linjen med wp_reset_postdata (); kode. Husk å fjerne 'no_found_rows' => true, linje, men - paginering vil ikke fungere hvis du ikke fjerner det!
Tilfeldig spørsmål: La oss si at du vil vise ett tilfeldig spørsmål og svar på hjemmesiden, og du vil at den skal endre hver sideoppdatering. Alt du trenger å gjøre er å gå til den egendefinerte spørringen, endre posts_per_page parameter fra -1 til 1 og legg til en annen linje med koden 'orderby' => 'tilfeldig', og du er god til å gå!

Konklusjon

Slik bygger du et enkelt FAQ-system i WordPress ved bruk av egendefinerte innleggstyper, egendefinerte taksonomier og kortkoder. Jeg håper du likte denne opplæringen, og du kan bruke den i ditt neste prosjekt. Ikke glem å dele artikkelen, hvis du likte det!

Har du noen ideer for å forbedre dette vanlige systemet? Del dine kommentarer nedenfor!

Kode