📸 Beitragsgalerie in WordPress: 3 Wege, ein Raster von Beiträgen zu erstellen

Ein Standard-Blogfeed (eine vertikale Spalte mit Beiträgen, einer unter dem anderen) funktioniert gut, wenn Sie zehn Einträge haben. Bei hundert Einträgen wird das vertikale Scrollen zum Endlos-Scrollen: Leser verlieren spätestens beim dritten Bildschirm das Interesse, und die Ansichtstiefe sinkt auf null.

Eine Beitragsgalerie (ein Raster aus Karten in 2-4 Spalten) löst das Problem effizient. Auf einen Bildschirm passen dreimal so viele Beiträge, das Auge findet Ankerpunkte, und die Klickraten steigen dank großer Vorschaubilder. Für eine Startseite, Kategorieseite oder individuelle Landingpage ist das das wirkungsvollste Format.

Nachfolgend drei Wege, eine Beitragsgalerie in WordPress zu bauen. Vom vollständig bordmittelinternen Ansatz (ohne Plugins) bis zu flexiblem Code für Entwickler. Jeder enthält konkrete Schritte, keine vagen Allgemeinplätze.

💡 Kurzüberblick:

• Wählen Sie Ihre Methode: den bordmitteleigenen Query-Loop-Block (ohne Plugins), das Post Grid-Plugin (maximale Anpassung) oder eigenen Code mit WP_Query + Lightbox (für Entwickler).
• Für Query Loop: Öffnen Sie eine Seite im Editor, fügen Sie einen Query-Loop-Block hinzu → Leer beginnen → wählen Sie eine Kartenvorlage → aktivieren Sie die Rasteransicht → konfigurieren Sie die Spalten.
• Für Post Grid: Installieren Sie das Plugin aus dem WordPress.org-Repository, erstellen Sie ein Raster unter Post Grid → Neu hinzufügen, konfigurieren Sie Abfrage und Erscheinungsbild, fügen Sie den Shortcode in eine beliebige Seite ein.
• Für eigenen Code: Fügen Sie WP_Query mit Paginierung in eine Theme-Vorlage ein, verpacken Sie die Ausgabe in ein Div-Raster mit CSS Grid, binden Sie GLightbox oder Fancybox für Popup-Fenster ein.

Methode 1: Query-Loop-Block, ohne Plugins

Seit Version 5.8 enthält der WordPress-Core den Query-Loop-Block. In WordPress 7.0 ist er ein ausgereiftes Werkzeug: ein Konstruktor, der eine Beitragsgalerie direkt im Block-Editor anzeigt. Keine Plugins, keine Shortcodes, keine Bearbeitung von Theme-Dateien.

Erstellen Sie eine neue Seite oder öffnen Sie eine bestehende, klicken Sie im Editor auf „+". Suchen Sie nach „Query Loop" und fügen Sie den Block hinzu. Er bietet mehrere fertige Layouts an; wählen Sie Leer beginnen, um eine Karte von Grund auf zu bauen.

Vor Ihnen erscheint ein Prototyp: ein einzelner Beitrag mit Vorschaubild, Titel und Datum. Nun der entscheidende Schritt: Klicken Sie in der Block-Werkzeugleiste auf das Symbol Rasteransicht (ein Raster aus Quadraten). Die Liste wird sofort in ein Raster umgewandelt. Die Spaltenanzahl konfigurieren Sie in der Seitenleiste; für die meisten Themes ist 3 optimal.

Konfigurieren Sie den Karteninhalt nach Ihren Anforderungen. Klicken Sie auf das Vorschaubild und aktivieren Sie in der Seitenleiste den Schalter Mit Beitrag verlinken; jetzt führt ein Klick auf das Bild zum Beitrag. Verfahren Sie ebenso mit dem Titel. Das Datum kann entfernt werden: darauf klicken → drei Punkte → Datum entfernen.

Weitere Einstellungen des Query Loop finden Sie in der Block-Seitenleiste: Kategorieauswahl, Sortierung (nach Datum, nach Titel, zufällig) und Anzahl der Beiträge pro Seite. Wenn Sie bestimmte Beiträge ausschließen möchten, nutzen Sie das Feld Ausschließen.

Vorteile: vollständig nativ, verlangsamt die Seite nicht, funktioniert mit jedem Block-Theme. Nachteile: keine Kategoriefilterung ohne Seitenneuladung und keine komplexen Animationen; dafür benötigen Sie ein Plugin.

Methode 2: Das Post-Grid-Plugin, maximale Flexibilität

Wenn der bordmitteleigene Query Loop nicht ausreicht und Sie Filterung, Masonry-Layout, einen Slider oder Hover-Effekte benötigen, betritt The Post Grid von RadiusTheme die Bühne. Dieses Plugin hat über 250 Bewertungen und mehr als 100.000 aktive Installationen auf WordPress.org, getestet bis Version 6.9.4.

Die Installation ist Standard: Plugins → Installieren → Suche nach „The Post Grid" → Installieren → Aktivieren. Nach der Aktivierung erscheint der Menüpunkt Post Grid → Neu hinzufügen.

Der Rastererstellungsprozess umfasst vier Schritte:

Schritt 1, Beitragsabfrage. Wählen Sie den Inhaltstyp: Beiträge, Seiten oder einen benutzerdefinierten Typ. Filtern Sie nach Kategorien, Schlagwörtern, Autoren. Sortierreihenfolge: nach Datum, Titel oder zufällig. Auch die Anzahl der Beiträge wird hier festgelegt.

Schritt 2, Layouts. Klicken Sie auf Layout erstellen und bauen Sie die Karte visuell: Tags sind verfügbar für Vorschaubilder mit und ohne Verlinkung, Titel, Datum, Autor und Auszug. Ziehen Sie die benötigten Felder auf die Arbeitsfläche und klicken Sie auf Veröffentlichen. Kehren Sie zu den Rastereinstellungen zurück und wählen Sie Ihr neu erstelltes Layout aus.

Schritt 3, Elementstil. Konfigurieren Sie Innenabstand, Rahmenradius, Schatten, Schriftarten und Farben. Auch die Spaltenanzahl für Desktop, Tablet und Mobilgerät wird hier festgelegt.

Schritt 4, Shortcode. Kopieren Sie den generierten Shortcode, öffnen Sie eine Seite im Editor, fügen Sie einen Shortcode-Block hinzu und fügen Sie den Code ein. Fertig.

Die Pro-Version ergänzt AJAX-Filterung (Leser wechseln Kategorien ohne Seitenneuladung) sowie Infinite Scroll, Masonry-Raster und Unterstützung für benutzerdefinierte Beitragstypen. Die Preise beginnen bei 49 $ pro Jahr.

Vorteile: volle Kontrolle über das Erscheinungsbild, funktioniert mit jedem Theme und Page Builder (Elementor, Divi). Nachteile: Die kostenlose Version bietet keine AJAX-Filterung und kein Masonry; das Plugin fügt CSS und JS hinzu, sodass auf sehr schlanken Seiten die Zunahme von 50-80 KB spürbar sein kann.

Methode 3: Eigener Code mit WP_Query, für Entwickler

Wenn Sie ein Theme von Grund auf neu erstellen oder ein Child-Theme anpassen, können Sie die Galerie vollständig mit Code bauen. Das ist schlanker als ein Plugin (kein einziges zusätzliches Kilobyte) und gibt Ihnen absolute Kontrolle über die HTML-Struktur.

Die folgende Vorlage ist ein minimaler funktionsfähiger Einstiegspunkt. Fügen Sie sie in eine Theme-Datei ein (zum Beispiel front-page.php in einem Child-Theme) oder über das Code-Snippets-Plugin mit einem Hook auf template_redirect:

1
<?php
2
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
3
$args  = array(
4
    'post_type'      => 'post',
5
    'posts_per_page' => 12,
6
    'paged'          => $paged,
7
    'orderby'        => 'date',
8
    'order'          => 'DESC',
9
);
10
$query = new WP_Query( $args );
11
if ( $query->have_posts() ) : ?>
12
    <div class="post-grid">
13
        <?php while ( $query->have_posts() ) : $query->the_post(); ?>
14
            <article class="post-card">
15
                <a href="<?php the_permalink(); ?>">
16
                    <?php the_post_thumbnail( 'medium_large' ); ?>
17
                    <h3><?php the_title(); ?></h3>
18
                </a>
19
                <time datetime="<?php echo get_the_date( 'c' ); ?>">
20
                    <?php echo get_the_date(); ?>
21
                </time>
22
            </article>
23
        <?php endwhile; ?>
24
    </div>
25
    <?php the_posts_pagination(); ?>
26
<?php endif; wp_reset_postdata(); ?>
27

CSS Grid, natives CSS Grid, keine Frameworks:

1
.post-grid {
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    gap: 24px;
5
}
6
@media (max-width: 768px) {
7
    .post-grid {
8
        grid-template-columns: repeat(2, 1fr);
9
    }
10
}
11
@media (max-width: 480px) {
12
    .post-grid {
13
        grid-template-columns: 1fr;
14
    }
15
}

Drei Spalten auf dem Desktop → zwei auf dem Tablet → eine auf dem Smartphone. repeat(3, 1fr) bedeutet „drei Spalten gleicher Breite", und gap: 24px legt den Abstand zwischen den Karten fest.

Für eine zufällige Galerie ersetzen Sie 'orderby' => 'date' durch 'orderby' => 'rand'. Die Abfrage mischt die Beiträge bei jedem Seitenaufruf neu, genau das, was die ursprüngliche Idee dieses Tutorials beschreibt.

Die Lightbox wird separat eingebunden. Zwei bewährte Optionen: GLightbox (kostenlos, etwa 5 KB gzipped, kein jQuery) und Fancybox 5 (MIT-Lizenz, integrierte Galerieunterstützung). Fügen Sie dem Link ein Datenattribut hinzu:

1
<a href="<?php the_post_thumbnail_url( 'full' ); ?>" class="glightbox" data-gallery="post-gallery">
2
    <?php the_post_thumbnail( 'medium_large' ); ?>
3
</a>

Initialisieren Sie GLightbox in Ihrer main.js:

1
const lightbox = GLightbox({
2
    selector: '.glightbox',
3
    touchNavigation: true,
4
    loop: true,
5
});

Dieser Ansatz liefert Ihnen eine vollständig individuelle Beitragsgalerie mit einer Lightbox, die zusätzlich zur standardmäßigen WordPress-Last unter 10 KB wiegt. Wichtig: Erstellen Sie vor der Bearbeitung von Theme-Dateien ein vollständiges Backup mit dem Duplicator-Plugin oder einem Hosting-Snapshot. Wenn Sie Code in functions.php platzieren, verwenden Sie ein Child-Theme, damit Sie Änderungen bei Updates nicht verlieren.

Sehen Sie sich ein kurzes Video an: Installation von The Post Grid in 8 Minuten, von der Suche nach dem Plugin im Repository bis zum live geschalteten Raster auf der Seite:

⁉️🤔 Häufig gestellte Fragen

Welche Methode sollte ich für einen normalen Blog wählen?

Wenn Sie ein Block-Theme haben, beginnen Sie mit Query Loop. Es ist ein bordmitteleigener Block, null Plugins und keine Verlangsamung der Seite. Für drei Spalten mit Vorschaubildern ist das mehr als ausreichend. Wechseln Sie nur dann zu einem Plugin, wenn Sie Masonry-Layout oder Filterung ohne Seitenneuladung benötigen.

Warum brauche ich eine Beitragsgalerie, wenn mein Theme bereits Beiträge anzeigt?

Ein Standard-Theme-Feed ist eine vertikale Liste. Eine Rastergalerie bringt drei- bis viermal mehr Beiträge auf den ersten Bildschirm. Dichte → höheres Engagement → niedrigere Absprungrate. Für Startseiten und individuelle Landingpages ist das entscheidend.

Funktioniert Query Loop mit klassischen Themes?

Ja, sofern das Theme den Block-Editor nicht über remove_theme_support gesperrt hat. Für sehr alte Themes, die auf Shortcodes und Widgets aufbauen, ist The Post Grid die bessere Wahl, da es mit allem über einen normalen Shortcode funktioniert.

Kann ich ein Beitragsraster mit Lightbox kostenlos erstellen?

Ja, Methode 3 ist vollständig kostenlos: WP_Query aus dem Core + CSS Grid aus dem Core + GLightbox unter der MIT-Lizenz. Null Kosten, pure Performance. Der Nachteil ist, dass Sie grundlegende PHP- und CSS-Kenntnisse benötigen.

Zerstört Query Loop meine Seite, wenn WordPress aktualisiert wird?

Nein. Query Loop ist ein nativer Core-Block; er wird mit WordPress aktualisiert und durchläuft bei jedem Release vollständige Tests. Der Parameter showposts (der alte Ansatz mit get_posts) wurde bereits in Version 3.1 als veraltet markiert, und moderne Methoden brechen bei großen Updates nicht.

Wie ändere ich die Spaltenanzahl auf Mobilgeräten?

Bei Query Loop nutzen Sie die Block-Seitenleiste unter Rastereinstellungen: Sie können für jeden Breakpoint (Desktop, Tablet, Mobil) eine andere Spaltenanzahl festlegen. Bei The Post Grid gehen Sie zum Schritt Elementstil für dieselben Breakpoints. Bei eigenem Code verwenden Sie Media Queries in CSS (wie im obigen Beispiel gezeigt).

Welche Methode Sie 2026 verwenden sollten

Für neun von zehn Seiten ist der Query-Loop-Block ausreichend. Er ist nativ, leichtgewichtig und in zwei Minuten ohne Dokumentation zusammengestellt. Wenn Sie Kategoriefilterung ohne Seitenneuladung, Masonry-Raster oder Elementor-Integration benötigen, installieren Sie The Post Grid: Über 100.000 Installationen und mehr als 250 Bewertungen auf WordPress.org sprechen für sich.

Eigener Code mit WP_Query ist die Wahl für diejenigen, die ein Theme von Grund auf neu erstellen oder eine stark frequentierte Seite betreiben, bei der jedes Kilobyte zählt. Es ist auch der einzige Weg, eine zufällige Beitragsgalerie ohne Plugins zu erhalten: 'orderby' => 'rand' in den WP_Query-Argumenten tut genau das, wofür Entwickler vor zehn Jahren noch seitenweise Code mit get_posts und selbstgebauten Lightboxen schreiben mussten.

Wählen Sie die Methode, die zu Ihrer Aufgabe passt, und machen Sie den ersten Bildschirm Ihrer Seite dicht; die Leser werden es Ihnen danken, indem sie weiterscrollen.