Slik lager du et rutenettvisning av innleggsminiatyr i WordPress-temaer

Når du har opprettet WordPress-webdesign, har du noen gang hatt lyst til å opprette en rutenettvisning av innlegg? Gridoppsettet fungerer bra for media-sentriske nettsteder som vår WordPress-galleri eller et annet type utstillingssted. Temaverk som Genesis har allerede et pre-built Grid Loop system. Men hvis du prøver å gjøre et skjermbilde i ditt egendefinerte WordPress-tema, så er vi her for å hjelpe. I denne artikkelen vil vi vise deg hvordan du lager en rutenettvisning av miniatyrbilder i WordPress-temaet.

Merk: Du må ha en god forståelse av CSS og hvordan WordPress-løkken fungerer.

Før vi begynner, kan vi se på hva vi prøver å oppnå:

Hvis du merker, vises innleggene på denne siden i et rutenett. Det er en kant på innleggene på venstre side, men ikke på høyre side. Med en vanlig innleggsløype følger alle innlegg samme stil, så du vil ha en riktig ramme på begge innleggene som ville se rart ut. Legg også merke til at avstanden er ganske symmetrisk. Som igjen er det ikke mulig med normal sløyfe å gjøre for å gjøre noe slikt. Nå som du kan se hva vi prøver å oppnå, kan vi ta en titt på hvordan du oppnår det.

Det første du må gjøre er å sørge for at temaet ditt har WordPress-innlegg miniatyrer slått på. Du bør også tenke på hvordan du vil endre størrelsen på WordPress-bildene dine fordi du vil trenge det.

Når du har fått miniatyrbildene og størrelsene på oppsettet, kan vi få denne tingen påbegynt. Lar oss sette opp våre loop-spørringer:

Koden ovenfor virker ganske rett frem fordi vi har lagt inn kommentarer. En ting du sannsynligvis trenger å redigere, er posts_per_page variabel som passer dine behov. Du kan også legge til andre spørringsparametre hvis du ønsker det. Nå som vi fikk løkken startet, kan vi se på hvordan vi vil vise innleggene i den.

Vi starter koden ved å sjekke for å se om telleren er 1 som betyr å vise vårt venstre rutenett. Vi går ganske enkelt inn og starter en div med en tilpasset css klasse "griditemleft". Inne i det lagde vi innleggsminiaturen og posttittelen. Du kan legge til eller trekke fra eventuelle løkkeelementer (som utdrag, datoer, forfatterinformasjon, kommentartelling osv.). Merk: I våre miniatyrbilder ringer vi til en ekstra bildestørrelse. Du må sannsynligvis erstatte størrelsesnavnet med din egen størrelse du opprettet.

Etter det første ruten la vi til en elseif som ser ut til å se om $ telleren stemmer overens med nummeret som er angitt i våre $ grids (som det burde fordi vi kommer til å være på det andre innlegget). Hvis telleren passer, så kan vi vise vårt riktige rutenett som starter med en tilpasset css-klasse "griditemright". Legg merke til når vi lukker griditemright div, legger vi til en klar klasse. Dette vil vi forklare når vi kommer til CSS-delen.

Etter at løkken er ferdig med dette, tilbakestiller vi telleren til 0, slik at den kan starte igjen i neste rad.

Vi kan bare avslutte sløyfen som vi startet ved å legge til denne koden:

Koden ovenfor baserer seg i utgangspunktet på telleren til den treffer grensen som er angitt i vår query_post-variabel. Årsaken til at vi ikke legger til postnavigasjonskoden ovenfor, er fordi mange bruker et plugin eller en annen visningsmetode for dette. Så vi forlater det åpent for deg å bestemme selv.

Så vår siste sløyfekode vil se slik ut:

Nå som vi har PHP-koden klar, kan vi se på hvordan vi skal style den.

Standardverdien vil se slik ut:

    Legg inn bilde 
Posttittel
    Legg inn bilde 
Posttittel
    

Her er klassene du må endre:

 #gridcontainer margin: 20px 0; bredde: 100%;  #gridcontainer h2 a color: # 77787a; fontstørrelse: 13px; #gridcontainer .griditemleft float: left; bredde: 278px; margin: 0 40px 40px 0; #gridcontainer .griditemright float: left; bredde: 278px; #gridcontainer .postimage margin: 0 0 10px 0; 

Vi håper at denne opplæringen styrer deg i den riktige retningen mot å vise en rutenettvisning for WordPress-innleggene dine.