Hoe maak je een rasterweergave van berichtminiaturen in WordPress-thema's

Hebt u bij het maken van WordPress-siteontwerpen de drang gehad om een ​​rasterweergave van berichten te maken? De rasterlay-out werkt geweldig voor mediacentrische sites zoals onze WordPress-galerij of een andere site met een showcase-type. Themakaders zoals Genesis hebben al een vooraf gebouwd Grid Loop-systeem. Als u echter een rasterweergave wilt uitvoeren in uw aangepaste WordPress-thema, zijn we er om u te helpen. In dit artikel laten we u zien hoe u een rasterlijnweergave maakt van postminiatuurfoto's in uw WordPress-thema.

Opmerking: u moet een goed begrip hebben van CSS en hoe de WordPress-lus werkt.

Voordat we beginnen, laten we eens kijken naar wat we proberen te bereiken:

Als u opmerkt, worden de berichten op deze pagina weergegeven in een raster. Er is een rand op de palen aan de linkerkant, maar niet aan de rechterkant. Met een normale berichtlus volgen alle berichten dezelfde stijl, dus je hebt een rechterrand op beide berichten die er raar uitzien. Merk ook op, de afstand is vrij symmetrisch. Wat weer niet mogelijk is met de normale lus om iets als dit te doen. Nu je kunt zien wat we proberen te bereiken, laten we eens kijken hoe we dit kunnen bereiken.

Het eerste wat u hoeft te doen is ervoor te zorgen dat uw thema WordPress-miniaturen heeft ingeschakeld. Je moet ook nadenken over hoe je de grootte van je WordPress-afbeeldingen wilt wijzigen, omdat je deze nodig hebt.

Zodra je de miniaturen en grootten hebt ingesteld, kun je dit ding laten beginnen. Laten we onze loopqueries instellen:

De bovenstaande code lijkt vrij eenvoudig omdat we inline reacties hebben gemaakt. Een ding dat u waarschijnlijk zou moeten bewerken, is de variabele posts_per_page om aan uw behoeften te voldoen. U kunt ook andere queryparameters toevoegen als u dat wilt. Nu we de lus hebben gestart, laten we kijken naar hoe we de berichten erin willen weergeven.

We starten de code door te controleren of de teller 1 is, wat betekent dat we ons linkerrooster weergeven. We gaan gewoon naar binnen en starten een div met een aangepaste css-klasse "griditemleft". Daarin hebben we de postminiatuur en de titel van het bericht toegevoegd. U kunt luselementen (zoals fragmenten, datums, auteurinformatie, aantal reacties, enz.) Optellen of aftrekken. Opmerking: in onze miniaturen bellen we een extra afbeeldingsgrootte. Je zult waarschijnlijk de maatnaam moeten vervangen door je eigen maat die je hebt gemaakt.

Na het eerste raster hebben we een elseif toegevoegd die er uitziet om te zien of de $ -teller overeenkomt met het aantal dat is opgegeven in onze $ grids (wat zou moeten omdat we op de tweede post staan). Als de teller overeenkomt, kunnen we ons juiste raster laten zien dat begint met een aangepaste css-klasse "griditemright". Merk op nadat we de griditemright div sluiten, we voegen een duidelijke klasse toe. Dit zullen we uitleggen wanneer we bij het CSS-gedeelte komen.

Nadat de lus hiermee is voltooid, stellen we de teller opnieuw in op 0, zodat deze in de volgende rij opnieuw kan beginnen.

We kunnen gewoon de lus beëindigen die we begonnen door deze code toe te voegen:

De bovenstaande code is in feite de teller voortzetten totdat deze de limiet bereikt die is opgegeven in onze variabele query_post. De reden waarom we de bovenstaande berichtnavigatiecode niet hebben toegevoegd, is omdat veel mensen hiervoor een plug-in of andere weergavemethode gebruiken. Dus laten we het open voor jou om zelf te beslissen.

Onze uiteindelijke loopcode ziet er dus als volgt uit:

Nu we de PHP-code bij de hand hebben, kunnen we kijken hoe we het gaan vormgeven.

Onze standaard uitvoer ziet er als volgt uit:

    Post afbeelding 
Titel plaatsen
    Post afbeelding 
Titel plaatsen
    

Dit zijn de klassen die u moet aanpassen:

 #gridcontainer margin: 20px 0; breedte: 100%;  #gridcontainer h2 a color: # 77787a; font-size: 13px; #gridcontainer .griditemleft float: left; breedte: 278 px; marge: 0 40px 40px 0; #gridcontainer .griditemright float: left; width: 278px; #gridcontainer .postimage margin: 0 0 10px 0; 

We hopen dat deze tutorial je in de juiste richting stuurt naar het maken van een rasterlijnweergave voor je WordPress-berichten.