So erstellen Sie eine Rasteranzeige von Post-Thumbnails in WordPress-Themes

Hatten Sie beim Erstellen von WordPress-Site-Designs schon immer den Wunsch, eine Rasterdarstellung von Beiträgen zu erstellen? Das Raster-Layout eignet sich hervorragend für medienorientierte Websites wie unsere WordPress-Galerie oder eine andere Website mit Schaufenster. Theme-Frameworks wie Genesis verfügen bereits über ein vorgefertigtes Grid-Loop-System. Wenn Sie jedoch versuchen, in Ihrem benutzerdefinierten WordPress-Design ein Raster anzuzeigen, sind wir hier, um Ihnen zu helfen. In diesem Artikel zeigen wir Ihnen, wie Sie in Ihrem WordPress-Theme eine Rasterschleifenanzeige für Post-Thumbnails erstellen.

Hinweis: Sie müssen ein gutes Verständnis von CSS und der Funktionsweise der WordPress-Schleife haben.

Bevor wir beginnen, werfen wir einen Blick auf das, was wir erreichen wollen:

Wenn Sie feststellen, werden die Beiträge auf dieser Seite in einem Raster angezeigt. Links auf den Pfosten befindet sich eine Umrandung, auf der rechten Seite jedoch nicht. Bei einer normalen Nachschleife haben alle Beiträge den gleichen Stil, so dass Sie an beiden Stellen einen rechten Rand haben, der seltsam aussehen würde. Beachten Sie auch, dass die Abstände ziemlich symmetrisch sind. Was wiederum mit der normalen Schleife nicht möglich ist, um so etwas zu tun. Nun, da Sie sehen können, was wir erreichen wollen, werfen wir einen Blick darauf, wie wir es erreichen können.

Als erstes müssen Sie sicherstellen, dass in Ihrem Design die Miniaturansichten von WordPress-Posting aktiviert sind. Sie sollten auch darüber nachdenken, wie Sie die Größe Ihrer WordPress-Bilder ändern möchten, da Sie sie benötigen.

Sobald Sie die Miniaturansichten und Größeneinstellungen festgelegt haben, können Sie mit diesem Ding beginnen. Lass uns unsere Loop-Abfragen einrichten:

Der obige Code scheint ziemlich einfach zu sein, da wir Inline-Kommentare gemacht haben. Eine Sache, die Sie wahrscheinlich bearbeiten müssen, ist die Variable posts_per_page, die Ihren Anforderungen entspricht. Sie können auch andere Abfrageparameter hinzufügen, wenn Sie dies wünschen. Nun, da wir die Schleife gestartet haben, wollen wir uns ansehen, wie wir die Beiträge darin anzeigen möchten.

Wir starten den Code, indem wir prüfen, ob der Zähler 1 ist, was bedeutet, dass unser linkes Gitter angezeigt wird. Wir gehen einfach hinein und beginnen ein Div mit einer benutzerdefinierten CSS-Klasse "griditemleft". Darin haben wir das Miniaturbild des Beitrags und den Titel des Beitrags hinzugefügt. Sie können alle Schleifenelemente (wie Auszüge, Datumsangaben, Autoreninformationen, Anzahl der Kommentare usw.) hinzufügen oder entfernen. Hinweis: In unseren Thumbnails nennen wir eine zusätzliche Bildgröße. Sie müssen wahrscheinlich den Namen der Größe durch Ihre eigene Größe ersetzen, die Sie erstellt haben.

Nach dem ersten Raster haben wir ein elseif hinzugefügt, das nachschaut, ob der $ -Zähler mit der in unseren $-Grids angegebenen Nummer übereinstimmt (was aber der Grund ist, da wir uns im zweiten Post befinden). Wenn der Zähler übereinstimmt, können wir unser rechtes Raster anzeigen, das mit einer benutzerdefinierten CSS-Klasse "griditemright" beginnt. Nachdem Sie das griditemright -Div geschlossen haben, fügen Sie eine klare Klasse hinzu. Dies erklären wir, wenn wir zum CSS-Teil kommen.

Nachdem die Schleife damit abgeschlossen ist, setzen wir den Zähler auf 0 zurück, damit er in der nächsten Reihe erneut beginnen kann.

Wir können die Schleife, die wir begonnen haben, einfach beenden, indem Sie diesen Code hinzufügen:

Der obige Code setzt den Zähler im Wesentlichen fort, bis er das in unserer query_post -Variable angegebene Limit erreicht. Der Grund, warum wir den Postnavigationscode nicht hinzugefügt haben, ist, dass viele Leute ein Plugin oder eine andere Anzeigemethode dafür verwenden. Wir lassen es Ihnen also frei, selbst zu entscheiden.

So sieht unser abschließender Loop-Code folgendermaßen aus:

Nun, da wir den PHP-Code bereit haben, schauen wir uns an, wie wir ihn gestalten werden.

Unsere Standardausgabe würde folgendermaßen aussehen:

    Bild posten 
Titel veröffentlichen
    Bild posten 
Titel veröffentlichen
    

Hier sind die Klassen, die Sie ändern müssen:

 #gridcontainer margin: 20px 0; Breite: 100%;  #gridcontainer h2 a color: # 77787a; Schriftgröße: 13px; #gridcontainer .griditemleft float: left; Breite: 278px; margin: 0 40px 40px 0; #gridcontainer .griditemright float: left; width: 278px; #gridcontainer .postimage margin: 0 0 10px 0; 

Wir hoffen, dass dieses Tutorial Sie in die richtige Richtung lenkt, um eine Raster-Schleife für Ihre WordPress-Beiträge zu erstellen.