Tavallinen blogisyöte (pystysuora postauspylväs, yksi toisensa alla) toimii hyvin, kun sinulla on kymmenen merkintää. Kun sinulla on sata, pystysuorasta vierityksestä tulee loputonta: lukijat menettävät kiinnostuksensa kolmannen ruudun kohdalla ja katselusyvyys putoaa nollaan.

Postausgalleria (korttiruudukko 2-4 palstalla) ratkaisee ongelman tehokkaasti. Yhdelle ruudulle mahtuu kolme kertaa enemmän postauksia, silmällä on jotain tarttumapintaa ja klikkausprosentit kasvavat suurten pikkukuvien ansiosta. Kotisivulle, kategoriasivulle tai räätälöidylle laskeutumissivulle tämä on tehokkain muoto.

Alla on kolme tapaa rakentaa postausgalleria WordPressissä. Täysin sisäänrakennetusta lähestymistavasta (ei lisäosia) joustavaan koodiin kehittäjille. Jokainen sisältää tarkat vaiheet, ei epämääräisiä yleistyksiä.

💡 Pikakatsaus:

• Valitse menetelmäsi: sisäänrakennettu Query Loop -lohko (ei lisäosia), Post Grid -lisäosa (maksimaalinen muokkaus) tai räätälöity koodi käyttäen WP_Querya ja lightboxia (kehittäjille).
• Query Loop: avaa sivu editorissa, lisää Query Loop -lohko → Aloita tyhjästä → valitse korttipohja → ota käyttöön ruudukkonäkymä → määritä palstat.
• Post Grid: asenna lisäosa WordPress.orgin arkistosta, luo ruudukko kohdassa Post Grid → Add New, määritä kysely ja ulkoasu, lisää shortcode mille tahansa sivulle.
• Räätälöity koodi: lisää WP_Query ja sivutus teemapohjaan, kääri tulos div-ruudukkoon CSS Gridiä käyttäen, yhdistä GLightbox tai Fancybox ponnahdusikkunoita varten.

Tapa 1: Query Loop -lohko, ei lisäosia

Versiosta 5.8 lähtien WordPressin ydin on sisältänyt Query Loop -lohkon. Nyt WordPress 7.0:ssa se on kypsä työkalu: konstruktori, joka näyttää postausruudukon suoraan lohkoeditorissa. Ei lisäosia, ei shortcodeja, ei teematiedostojen muokkauksia.

Luo uusi sivu tai avaa olemassa oleva, klikkaa "+" editorissa. Etsi "Query Loop" ja lisää lohko. Se tarjoaa useita valmiita asetteluja; valitse Aloita tyhjästä rakentaaksesi kortin alusta alkaen.

Eteesi ilmestyy prototyyppi: yksittäinen postaus, jossa on pikkukuva, otsikko ja päivämäärä. Nyt avainvaihe: klikkaa lohkon työkalupalkista Ruudukkonäkymä-kuvaketta (neliöruudukko). Lista muuttuu välittömästi ruudukoksi. Palstojen määrä määritetään sivupalkissa; useimmille teemoille 3 on optimaalinen.

Määritä kortin sisältö tarpeidesi mukaan. Klikkaa pikkukuvaa ja ota sivupalkissa käyttöön Linkitä postaukseen -kytkin; nyt kuvan klikkaaminen johtaa postaukseen. Tee sama otsikolle. Päivämäärän voi poistaa: klikkaa sitä → kolme pistettä → Poista päivämäärä.

Query Loopin lisäasetukset ovat lohkon sivupalkissa: kategorian valinta, lajittelu (päivämäärän, otsikon mukaan, satunnainen) ja postausten määrä sivua kohden. Jos haluat sulkea pois tiettyjä postauksia, käytä Poissulje-kenttää.

Plussat: täysin natiivi, ei hidasta sivustoa, toimii minkä tahansa lohkoteeman kanssa. Miinukset: ei kategoriafiltteröintiä ilman sivun uudelleenlatausta eikä monimutkaisia animaatioita; sitä varten tarvitset lisäosan.

Tapa 2: Post Grid -lisäosa, maksimaalinen joustavuus

Kun sisäänrakennettu Query Loop ei riitä ja tarvitset suodatusta, masonry-asettelua, liukusäädintä tai hover-efektejä, The Post Grid RadiusThemeltä astuu kuvaan. Tällä lisäosalla on yli 250 arviota ja 100 000+ aktiivista asennusta WordPress.orgissa, testattu versioon 6.9.4 asti.

Asennus on vakio: Lisäosat → Lisää uusi → haku "The Post Grid" → Asenna → Ota käyttöön. Aktivoinnin jälkeen Post Grid → Add New -valikkokohta ilmestyy.

Ruudukon luontiprosessissa on neljä vaihetta:

Vaihe 1, Query Post. Valitse sisältötyyppi: postaukset, sivut tai mukautettu tyyppi. Suodata kategorioiden, avainsanojen, kirjoittajien mukaan. Lajittelujärjestys: päivämäärän, otsikon mukaan tai satunnainen. Postausten määrä asetetaan myös täällä.

Vaihe 2, Layouts. Klikkaa Create Layout ja rakenna kortti visuaalisesti: tagit ovat saatavilla pikkukuville linkeillä ja ilman, otsikolle, päivämäärälle, kirjoittajalle ja katkelmalle. Vedä tarvittavat kentät työalustalle ja klikkaa Publish. Palaa ruudukon asetuksiin ja valitse juuri luomasi asettelu.

Vaihe 3, Item Style. Määritä täyte, reunuksen pyöristys, varjo, fontit ja värit. Palstojen määrä työpöydälle, tabletille ja mobiilille asetetaan myös täällä.

Vaihe 4, Shortcode. Kopioi luotu shortcode, avaa sivu editorissa, lisää Shortcode-lohko ja liitä koodi. Valmis.

Pro-versio lisää AJAX-suodatuksen (lukijat vaihtavat kategorioita ilman sivun uudelleenlatausta) sekä loputtoman vierityksen, masonry-ruudukon ja mukautettujen postaustyyppien tuen. Hinnoittelu alkaa 49 dollarista vuodessa.

Plussat: täysi hallinta ulkoasusta, toimii minkä tahansa teeman ja sivunrakentajan (Elementor, Divi) kanssa. Miinukset: ilmaisversiosta puuttuu AJAX-suodatus ja masonry; lisäosa lisää CSS:ää ja JS:ää, joten erittäin kevyillä sivustoilla 50-80 kt:n lisäys voi olla havaittava.

Tapa 3: räätälöity koodi WP_Querylla, kehittäjille

Jos rakennat teemaa alusta alkaen tai muokkaat lapsiteemaa, voit rakentaa gallerian kokonaan koodilla. Tämä on lisäosaa kevyempi (ei yhtään ylimääräistä kilotavua) ja antaa sinulle ehdottoman hallinnan HTML-rakenteesta.

Alla oleva pohja on minimaalinen toimiva lähtökohta. Lisää se teematiedostoon (esimerkiksi front-page.php lapsiteemassa) tai Code Snippets -lisäosan kautta koukulla 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, natiivi CSS Grid, ei kehyksiä:

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
}

Kolme palstaa työpöydällä → kaksi tabletilla → yksi puhelimella. repeat(3, 1fr) tarkoittaa "kolme yhtä leveää palstaa", ja gap: 24px asettaa korttien välisen etäisyyden.

Satunnaista galleriaa varten korvaa 'orderby' => 'date' arvolla 'orderby' => 'rand'. Kysely sekoittaa postaukset jokaisella sivun latauksella, juuri sitä mitä tämän oppaan alkuperäinen idea kuvaa.

Lightbox yhdistetään erikseen. Kaksi testattua vaihtoehtoa: GLightbox (ilmainen, noin 5 kt gzipattuna, ei jQuerya) ja Fancybox 5 (MIT-lisenssi, sisäänrakennettu galleriatuki). Lisää data-attribuutti linkkiin:

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

Alusta GLightbox main.js-tiedostossasi:

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

Tämä lähestymistapa antaa sinulle täysin räätälöidyn postausgallerian lightboxilla, joka painaa alle 10 kt tavallisen WordPress-kuorman päälle. Tärkeää: ennen teematiedostojen muokkaamista tee täysi varmuuskopio käyttäen Duplicator-lisäosaa tai palveluntarjoajan tilannekuvaa. Jos sijoitat koodia functions.php-tiedostoon, käytä lapsiteemaa, jotta et menetä muutoksia päivityksen yhteydessä.

Katso lyhyt video: The Post Gridin asennus 8 minuutissa, lisäosan etsimisestä arkistosta valmiiseen ruudukkoon sivulla:

⁉️🤔 Usein kysytyt kysymykset

Mikä menetelmä minun pitäisi valita tavalliselle blogille?

Jos sinulla on lohkoteema, aloita Query Loopista. Se on sisäänrakennettu lohko, ei lisäosia eikä sivuston hidastumista. Kolmelle palstalle pikkukuvilla se on enemmän kuin tarpeeksi. Siirry lisäosaan vasta, kun tarvitset masonry-asettelua tai suodatusta ilman sivun uudelleenlatausta.

Miksi tarvitsen postausgallerian, jos teemani näyttää jo postaukset?

Tavallinen teemasyöte on pystysuora lista. Ruudukkogalleriaan mahtuu 3-4 kertaa enemmän postauksia ensimmäiselle ruudulle. Tiheys → korkeampi sitoutuminen → matalampi välitön poistumisprosentti. Kotisivuille ja räätälöidyille laskeutumissivuille tämä on kriittistä.

Toimiiko Query Loop klassisten teemojen kanssa?

Kyllä, jos teema ei ole estänyt lohkoeditoria remove_theme_support-funktiolla. Hyvin vanhoille teemoille, jotka on rakennettu shortcodejen ja widgettien varaan, The Post Grid on parempi valinta, koska se toimii minkä tahansa kanssa tavallisen shortcoden kautta.

Voinko tehdä postausruudukon lightboxilla ilmaiseksi?

Kyllä, tapa 3 on täysin ilmainen: WP_Query ytimestä + CSS Grid ytimestä + GLightbox MIT-lisenssillä. Ei kustannuksia, puhdasta suorituskykyä. Haittapuolena on, että tarvitset perustiedot PHP:stä ja CSS:stä.

Rikkooko Query Loop sivustoni, kun WordPress päivittyy?

Ei. Query Loop on natiivi ydinlohko; se päivittyy WordPressin mukana ja käy läpi täyden testauksen jokaisessa julkaisussa. showposts-parametri (vanha lähestymistapa get_posts-funktiolla) merkittiin vanhentuneeksi jo versiossa 3.1, ja nykyaikaiset menetelmät eivät hajoa suurten päivitysten yhteydessä.

Miten vaihdan palstojen määrää mobiilissa?

Query Loopissa käytä lohkon sivupalkkia Grid Settings -kohdassa: voit asettaa eri palstamäärän kullekin taitekohdalle (työpöytä, tabletti, mobiili). The Post Gridissä mene Item Style -vaiheeseen samoja taitekohtia varten. Räätälöidyssä koodissa käytä media queryjä CSS:ssä (kuten yllä olevassa esimerkissä näytetään).

Mitä menetelmää käyttää vuonna 2026

Yhdeksälle kymmenestä sivustosta Query Loop -lohko on riittävä. Se on natiivi, kevyt ja sen voi koota kahdessa minuutissa ilman dokumentaatiota. Jos tarvitset kategoriafiltteröintiä ilman sivun uudelleenlatausta, masonry-ruudukkoa tai Elementor-integraatiota, asenna The Post Grid: 100 000+ asennusta ja yli 250 arviota WordPress.orgissa puhuvat puolestaan.

Räätälöity koodi WP_Querylla on valinta niille, jotka rakentavat teemaa alusta alkaen tai ylläpitävät korkean kuormituksen sivustoa, jossa jokaisella kilotavulla on merkitystä. Se on myös ainoa tapa saada satunnainen postausgalleria ilman lisäosia: 'orderby' => 'rand' WP_Queryn argumenteissa tekee täsmälleen sen, mitä kehittäjät kirjoittivat sivukaupalla koodia kymmenen vuotta sitten käyttäen get_posts-funktiota ja kotitekoisia lightboxeja.

Valitse tehtävääsi sopiva menetelmä ja tee sivustosi ensimmäisestä ruudusta tiheä; lukijat kiittävät sinua vierittämällä alaspäin.