So erstellen Sie eine Homepage mit mehreren Einträgen mit benutzerdefinierten Abfragen

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:

  • Erstellen Sie eine benutzerdefinierte Homepagevorlage für Ihr Design
  • Fügen Sie vier Abfragen in diese Vorlage ein, um verschiedene Arten von Daten anzuzeigen, einschließlich drei benutzerdefinierter Abfragen

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.


Was Sie benötigen, um dieses Tutorial abzuschließen

  • Eine Entwicklungsinstallation von WordPress
  • Ein Theme installiert, das Sie bearbeiten können. Wenn Sie mit einem vorhandenen Design arbeiten, empfiehlt es sich, ein untergeordnetes Design zu erstellen, sodass Sie Vorlagendateien erstellen können, ohne das übergeordnete Design zu bearbeiten. Ich verwende ein Kindermotiv von Twenty Twelve

Das Homepage-Design

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:

  • Eine Kopfzeile mit einem Banner und einem Navigationsmenü
  • Der Inhalt der Homepage - Text und Bild
  • Drei Listen mit jeweils einer benutzerdefinierten Abfrage:
    • Updates - Dies sind Standard-Posts in der Kategorie "Updates"
    • In Detail - Standardposts in der Kategorie "Detail"
    • Tiere - diese verwenden einen benutzerdefinierten Posttyp namens "Tier".
  • Eine Standardfußzeile

Die Elemente dieses Layouts, mit denen Sie arbeiten werden, sind der Inhalt der Startseite und die drei Listen.


Bevor Sie beginnen: Einrichten der Daten

Bevor Sie beginnen, benötigen Sie einige Elemente, um mit Ihren Abfragen arbeiten zu können:

  • Ein "tierischer" Posttyp wurde registriert. Einzelheiten dazu finden Sie unter register_post_type im WordPress-Codex. Alternativ kann die Functions.php Die Datei im Codepaket enthält den Code, der dies tut
  • Zwei Kategorien für normale Beiträge - "Updates" und "In Detail"
  • Eine statische Seite mit dem Namen "Startseite", der einige Inhalte hinzugefügt wurden. Diese sollte als Startseite über die Seite Einstellungen im WordPress-Dashboard eingerichtet werden
  • Einige normale Beiträge in jeder Kategorie und einige Tiere (mit dem benutzerdefinierten Beitragstyp). Die Vorlage zeigt jeweils bis zu acht

Erstellen der Titelseitenvorlage

Der 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:


Statischen Inhalt zur Homepage hinzufügen

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:


Die erste benutzerdefinierte Abfrage mit 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 Beitragstyp
  • Kategorie
  • Etikett
  • Taxonomiebegriff (e)
  • posts_per_page - die Anzahl der anzuzeigenden Beiträge
  • Auftrag - ASC oder DESC
  • Sortieren nach - Sie können nach Datum, Name, Autor, menu_order oder vielen weiteren Parametern bestellen
  • … und viele mehr

Einzelheiten 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

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 benutzerdefinierte Abfrage: Abfragen eines benutzerdefinierten Beitragstyps

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:


Gestalten Sie die Einträge

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:


Zusammenfassung

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:

  • Für eine Titelseite, die nur Archive und keinen statischen Inhalt zeigt, entfernen Sie einfach die erste Schleife
  • Um den Beitragstyp "Tiere" auf andere Weise aufzulisten, können Sie in Ihren Argumenten Taxonomien angeben WP_Query
  • Sie können den für jeden Beitrag angezeigten Inhalt hinzufügen oder ändern, beispielsweise mit the_thumbnail () Anzeigen von Miniaturbildern (oder vorgestellten Bildern)
  • Sie können Ihrer Seiten- oder Fußzeilenvorlage benutzerdefinierte Abfragen hinzufügen, um sie auf allen Seiten anzuzeigen

Ressourcen

Einige nützliche Ressourcen:

  • Codex-Seite auf der WP_Query Klasse: http://codex.wordpress.org/Class_Reference/WP_Query
  • Erstellen einer Vorlagendatei für die Startseite: http://codex.wordpress.org/Template_Hierarchy#Front_Page_display
  • Registrieren benutzerdefinierter Beitragstypen: http://codex.wordpress.org/Function_Reference/register_post_type