Så här skapar du en rutnätvisning av postminoraler i WordPress-teman

När du skapat WordPress-webbdesign har du någonsin haft en önskan om att skapa en rastervisning av inlägg? Rutenettlayouten fungerar bra för mediacentrerade platser som vårt WordPress-galleri eller en annan typ av uppvisande typ. Tema ramverk som Genesis har redan ett förbyggt Grid Loop system. Men om du försöker göra en rutnät i ditt anpassade WordPress-tema, så är vi här för att hjälpa till. I den här artikeln kommer vi att visa dig hur du skapar en rastervisning av miniatyrbilder i ditt WordPress-tema.

Obs! Du måste ha en rättvisande förståelse för CSS och hur WordPress-loop fungerar.

Innan vi börjar börjar vi titta på vad vi försöker åstadkomma:

Om du märker, visas inläggen på den här sidan i ett rutnät. Det finns en gräns på stolparna på vänster sida, men inte på högra sidan. Med en normal efterslinga följer alla inlägg samma stil, så du kommer att ha en rätt gräns på båda inlägg som skulle se konstigt ut. Observera också att avståndet är ganska symmetriskt. Vilket är igen inte möjligt med den normala slingan att göra för att göra något så här. Nu när du kan se vad vi försöker uppnå, kan vi ta en titt på hur man gör det.

Det första du behöver göra är att se till att ditt tema har WordPress-inläggs miniatyrer på. Du bör också tänka på hur du vill ändra storlek på dina WordPress-bilder eftersom du kommer att behöva det.

När du har fått miniatyrerna och storlekarna, kan vi få igång den här saken. Låt oss konfigurera våra loop-frågor:

Koden ovan verkar ganska rakt framåt eftersom vi har gjort inline kommentarer. En sak som du förmodligen behöver redigera är posts_per_page-variabel som passar dina behov. Du kan också lägga till andra sökparametrar om du vill. När vi började slingan började vi titta på hur vi vill visa inläggen inuti den.

Vi börjar koden genom att kontrollera om räknaren är 1 vilket innebär att vi visar vårt vänstra rutnät. Vi går helt enkelt in och börjar en div med en anpassad css klass "griditemleft". Inuti det lade vi till miniatyrbilden och posttiteln. Du kan lägga till eller subtrahera alla slingelement (till exempel utdrag, datum, författarinfo, kommentarräkning etc). Obs! I våra miniatyrbilder ringer vi till en extra bildstorlek. Du kommer troligen att behöva byta namn på storlek med din egen storlek som du skapade.

Efter det första rutnätet lade vi till en elseif som ser ut att se om $ -räkningen matchar numret som anges i våra $ grids (vilket det borde för att vi kommer att vara på det andra inlägget). Om räknaren matchar så kan vi visa vårt rätta nät som börjar med en anpassad css-klass "griditemright". Observera när vi stänger griditemright div, lägger vi till en tydlig klass. Detta kommer vi att förklara när vi kommer till CSS-delen.

Efter att slingan är klar med detta återställer vi räknaren till 0, så det kan börja igen i nästa rad.

Vi kan helt enkelt avsluta den slinga som vi började med att lägga till den här koden:

Koden ovan baseras fortlöpande räknaren tills den träffar gränsen som anges i vår query_post-variabel. Anledningen till att vi inte tillade postnavigeringskoden ovan är att många använder ett plugin eller en annan visningsmetod för detta. Så vi lämnar den öppen för att du ska kunna bestämma dig själv.

Så ser vår slutliga slingkod ut så här:

Nu när vi har PHP-koden klar kan vi titta på hur vi ska stile det.

Vår standardutgång skulle se ut så här:

    Posta bilden 
Post titel
    Posta bilden 
Post titel
    

Här är de klasser som du behöver ändra:

 #gridcontainer margin: 20px 0; bredd: 100%;  #gridcontainer h2 a färg: # 77787a; fontstorlek: 13px; #gridcontainer .griditemleft float: left; bredd: 278px; marginal: 0 40px 40px 0; #gridcontainer .griditemright float: left; bredd: 278px; #gridcontainer .postimage margin: 0 0 10px 0; 

Vi hoppas att denna handledning guidar dig i rätt riktning mot att visa en nätverksskärm för dina WordPress-inlägg.