So verwenden Sie ein Rasterlayout, um Ihre WordPress-Beiträge anzuzeigen

Möchten Sie Ihre WordPress-Beiträge in einem Rasterformat anzeigen?

Bei der Präsentation Ihrer Inhalte in WordPress bietet Ihnen ein Grid-Layout zusätzliche Möglichkeiten. Dies kann beim Entwerfen benutzerdefinierter Seiten nützlich sein. In diesem Artikel zeigen wir Ihnen, wie Sie Ihre WordPress-Beiträge schnell überall auf Ihrer Website in einem Rasterstil anzeigen können.

Wann brauchen Sie ein WordPress-Grid-Layout?

Jedes WordPress-Theme unterstützt den klassischen vertikalen Blog-Post-Stil, der für die meisten Websites gut funktioniert. Dieser Stil kann jedoch viel Platz einnehmen, insbesondere wenn Sie viele Artikel haben. Wenn Sie eine benutzerdefinierte Startseite für Ihr Blog erstellen, möchten Sie möglicherweise den Rasterstil verwenden, um Ihre neuesten Inhalte zu präsentieren.

Auf diese Weise können Sie Ihrer Startseite weitere Dinge hinzufügen. Darüber hinaus hebt Ihr Beitragsraster Ihre vorgestellten Fotos hervor, wodurch sie ästhetisch ansprechender und klickbarer werden. Das Beitragsraster kann auch verwendet werden, um Ihr kreatives Portfolio und andere Formen von einzigartigem Material anzuzeigen.

Erstellen Sie mit dem Blockeditor ein WordPress-Post-Grid-Layout.

Mit dem WordPress-Blockeditor können Sie Ihre Posts und Thumbnails ganz einfach in einer Post-Grid-Anordnung anzeigen. Sie können Ihr eigenes Gitter mit dem eingebauten Pfostengitterblock konstruieren.

Öffnen Sie die Seite, die Sie ändern möchten, klicken Sie dann auf die „Plus“-Schaltfläche „Block hinzufügen“, suchen Sie nach „Query Loop“ und klicken Sie dann auf den Block, um ihn hinzuzufügen.

Dieser Block bindet Ihre Post-Schleife in Ihre Seite ein.

Wählen Sie dann oben im Block „Leer beginnen“, um ein Postraster zu erstellen.

Abhängig von der Art der Informationen, die Sie mit Ihrem Beitragsraster anzeigen möchten, haben Sie einige Optionen.

Wir verwenden "Bild, Datum und Titel", aber Sie können tun, was Sie wollen.

Fahren Sie dann mit der Maus über das Bild und wählen Sie die Option „Rasteransicht“.

Dadurch wird Ihre Liste in ein Raster von Beiträgen umgewandelt.

Die angezeigten Informationen können dann angepasst werden.

Zuerst entfernen wir die Paginierung am unteren Rand des Blocks. Klicken Sie einfach darauf und wählen Sie das Optionsmenü „Drei Punkte“.

Wählen Sie dann „Paginierung entfernen“.

Dadurch wird das Element automatisch aus dem Block gelöscht.

Ebenso können Sie die Daten aus den Beiträgen entfernen oder zusätzliche Beitragsinformationen für Ihre Leser hinterlassen.

Anschließend fügen wir Links sowohl zum Post-Thumbnail als auch zum Post-Titel hinzu.

Klicken Sie einfach auf das Miniaturbild Ihres Posts und schalten Sie den Schalter „Link to Post“ im rechten Optionsfeld um.

Wiederholen Sie dann den Vorgang für Ihren Beitragstitel.

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um Ihr Beitragsraster zu veröffentlichen.

Sie können jetzt Ihr neues WordPress-Post-Raster anzeigen, indem Sie Ihre WordPress-Website besuchen.

Wiederholen Sie dann den Vorgang für Ihren Beitragstitel. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um Ihr Beitragsraster zu veröffentlichen. Sie können jetzt Ihr neues WordPress-Post-Raster anzeigen, indem Sie Ihre WordPress-Website besuchen.

Indem Sie Code zu WordPress hinzufügen, können Sie ein WordPress-Post-Grid-Layout erstellen.

Dieser Ansatz erfordert ein grundlegendes Verständnis dafür, wie Code in WordPress eingefügt wird. Bevor Sie mit dem Hinzufügen von Code beginnen, müssen Sie zunächst eine neue Bildgröße für Ihr Post-Raster festlegen.

Suchen Sie als Nächstes die WordPress-Designdatei, zu der Sie das Code-Snippet hinzufügen werden. Sie können es beispielsweise in Ihre single.php-Datei einfügen, sodass es am Ende aller Ihrer Artikel angezeigt wird. Sie können auch Ihre eigene Seitenvorlage erstellen, um Ihr Blogpost-Rasterlayout mit Miniaturansichten anzuzeigen.

Danach können Sie damit beginnen, Code zu WordPress hinzuzufügen. Wir werden das Codebeispiel Abschnitt für Abschnitt aufschlüsseln, da es sehr lang ist. Fügen Sie zunächst das folgende Code-Snippet in Ihre Theme-Vorlagendatei ein.

 <?php $counter = 1; //start counter $grids = 2; //Grids per row global $query_string; //Need this to make pagination work /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts*/ query_posts($query_string . '&caller_get_posts=1&posts_per_page=12'); if(have_posts()) : while(have_posts()) : the_post(); ?>

In dieser Codezeile wird die Post-Loop-Abfrage eingerichtet. Wenn Sie möchten, können Sie die Variable „Posts pro Seite“ ändern, um mehr Posts pro Seite anzuzeigen.

Fügen Sie dann in Ihrer Designvorlagendatei das folgende Code-Snippet ein.

 <?php //Show the left hand side column if($counter == 1) : ?> <div class="griditemleft"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <?php //Show the right hand side column elseif($counter == $grids) : ?> <div class="griditemright"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <div class="clear"></div> <?php $counter = 0; endif; ?>

Diese Codezeile erzeugt zwei Spalten für unsere Artikel, die den Titel und das Bild des Beitrags anzeigen. Es generiert auch eine CSS-Klasse, die wir später gestalten werden. Es bezieht sich auch auf „Post-Bild“, das durch den Namen der zuvor erstellten Bildgröße ersetzt werden muss.

Fügen Sie dann am Ende das folgende Code-Snippet hinzu.

 <?php $counter++; endwhile; //Post Navigation code goes here endif; ?>

Dieser Codeabschnitt schließt nur die Schleife. Es erlaubt Ihnen auch, Post-Navigation hinzuzufügen, aber da die meisten Website-Besitzer dafür ein anderes Plugin verwenden, haben wir es nicht aufgenommen, um Codekonflikte zu vermeiden.

So sieht das gesamte Code-Snippet aus.

 <div> <?php $counter = 1; //start counter $grids = 2; //Grids per row global $query_string; //Need this to make pagination work /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */ query_posts($query_string . '&caller_get_posts=1&posts_per_page=12'); if(have_posts()) : while(have_posts()) : the_post(); ?> <?php //Show the left hand side column if($counter == 1) : ?> <div class="griditemleft"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <?php //Show the right hand side column elseif($counter == $grids) : ?> <div class="griditemright"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <div class="clear"></div> <?php $counter = 0; endif; ?> <?php $counter++; endwhile; //Pagination can go here if you want it. endif; ?> </div>

Um sicherzustellen, dass Ihr Beitragsraster richtig angezeigt wird, fügen Sie das folgende CSS zu Ihrer Website hinzu.

 #gridcontainer{ margin: 20px 0; width: 100%; } #gridcontainer h2 a{ color: #77787a; font-size: 13px; } #gridcontainer .griditemleft{ float: left; width: 278px; margin: 0 40px 40px 0; } #gridcontainer .griditemright{ float: left; width: 278px; } #gridcontainer .postimage{ margin: 0 0 10px 0; }

Erkunden Sie durch Experimentieren die Auswirkungen verschiedener CSS-Selektoren auf verschiedene Komponenten Ihrer Post-Loop.

Wir hoffen, dass dieser Artikel hilfreich war, um Ihnen beizubringen, wie Sie Ihre WordPress-Beiträge in einem Rasterstil anzeigen können.