Wie Sie Ihre WordPress-Beiträge in einem Rasterlayout anzeigen

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

Ein Rasterlayout bietet Ihnen mehr Flexibilität bei der Anzeige Ihrer Beiträge in WordPress. Dies kann bei der Erstellung benutzerdefinierter Seiten hilfreich sein.

In diesem Artikel zeigen wir Ihnen, wie Sie Ihre WordPress-Beiträge ganz einfach in einem Grid-Layout an einer beliebigen Stelle Ihrer Website anzeigen können.

Wann brauchen Sie ein Grid-Layout für WordPress?

Jedes WordPress-Theme unterstützt das traditionelle vertikale Layout von Blogbeiträgen, das für die meisten Arten von Websites gut geeignet ist. Allerdings kann dieses Layout sehr viel Platz beanspruchen, vor allem wenn Sie viele Beiträge haben.

Wenn Sie eine benutzerdefinierte Homepage für Ihre Website erstellen, möchten Sie vielleicht das Rasterlayout verwenden, um Ihre letzten Beiträge anzuzeigen.

So haben Sie mehr Platz, um andere Elemente auf Ihrer Homepage einzufügen.

Außerdem hebt das Beitragsraster Ihre Bilder hervor, so dass es visuell ansprechend und anklickbar ist. Sie können das Beitragsraster auch verwenden, um Ihr kreatives Portfolio und andere Arten von benutzerdefinierten Inhalten zu präsentieren.

Viele Magazin- und Fotografie-Themes verwenden bereits das Raster-Layout zur Anzeige von Beiträgen. Wenn Ihr Theme diese Funktion jedoch nicht unterstützt, müssen Sie sie hinzufügen.

In diesem Sinne zeigen wir Ihnen, wie Sie Ihre WordPress-Beiträge in einem Rasterlayout anzeigen können. Verwenden Sie einfach die unten stehenden Links, um direkt zu der gewünschten Methode zu gelangen.

• Ein Rasterlayout mit dem WordPress-Blockeditor erstellen
• Grid-Layout mit dem Post Grid Plugin erstellen
• Ein Grid-Layout mit dem SeedProd Page Builder erstellen
• Erstellen eines Grid-Layouts durch Hinzufügen von Code in WordPress

Video-Anleitung

Wenn Sie eine schriftliche Anleitung bevorzugen, lesen Sie einfach weiter.

Methode 1. WordPress Post Grid Layout mit Block Editor erstellen

Mit dieser Methode können Sie Ihre Beiträge und Miniaturansichten einfach in einem Post-Grid-Layout mit dem WordPress-Block-Editor anzeigen. Es gibt einen integrierten Post-Grid-Block, mit dem Sie Ihr eigenes Raster erstellen können.

Öffnen Sie dazu die Seite, die Sie bearbeiten möchten, klicken Sie auf die Schaltfläche „Plus“ für das Hinzufügen von Blöcken, suchen Sie nach „Query Loop“ und klicken Sie dann auf den Block, um ihn hinzuzufügen.

Dieser Block fügt Ihre Beitragsschleife zu Ihrer Seite hinzu.

Klicken Sie dann oben im Block auf die Option „Start Blank“, um ein Beitragsraster zu erstellen.

Je nach Art der Informationen, die Sie in Ihrem Beitragsraster anzeigen möchten, stehen Ihnen verschiedene Möglichkeiten zur Verfügung.

Wir wählen die Option „Bild, Datum und Titel“, aber Sie können wählen, was Sie wollen.

Bewegen Sie dann den Mauszeiger über das Bild und wählen Sie die Option „Rasteransicht“.

Dadurch wird Ihre Liste zu einem Beitragsraster.

Als nächstes können Sie die Informationen, die Sie anzeigen möchten, anpassen.

Als erstes werden wir die Paginierung am unteren Ende des Blocks löschen. Klicken Sie dazu einfach auf den Block und dann auf das Optionsmenü „Drei Punkte“.

Klicken Sie dann auf „Paginierung entfernen“.

Dadurch wird das Element automatisch aus dem Block entfernt.

Sie können die Daten aus den Beiträgen auf die gleiche Weise löschen oder mehr Informationen zu den Beiträgen für Ihre Besucher hinterlassen.

Als Nächstes fügen wir Links sowohl zur Beitragsminiatur als auch zum Titel des Beitrags hinzu.

Klicken Sie einfach auf die Miniaturansicht Ihres Beitrags und aktivieren Sie die Option „Link zum Beitrag“ in der rechten Optionsleiste.

Dann machen Sie dasselbe für den Titel Ihres Beitrags.

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

Jetzt können Sie Ihre WordPress-Website besuchen, um Ihr neues WordPress-Beitragsraster zu sehen.

Sie können diesen Block zu jeder Seite oder jedem Beitrag hinzufügen. Wenn Sie diesen Block als Archivseite für Ihren Blog verwenden möchten, lesen Sie bitte unsere Anleitung zum Erstellen einer separaten Seite für Blogbeiträge in WordPress.

Methode 2. Erstellen Sie ein WordPress Post Grid Layout mit dem Post Grid Plugin

Diese Methode bietet eine einfache Möglichkeit, ein anpassbares Beitragsraster hinzuzufügen, das Sie überall auf Ihrer Website einfügen können.

Als Erstes müssen Sie das Post Grid-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie Post Grid “ Add New aufrufen, um Ihr erstes Post Grid zu erstellen.

Dann geben Sie Ihrem Beitragsgitter einen Titel. Dieser erscheint nicht auf Ihrer Seite, sondern dient nur als Gedächtnisstütze.

Darunter finden Sie die Einstellungen für das Beitragsraster, die in verschiedene Abschnitte mit mehreren Registerkarten unterteilt sind.

Zunächst müssen Sie auf die Registerkarte „Post abfragen“ klicken. Hier legen Sie die Beitragstypen fest, die Sie im Feld „Beitragstypen“ anzeigen lassen möchten.

Standardmäßig werden nur Beiträge angezeigt, aber Sie können Seiten und sogar benutzerdefinierte Beitragstypen hinzufügen.

Danach müssen Sie auf die Registerkarte „Layouts“ klicken.

Klicken Sie dann auf die Schaltfläche „Layout erstellen“. Dies wird in einem neuen Fenster geöffnet.

Sie müssen Ihr Layout benennen. Klicken Sie dann auf die Option „Allgemein“ und es öffnet sich eine Liste von Tags.

Diese Tags sind die Informationen, die in Ihrem Beitragsraster angezeigt werden.

Wir wählen die Option „Vorschaubild mit Link“ und die Option „Beitragstitel mit Link“.

Klicken Sie dann auf „Veröffentlichen“ oder „Aktualisieren“, um Ihr Layout zu speichern.

Gehen Sie nun zurück zum ursprünglichen Beitragsraster-Editor auf der vorherigen Registerkarte, und es wird eine neue Layout-Option verfügbar sein, die Sie auswählen können.

Klicken Sie einfach auf das neue Layout im Abschnitt „Artikellayouts“ am unteren Rand des Bildschirms.

Als nächstes klicken Sie auf die Registerkarte „Artikelstil“. Hier können Sie die Größe des Rasters festlegen.

Die Standardeinstellungen sollten für die meisten Websites geeignet sein, aber wenn nicht, können Sie sie hier ändern.

Wenn Sie fertig sind, klicken Sie oben auf der Seite auf die Schaltfläche „Veröffentlichen“, und Ihr Raster ist bereit, in Ihren WordPress-Blog eingefügt zu werden.

Jetzt müssen Sie auf die Registerkarte „Shortcode“ klicken und den Shortcode in das Feld „Post Grid Shortcode“ kopieren.

Öffnen Sie dann die Seite, auf der Sie Ihre Beitragsliste anzeigen möchten, und klicken Sie auf die Schaltfläche „Plus“, um einen Block hinzuzufügen.

Suchen Sie dann nach „Shortcode“ und wählen Sie den Block „Shortcode“ aus.

Fügen Sie anschließend den zuvor kopierten Shortcode in das Feld ein.

Klicken Sie dann auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“.

Jetzt können Sie Ihre Seite aufrufen, um das WordPress-Post-Grid-Layout live zu sehen.

Methode 3. Erstellen Sie ein WordPress Post Grid Layout mit dem SeedProd Page Builder Plugin

Eine andere Möglichkeit, ein Post-Grid-Layout zu erstellen, ist die Verwendung des SeedProd Page Builder Plugins. Es ist der beste Drag-and-Drop-WordPress-Seitenersteller auf dem Markt und wird von über 1 Million Websites verwendet.

Mit SeedProd können Sie ganz einfach benutzerdefinierte Seiten und sogar komplett benutzerdefinierte WordPress-Themes erstellen, ohne irgendeinen Code zu schreiben. Sie können das Plugin verwenden, um jede Art von Seite zu erstellen, die Sie wollen, wie 404-Seiten, baldige Seiten, Landing Pages und mehr.

Weitere Informationen finden Sie in unserer Anleitung zum Erstellen einer benutzerdefinierten Seite in WordPress.

Wenn Sie Ihre Seite im SeedProd Builder anpassen, klicken Sie einfach auf das Pluszeichen „Abschnitt hinzufügen“ an einer beliebigen Stelle der Seite.

Daraufhin wird eine Option zum Hinzufügen eines neuen Blocks angezeigt.

Ziehen Sie dann den Block „Beiträge“ auf Ihre Seite, und es wird automatisch eine Liste von Beiträgen zu Ihrer Seite hinzugefügt.

Nun können Sie diesen Block über das linke Optionsfeld anpassen.

Scrollen Sie zunächst nach unten zum Abschnitt „Layout“. Hier können Sie die Anzahl der Spalten für Ihr Blogpost-Raster festlegen und die Kippschalter „Feature-Bild anzeigen“ und „Titel anzeigen“ aktivieren.

Scrollen Sie dann nach unten zu den Schaltern „Auszug anzeigen“ und „Mehr anzeigen“ und schalten Sie sie aus, um ein einfaches Blogpost-Rasterlayout zu erstellen.

Wenn Sie das Farbschema, den Text und mehr anpassen möchten, klicken Sie auf die Registerkarte „Erweitert“ oben in der linken Spalte.

Klicken Sie dann auf die Dropdown-Liste „Text“ und nehmen Sie Ihre Änderungen vor.

Sie können das Rasterlayout Ihrer Seiten und Blogposts nach Belieben weiter anpassen.

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Speichern“ und wählen Sie die Dropdown-Liste „Veröffentlichen“ oben auf der Seite, um Ihre Änderungen zu aktivieren.

Jetzt können Sie Ihr neues Beitragsraster auf Ihrer Website anzeigen.

Methode 4. Erstellen eines WordPress Post Grid-Layouts durch Hinzufügen von Code zu WordPress

Diese Methode erfordert einige grundlegende Kenntnisse darüber, wie man Code in WordPress einfügt. Wenn Sie dies noch nicht getan haben, lesen Sie unsere Anleitung zum Kopieren und Einfügen von Code in WordPress.

Bevor Sie Code hinzufügen, müssen Sie eine neue Bildgröße erstellen, die Sie für Ihr Beitragsraster verwenden werden. Weitere Informationen finden Sie in unserer Anleitung zum Erstellen zusätzlicher Bildgrößen in WordPress.

Als Nächstes müssen Sie die richtige WordPress-Theme-Datei finden, in die Sie den Code-Schnipsel einfügen wollen. Sie können ihn zum Beispiel in Ihre single.php einfügen, damit er am Ende aller Ihrer Beiträge erscheint.

Sie können auch eine benutzerdefinierte Seitenvorlage erstellen und diese verwenden, um Ihr Blogpost-Rasterlayout mit Miniaturansichten anzuzeigen.

Weitere Informationen finden Sie in unserem Spickzettel zur WordPress-Vorlagenhierarchie, der Ihnen hilft, die richtige Theme-Vorlagendatei zu finden.

Sobald Sie das getan haben, können Sie damit beginnen, Code zu WordPress hinzuzufügen. Da der Codeschnipsel recht lang ist, werden wir ihn Abschnitt für Abschnitt aufschlüsseln.

Fügen Sie zunächst den folgenden Codeschnipsel in Ihre Themenvorlagendatei 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();
?>

Dieses Codeschnipsel richtet die Abfrage der Beitragsschleife ein. Sie können die Variable „posts_per_page“ ändern, um mehr Beiträge pro Seite anzuzeigen, wenn Sie dies wünschen.

Fügen Sie dann den folgenden Codeschnipsel in Ihre Themenvorlagendatei 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;
?>

Dieses Codeschnipsel erstellt zwei Spalten für unsere Beiträge und zeigt den Titel und das Beitragsbild an. Außerdem wird eine CSS-Klasse erstellt, deren Gestaltung wir Ihnen später zeigen werden.

Er verweist auch auf „postimage“, so dass Sie diesen Namen in den Namen der Bildgröße ändern müssen, die Sie zuvor erstellt haben.

Fügen Sie dann am Ende den folgenden Codeschnipsel ein.

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

Dieses Codeschnipsel schließt die Schleife einfach ab. Er bietet auch die Möglichkeit, eine Post-Navigation hinzuzufügen, aber die meisten Website-Besitzer verwenden dafür ein anderes Plugin, daher haben wir es nicht aufgenommen, um Code-Konflikte zu vermeiden.

So sieht das endgültige Codeschnipsel insgesamt aus.

<div id="gridcontainer">
<?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>

Jetzt müssen Sie das folgende CSS zu Ihrer Website hinzufügen, um sicherzustellen, dass Ihr Beitragsraster gut angezeigt wird.

Wenn Sie dies noch nicht getan haben, lesen Sie unsere Anleitung, wie Sie Ihrer WordPress-Website ganz einfach benutzerdefinierte CSS hinzufügen können.

#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;
}

Sie können die verschiedenen CSS-Selektoren ändern, um zu sehen, wie sie die verschiedenen Elemente Ihrer Beitragsschleife verändern.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie Ihre WordPress-Beiträge in einem Rasterlayout anzeigen können. Vielleicht interessieren Sie sich auch für unseren Leitfaden zur Auswahl der besten Webdesign-Software und unsere Expertenauswahl der besten Live-Chat-Software für kleine Unternehmen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.