WordPress bietet Ihnen eine Reihe von integrierten Optionen für die Startseite Ihrer Website: eine Anzeige Ihrer neuesten Blogbeiträge oder eine statische Seite Ihrer Wahl. Aber was ist, wenn Sie etwas interessanteres als das erstellen möchten?
Wenn Ihre Site viele Daten enthält, die Kategorien, Taxonomien oder benutzerdefinierte Posttypen verwenden, um sie zu organisieren, möchten Sie möglicherweise Daten mehrerer Arten auf Ihrer Startseite anzeigen. Die gute Nachricht ist, dass Sie dies mit einer benutzerdefinierten Vorlage für die Homepage tun können. In dieser Vorlage schreiben Sie eine Reihe von benutzerdefinierten Abfragen, um die Daten auf die gewünschte Weise aufzulisten. In diesem Tutorial erfahren Sie, wie Sie Folgendes tun:
In den Abfragen werden Standardposts sowie ein für dieses Projekt registrierter benutzerdefinierter Posttyp namens "Tier" aufgelistet. Sie finden die Vorlagendatei mit den vier Abfragen im Codebündel.
Bevor Sie mit dem Einrichten der Homepagevorlage beginnen, nehmen Sie sich zunächst etwas Zeit, um festzustellen, was auf der Homepage enthalten ist:
Die Homepage enthält:
Die Elemente dieses Layouts, mit denen Sie arbeiten werden, sind der Inhalt der Startseite und die drei Listen.
Bevor Sie beginnen, benötigen Sie einige Elemente, um mit Ihren Abfragen arbeiten zu können:
register_post_type
im WordPress-Codex. Alternativ kann die Functions.php Die Datei im Codepaket enthält den Code, der dies tutDer erste Schritt ist das Erstellen einer Vorlagendatei, die Ihren Code enthält. Erstellen Sie eine leere Datei in Ihrem Designordner und benennen Sie sie front-page.php. Fügen Sie der Datei den folgenden Code hinzu:
// Der Inhalt der Startseite geht hier
Speichern Sie Ihre Datei. Wie Sie sehen, umfasst dies die Header- und Footer-Vorlagendateien auf Ihrer Startseite. Es ist keine Seitenleiste enthalten, da diese nicht zum Design der Homepage gehört. Wenn Sie die Homepage Ihrer Website besuchen, wird jetzt eine leere Seite angezeigt, in der nur Kopf- und Fußzeile angezeigt werden:
Auf Ihrer Homepage werden nicht nur die Ergebnisse benutzerdefinierter Abfragen angezeigt, sondern auch der Inhalt der statischen Seite "Startseite". Um dies zu Ihrer Vorlagendatei hinzuzufügen, fügen Sie den folgenden Code ein, um die '// Der Inhalt der Startseite geht hier
' Linie:
> ?>
Dies ist die Standardschleife. WordPress verwendet es, um den Inhalt der statischen Seite anzuzeigen, die Sie als Startseite registriert haben. Ihre Homepage enthält jetzt den statischen Inhalt:
WP_Query
Für die benutzerdefinierten Abfragen verwenden Sie die WP_Query
Klasse. Auf diese Weise können Sie benutzerdefinierte Abfragen einrichten und jeweils eine Schleife ausführen, um Beiträge anzuzeigen.
Verwenden WP_Query
ist viel besser als die Verwendung der query_posts
Funktion als letztere setzt die Hauptabfrage vollständig zurück und kann zu Leistungsproblemen führen. WP_Query
verwendet einen Satz von Parametern, die die Abfrage definieren, die Sie ausführen möchten. Einige Beispiele für die Parameter, die Sie angeben könnten, umfassen (sind aber nicht darauf beschränkt):
Post-Typ
- Beiträge, Seiten, Anhänge oder einen benutzerdefinierten Beitragstypposts_per_page
- die Anzahl der anzuzeigenden BeiträgeAuftrag
- ASC
oder DESC
Sortieren nach
- Sie können nach Datum, Name, Autor, menu_order oder vielen weiteren Parametern bestellenEinzelheiten zu den Parametern, die Sie verwenden können WP_Query
, sehen WP_Query
im WordPress-Codex. Benutzen WP_Query
, Sie fügen den folgenden Code ein:
have_posts ()): $ query-> the_post (); // poste Inhalt, um hier endwig angezeigt zu werden; ?>
Auf Ihrer Startseite möchten Sie die letzten acht Beiträge in der Kategorie "Updates" auflisten. Fügen Sie dazu den folgenden Code zwischen der Hauptabfrage und dem Aufruf der Fußzeile ein:
/ category / updates / "> Updates
'post', 'category_name' => 'Updates', 'posts_per_page' => 8)); while ($ query-> have_posts ()): $ query-> the_post (); ?>
- "> -
Dies schafft eine Element, das Ihren Eintrag enthält, und öffnet den Eintrag mit einem Link zum Kategorienarchiv in einem
Etikett. Es definiert dann die Argumente für
WP_Query
und führt die Schleife basierend auf dieser Abfrage aus. Die zusätzlichen Klassen können verwendet werden, um jeden einzelnen Eintrag zu gestalten.
Die zweite benutzerdefinierte Abfrage ist fast identisch mit der ersten. Sie fragt nur Beiträge aus einer anderen Kategorie ab. Fügen Sie nach der ersten Abfrage und unmittelbar vor dem zweiten Schließen Folgendes hinzu Etikett:
/ category / in-depth / "> In Tiefe
'post', 'category_name' => 'In Depth', 'posts_per_page' => 8)); while ($ query-> have_posts ()): $ query-> the_post (); ?>
- "> -
Dadurch wird ein zweiter Beitrag für Beiträge in der Kategorie "In Detail" hinzugefügt.
Die dritte und letzte Abfrage fragt keine Standardposts ab, sondern den benutzerdefinierten Typ "Tier", den Sie vor dem Erstellen Ihrer Vorlagendatei registriert haben. Fügen Sie nach der zweiten benutzerdefinierten Abfrage Folgendes hinzu:
"> Unsere Lieblingstiere
'animal', 'posts_per_page' => 8)); while ($ query-> have_posts ()): $ query-> the_post (); ?>
- ">
Sie haben jetzt alle Abfragen eingerichtet und auf der Startseite angezeigt:
Der letzte Schritt ist, etwas Styling hinzuzufügen. Im Moment sind die Auflistungen untereinander, mit wenig Abstand oder Verzierung.
In diesem Schritt fügen Sie ein einfaches Styling hinzu, um dies zu verbessern. Fügen Sie im Stylesheet Ihres Themas Folgendes hinzu:
.clear float: keine; Lösche beide; .home section.archive width: 31%; Marge: 10px 1%; Border-Top: 1px fest # 222; Schwimmer: links; .home section.archive ul li Zeilenhöhe: 1.4em;
Dadurch wird sichergestellt, dass die Einträge unter dem Hauptinhalt gelöscht und nebeneinander angezeigt werden. Es fügt auch etwas Abstand zwischen den Elementen in jeder Liste hinzu:
Sie haben jetzt eine angepasste Startseite, die den statischen Seiteninhalt sowie drei benutzerdefinierte Abfragen mit verschiedenen Inhaltstypen enthält. Sie können diesen Ansatz an unterschiedliche Anforderungen anpassen. Zum Beispiel:
WP_Query
the_thumbnail ()
Anzeigen von Miniaturbildern (oder vorgestellten Bildern)Einige nützliche Ressourcen:
WP_Query
Klasse: http://codex.wordpress.org/Class_Reference/WP_Query