Verwenden von WordPress zum Erstellen eines FAQ-Systems mit benutzerdefinierten Beitragstypen

Ich habe kürzlich mit einem meiner Kunden zusammengearbeitet, der in ihrem Arbeitsbereich als professionelle Beraterin tätig ist. Sie fragte, ob ich ein Q & A-System oder eine FAQ-Seite implementieren könnte, um genau zu sein. Ich sagte: "Klar, wir können einfach eine Seite erstellen und die Fragen und Antworten dort mit einem anderen Stil einfügen." Aber sie sagte, sie würde verschiedene Seiten erstellen und Fragen und Antworten kategorisieren. Um besser organisiert zu sein, brauchte sie eine anderer Ansatz.

Zu diesem Zweck werde ich Ihnen zeigen, wie ich ihre Anfragen mit ein paar einfachen Codezeilen mit benutzerdefinierten Posttypen, Taxonomien und Shortcodes behandelte.

Der Typ der benutzerdefinierten Post und die Taxonomie

Was brauchen wir, um ein FAQ-System aufzubauen??

Wir brauchen Felder für Fragen und Antworten.
Wir brauchen Kategorien, um verschiedene Arten von Fragen und ihre Antworten zu klassifizieren und voneinander zu trennen.
In unserem Fall benötigen wir einen Shortcode, um diese Fragengruppen oder alle Fragen in eine Seite oder einen Beitrag einzubetten.

Beginnen wir mit dem Erstellen des benutzerdefinierten Beitragstyps.

Schritt 1: Erstellen des benutzerdefinierten Beitragstyps

Natürlich werden wir zunächst einen benutzerdefinierten Beitragstyp für unsere häufig gestellten Fragen einrichten. Wir werden einen neuen benutzerdefinierten Beitragstyp mit Hilfe von erstellen register_post_type () Wenn Sie jedoch eine grafische Benutzeroberfläche für die Erstellung Ihres Beitragstyps benötigen, können Sie diese wie in diesem Beispiel mit dem Werkzeug "Nachschlagetyp" von GenerateWP generieren:

 _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 '=> __ (' Übergeordnetes Element: ',' tuts_faq '),' all_items '=> __ (' Alle Elemente ',' tuts_faq '),' view_item '=> __ (' Artikel anzeigen ',' tuts_faq '),' add_new_item '=> __ (' Neues FAQ-Element hinzufügen ',' tuts_faq '),' add_new '=> __ (' Add New ',' tuts_faq '),' edit_item '=> __ ('Element bearbeiten', 'tuts_faq'), 'update_item' => __ ('Element aktualisieren', 'tuts_faq'), 'search_items' => __ ('Element suchen', 'tuts_faq'), 'not_found' = > __ ('Nicht gefunden', 'tuts_faq'), 'not_found_in_trash' => __ ('Nicht gefunden im Papierkorb', 'tuts_faq'),); $ args = array (// benutze die Labels über 'labels' => $ labels, // wir brauchen nur den Titel, den visuellen Editor und die Auszugsfelder für unseren Beitragstyp 'support' => array ('title' , 'editor', 'excerpt',), // Diese Taxonomie erstellen wir im nächsten Abschnitt, aber wir müssen unseren Post-Typ jetzt mit 'taxonomies' => array ('tuts_faq_tax') verknüpfen. / mache es öffentlich, damit wir es im Admin-Panel sehen und im Front-End 'public' => true anzeigen können, // den Menüpunkt unter dem Punkt Seiten 'menu_position' => 20 zeigen, // Archive anzeigen, wenn Sie den Kurzcode nicht benötigen 'has_archive' => true,); register_post_type ('tuts_faq', $ args);  // Einhaken in die Aktion 'init' add_action ('init', 'tuts_faq_cpt', 0); ?>

Spitze: Wenn Ihr Projekt mehr benutzerdefinierte Post-Typen umfasst, die komplexer sein können als dieser einfache FAQ-Post-Typ, kann ich ein cooles Tool namens SuperCPT vorschlagen, mit dem Sie neue Post-Typen mit noch einfacherem Code erstellen können. Ich habe auch ein Tutorial über SuperCPT geschrieben, das können Sie hier nachlesen.

Schritt 2: Erstellen der benutzerdefinierten Taxonomie

Um verschiedene Arten von Fragen zu trennen (z. B. die Fragen und Antworten meines Kunden zu Fehlgeburten und Depressionen nach der Geburt), benötigen wir ein Kategoriesystem. Wie viele von Ihnen bereits wissen, bietet WordPress diese Funktionalität mit benutzerdefinierten Taxonomien.

Die wesentliche Funktion hier ist register_taxonomy () Sie können jedoch auch das Taxonomy Generator-Tool von GenerateWP verwenden, wenn Sie eine grafische Benutzeroberfläche benötigen.

Hier ist der Code:

 _x ('FAQ-Kategorien', 'Allgemeiner Taxonomie-Name', 'tuts_faq'), 'singular_name' => _x ('FAQ-Kategorie', 'Einzelner Taxonomie-Name', 'tuts_faq'), 'menu_name' => __ ('FAQ Kategorien ',' tuts_faq '),' all_items '=> __ (' Alle FAQ-Katzen ',' tuts_faq '),' parent_item '=> __ (' Eltern-FAQ-Cat ',' tuts_faq '),' parent_item_colon '=> __ ('Eltern-FAQ-Katze:', 'tuts_faq'), 'new_item_name' => __ ('Neue FAQ-Katze', 'tuts_faq'), 'add_new_item' => __ ('Neue FAQ-Katze hinzufügen', 'tuts_faq'), 'edit_item' => __ ('FAQ-Katze bearbeiten', 'tuts_faq'), 'update_item' => __ ('FAQ-Katze aktualisieren', 'tuts_faq'), 'separate_items_with_commas' => __ ('Elemente mit Kommas trennen'), 'tuts_faq'), 'search_items' => __ ('Artikel suchen', 'tuts_faq'), 'add_or_remove_items' => __ ('Elemente hinzufügen oder entfernen'), 'tuts_faq'), 'select_from_most_used' => __ Wählen Sie von den am häufigsten verwendeten Elementen ',' tuts_faq '),' not_found '=> __ (' Nicht gefunden ',' tuts_faq '),); $ args = array (// benutze die Labels über 'labels' => $ labels, // Taxonomie sollte hierarchisch sein, damit wir sie wie einen Kategorieabschnitt 'hierarchisch' => true anzeigen können, // die Taxonomie wieder öffentlich machen ( wie der Post-Typ) 'public' => true,); // Der Inhalt des Arrays unten gibt an, welche Post-Typen die Taxonomie mit register_taxonomy ('tuts_faq_tax', array ('tuts_faq'), $ args) verknüpfen soll.  // Einhaken in die Aktion 'init' add_action ('init', 'tuts_faq_tax', 0); ?>

Das ist es! Jetzt haben Sie einen FAQ-Beitragstyp mit einer Taxonomie namens "FAQ-Kategorien", die miteinander verknüpft sind! Überprüfen Sie Ihr Administrationsfenster. Unter "FAQ" wird der Menüpunkt "FAQ-Kategorien" angezeigt..

Genau wie bei normalen Beitragskategorien können Sie sie auf der Seite "FAQ-Kategorien" hinzufügen, bearbeiten oder entfernen. Sie können auch neue Kategorien hinzufügen, während Sie einen neuen FAQ-Artikel schreiben.

Schritt 3: Erstellen der `[FAQ]` Kurzcode

Hier kommt der lustige Teil: das Erstellen des Shortcodes. (Wenn Sie meine vorherigen Beiträge gelesen haben, wissen Sie, dass ich ein enorm Fan von WordPress-Kurzwahlen.) Grundsätzlich werden die FAQ-Elemente in Posts und Seiten eingebettet.

Folgendes wird passieren:

Abfrage in unserem neuen benutzerdefinierten Beitragstyp,
filtert seine Kategorien mit einem Shortcode-Parameter,
die Fragen und Antworten als Titel und Inhalt anzeigen,
Zeigen Sie einen Auszug der Antwort mit einem Link "Mehr ..." an, der von einem anderen Shortcode-Parameter gesteuert wird.

Beginnen wir mit dem Aufbau des Shortcodes. Wie der Code oben füge ich einige hilfreiche Kommentare hinzu:

", // vollständiger Inhalt oder Ausschnitt-Attribut - standardmäßig auf vollen Inhalt gesetzt" Auszug "=>" false ",), $ atts)); $ output ="; // Die Abfrageargumente setzen $ query_args = array (// Alle Beiträge anzeigen, die mit dieser Abfrage übereinstimmen 'posts_per_page' => -1, // Den benutzerdefinierten Beitragstyp 'tuts_faq' anzeigen 'post_type' => 'tuts_faq', // anzeigen Beiträge, die dem Slug der FAQ-Kategorie entsprechen, der mit dem Shortcode-Attribut 'tax_query' => array angegeben wurde (array ('taxonomy' => 'tuts_faq_tax', 'Feld' => 'slug', 'terms' => $ category,)) , // sagen Sie WordPress, dass es nicht erforderlich ist, die Gesamtzahl der Zeilen zu zählen - dieser kleine Trick verringert die Belastung der Datenbank, wenn Sie keine Seitenumbrüche benötigen. // erhalte die Posts mit unseren Abfrageargumenten $ faq_posts = get_posts ($ query_args); $ output. = ''; // Handle unsere benutzerdefinierte Schleife 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 (). ''. __ ('Mehr ...', 'tuts_faq'). ''; $ output. = ''; $ output. = ''. $ faq_item_title. '
'; $ output. = ''. $ faq_item_content. '
'; $ output. = '
';  wp_reset_postdata (); $ output. = '
'; return $ output;  add_shortcode ('faq', 'tuts_faq_shortcode'); ?>

Das ist es! Jetzt haben wir einen ordentlichen Shortcode, um unsere Fragen und Antworten einzubetten. Sie können es mit den Klassennamen gestalten tuts-faq, tuts-faq-item, tuts-faq-item-title, und tuts-faq-item-content. Es sollte jedoch in Ordnung sein, auch wenn Sie kein zusätzliches Styling verwenden.

Schritt 4: Code einpacken

Da es sich bei diesen Codeteilen nicht nur um die Gestaltung des Frontends, sondern auch um die Einführung neuer Funktionen handelt, gilt dies als Plugin-Bereich. Deshalb müssen wir den Code als Plugin speichern. Und wenn wir gerade dabei sind, sollten wir die Aktivierungs- und Deaktivierungsregeln auch löschen.

Hier ist der vollständige Code:

[FAQ] Version: 1.0 Autor: Barış Ünver Author URI: http://hub.tutsplus.com/authors/baris-unver Lizenz: Public Domain * / if (! Function_exists ('tuts_faq_cpt')) // Benutzerdefinierte Beitragstypfunktion registrieren tuts_faq_cpt () // Dies sind die Labels in der Admin-Oberfläche. Bearbeiten Sie sie wie folgt: $ 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 '=> __ (' Alle Elemente ',' tuts_faq '),' view_item '=> __ (' Artikel anzeigen ',' tuts_faq '),' add_new_item '=> __ (' Neuen FAQ hinzufügen.) ',' tuts_faq '),' add_new '=> __ (' Add New ',' tuts_faq '),' edit_item '=> __ (' Element bearbeiten ',' tuts_faq '),' update_item '=> __ (' Update Artikel ',' tuts_faq '),' search_items '=> __ (' Artikel suchen ',' tuts_faq '),' not_found '=> __ (' nicht gefunden '),' tuts_faq '),' not_found_in_trash '=> __ (' Nicht gefunden im Papierkorb ',' tuts_faq '),); $ args = array (// benutze die Labels über 'labels' => $ labels, // wir brauchen nur den Titel, den visuellen Editor und die Auszugsfelder für unseren Beitragstyp 'support' => array ('title' , 'editor', 'excerpt',), // Diese Taxonomie erstellen wir im nächsten Abschnitt, aber wir müssen unseren Post-Typ jetzt mit 'taxonomies' => array ('tuts_faq_tax') verknüpfen. / mache es öffentlich, damit wir es im Admin-Panel sehen und im Front-End 'public' => true anzeigen können, // den Menüpunkt unter dem Punkt Seiten 'menu_position' => 20 zeigen, // Archive anzeigen, wenn Sie den Kurzcode nicht benötigen 'has_archive' => true,); register_post_type ('tuts_faq', $ args);  // Einhaken in die Aktion 'init' add_action ('init', 'tuts_faq_cpt', 0);  if (! function_exists ('tuts_faq_tax')) // Benutzerdefinierte Taxonomiefunktion tuts_faq_tax () // erneut registrieren, // Beschriftungen für das Admin-Panel Allgemeiner Name ',' tuts_faq '),' singular_name '=> _x (' FAQ-Kategorie ',' Taxonomie Singular Name ',' tuts_faq '),' menu_name '=> __ (' FAQ-Kategorien ',' tuts_faq '),' all_items '=> __ (' Alle FAQ-Katzen ',' tuts_faq '),' parent_item '=> __ (' Eltern-FAQ-Katze ',' tuts_faq '),' parent_item_colon '=> __ (' Eltern-FAQ-Katze: ',' tuts_faq '),' new_item_name '=> __ (' Neue FAQ-Katze ',' tuts_faq '),' add_new_item '=> __ (' Neue FAQ-Katze hinzufügen '),' tuts_faq '),' edit_item '=> __ (' Bearbeiten FAQ Cat ',' tuts_faq '),' update_item '=> __ (' Update FAQ Cat ',' tuts_faq '),' separate_items_with_commas '=> __ (' Elemente mit Kommas trennen ',' tuts_faq '),' search_items '= > __ ('Artikel suchen', 'tuts_faq'), 'add_or_remove_items' => __ ('Artikel hinzufügen oder entfernen', 'tuts_faq'), 'select_from_most_used' => __ ('Wählen Sie aus den am häufigsten verwendeten Elementen', 'tuts_faq' '),' not_found '=> __ (' Nicht gefunden ',' tuts_faq '),); $ args = array (// benutze die Labels über 'labels' => $ labels, // Taxonomie sollte hierarchisch sein, damit wir sie wie einen Kategorieabschnitt 'hierarchisch' => true anzeigen können, // die Taxonomie wieder öffentlich machen ( wie der Post-Typ) 'public' => true,); // Der Inhalt des Arrays unten gibt an, welche Post-Typen die Taxonomie mit register_taxonomy ('tuts_faq_tax', array ('tuts_faq'), $ args) verknüpfen soll.  // Einhaken in die Aktion 'init' add_action ('init', 'tuts_faq_tax', 0);  if (! function_exists ('tuts_faq_shortcode')) Funktion tuts_faq_shortcode ($ atts) extract (shortcode_atts (array (// kategorie slug-Attribut - Standardwert ist leer 'category' => ", // vollständiger Inhalt oder Attributauszug - Standardwerte zum vollständigen Inhalt 'excerpt' => 'false',), $ atts)); $ output = "; // Die Abfrageargumente setzen $ query_args = array (// Alle Beiträge anzeigen, die mit dieser Abfrage übereinstimmen 'posts_per_page' => -1, // Den benutzerdefinierten Beitragstyp 'tuts_faq' anzeigen 'post_type' => 'tuts_faq', // anzeigen Beiträge, die dem Slug der FAQ-Kategorie entsprechen, der mit dem Shortcode-Attribut 'tax_query' => array angegeben wurde (array ('taxonomy' => 'tuts_faq_tax', 'Feld' => 'slug', 'terms' => $ category,)) , // sagen Sie WordPress, dass es nicht erforderlich ist, die Gesamtzahl der Zeilen zu zählen - dieser kleine Trick verringert die Belastung der Datenbank, wenn Sie keine Seitenumbrüche benötigen. 'no_found_rows' => true,); // erhalte die Posts mit unseren Abfrageargumenten $ faq_posts = get_posts ($ query_args); $ output. = ''; // Handle unsere benutzerdefinierte Schleife 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 (). ''. __ ('Mehr ...', 'tuts_faq'). ''; $ output. = ''; $ output. = ''. $ faq_item_title. '
'; $ output. = ''. $ faq_item_content. '
'; $ output. = '
';  wp_reset_postdata (); $ output. = '
'; return $ 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'); ?>

Raum für Verbesserung

Meine Klientin war mit den Ergebnissen zufrieden, als ich ihr gezeigt habe, wie man sie benutzt. Aber hier können wir den Code mit mehr Funktionen erweitern, wie…

Akkordeoneffekt: Wenn Sie möchten, dass Ihre FAQ-Bereiche mit einigen Umschalteffekten attraktiver werden, können Sie einige tolle jQuery-Plugins verwenden. Wenn Sie die jQuery-Benutzeroberfläche verwenden möchten, gibt es ein erstaunliches Tutorial von Shane Osbourne, das zeigt, wie es geht.
Seitennummerierung: Wenn Sie viele Fragen und Antworten zu einer Kategorie haben und nicht alle Elemente auf einmal anzeigen möchten, können Sie die Anzahl der Beiträge einschränken, indem Sie die posts_per_page Parameter in der benutzerdefinierten Abfrage unseres Shortcodes, und fügen Sie den erforderlichen Code für Paginierungslinks unterhalb der Zeile mit dem hinzu wp_reset_postdata (); Code. Denken Sie daran, das zu entfernen 'no_found_rows' => true, Zeile jedoch - Paginierung funktioniert nicht, wenn Sie das nicht entfernen!
Zufällige Frage: Angenommen, Sie möchten eine zufällige Frage und Antwort auf der Startseite anzeigen und möchten, dass jede Aktualisierung der Seite geändert wird. Alles, was Sie tun müssen, ist zur benutzerdefinierten Abfrage zu wechseln posts_per_page Parameter von -1 zu 1 und fügen Sie eine weitere Zeile mit dem Code hinzu 'orderby' => 'zufällig', und du bist gut zu gehen!

Fazit

So erstellen Sie ein einfaches FAQ-System in WordPress, indem Sie benutzerdefinierte Posttypen, benutzerdefinierte Taxonomien und Shortcodes verwenden. Ich hoffe, Ihnen hat dieses Tutorial gefallen und Sie können es in Ihrem nächsten Projekt einsetzen. Vergiss nicht, den Artikel zu teilen, wenn es dir gefallen hat!

Haben Sie Ideen zur Verbesserung dieses FAQ-Systems? Teilen Sie Ihre Kommentare unten!

Code