Ett standard bloggflöde (en vertikal kolumn med inlägg, ett under det andra) fungerar bra när du har tio inlägg. När du har hundra förvandlas vertikal scrollning till en oändlig scroll: läsarna tappar intresset vid tredje skärmen, och visningsdjupet sjunker till noll.

Ett inläggsgalleri (ett rutnät av kort i 2-4 kolumner) löser problemet effektivt. En enda skärm rymmer tre gånger så många inlägg, ögat får något att fästa vid, och klickfrekvensen ökar tack vare stora miniatyrbilder. För en startsida, kategorisida eller anpassad landningssida är detta det mest effektiva formatet.

Här är tre sätt att bygga ett inläggsgalleri i WordPress. Från en helt inbyggd metod (inga tillägg) till flexibel kod för utvecklare. Varje metod innehåller specifika steg, inga vaga allmänningar.

💡 Snabb översikt:

• Välj din metod: det inbyggda Query Loop-blocket (inga tillägg), tillägget Post Grid (maximal anpassning) eller anpassad kod med WP_Query + lightbox (för utvecklare).
• För Query Loop: öppna en sida i redigeraren, lägg till ett Query Loop-block → Starta tomt → välj en kortmall → aktivera rutnätsvy → konfigurera kolumner.
• För Post Grid: installera tillägget från WordPress.orgs tilläggsarkiv, skapa ett rutnät i Post Grid → Lägg till nytt, konfigurera frågan och utseendet, infoga kortkoden på valfri sida.
• För anpassad kod: lägg till WP_Query med paginering i en temamall, slå in utdatan i ett div-rutnät med CSS Grid, anslut GLightbox eller Fancybox för popup-fönster.

Metod 1: Query Loop-blocket, inga tillägg

Sedan version 5.8 innehåller WordPress kärna Query Loop-blocket. Nu, i WordPress 7.0, är det ett moget verktyg: en konstruktör som visar ett inläggsgalleri direkt i blockredigeraren. Inga tillägg, kortkoder eller redigeringar av temafiler.

Skapa en ny sida eller öppna en befintlig, klicka på "+" i redigeraren. Sök efter "Query Loop" och lägg till blocket. Det kommer att erbjuda flera färdiga layouter; välj Starta tomt för att bygga ett kort från grunden.

En prototyp visas framför dig: ett enskilt inlägg med en miniatyrbild, titel och datum. Nu kommer det viktigaste steget: i blockets verktygsfält klickar du på ikonen Rutnätsvy (ett rutnät av kvadrater). Listan förvandlas omedelbart till ett rutnät. Antalet kolumner konfigureras i sidofältet; för de flesta teman är 3 optimalt.

Konfigurera kortinnehållet efter dina behov. Klicka på miniatyrbilden och aktivera växeln Länka till inlägg i sidofältet; nu leder ett klick på bilden till inlägget. Gör samma sak för titeln. Datumet kan tas bort: klicka på det → tre punkter → Ta bort datum.

Ytterligare inställningar för Query Loop finns i blockets sidofält: kategorival, sortering (efter datum, efter titel, slumpmässigt) och antal inlägg per sida. Om du behöver exkludera vissa inlägg använder du fältet Exkludera.

Fördelar: helt inbyggt, saktar inte ner webbplatsen, fungerar med alla blockteman. Nackdelar: ingen kategorifiltrering utan sidomladdning och inga komplexa animationer; för det behöver du ett tillägg.

Metod 2: Tillägget Post Grid, maximal flexibilitet

När det inbyggda Query Loop inte räcker till och du behöver filtrering, masonry-layout, en slider eller hover-effekter tar The Post Grid av RadiusTheme över. Detta tillägg har över 250 betyg och 100 000+ aktiva installationer på WordPress.org, testat upp till version 6.9.4.

Installationen är standard: Tillägg → Lägg till nytt → sök "The Post Grid" → Installera → Aktivera. Efter aktivering visas ett menyval för Post Grid → Lägg till nytt.

Processen för att skapa rutnätet har fyra steg:

Steg 1, Query Post. Välj innehållstyp: inlägg, sidor eller en anpassad typ. Filtrera efter kategorier, taggar, författare. Sorteringsordning: efter datum, titel eller slumpmässigt. Antalet inlägg ställs också in här.

Steg 2, Layouter. Klicka på Skapa layout och bygg kortet visuellt: taggar finns tillgängliga för miniatyrer med och utan länkar, titel, datum, författare och utdrag. Dra de nödvändiga fälten till arbetsytan och klicka på Publicera. Återgå till rutnätsinställningarna och välj din nyskapade layout.

Steg 3, Objektstil. Konfigurera utfyllnad, kantradie, skugga, typsnitt och färger. Antalet kolumner för dator, surfplatta och mobil ställs också in här.

Steg 4, Kortkod. Kopiera den genererade kortkoden, öppna en sida i redigeraren, lägg till ett Kortkod-block och klistra in koden. Klart.

Pro-versionen lägger till AJAX-filtrering (läsare byter kategori utan sidomladdning), plus oändlig scroll, masonry-rutnät och stöd för anpassade inläggstyper. Priset börjar på $49 per år.

Fördelar: full kontroll över utseendet, fungerar med alla teman och sidbyggare (Elementor, Divi). Nackdelar: gratisversionen saknar AJAX-filtrering och masonry; tillägget lägger till CSS och JS, så på mycket lätta webbplatser kan ökningen på 50-80 KB vara märkbar.

Metod 3: anpassad kod med WP_Query, för utvecklare

Om du bygger ett tema från grunden eller modifierar ett barntema kan du bygga galleriet helt med kod. Detta är lättare än ett tillägg (inte ett enda extra kilobyte) och ger dig absolut kontroll över HTML-strukturen.

Mallen nedan är en minimal fungerande startpunkt. Lägg till den i en temafil (till exempel front-page.php i ett barntema) eller via tillägget Code Snippets med en hook på 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-rutnät, inbyggt CSS Grid, inga ramverk:

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
}

Tre kolumner på dator → två på surfplatta → en på mobil. repeat(3, 1fr) betyder "tre kolumner med lika bredd", och gap: 24px sätter avståndet mellan korten.

För ett slumpmässigt galleri, ersätt 'orderby' => 'date' med 'orderby' => 'rand'. Frågan blandar inläggen vid varje sidladdning, precis vad den ursprungliga idén för denna handledning beskriver.

Lightboxen ansluts separat. Två beprövade alternativ: GLightbox (gratis, cirka 5 KB gzippat, ingen jQuery) och Fancybox 5 (MIT-licens, inbyggt galleristöd). Lägg till ett data-attribut till länken:

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

Initiera GLightbox i din main.js:

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

Detta tillvägagångssätt ger dig ett helt anpassat inläggsgalleri med en lightbox som väger under 10 KB utöver den vanliga WordPress-lasten. Viktigt: innan du redigerar temafiler, gör en fullständig säkerhetskopia med tillägget Duplicator eller en ögonblicksbild från webbhotellet. Om du placerar kod i functions.php, använd ett barntema så att du inte förlorar ändringar vid uppdatering.

Se en kort video: installera The Post Grid på 8 minuter, från att söka efter tillägget i arkivet till ett live-rutnät på sidan:

⁉️🤔 Vanliga frågor

Vilken metod ska jag välja för en vanlig blogg?

Om du har ett blocktema, börja med Query Loop. Det är ett inbyggt block, noll tillägg och ingen nedbromsning av webbplatsen. För tre kolumner med miniatyrer är det mer än tillräckligt. Gå över till ett tillägg endast när du behöver masonry-layout eller filtrering utan sidomladdning.

Varför behöver jag ett inläggsgalleri om mitt tema redan visar inlägg?

Ett standardtemaflöde är en vertikal lista. Ett rutnätsgalleri rymmer 3-4 gånger fler inlägg på den första skärmen. Täthet → högre engagemang → lägre avvisningsfrekvens. För startsidor och anpassade landningssidor är detta avgörande.

Fungerar Query Loop med klassiska teman?

Ja, om temat inte har blockerat blockredigeraren via remove_theme_support. För mycket gamla teman byggda på kortkoder och widgetar är The Post Grid ett bättre val eftersom det fungerar med allt via en vanlig kortkod.

Kan jag skapa ett inläggsgalleri med en lightbox gratis?

Ja, metod 3 är helt gratis: WP_Query från kärnan + CSS Grid från kärnan + GLightbox under MIT-licens. Noll kostnad, ren prestanda. Nackdelen är att du behöver grundläggande kunskaper i PHP och CSS.

Kommer Query Loop att förstöra min webbplats när WordPress uppdateras?

Nej. Query Loop är ett inbyggt kärnblock; det uppdateras med WordPress och genomgår fullständig testning i varje release. Parametern showposts (den gamla metoden med get_posts) avvecklades redan i version 3.1, och moderna metoder går inte sönder under större uppdateringar.

Hur ändrar jag antalet kolumner på mobilen?

I Query Loop använder du blockets sidofält under Rutnätsinställningar: du kan ställa in olika kolumnantal för varje brytpunkt (dator, surfplatta, mobil). I The Post Grid går du till steget Objektstil för samma brytpunkter. I anpassad kod använder du media queries i CSS (som visas i exemplet ovan).

Vilken metod du ska använda 2026

För nio av tio webbplatser räcker Query Loop-blocket. Det är inbyggt, lättviktigt och kan sättas ihop på två minuter utan dokumentation. Om du behöver kategorifiltrering utan sidomladdning, masonry-rutnät eller Elementor-integration, installera The Post Grid: 100 000+ installationer och över 250 betyg på WordPress.org talar för sig själva.

Anpassad kod med WP_Query är valet för dem som bygger ett tema från grunden eller underhåller en högtrafikerad webbplats där varje kilobyte räknas. Det är också det enda sättet att få ett slumpmässigt inläggsgalleri utan tillägg: 'orderby' => 'rand' i WP_Query-argumenten gör exakt det som utvecklare brukade skriva sidor med kod för för tio år sedan med get_posts och hemmagjorda lightboxar.

Välj den metod som passar din uppgift och gör den första skärmen på din webbplats tät; läsarna kommer att tacka dig genom att scrolla neråt.