WordPress gebruiken om een FAQ-systeem te maken met aangepaste berichttypen

Ik heb onlangs met een klant van mij gewerkt, die als een professionele consultant op haar werkgebied werkt. Ze vroeg of ik een V & A-systeem of een pagina met veelgestelde vragen kon implementeren om precies te zijn. Ik zei: "Natuurlijk kunnen we gewoon een pagina maken en de vragen en antwoorden daar plakken met verschillende stijlen," maar ze zei dat ze verschillende pagina's zou maken en vragen en antwoorden categoriseerde, en omwille van meer georganiseerd te zijn, had ze een andere aanpak.

Hiertoe laat ik je zien hoe ik haar verzoeken behandeld heb met enkele eenvoudige regels code met behulp van aangepaste berichttypen, taxonomieën en shortcodes.

Het aangepaste berichttype en de taxonomie

Wat hebben we nodig om een FAQ-systeem te bouwen?

We hebben velden nodig voor vragen en antwoorden.
We hebben categorieën nodig om verschillende soorten vragen en hun antwoorden te classificeren en te scheiden.
In ons geval hebben we een shortcode nodig om deze vragengroepen of alle vragen in een pagina of een bericht in te sluiten.

Laten we beginnen met het maken van het aangepaste berichttype.

Stap 1: Het aangepaste berichttype maken

Natuurlijk beginnen we met het instellen van een aangepast berichttype voor onze veelgestelde vragen. We gaan een nieuw aangepast berichttype maken met behulp van de register_post_type () functie, maar als je een GUI wilt voor het maken van je berichttype, kun je dit genereren met GenerateWP's Post Type Generator-tool zoals ik deed in dit voorbeeld:

 _x ('Veelgestelde vragen', 'Berichttype Algemene naam', 'tuts_faq'), 'singular_name' => _x ('FAQ', 'Berichttype Enkelvoudige naam', 'tuts_faq'), 'menu_name' => __ ('Veelgestelde vragen ',' tuts_faq '),' parent_item_colon '=> __ (' Bovenliggend item: ',' tuts_faq '),' all_items '=> __ (' Alle items ',' tuts_faq '),' view_item '=> __ (' View Item ',' tuts_faq '),' add_new_item '=> __ (' Voeg een nieuw FAQ-item toe ',' tuts_faq '),' add_new '=> __ (' Voeg nieuw toe ',' tuts_faq '),' edit_item '=> __ ('Bewerk item', 'tuts_faq'), 'update_item' => __ ('Update Item', 'tuts_faq'), 'search_items' => __ ('Zoekitem', 'tuts_faq'), 'not_found' = > __ ('Not found', 'tuts_faq'), 'not_found_in_trash' => __ ('Niet gevonden in de Prullenbak', 'tuts_faq'),); $ args = array (// gebruik de labels boven 'labels' => $ labels, // we hebben alleen de titel, de Visual-editor en de excerpt-velden nodig voor ons berichttype 'supports' => array ('title' , 'editor', 'excerpt',), // we gaan deze taxonomie maken in het volgende gedeelte, maar we moeten ons berichttype nu koppelen aan 'taxonomies' => array ('tuts_faq_tax'), / / maak het openbaar, zodat we het kunnen zien in het admin paneel en het in de front-end tonen 'publiek' => waar, // toon het menu item onder het Pages-item 'menu_position' => 20, // toon archieven, als je de shortcode 'has_archive' => true,) niet nodig hebt;); register_post_type ('tuts_faq', $ args);  // haak in de actie 'init' add_action ('init', 'tuts_faq_cpt', 0); ?>

Tip: Als uw project meer aangepaste postsoorten gaat bevatten die ingewikkelder kunnen zijn dan dit eenvoudige faq-vraagtype, kan ik een coole tool met de naam SuperCPT voorstellen, waarmee u nieuwe berichttypen met nog eenvoudiger code kunt maken. Ik heb ook een tutorial geschreven over SuperCPT, je kunt het hier bekijken.

Stap 2: De aangepaste taxonomie maken

Om verschillende soorten vragen te scheiden (zoals vragen van mijn cliënt en antwoorden op een miskraam en postpartumdepressie), hebben we een categoriesysteem nodig. Zoals velen van jullie al weten, biedt WordPress deze functionaliteit met aangepaste taxonomieën.

De essentiële functie is hier register_taxonomy () maar nogmaals, u kunt GenerateWP's Taxonomy Generator-tool gebruiken als u een grafische interface nodig hebt.

Hier is de code:

 _x ('FAQ Categories', 'Taxonomy General Name', 'tuts_faq'), 'singular_name' => _x ('FAQ Category', 'Taxonomy Singular Name', 'tuts_faq'), 'menu_name' => __ ('Veelgestelde vragen Categorieën ',' tuts_faq '),' all_items '=> __ (' Alle veelgestelde vragen Cats ',' tuts_faq '),' parent_item '=> __ (' Veelgestelde vragen over de kat ',' tuts_faq '),' parent_item_colon '=> __ ('Veelgestelde vragen Cat:', 'tuts_faq'), 'new_item_name' => __ ('Nieuwe veelgestelde vragen Cat', 'tuts_faq'), 'add_new_item' => __ ('Nieuwe veelgestelde vragen toevoegen Cat', 'tuts_faq'), 'edit_item' => __ ('Bewerk veelgestelde vragen Cat', 'tuts_faq'), 'update_item' => __ ('Update FAQ Cat', 'tuts_faq'), 'separate_items_with_commas' => __ ('Aparte items met komma's', 'tuts_faq'), 'search_items' => __ ('Zoekitems', 'tuts_faq'), 'add_or_remove_items' => __ ('Items toevoegen of verwijderen', 'tuts_faq'), 'choose_from_most_used' => __ ('Choose van de meest gebruikte items ',' tuts_faq '),' not_found '=> __ (' Not Found ',' tuts_faq '),); $ args = array (// gebruik de labels boven 'labels' => $ labels, // taxonomie moet hiërarchisch zijn zodat we het kunnen weergeven als een categorie-sectie 'hierarchical' => true, // opnieuw, de taxonomie openbaar maken ( zoals het berichttype) 'public' => true,); // de inhoud van de onderstaande array specificeert welke berichttypen de taxonomie moet worden gekoppeld aan register_taxonomy ('tuts_faq_tax', array ('tuts_faq'), $ args);  // haak in de actie 'init' add_action ('init', 'tuts_faq_tax', 0); ?>

Dat is het! Nu hebt u een FAQ-berichttype met een taxonomie genaamd "FAQ-categorieën" die aan elkaar zijn gekoppeld! Controleer uw administratiepaneel en u zult het menu-item "FAQ Categorieën" onder de "FAQ" zien verschijnen.

Net als bij gewone postcategorieën kun je ze toevoegen, bewerken of verwijderen op de pagina met veelgestelde vragen of je kunt nieuwe categorieën toevoegen terwijl je een nieuw FAQ-artikel schrijft.

Stap 3: De. Maken `[FAQ]` Korte code

Hier komt het leuke deel: het bouwen van de shortcode. (Als je mijn vorige berichten hebt gelezen, weet je dat ik een reusachtig fan van WordPress shortcodes.) We gaan de FAQ-items in principe inbedden voor posts en pagina's.

Dit is wat er gaat gebeuren:

vraag binnen ons nieuwe aangepaste berichttype,
filter de categorieën met een shortcode-parameter,
toon de vragen en antwoorden als titels en inhoud,
toon een uittreksel van het antwoord met een "Meer ..." link, bestuurd door een andere shortcode parameter.

Laten we beginnen met het bouwen van de shortcode. Zoals de bovenstaande code, zal ik een aantal nuttige opmerkingen toevoegen:

", // volledige inhoud of uittrekselkenmerk - standaard ingesteld op volledige inhoud 'excerpt' => 'false',), $ atts)); $ output ="; // stel de query-argumenten in $ query_args = array (// toon alle berichten die overeenkomen met deze zoekopdracht 'posts_per_page' => -1, // toon het 'tuts_faq' aangepast berichttype 'post_type' => 'tuts_faq', // toon de berichten die overeenkomen met de slug van de FAQ-categorie gespecificeerd met het attribuut 'tax_query' => array van de shortcode (array ('taxonomy' => 'tuts_faq_tax', 'field' => 'slug', 'terms' => $ category,)) , // vertel WordPress dat het niet nodig is om totale rijen te tellen - deze kleine truc vermindert de belasting van de database als u pagining niet nodig hebt 'no_found_rows' => true,); // haal de berichten op met onze zoekargumenten $ faq_posts = get_posts ($ query_args); $ output. = ''; // behandel onze aangepaste lus foreach ($ faq_posts als $ 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 (). ''. __ ('Meer ...', 'tuts_faq'). ''; $ output. = ''; $ output. = ''. $ faq_item_title. '
'; $ output. = ''. $ faq_item_content. '
'; $ output. = '
';  wp_reset_postdata (); $ output. = '
'; return $ output;  add_shortcode ('faq', 'tuts_faq_shortcode'); ?>

Dat is het! Nu hebben we een handige shortcode om onze vragen en antwoorden in te sluiten. Je kunt het stijlen met de klassenamen tuts-faq, tuts-faq-post, tuts-faq-punt-titel, en tuts-faq-punt-inhoud. Hoewel, het zou goed moeten zijn, zelfs als je geen extra styling opneemt.

Stap 4: De code inpakken

Aangezien deze stukjes code niet alleen over het stylen van de front-end maar ook over het introduceren van nieuwe functionaliteit gaan, telt het als plugin-territorium. Daarom moeten we de code opslaan als een plug-in. En terwijl we bezig zijn, moeten we ook de herschrijfregels doorspoelen bij activering en deactivering.

Hier is de volledige code:

[FAQ] Versie: 1.0 Auteur: Barış Ünver Auteur URI: http://hub.tutsplus.com/authors/baris-unver Licentie: Publiek domein * / if (! Function_exists ('tuts_faq_cpt')) // registreer aangepaste berichttype functie tuts_faq_cpt () // dit zijn de labels in de admin-interface, bewerk ze zoals u wilt $ labels = array ('naam' => _x ('Veelgestelde vragen', 'Berichttype Algemene naam', 'tuts_faq'), 'singular_name' => _x ('FAQ', 'Berichttype Enkelvoudige naam', 'tuts_faq'), 'menu_name' => __ ('FAQ', 'tuts_faq'), 'parent_item_colon' => __ ('Bovenliggend item:', ' tuts_faq '),' all_items '=> __ (' Alle items ',' tuts_faq '),' view_item '=> __ (' View Item ',' tuts_faq '),' add_new_item '=> __ (' Nieuw FAQ-item toevoegen ' ',' tuts_faq '),' add_new '=> __ (' Voeg nieuw toe ',' tuts_faq '),' edit_item '=> __ (' Bewerk item ',' tuts_faq '),' update_item '=> __ (' Update Item ',' tuts_faq '),' search_items '=> __ (' Zoekitem ',' tuts_faq '),' not_found '=> __ (' Not found ',' tuts_faq '),' not_found_in_trash '=> __ (' Niet gevonden in Trash ',' tuts_faq '),); $ args = array (// gebruik de labels boven 'labels' => $ labels, // we hebben alleen de titel, de Visual-editor en de excerpt-velden nodig voor ons berichttype 'supports' => array ('title' , 'editor', 'excerpt',), // we gaan deze taxonomie maken in het volgende gedeelte, maar we moeten ons berichttype nu koppelen aan 'taxonomies' => array ('tuts_faq_tax'), / / maak het openbaar, zodat we het kunnen zien in het admin paneel en het in de front-end tonen 'publiek' => waar, // toon het menu item onder het Pages-item 'menu_position' => 20, // toon archieven, als je de shortcode 'has_archive' => true,) niet nodig hebt;); register_post_type ('tuts_faq', $ args);  // haak in de actie 'init' add_action ('init', 'tuts_faq_cpt', 0);  if (! function_exists ('tuts_faq_tax')) // registreer aangepaste taxonomie-functie tuts_faq_tax () // opnieuw, labels voor het admin-paneel $ labels = array ('name' => _x ('FAQ Categories', 'Taxonomy General Name ',' tuts_faq '),' singular_name '=> _x (' FAQ Category ',' Taxonomy Singular Name ',' tuts_faq '),' menu_name '=> __ (' FAQ Categories ',' tuts_faq '),' all_items '=> __ (' Alle veelgestelde vragen Cats ',' tuts_faq '),' parent_item '=> __ (' Veelgestelde vragen Cat ',' tuts_faq '),' parent_item_colon '=> __ (' Veelgestelde vragen, Kat: ',' tuts_faq '),' new_item_name '=> __ (' Nieuwe veelgestelde vragen Cat ',' tuts_faq '),' add_new_item '=> __ (' Nieuwe veelgestelde vragen toevoegen Cat ',' tuts_faq '),' edit_item '=> __ (' Bewerken FAQ Cat ',' tuts_faq '),' update_item '=> __ (' Update FAQ Cat ',' tuts_faq '),' separate_items_with_commas '=> __ (' Aparte items met komma's ',' tuts_faq '),' search_items '= > __ ('Search Items', 'tuts_faq'), 'add_or_remove_items' => __ ('Items toevoegen of verwijderen', 'tuts_faq'), 'choose_from_most_used' => __ ('Kies uit de meest gebruikte items', 'tuts_faq '),' not_found '=> __ (' Not Found ',' tuts_faq '),); $ args = array (// gebruik de labels boven 'labels' => $ labels, // taxonomie moet hiërarchisch zijn zodat we het kunnen weergeven als een categorie-sectie 'hierarchical' => true, // opnieuw, de taxonomie openbaar maken ( zoals het berichttype) 'public' => true,); // de inhoud van de onderstaande array specificeert welke berichttypen de taxonomie moet worden gekoppeld aan register_taxonomy ('tuts_faq_tax', array ('tuts_faq'), $ args);  // haak in de actie 'init' add_action ('init', 'tuts_faq_tax', 0);  if (! function_exists ('tuts_faq_shortcode')) function tuts_faq_shortcode ($ atts) extract (shortcode_atts (array (// category slug -kenmerk - standaard ingesteld op leeg 'category' => ", // volledige inhoud of excerptkenmerk - standaardwaarde naar volledige inhoud 'excerpt' => 'false',), $ atts)); $ output = "; // stel de query-argumenten in $ query_args = array (// toon alle berichten die overeenkomen met deze zoekopdracht 'posts_per_page' => -1, // toon het 'tuts_faq' aangepast berichttype 'post_type' => 'tuts_faq', // toon de berichten die overeenkomen met de slug van de FAQ-categorie gespecificeerd met het attribuut 'tax_query' => array van de shortcode (array ('taxonomy' => 'tuts_faq_tax', 'field' => 'slug', 'terms' => $ category,)) , // vertel WordPress dat het niet nodig is om totale rijen te tellen - deze kleine truc vermindert de belasting van de database als u pagining niet nodig hebt 'no_found_rows' => true,); // haal de berichten op met onze zoekargumenten $ faq_posts = get_posts ($ query_args); $ output. = ''; // behandel onze aangepaste lus foreach ($ faq_posts als $ 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 (). ''. __ ('Meer ...', 'tuts_faq'). ''; $ output. = ''; $ output. = ''. $ faq_item_title. '
'; $ output. = ''. $ faq_item_content. '
'; $ output. = '
';  wp_reset_postdata (); $ output. = '
'; return $ 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'); ?>

Ruimte voor verbetering

Mijn cliënt was blij met de resultaten toen ik haar liet zien hoe het te gebruiken. Maar hier kunnen we de code uitbreiden met meer functionaliteit, zoals ...

Accordeon-effect: Als u uw FAQ-secties aantrekkelijker wilt maken met sommige schakeleffecten, kunt u enkele geweldige jQuery-plug-ins gebruiken. Als je de gebruikersinterface van jQuery wilt gebruiken, is er een geweldige zelfstudie van Shane Osbourne die laat zien hoe je het moet doen.
Paginering: Als u veel vragen en antwoorden voor een categorie hebt en niet alle items tegelijk wilt weergeven, kunt u het aantal berichten beperken door de posts_per_page parameter in de aangepaste query van onze shortcode en voeg de vereiste code toe voor paginakoppelingen onder de regel met de wp_reset_postdata (); code. Vergeet niet om de te verwijderen 'no_found_rows' => waar, regel: de paginering werkt niet als u deze niet verwijdert!
willekeurige vraag: Laten we zeggen dat u één willekeurige vraag en antwoord op de startpagina wilt weergeven en wilt dat deze elke paginavernieuwing wijzigt. Het enige wat u hoeft te doen is naar de aangepaste zoekopdracht gaan, de posts_per_page parameter van -1 naar 1 en voeg een nieuwe regel toe met de code 'orderby' => 'willekeurig', en je bent klaar om te gaan!

Conclusie

Op deze manier bouw je een eenvoudig FAQ-systeem op in WordPress door het gebruik van aangepaste berichttypen, aangepaste taxonomieën en shortcodes. Ik hoop dat je deze tutorial leuk vond en dat je deze kunt gebruiken in je volgende project. Vergeet niet om het artikel te delen, als je het leuk vond!

Heb je ideeën om dit FAQ-systeem te verbeteren? Deel uw opmerkingen hieronder!

Code

WordPress gebruiken om een ​​FAQ-systeem te maken met aangepaste berichttypen