Använda WordPress för att skapa ett FAQ-system med anpassade posttyper

Jag har nyligen arbetat med min kund, som arbetar som professionell konsult inom sitt arbetsområde. Hon frågade om jag kunde implementera ett Q & A-system, eller en FAQ-sida, för att vara exakt. Jag sa, "Visst, vi kan bara skapa en sida och klistra in frågorna och svara där med olika styling" men hon sa att hon skulle skapa olika sidor och kategorisera frågor och svar och för att vara mer organiserad behövde hon en olika tillvägagångssätt.

För det ändamålet kommer jag att visa dig hur jag hanterade hennes förfrågningar med några enkla linjer med kod med hjälp av anpassade posttyper, taxonomier och kortnummer.

Den anpassade posttypen och taxonomin

Vad behöver vi för att bygga ett FAQ-system?

Vi behöver fält för frågor och svar.
Vi behöver kategorier för att klassificera och skilja olika typer av frågor och deras svar.
I vårt fall behöver vi en kortnummer för att integrera dessa frågeställningar eller alla frågor på en sida eller ett inlägg.

Låt oss börja med att skapa den anpassade posttypen.

Steg 1: Skapa den anpassade posttypen

Naturligtvis ska vi börja med att skapa en anpassad posttyp för våra FAQ-artiklar. Vi ska skapa en ny anpassad posttyp med hjälp av register_post_type () funktion, men om du vill ha en GUI för att skapa din posttyp kan du generera den med GenerateWPs posttypgeneratorverktyg som jag gjorde i det här exemplet:

 _x ("Vanliga frågor", "Inlägg typ Allmänt namn", "tuts_faq"), "singular_name" => _x ("FAQ", "Post typ Singular Name", "Tuts_faq"), "menu_name" => __ ',' tuts_faq '),' parent_item_colon '=> __ (' Föräldraobjekt: ',' tuts_faq '),' all_items '=> __ (' Alla objekt ',' tuts_faq '),' view_item '=> __ Visa artikel ',' tuts_faq '),' add_new_item '=> __ (' Lägg till nytt FAQ-objekt ',' tuts_faq '),' add_new '=> __ (' Lägg till nytt ',' tuts_faq '),' edit_item '=> __ ('Redigera artikel', 'tuts_faq'), 'update_item' => __ ('Uppdatera artikel', 'tuts_faq'), 'search_items' => __ ('Sökobjekt', 'tuts_faq'), 'not_found' = > __ ('Ej hittat', 'tuts_faq'), 'not_found_in_trash' => __ ('Ej hittat i papperskorgen', 'tuts_faq'),); $ args = array (// använd etiketterna ovanför 'labels' => $ etiketter, // vi behöver bara titeln, den visuella redigeraren och utdragsfälten för vår posttyp 'supports' => array ('title' , 'editor', 'excerpt',), // vi ska skapa den här taxonomin i nästa avsnitt, men vi måste länka vår posttyp till det nu 'taxonomies' => array ('tuts_faq_tax') / / gör det offentligt så att vi kan se det i adminpanelen och visa det i fronten "public" => true, // visa menyalternativet under Pages-objektet 'menu_position' => 20, // visa arkiv, om du inte behöver kortnumret 'has_archive' => true,); register_post_type ('tuts_faq', $ args);  // krok till 'init' action add_action ('init', 'tuts_faq_cpt', 0); ?>

Tips: Om ditt projekt kommer att innebära mer anpassade posttyper som kan vara mer komplexa än den här enkla FAQ-posttypen, kan jag föreslå ett coolt verktyg som heter SuperCPT, vilket gör att du kan skapa nya posttyper med ännu enklare kod. Jag har skrivit en handledning om SuperCPT, du kan också kolla in det här.

Steg 2: Skapa anpassad taxonomi

För att skilja olika typer av frågor (som min kunds frågor och svar om missfall och postpartum depression), kommer vi att behöva ett kategorisystem. Som många av er vet redan, tillhandahåller WordPress denna funktion med anpassade taxonomier.

Den viktigaste funktionen här är register_taxonomy () men igen kan du använda GenerateWPs Taxonomy Generator-verktyg om du behöver ett grafiskt gränssnitt.

Här är koden:

 _x ('FAQ-kategorier', 'Taxonomy-generellt namn', 'tuts_faq'), 'singular_name' => _x ('FAQ-kategori', 'Taxonomy Singular Name', 'Tuts_faq'), 'menu_name' => __ Kategorier ',' tuts_faq '),' all_items '=> __ (' All FAQ Cats ',' tuts_faq '),' parent_item '=> __ (' Föräldrars FAQ-katt ',' tuts_faq '),' parent_item_colon '=> __ ('Äldre FAQ-katt:', 'tuts_faq'), 'new_item_name' => __ ('Ny FAQ-katt', 'tuts_faq'), 'add_new_item' => __ ('Lägg till ny FAQ-katt', 'tuts_faq') 'edit_item' => __ ('Redigera FAQ Cat', 'tuts_faq'), 'update_item' => __ ('Uppdatera FAQ Cat', 'tuts_faq'), 'separate_items_with_commas' => __ ('Separata objekt med kommatecken' 'tuts_faq'), 'search_items' => __ ('Sökobjekt', 'tuts_faq'), 'add_or_remove_items' => __ ('Lägg till eller ta bort objekt', 'tuts_faq'), 'choose_from_most_used' => __ från de mest använda föremålen ',' tuts_faq '),' not_found '=> __ (' Not Found ',' tuts_faq '),); $ args = array (// använd etiketterna ovanför 'etiketter' => $ etiketter, // taxonomi ska vara hierarkisk så att vi kan visa den som en kategorisektion 'hierarkisk' => sann, // igen, gör taxonomin offentlig ( som posttyp) 'public' => true,); // innehållet i matrisen nedan anger vilka posttyper ska taxonomin kopplas till register_taxonomy ('tuts_faq_tax', array ('tuts_faq'), $ args);  // krok till 'init' action add_action ('init', 'tuts_faq_tax', 0); ?>

Det är allt! Nu har du en FAQ-posttyp med en taxonomi som heter "FAQ-kategorier" kopplade till varandra! Kontrollera din administration panel och du får se menyalternativet "FAQ-kategorier" under "FAQ".

Precis som vanliga postkategorier kan du lägga till, redigera eller ta bort dem på sidan FAQ, eller du kan lägga till nya kategorier medan du skriver ett nytt FAQ-objekt.

Steg 3: Skapa `[Faq]` kortkod

Här kommer den roliga delen: bygga kortkoden. (Om du har läst mina tidigare inlägg vet du att jag är en enorm fan av WordPress-kortkoder.) Vi kommer i grund och botten att göra vanliga frågor inbäddade i inlägg och sidor.

Det här är vad som händer:

fråga inom vår nya anpassade inläggstyp,
filtrera sina kategorier med en kortkodsparameter,
visa frågorna och svaren som titlar och innehåll,
visa ett utdrag av svaret med en länk "Mer ...", styrd av en annan shortcode-parameter.

Låt oss börja bygga kortkoden. Precis som koden ovan kommer jag att inkludera några användbara kommentarer:

", // fullständigt innehåll eller utdrags attribut - standardvärden till fullständigt innehåll" excerpt '=>' false ',), $ atts)); $ output = "; // ställa in frågeargumentet $ query_args = array (// visa alla inlägg som matchar den här frågan 'posts_per_page' => -1, // visa 'tuts_faq' anpassad posttyp 'post_type' => 'tuts_faq', // visa inlägg som matchar sluggen i FAQ-kategorin som anges med kortkodsattributet 'tax_query' => array (array ('taxonomy' => 'tuts_faq_tax', 'field' => 'slug', 'terms' => $ kategori,)) , // berätta WordPress att det inte behöver räkna totala rader - detta lilla trick minskar belastningen på databasen om du inte behöver paginering 'no_found_rows' => true); // få inlägg med våra sökargument $ faq_posts = get_posts ($ query_args); $ output. = ''; // hantera vår anpassade slinga ($ 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 (); om ($ 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. = '
'; returnera $ output;  add_shortcode ('faq', 'tuts_faq_shortcode'); ?>

Det är allt! Nu har vi en snygg kortnummer för att integrera våra frågor och svar. Du kan stile den med klassnamnen tuts-faq, tuts-faq-objektet, tuts-faq-item-titel, och tuts-faq-post-innehåll. Även om det ska vara bra även om du inte inkluderar ytterligare styling.

Steg 4: Wrapping Up Koden

Eftersom dessa bitar av kod inte bara handlar om att utforma frontänden utan även introducera ny funktionalitet, räknas det som plugin-territorium. Det är därför vi måste spara koden som ett plugin. Och medan vi är på det, bör vi också spola omskrivningsreglerna vid aktivering och avaktivering.

Här är den fullständiga koden:

[Faq] Version: 1.0 Författare: Barış Ünver Författare URI: http://hub.tutsplus.com/authors/baris-unver Licens: Public Domain * / if (! Function_exists ('tuts_faq_cpt')) // registrera anpassad posttyp funktion tuts_faq_cpt () // Dessa är etiketterna i admingränssnittet, redigera dem som du vill ha $ labels = array ('name' => _x ('FAQs', 'Post Type General Name', 'tuts_faq'), 'singular_name' => _x ('FAQ', 'Posttyp Singular Name', 'tuts_faq'), 'menu_name' => __ ('FAQ', 'tuts_faq'), 'parent_item_colon' => __ ('Föräldraartikel:', tuts_faq '),' all_items '=> __ (' Alla objekt ',' tuts_faq '),' view_item '=> __ (' Visa objekt ',' tuts_faq '),' add_new_item '=> __ (' Lägg till nytt FAQ-objekt ',' tuts_faq '),' add_new '=> __ (' Lägg till nytt ',' tuts_faq '),' edit_item '=> __ (' Redigera artikel ',' tuts_faq '),' update_item '=> __ Artikeln ',' tuts_faq '),' search_items '=> __ (' Sökartikel ',' tuts_faq '),' not_found '=> __ (' Ej hittat ',' tuts_faq '),' not_found_in_trash '=> __ Finns inte i papperskorgen "," tuts_faq "),); $ args = array (// använd etiketterna ovanför 'labels' => $ etiketter, // vi behöver bara titeln, den visuella redigeraren och utdragsfälten för vår posttyp 'supports' => array ('title' , 'editor', 'excerpt',), // vi ska skapa den här taxonomin i nästa avsnitt, men vi måste länka vår posttyp till det nu 'taxonomies' => array ('tuts_faq_tax') / / gör det offentligt så att vi kan se det i adminpanelen och visa det i fronten "public" => true, // visa menyalternativet under Pages-objektet 'menu_position' => 20, // visa arkiv, om du inte behöver kortnumret 'has_archive' => true,); register_post_type ('tuts_faq', $ args);  // krok till 'init' action add_action ('init', 'tuts_faq_cpt', 0);  if (! function_exists ('tuts_faq_tax')) // registrera anpassad taxonomifunktion tuts_faq_tax () // igen, etiketter för adminpanelen $ labels = array ('name' => _x ('FAQ-kategorier', 'Taxonomy Allmännamn ',' 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 '=> __ (' Äldre FAQ-katt ',' tuts_faq '),' parent_item_colon '=> __ tuts_faq '),' new_item_name '=> __ (' Nya FAQ Cat ',' tuts_faq '),' add_new_item '=> __ (' Lägg till ny FAQ Cat ',' tuts_faq '),' edit_item '=> __ Vanliga frågor med kommatecken ',' tuts_faq '),' search_items '=' > __ ('Sökobjekt', 'tuts_faq'), 'add_or_remove_items' => __ ('Lägg till eller ta bort objekt', 'tuts_faq'), 'choose_from_most_used' => __ ('Välj bland de mest använda objekten', 'tuts_faq '),' not_found '=> __ (' Not Found ',' tuts_faq '),); $ args = array (// använd etiketterna ovanför 'etiketter' => $ etiketter, // taxonomi ska vara hierarkisk så att vi kan visa den som en kategorisektion 'hierarkisk' => sann, // igen, gör taxonomin offentlig ( som posttyp) 'public' => true,); // innehållet i matrisen nedan anger vilka posttyper ska taxonomin kopplas till register_taxonomy ('tuts_faq_tax', array ('tuts_faq'), $ args);  // krok till 'init' action add_action ('init', 'tuts_faq_tax', 0);  if (! function_exists ('tuts_faq_shortcode')) funktion tuts_faq_shortcode ($ atts) extrakt (shortcode_atts (array (// kategori slug attribut - standard till blank 'category' => ", // fullständigt innehåll eller utdrag attribut - standard till hela innehållet 'excerpt' => 'false',), $ atts)); $ output = "; // ställa in frågeargumentet $ query_args = array (// visa alla inlägg som matchar den här frågan 'posts_per_page' => -1, // visa 'tuts_faq' anpassad posttyp 'post_type' => 'tuts_faq', // visa inlägg som matchar sluggen i FAQ-kategorin som anges med kortkodsattributet 'tax_query' => array (array ('taxonomy' => 'tuts_faq_tax', 'field' => 'slug', 'terms' => $ kategori,)) , // berätta WordPress att det inte behöver räkna totala rader - detta lilla trick minskar belastningen på databasen om du inte behöver paginering 'no_found_rows' => true); // få inlägg med våra sökargument $ faq_posts = get_posts ($ query_args); $ output. = ''; // hantera vår anpassade slinga ($ 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 (); om ($ 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. = '
'; returnera $ output;  add_shortcode ('faq', 'tuts_faq_shortcode');  funktion tuts_faq_activate () tuts_faq_cpt (); flush_rewrite_rules ();  register_activation_hook (__FILE__, 'tuts_faq_activate'); funktion tuts_faq_deactivate () flush_rewrite_rules ();  register_deactivation_hook (__FILE__, 'tuts_faq_deactivate'); ?>

Plats för förbättring

Min klient var nöjd med resultaten när jag visade henne hur man använder den. Men här kan vi utöka koden med mer funktionalitet, som ...

Accordion Effekt: Om du vill göra dina vanliga frågor snabbare med vissa växelverkningar kan du använda några fantastiska jQuery-plugins. Om du vill använda jQuery UI finns det en fantastisk handledning av Shane Osbourne som visar hur man gör det.
Paginering: Om du har många frågor och svar för en kategori och inte vill visa alla objekt på en gång kan du begränsa antalet inlägg genom att ändra posts_per_page parameter i den anpassade frågan hos vår kortnummer och lägg till den obligatoriska koden för paginationslänkar under linjen med wp_reset_postdata (); koda. Kom ihåg att ta bort 'no_found_rows' => true, linje - dock - pagination fungerar inte om du inte tar bort det!
Slumpmässig fråga: Låt oss säga att du vill visa en slumpmässig fråga och svar på hemsidan och du vill att den ska ändra varje siduppdatering. Allt du behöver göra är att gå till den anpassade frågan, ändra posts_per_page parameter från -1 till 1 och lägg till en annan rad med koden 'orderby' => 'slumpmässigt', och du är bra att gå!

Slutsats

Så här bygger du ett enkelt FAQ-system i WordPress genom att använda anpassade posttyper, anpassade taxonomier och kortkoder. Jag hoppas att du haft denna handledning och du kan använda den i ditt nästa projekt. Glöm inte att dela artikeln om du gillade den!

Har du några idéer för att förbättra detta vanliga system? Dela dina kommentarer nedan!

Koda