Erstellen einer FAQ-Seite mit zwei Schleifen

FAQ-Seiten sind häufig auf Websites zu finden, insbesondere auf E-Commerce-Websites oder auf Websites, auf denen ein Produkt oder eine Dienstleistung beworben wird, zu denen potenzielle Kunden möglicherweise Fragen haben. Durch das Erstellen einer FAQ-Seite können Sie Zeit und Geld sparen, indem Sie Antworten bereitstellen, ohne dass Sie den Eigentümer der Website per E-Mail oder Telefon anrufen müssen.

Aber eine einfache Archivseite, in der alle Fragen mit ihren Antworten aufgelistet sind, ist möglicherweise zu unhandlich. Besucher können nicht alle Fragen sehen und zögern möglicherweise, durch viele Fragen zu blättern, die für sie nicht relevant sind, insbesondere, wenn die Antworten lang sind oder es viele gibt.

Die einfache Antwort besteht darin, die Seite in zwei Teile aufzuteilen: Fragen oben und Antworten unten, wobei Besucher die Möglichkeit haben, auf jede Frage zu klicken, um zu den Antworten zu gelangen. Glücklicherweise ist dies in WordPress sehr einfach durch Hinzufügen einer zweiten Schleife zu Ihrer Archivseite.

In diesem Tutorial zeige ich Ihnen anhand von vier Schritten:

1. Erstellen Sie ein Thema, das ein Kindenthema von vierundzwanzig sein wird
2. Registrieren Sie einen Beitragstyp der FAQ und fügen Sie einige Daten hinzu
3. Erstellen Sie eine Archivvorlage für den FAQ-Beitragstyp, basierend auf der Indexvorlage im übergeordneten Design
4. Fügen Sie der Vorlage zwei Schleifen hinzu: eine für Fragen und eine für Antworten mit einem Link von einer zur anderen

Was du brauchen wirst

Um dieses Tutorial abzuschließen, benötigen Sie:

• eine Entwicklungsinstallation von WordPress
• ein Arbeitsthema (Sie arbeiten möglicherweise mit Ihrem eigenen Thema oder Sie können ein übergeordnetes Thema verwenden, wie ich es getan habe)
• ein Code-Editor

1. Erstellen des Designs

Da in diesem Lernprogramm eine Archivvorlage erstellt wird, müssen Sie diese einem Design hinzufügen. Ich erstelle ein neues Design, das ein Kind von 25 Jahren ist, aber Sie möchten möglicherweise die Vorlagendatei zu Ihrem vorhandenen Design hinzufügen (und die Funktionen in meiner Funktionsdatei zu Ihrer vorhandenen Funktionsdatei)..

Um mein Kinderthema zu erstellen, erstelle ich eine Datei mit dem Namen style.css und füge folgendes hinzu:

/ * Name des Themas: WPTutsPlus Erstellen eines FAQ-Archivs mit zwei Loops-Themen-URI: http://rachelmccollin.co.uk/wptutsplus-faq-archive-two-loops/ Beschreibung: Thema zur Unterstützung des WPTutsPlus-Lernprogramms zum Erstellen eines benutzerdefinierten FAQ-Archivs. Kinderthema für das Thema Zwanzig Vierzehn. Autor: Rachel McCollin Autor URI: http://rachelmccollin.co.uk/ Vorlage: fünfundzwanzig Version: 1.0 * / @import url ("… /twentyfourteen/style.css");

Ich habe jetzt ein funktionierendes Kindermotiv.

2. Registrieren des Beitragstyps

Als nächsten Schritt erstellen Sie den FAQ-Beitragstyp. Erstellen Sie eine Datei mit dem Namen Functions.php in Ihrem Designordner und fügen Sie den folgenden Code hinzu. Wenn Sie mit einem vorhandenen Design arbeiten, das bereits eine Funktionsdatei enthält, fügen Sie einfach den Code hinzu:

 array ('name' => 'FAQs', 'singular_name' => 'FAQ'), 'has_archive' => true, 'public' => true, 'hierarchisch' => true, 'unterstützt' => array (' title ',' editor ',' excerpt ',' custom-fields ',' thumbnail ',' page-attributes '),' exclude_from_search '=> true,' Capability_type '=>' post ',' rewrite '=> Array ('slug' => 'faqs'),));  add_action ('init', 'wptp_create_faq_post_type'); ?>

Dadurch wird ein neuer Beitragstyp mit der Bezeichnung "FAQ" erstellt register_post_type () Funktion. Beachten Sie, dass ich die verwendet habe 'umschreiben' Argument, um den Slug zu ändern, wenn sich der Besucher auf der Archivseite befindet, also statt der URL dieser Seite mit /FAQ/ es endet mit / faqs /.

Im nächsten Schritt erstellen Sie einige Daten für meine FAQs. Sie können dies im Dashboard für die FAQs unten sehen:

3. Erstellen der Archivvorlagendatei

Sie müssen nun eine Vorlagendatei erstellen, in der Ihre FAQs angezeigt werden. Erstellen Sie eine neue Datei in Ihrem Designordner Archiv-faq.php. Da mein Thema ein Kindermotiv von vierundzwanzig ist, füge ich den Wrapper-Code zu dieser Vorlagendatei von diesem Thema hinzu index.php Datei, wie unten gezeigt. Wenn Sie Ihr eigenes Design verwenden, fügen Sie Ihren eigenen Wrapper-Code hinzu. Dies ist im Wesentlichen der gesamte Code mit Ausnahme der Schleife, die Sie noch nicht hinzufügen, da Sie im nächsten Schritt zwei benutzerdefinierte Schleifen erstellen.

 
 
 
 
 
  
 
Dadurch erhalten Sie die Basisdatei, zu der Sie Ihre Schleifen hinzufügen.
4. Erstellen von zwei Schleifen für FAQs
Ihre Vorlagendatei enthält zwei Schleifen: Eine enthält die Titel jeder FAQ in einem Link zu ihrer Antwort, der von der zweiten Schleife ausgegeben wird. Sie können dies tun, indem Sie die Standard-WordPress-Schleife wiederholen und bearbeiten aber du musst verwenden rewind_posts () Nach der ersten Schleife geht also WordPress für die zweite Schleife wieder an den Anfang.
Die erste Runde: FAQ-Titel und Links
Erstellen Sie zuerst die Schleife, um die Titel der FAQs auszugeben. Fügen Sie Folgendes unter der Öffnung hinzu 
 Etikett:
 
Häufig gestellte Fragen - Klicken Sie auf Antworten
 
  
> "title =""rel =" Lesezeichen ">
  
Dies bewirkt Folgendes:
 
zeigt eine Überschrift in a 
 Element
 
startet die Schleife
 
In einer ungeordneten Liste wird der Titel für jedes FAQ in einem Listenelement ausgegeben der Titel() 
 
umschließt jeden Titel in einen Link zu #Post-, Dies ist die ID für jeden Beitrag in Ihrer zweiten Schleife
 
beendet die Schleife
 
Hinweis: Im obigen Beispiel habe ich nicht geprüft, ob meine Abfrage Beiträge enthält. Möglicherweise möchten Sie jedoch die gesamte Sache in eine Prüfung einschließen if (have_posts ()) damit Ihre Archivvorlage keine Überschrift mit nichts darunter ausgibt.
Die zweite Schleife: FAQ-Titel und Antworten
In der zweiten Schleife werden die Titel erneut ausgegeben (schließlich möchten Ihre Besucher wissen, welche Frage jedes Mal beantwortet wird) und die Antworten werden verwendet der Titel() und der Inhalt().
Fügen Sie unterhalb Ihrer ersten Schleife Folgendes hinzu:
   
> 
"title =""rel =" Lesezeichen ">
 
  
 
 
Dies beginnt mit dem Zurückspulen der Schleife und führt dann eine weitere Schleife zur Ausgabe aus:
 
Ein Artikelelement zum Einschließen jeder FAQ
 
Der Titel der FAQ in a 
 Element mit #Post- als ID, die dafür sorgt, dass der Link in der ersten Schleife funktioniert.
 
Der Inhalt der FAQ.
 
Ihre Archivvorlagendatei ist jetzt vollständig. Speichern Sie Ihre Arbeit und testen Sie sie. Sie sollten eine Seite haben yoursite.com/faqs was ein bisschen so aussieht:
Zusammenfassung
So erstellen Sie eine FAQ-Seite mit Fragen und Antworten, die in zwei Schleifen unterteilt sind. Das Schöne an dieser Technik ist, dass Sie einfach die Standard-WordPress-Schleife verwenden. Während Sie diese Schleife anpassen, müssen Sie keine benutzerdefinierte Abfrage erstellen.
Nützliche Ressourcen
 
Die Vorlagenhierarchie, die eine Anleitung für die Funktionsweise von Archivvorlagen ist
 
Die Schleife
 
Die Funktion register_post_type ()
 



		
			
	   
	




Code