Cum se creează un afișaj Grid de miniaturi post în temele WordPress

Când creați design-uri de site-uri WordPress, ați avut vreodată dorința de a crea o afișare a posturilor? Amplasarea rețelei funcționează excelent pentru site-uri media centrice, cum ar fi galeria noastră WordPress sau un alt tip de site tip preview. Cadrele tematice cum ar fi Genesis au deja un sistem pre-construit de buclă Grid. Cu toate acestea, dacă încercați să faceți o afișare a grilajului în tema personalizată WordPress, atunci suntem aici pentru a vă ajuta. În acest articol, vă vom arăta cum să creați un afișaj cu buclă de grilă a miniaturilor post în tema WordPress.

Notă: trebuie să aveți o înțelegere corectă a CSS și a modului în care lucrează buclele WordPress.

Înainte de a începe, permiteți să aruncați o privire la ceea ce încercăm să realizăm:

Dacă observați, postările din această pagină sunt afișate într-o rețea. Există o margine pe posturile de pe partea stângă, dar nu pe partea dreaptă. Cu o bucla postala normala, toate posturile urmeaza acelasi stil, deci veti avea o margine dreapta pe ambele posturi care ar arata ciudat. De asemenea, observați, spațiile sunt destul de simetrice. Care din nou nu este posibil cu buclă normală de făcut pentru a face ceva de genul asta. Acum, că puteți vedea ceea ce încercăm să realizăm, permiteți să aruncați o privire asupra modului de realizare a acesteia.

Primul lucru pe care trebuie să-l faceți este să vă asigurați că tema dvs. conține miniaturi WordPress postate. De asemenea, trebuie să vă gândiți la modul în care doriți să redimensionați imaginile WordPress, deoarece veți avea nevoie de ele.

Odată ce ați instalat miniaturile și dimensiunile, permiteți începerea acestui lucru. Permiteți configurarea interogărilor din buclă:

Codul de mai sus pare destul de drept, deoarece am făcut comentarii inline. Un lucru pe care probabil că ar trebui să îl editați este variabila posts_per_page pentru a se potrivi nevoilor dvs. De asemenea, puteți adăuga alți parametri de interogare dacă doriți. Acum, când am început să introducem bucla, permiteți-i să vedem cum vrem să afișăm posturile din interiorul acesteia.

Începem codul, verificând dacă numărul de contoare este 1, ceea ce înseamnă să ne arătăm grila stângă. Pur și simplu mergem și începem un div cu o clasă css personalizată "griditemleft". În interiorul acestuia am adăugat miniatură post și titlul postului. Puteți adăuga sau scădea elemente de buclă (cum ar fi fragmente, date, informații despre autor, număr de comentarii etc.). Notă: în miniaturile noastre sunăm o dimensiune suplimentară a imaginii. Probabil că va trebui să înlocuiți dimensiunea-nume cu dimensiunea proprie pe care ați creat-o.

După prima grilă, am adăugat un altfel care arată că numărul contracurentului $ se potrivește cu numărul specificat în grilele noastre $ (ceea ce ar trebui să fie pentru că vom fi pe al doilea post). Dacă se potrivește contorul, atunci putem arăta grila noastră dreaptă, care începe cu o clasă css personalizată "griditemright". Observați după ce închidem griditemright div, adăugăm o clasă clară. Acest lucru vom explica când ajungem la partea CSS.

După terminarea buclăului, resetăm contorul la 0, astfel încât acesta poate porni din nou în rândul următor.

Putem pur si simplu sa incheiem bucla pe care am inceput-o prin adaugarea acestui cod:

Codul de mai sus continuă să controleze contorul până când atinge limita specificată în variabila query_post. Motivul pentru care nu am adăugat codul de navigare post de mai sus este pentru că mulți oameni folosesc un plugin sau o altă metodă de afișare pentru aceasta. Așa că îl lăsăm deschis pentru tine de a decide pentru tine.

Codul final al buclului va arăta astfel:

Acum, când avem pregătit codul PHP, trebuie să ne uităm la modul în care îl vom modela.

Efectul nostru implicit ar arăta astfel:

    Postați imaginea 
Titlul postului
    Postați imaginea 
Titlul postului
    

Iată clasele pe care trebuie să le modificați:

 #gridcontainer margin: 20px 0; lățime: 100%;  #gridcontainer h2 a culoare: # 77787a; font-size: 13px; #gridcontainer .griditemleft float: left; lățime: 278px; margine: 0 40px 40px 0; #gridcontainer .griditemright float: left; lățime: 278px; #gridcontainer.postimage margin: 0 0 10px 0; 

Sperăm că acest tutorial vă va îndruma în direcția cea bună spre realizarea unui afișaj cu buclă de rețea pentru postările dvs. WordPress.