En standard bloggfeed (en vertikal kolonne med innlegg, ett under det andre) fungerer fint når du har ti oppføringer. Når du har hundre, blir vertikal rulling til en endeløs scrolling: leserne mister interessen innen tredje skjermbilde, og visningsdybden faller til null.

Et innleggsgalleri (et rutenett med kort i 2-4 kolonner) løser problemet effektivt. Ett enkelt skjermbilde rommer tre ganger så mange innlegg, øyet får noe å feste seg ved, og klikkraten øker takket være store miniatyrbilder. For en hjemmeside, kategoriside eller tilpasset landingsside er dette det mest effektive formatet.

Nedenfor finner du tre måter å bygge et innleggsgalleri i WordPress på. Fra en fullstendig innebygd tilnærming (ingen utvidelser) til fleksibel kode for utviklere. Hver av dem inneholder konkrete trinn, ingen vage generaliseringer.

💡 Rask oversikt:

• Velg metode: den innebygde Query Loop-blokken (ingen utvidelser), utvidelsen Post Grid (maksimal tilpasning) eller egendefinert kode med WP_Query + lightbox (for utviklere).
• For Query Loop: åpne en side i redigeringsverktøyet, legg til en Query Loop-blokk → Start tomt → velg en kortmal → aktiver rutenettvisning → konfigurer kolonner.
• For Post Grid: installer utvidelsen fra WordPress.org-repositoriet, opprett et rutenett i Post Grid → Legg til nytt, konfigurer spørring og utseende, sett inn kortkoden på en side.
• For egendefinert kode: legg til WP_Query med paginering i en temamal, pakk utdataene inn i et div-rutenett med CSS Grid, koble til GLightbox eller Fancybox for popup-vinduer.

Metode 1: Query Loop-blokk, ingen utvidelser

Siden versjon 5.8 har WordPress-kjernen inkludert Query Loop-blokken. Nå, i WordPress 7.0, er den et modent verktøy: en konstruktør som viser et innleggsrutenett direkte i blokkredigeringsverktøyet. Ingen utvidelser, kortkoder eller redigering av temafiler.

Opprett en ny side eller åpne en eksisterende, klikk på "+" i redigeringsverktøyet. Finn «Query Loop» og legg til blokken. Den vil tilby flere ferdige oppsett; velg Start tomt for å bygge et kort fra bunnen av.

En prototype vil dukke opp foran deg: et enkelt innlegg med miniatyrbilde, tittel og dato. Nå kommer nøkkeltrinnet: på blokkverktøylinjen klikker du på ikonet for Rutenettvisning (et rutenett av firkanter). Listen blir umiddelbart omgjort til et rutenett. Antall kolonner konfigureres i sidepanelet; for de fleste temaer er 3 optimalt.

Konfigurer kortinnholdet etter dine behov. Klikk på miniatyrbildet og aktiver bryteren Lenke til innlegg i sidepanelet; nå fører et klikk på bildet til innlegget. Gjør det samme for tittelen. Datoen kan fjernes: klikk på den → tre prikker → Fjern dato.

Ytterligere innstillinger for Query Loop finnes i blokkens sidepanel: kategorivalg, sortering (etter dato, tittel, tilfeldig) og antall innlegg per side. Hvis du trenger å ekskludere visse innlegg, bruk feltet Ekskluder.

Fordeler: helt innebygd, gjør ikke nettstedet tregere, fungerer med ethvert blokktema. Ulemper: ingen kategorifiltrering uten sidelasting og ingen komplekse animasjoner; til det trenger du en utvidelse.

Metode 2: Utvidelsen Post Grid, maksimal fleksibilitet

Når den innebygde Query Loop ikke er nok og du trenger filtrering, masonry-oppsett, en slider eller hover-effekter, kommer The Post Grid fra RadiusTheme på banen. Denne utvidelsen har over 250 vurderinger og 100 000+ aktive installasjoner på WordPress.org, testet opp til versjon 6.9.4.

Installasjonen er standard: Utvidelser → Legg til ny → søk «The Post Grid» → Installer → Aktiver. Etter aktivering dukker menyvalget Post Grid → Legg til ny opp.

Prosessen med å opprette rutenett har fire trinn:

Trinn 1, Spørring innlegg. Velg innholdstype: innlegg, sider eller en egendefinert type. Filtrer etter kategorier, stikkord, forfattere. Sorteringsrekkefølge: etter dato, tittel eller tilfeldig. Antall innlegg angis også her.

Trinn 2, Oppsett. Klikk på Opprett oppsett og bygg kortet visuelt: tagger er tilgjengelige for miniatyrbilder med og uten lenker, tittel, dato, forfatter og utdrag. Dra de nødvendige feltene til lerretet og klikk Publiser. Gå tilbake til rutenettinnstillingene og velg det nyopprettede oppsettet ditt.

Trinn 3, Elementstil. Konfigurer polstring, kantradius, skygge, fonter og farger. Antall kolonner for desktop, nettbrett og mobil angis også her.

Trinn 4, Kortkode. Kopier den genererte kortkoden, åpne en side i redigeringsverktøyet, legg til en Kortkode-blokk og lim inn koden. Ferdig.

Pro-versjonen legger til AJAX-filtrering (lesere bytter kategori uten sidelasting), pluss uendelig rulling, masonry-rutenett og støtte for egendefinerte innleggstyper. Prisen starter på $49 per år.

Fordeler: full kontroll over utseendet, fungerer med ethvert tema og sidebyggere (Elementor, Divi). Ulemper: gratisversjonen mangler AJAX-filtrering og masonry; utvidelsen legger til CSS og JS, så på svært lette nettsteder kan økningen på 50-80 KB være merkbar.

Metode 3: egendefinert kode med WP_Query, for utviklere

Hvis du bygger et tema fra bunnen av eller endrer et child theme, kan du bygge galleriet helt med kode. Dette er lettere enn en utvidelse (ikke en eneste ekstra kilobyte) og gir deg absolutt kontroll over HTML-strukturen.

Malen nedenfor er et minimalt, fungerende utgangspunkt. Legg den til i en temafil (for eksempel front-page.php i et child theme) eller via utvidelsen 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 grid, innebygd CSS Grid, ingen rammeverk:

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 kolonner på desktop → to på nettbrett → én på mobil. repeat(3, 1fr) betyr «tre kolonner med lik bredde», og gap: 24px angir avstanden mellom kortene.

For et tilfeldig galleri, erstatt 'orderby' => 'date' med 'orderby' => 'rand'. Spørringen stokker innleggene ved hver sideinnlasting, akkurat det den opprinnelige ideen til denne veiledningen beskriver.

Lightboxen kobles til separat. To velprøvde alternativer: GLightbox (gratis, rundt 5 KB gzippet, ingen jQuery) og Fancybox 5 (MIT-lisens, innebygd galleristøtte). Legg til et data-attributt i lenken:

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

Initialiser GLightbox i din main.js:

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

Denne tilnærmingen gir deg et fullstendig tilpasset innleggsgalleri med en lightbox som veier under 10 KB på toppen av standard WordPress-last. Viktig: før du redigerer temafiler, ta en full sikkerhetskopi med utvidelsen Duplicator eller et øyeblikksbilde fra hostingen. Hvis du plasserer kode i functions.php, bruk et child theme slik at du ikke mister endringer ved oppdatering.

Se en kort video: installering av The Post Grid på 8 minutter, fra søk etter utvidelsen i repositoriet til et levende rutenett på siden:

⁉️🤔 Ofte stilte spørsmål

Hvilken metode bør jeg velge for en vanlig blogg?

Hvis du har et blokktema, start med Query Loop. Det er en innebygd blokk, null utvidelser og ingen nedbremsing av nettstedet. For tre kolonner med miniatyrbilder er det mer enn nok. Gå over til en utvidelse bare når du trenger masonry-oppsett eller filtrering uten sidelasting.

Hvorfor trenger jeg et innleggsgalleri når temaet mitt allerede viser innlegg?

En standard temafeed er en vertikal liste. Et rutenettgalleri får plass til 3-4 ganger flere innlegg på første skjermbilde. Tetthet → høyere engasjement → lavere fluktfrekvens. For hjemmesider og tilpassede landingssider er dette kritisk.

Fungerer Query Loop med klassiske temaer?

Ja, hvis temaet ikke har blokkert blokkredigeringsverktøyet via remove_theme_support. For svært gamle temaer bygget på kortkoder og widgeter er The Post Grid et bedre valg, siden det fungerer med alt gjennom en vanlig kortkode.

Kan jeg lage et innleggsrutenett med lightbox gratis?

Ja, metode 3 er helt gratis: WP_Query fra kjernen + CSS Grid fra kjernen + GLightbox under MIT-lisensen. Null kostnad, ren ytelse. Ulempen er at du trenger grunnleggende kunnskaper i PHP og CSS.

Vil Query Loop ødelegge nettstedet mitt når WordPress oppdateres?

Nei. Query Loop er en innebygd kjerneblokk; den oppdateres med WordPress og gjennomgår full testing i hver utgivelse. Parameteren showposts (den gamle tilnærmingen med get_posts) ble avviklet allerede i versjon 3.1, og moderne metoder ødelegges ikke under større oppdateringer.

Hvordan endrer jeg antall kolonner på mobil?

I Query Loop bruker du blokkens sidepanel under Rutenettinnstillinger: du kan angi et annet antall kolonner for hvert brytningspunkt (desktop, nettbrett, mobil). I The Post Grid går du til trinnet Elementstil for de samme brytningspunktene. I egendefinert kode bruker du media queries i CSS (som vist i eksemplet over).

Hvilken metode du bør bruke i 2026

For ni av ti nettsteder er Query Loop-blokken tilstrekkelig. Den er innebygd, lett og kan settes sammen på to minutter uten dokumentasjon. Hvis du trenger kategorifiltrering uten sidelasting, masonry-rutenett eller Elementor-integrasjon, installer The Post Grid: 100 000+ installasjoner og over 250 vurderinger på WordPress.org taler for seg selv.

Egendefinert kode med WP_Query er valget for dem som bygger et tema fra bunnen av eller vedlikeholder et nettsted med høy belastning der hver kilobyte teller. Det er også den eneste måten å få et tilfeldig innleggsgalleri uten utvidelser: 'orderby' => 'rand' i WP_Query-argumentene gjør nøyaktig det utviklere pleide å skrive sider med kode for for ti år siden ved hjelp av get_posts og hjemmelagde lightboxer.

Velg metoden som passer din oppgave og gjør det første skjermbildet på nettstedet ditt tettpakket; leserne vil takke deg ved å rulle nedover.