Tavaline blogivoog (vertikaalne postituste tulp üksteise all) töötab hästi, kui sul on kümme kirjet. Kui neid on sada, muutub vertikaalne kerimine lõputuks kerimiseks: lugejad kaotavad huvi juba kolmanda ekraanitäie juures ja vaatamissügavus kukub nulli.

Postigalerii (kaartide ruudustik 2-4 veerus) lahendab probleemi tõhusalt. Ühele ekraanile mahub kolm korda rohkem postitusi, silmal on midagi haarata ja läbiklõpsamismäärad kasvavad tänu suurtele pisipiltidele. Kodulehe, kategoorialehe või kohandatud sihtlehe jaoks on see kõige tõhusam formaat.

Allpool on kolm viisi postigalerii loomiseks WordPressis. Alates täielikult sisseehitatud lähenemisest (ilma pluginate) kuni paindliku koodini arendajatele. Igaüks sisaldab konkreetseid samme, mitte uduseid üldistusi.

💡 Kiirülevaade:

• Vali oma meetod: sisseehitatud Query Loop plokk (pole pluginaid), Post Grid plugin (maksimaalne kohandatavus) või kohandatud kood, kasutades WP_Query + lightbox (arendajatele).
• Query Loop jaoks: ava redaktoris leht, lisa Query Loop plokk → Start Blank → vali kaardi mall → luba Grid View → seadista veerud.
• Post Grid jaoks: paigalda plugin WordPress.org repositooriumist, loo ruudustik jaotises Post Grid → Add New, seadista päring ja välimus, lisa lühikood ükskõik millisele lehele.
• Kohandatud koodi jaoks: lisa teema mallile WP_Query koos lehitsemisega, mähi väljund CSS Grid abil div-ruudustikku, ühenda GLightbox või Fancybox hüpikakende jaoks.

1. Meetod: Query Loop plokk, ilma pluginate

Alates versioonist 5.8 sisaldab WordPressi tuum Query Loop plokki. Nüüd, WordPress 7.0-s, on see küps tööriist: konstruktor, mis kuvab postigalerii otse plokiredaktoris. Pole pluginaid, lühikoode ega teemafailide muutmist.

Loo uus leht või ava olemasolev, klõpsa redaktoris „+". Otsi „Query Loop" ja lisa plokk. See pakub mitut valmiskujundust; vali Start Blank, et ehitada kaart nullist.

Sinu ette ilmub prototüüp: üks postitus koos pisipildi, pealkirja ja kuupäevaga. Nüüd võtmesamm: klõpsa ploki tööriistaribal ikooni Grid View (ruutude ruudustik). Loend muutub koheselt ruudustikuks. Veergude arv seadistatakse külgribal; enamiku teemade puhul on optimaalne 3.

Seadista kaardi sisu vastavalt oma vajadustele. Klõpsa pisipildil ja luba külgribal lüliti Link to Post; nüüd viib pildil klõpsamine postituseni. Tee sama pealkirjaga. Kuupäeva saab eemaldada: klõpsa sellel → kolm punkti → Remove Date.

Täiendavad Query Loop seaded on ploki külgribal: kategooria valik, sortimine (kuupäeva, pealkirja, juhuslik) ja postituste arv lehe kohta. Kui on vaja teatud postitusi välistada, kasuta välja Exclude.

Plussid: täiesti omane, ei aeglusta saiti, töötab iga plokiteemaga. Miinused: puudub kategooriate filtreerimine ilma lehe uuesti laadimiseta ja keerukad animatsioonid; selleks on vaja pluginat.

2. Meetod: The Post Grid plugin, maksimaalne paindlikkus

Kui sisseehitatud Query Loopist ei piisa ja vajad filtreerimist, müürladu paigutust, slaiderit või hõljumisefekte, astub mängu RadiusTheme The Post Grid. Sellel pluginil on üle 250 hinnangu ja 100 000+ aktiivset paigaldust WordPress.org-is, testitud kuni versioonini 6.9.4.

Paigaldamine on standardne: Plugins → Add New → otsi „The Post Grid" → Install → Activate. Pärast aktiveerimist ilmub menüüpunkt Post Grid → Add New.

Ruudustiku loomise protsessil on neli sammu:

1. samm, Query Post. Vali sisu tüüp: postitused, lehed või kohandatud tüüp. Filtreeri kategooriate, siltide, autorite järgi. Sortimisjärjekord: kuupäeva, pealkirja või juhuslik. Siin määratakse ka postituste arv.

2. samm, Layouts. Klõpsa Create Layout ja ehita kaart visuaalselt: saadaval on sildid pisipiltide jaoks koos linkidega ja ilma, pealkiri, kuupäev, autor ja väljavõte. Lohista vajalikud väljad lõuendile ja klõpsa Publish. Naase ruudustiku seadete juurde ja vali oma äsja loodud kujundus.

3. samm, Item Style. Seadista polsterdus, ääre raadius, vari, fondid ja värvid. Siin määratakse ka veergude arv lauaarvutile, tahvlile ja mobiilile.

4. samm, Shortcode. Kopeeri loodud lühikood, ava redaktoris leht, lisa Shortcode plokk ja kleebi kood. Valmis.

Pro versioon lisab AJAX-filtreerimise (lugejad vahetavad kategooriaid ilma lehe uuesti laadimiseta), pluss lõputu kerimise, müürladu paigutuse ja kohandatud postitüüpide toe. Hind algab 49 dollarist aastas.

Plussid: täielik kontroll välimuse üle, töötab iga teema ja leheehitajaga (Elementor, Divi). Miinused: tasuta versioonil puudub AJAX-filtreerimine ja müürladu paigutus; plugin lisab CSS-i ja JS-i, nii et väga kergetel saitidel võib 50-80 KB suurenemine olla märgatav.

3. Meetod: kohandatud kood WP_Query'ga, arendajatele

Kui ehitad teemat nullist või muudad alamteemat, saad galerii ehitada täielikult koodiga. See on pluginast kergem (mitte ühtegi lisakilobaiti) ja annab sulle absoluutse kontrolli HTML-struktuuri üle.

Allolev mall on minimaalne töötav lähtepunkt. Lisa see teemafaili (näiteks front-page.php alamteemas) või Code Snippets plugina kaudu, kasutades konksu 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-ruudustik, omane CSS Grid, ilma raamistiketa:

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
}

Kolm veergu lauaarvutil → kaks tahvlil → üks telefonis. repeat(3, 1fr) tähendab „kolm võrdse laiusega veergu" ja gap: 24px määrab kaartide vahe.

Juhusliku galerii jaoks asenda 'orderby' => 'date' väärtusega 'orderby' => 'rand'. Päring segab postitusi igal lehe laadimisel, täpselt nii, nagu selle õpetuse algne idee kirjeldab.

Lightbox ühendatakse eraldi. Kaks tõestatud valikut: GLightbox (tasuta, umbes 5 KB pakitud, ei vaja jQuery't) ja Fancybox 5 (MIT litsents, sisseehitatud galeriitugi). Lisa lingile andmeatribuut:

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

Initsialiseeri GLightbox oma main.js failis:

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

See lähenemine annab sulle täielikult kohandatud postigalerii koos lightbox'iga, mis kaalub alla 10 KB lisaks tavalisele WordPressi laadimisele. Oluline: enne teemafailide muutmist tee täielik varukoopia, kasutades Duplicator pluginat või hostingu hetktõmmist. Kui paigutad koodi functions.php faili, kasuta alamteemat, et mitte kaotada muudatusi uuendamisel.

Vaata lühikest videot: The Post Grid paigaldamine 8 minutiga, alates plugina otsimisest repositooriumist kuni reaalajas ruudustikuni lehel:

⁉️🤔 Korduma kippuvad küsimused

Millise meetodi peaksin tavalise blogi jaoks valima?

Kui sul on plokiteema, alusta Query Loopiga. See on sisseehitatud plokk, null pluginaid ja saidi aeglustumist pole. Kolme veeru ja pisipiltide jaoks on see enam kui piisav. Liigu plugina juurde alles siis, kui vajad müürladu paigutust või filtreerimist ilma lehe uuesti laadimiseta.

Miks on mul postigaleriid vaja, kui minu teema juba näitab postitusi?

Tavaline teemavoog on vertikaalne loend. Ruudustikgalerii mahutab esimesele ekraanile 3-4 korda rohkem postitusi. Tihedus → suurem kaasatus → madalam põrkemäär. Kodulehtede ja kohandatud sihtlehtede jaoks on see kriitiline.

Kas Query Loop töötab klassikaliste teemadega?

Jah, kui teema pole blokeerinud plokiredaktorit remove_theme_support kaudu. Väga vanade teemade puhul, mis on ehitatud lühikoodidele ja vidinatele, on The Post Grid parem valik, kuna see töötab kõigega tavalise lühikoodi kaudu.

Kas ma saan teha postigalerii koos lightbox'iga tasuta?

Jah, 3. meetod on täiesti tasuta: WP_Query tuumast + CSS Grid tuumast + GLightbox MIT litsentsi all. Null kulu, puhas jõudlus. Puuduseks on see, et vajad algteadmisi PHP-st ja CSS-ist.

Kas Query Loop lõhub minu saidi, kui WordPress uueneb?

Ei. Query Loop on omane tuumikplokk; see uueneb koos WordPressiga ja läbib täieliku testimise igas väljalaskes. Parameeter showposts (vana lähenemine get_posts'iga) aegus juba versioonis 3.1 ja kaasaegsed meetodid ei purune suuremate uuenduste käigus.

Kuidas muuta veergude arvu mobiilis?

Query Loopis kasuta ploki külgriba jaotises Grid Settings: saad määrata erineva veergude arvu igale murdepunktile (lauaarvuti, tahvel, mobiil). The Post Gridis mine samade murdepunktide jaoks sammu Item Style juurde. Kohandatud koodis kasuta CSS-is meediapäringuid (nagu ülaltoodud näites näidatud).

Millist meetodit kasutada aastal 2026

Üheksa saidi jaoks kümnest on Query Loop plokk piisav. See on omane, kerge ja kokkupandav kahe minutiga ilma dokumentatsioonita. Kui vajad kategooriate filtreerimist ilma lehe uuesti laadimiseta, müürladu paigutust või Elementori integratsiooni, paigalda The Post Grid: 100 000+ paigaldust ja üle 250 hinnangu WordPress.org-is räägivad enda eest.

Kohandatud kood WP_Query'ga on valik neile, kes ehitavad teemat nullist või haldavad suure koormusega saiti, kus iga kilobait loeb. See on ka ainus viis saada juhuslik postigalerii ilma pluginate: 'orderby' => 'rand' WP_Query argumentides teeb täpselt seda, mille jaoks arendajad kümme aastat tagasi kirjutasid lehekülgede kaupa koodi, kasutades get_posts ja isetehtud lightbox'e.

Vali oma ülesandele sobiv meetod ja muuda oma saidi esimene ekraan tihedaks; lugejad tänavad sind allapoole kerides.