Slik bruker du murverk for å legge til Pinterest Style Post Grid i WordPress

Dette er et gjesteinnlegg av Josh Pollock

Pinterest-lignende gridvisning av innlegg har vært en populær design for WordPress blog-indekssidene en stund. Det er populært, ikke bare fordi det etterligner utseendet til det populære sosiale medieområdet, men også fordi det får best mulig utnyttelse av plass på skjermen. På en WordPress blog-indeks, tillater det at hver innleggsvisning er den størrelsen det naturlig må være, uten å forlate ekstra plass.

I denne opplæringen vil jeg vise deg hvordan du bruker det populære Masonry JavaScript-biblioteket til å lage kaskende gridoppsett for bloggindeksen din, samt arkivsidene for temaet ditt. Jeg vil ta opp noen problemer du må vurdere for mobiloptimalisering og hvordan du kan løse dem.

Merk: Dette er en avansert opplæringsplan for de som føler seg komfortabel med å redigere WordPress-temaer og har tilstrekkelig HTML / CSS-kunnskap.

Trinn 1: Legg til nødvendige biblioteker til temaet ditt

Oppdater: WordPress 3.9 inneholder nå den nyeste versjonen av Masonry.

Først må du laste Masonry inn i temaet ditt, ved hjelp av denne koden:

 hvis (! function_exists ('slug_scripts_masonry')): hvis (! is_admin ()): funksjon slug_scripts_masonry () wp_enqueue_script ('masonry'); wp_enqueue_style ('murverk', get_template_directory_uri (). '/ css /');  add_action ('wp_enqueue_scripts', 'slug_scripts_masonry'); slutt om; //! is_admin () endif; //! slug_scripts_masonry eksisterer 

Denne koden laster bare murer og gjør den tilgjengelig for temaets malfiler (se vår guide for hvordan du korrekt legger til JavaScripts and Styles i WordPress). Vær også oppmerksom på at vi ikke legger til jQuery som en avhengighet for heller. En av fordelene ved Masonry 3 er at den ikke krever jQuery, men kan brukes med den. I min erfaring er initiering av Masonry uten jQuery mer pålitelig, og åpner muligheten for å hoppe over lasting jQuery, noe som kan hjelpe til med både sidetidstider og kompatibilitetsproblemer.

Trinn 2: Initialiser Javascript

Denne neste funksjonen setter opp Masonry, definerer beholderne som skal brukes med den, og sørger også for at alt skjer i riktig rekkefølge. Masonry må gjøre beregning av størrelsen på hver av elementene på siden for å kunne utforme nettverket dynamisk. Et problem jeg har møtt med Masonry i mange nettlesere, er at Masonry vil beregne høyden på elementer med sakte laste bilder, noe som fører til overlappende elementer. Løsningen er å bruke imagesLoaded for å hindre Masonry å beregne oppsettet til alle bildene er lastet inn. Dette sikrer riktig dimensjonering.

Dette er funksjonen og handlingen som vil utgjøre initialiseringsskriptet i sidebeteksten:

 hvis (! function_exists ('slug_masonry_init')): funksjon slug_masonry_init () ?> // sett beholderen som Masonry vil være inne i en var var container = document.querySelector ('# masonry-loop'); // lage tom var msnry var msnry; // initialiser Masonry etter at alle bilder har lastet bilderLastet (container, funksjon () msnry = nytt Masonry (container, itemSelector: '.masonry-entry';;   
Funksjonen forklares trinnvis med inline-kommentarer. Hva Javascript-funksjonen gjør, er at Masonry skal se inne i en beholder med id "masonry-loop" for elementer med klassen "masonry-entry" og å beregne rutenettet bare etter at bilder er lastet. Vi setter den ytre beholderen med forespørselSelger og det indre med elementSelektor.
 
Trinn 2: Lag Masonry Loop
 
I stedet for å legge til HTML-oppsettet for Masonry direkte til en mal, skal vi lage en egen maldel for den. Opprett en ny fil kalt "content-masonry.php" og legg det til temaet ditt. Dette vil tillate deg å legge Masonry loop til så mange forskjellige maler som du vil.
 
I den nye filen legger du til koden som vises nedenfor. Oppmerkningen ligner på hva du normalt vil se for innholds forhåndsvisning. Du kan endre det uansett må du bare være sikker på at det ytre elementet har klassen "murverk" som vi satt som elementet Selger i det siste trinnet.
 
 
             
 
Denne oppslaget har klasser for hver av delene, slik at du kan legge til markering for å matche temaet ditt. Jeg liker å legge til en fin, litt avrundet grense til .masonry-entry. Et annet fint alternativ er ingen grense for .masonry-inngang, men for å gi den en liten skygge. Det ser spesielt godt ut når miniatyrbildet går ut til grensen til beholderen, som kan oppnås ved å gi .masonry-miniatyrmarginaler og paddings på 0 i alle retninger. Du vil legge til alle disse stilene i en fil som heter masonry.css i temaets css-katalog.
 
Trinn 3: Legg Masonry Loop To Templates
 
Nå som vi har vår maldel kan du bruke den i hvilken som helst mal i temaet du liker. Du kan legge den til index.php, men ikke category.php hvis du ikke vil at den skal brukes til kategoribibliotek. Hvis du bare vil bruke den på temaets hjemmeside, når den er satt til å vise blogginnlegg, vil du bruke den i home.php. Uansett hvor du velger alt du trenger å gjøre, er å pakke sløyfen din i en beholder med id "masonry-loop" og legg til maldelen i løkken med get_template_part (). Husk å starte mursløyfebeholderen før du har (have_posts ()).
 
For eksempel er her hovedløkken fra twentythirteen's index.php:
 
          
 
Og her er det endret for å bruke vår Masonry-løkke:
 
            
 
Trinn 4: Sett Responsive Bredder Of Masonry Items
 
Det er flere måter du kan angi bredden på hvert Masonry-element. Du kan angi bredden ved hjelp av et antall piksler når du initialiserer Masonry. Jeg er ikke en fan av å gjøre det siden jeg bruker lydhørlige temaer, og det krever noen komplekse medieforespørsler for å få ting rett på små skjermer. For responsive design har jeg funnet det beste å sette en breddeverdi for .masonry-entry med en prosentandel, basert på hvor mange elementer du vil ha på rad, og la Masonry gjøre resten av matematikken for deg.
 
Alt dette krever, er å dele 100 med antall elementer du vil angi prosentandelen i en enkel oppføring i temaets stil.css. Hvis du for eksempel vil ha fire elementer i hver rad, kan du gjøre dette i filen masonry.css:
 
.murverk-entry bredde: 25%
 
Trinn 5: Mobiloptimalisering
 
Vi kunne stoppe her, men jeg tror ikke sluttresultatet fungerer utrolig bra på små telefonskjermbilder. Når du er fornøyd med hvordan temaet ditt ser ut med det nye Masonry-nettverket på skrivebordet, kan du sjekke det ut på telefonen din. Hvis du ikke er fornøyd med hvordan det ser ut på telefonen, må du gjøre litt arbeid.
 
Jeg tror ikke det er nok plass på telefonens skjerm for alt vi har lagt til i vår innholdsmonteringsmaldel. To gode løsninger tilgjengelig for deg, er å forkorte utsnittet for telefoner eller hoppe over det helt. Her er en ekstra funksjon du kan legge til temaets funksjoner.php for å gjøre det. Fordi jeg ikke tror at disse problemene er et problem på tabletter, bruker jeg en god plugin Mobble i alle eksemplene i denne delen for å bare gjøre endringene på telefoner, ikke tabletter. Jeg sjekker også for å se om Mobble er aktiv før du bruker den og om nødvendig faller tilbake til den mer generelle mobile deteksjonsfunksjonen wp_is_mobile som er innebygd i WordPress. 
 
 hvis (! function_exists ('slug_custom_excerpt_length')): funksjon slug_custom_excerpt_length ($ lengde) // angi kortere lengde en gang $ short = 10; // sett lang lengde en gang $ lang = 55; // hvis vi bare kan angi kort utdrag for telefoner, ellers kort for alle mobile enheter hvis (function_exists ('is_phone') hvis (is_phone ()) return $ short; annet return $ long; annet hvis (wp_is_mobile ()) return $ short; else return $ long; add_filter ('utdragslengde', 'slug_custom_excerpt_length', 999); endif; //! slug_custom_excerpt_length eksisterer 
 
Som du kan se, begynner vi å lagre lengden av utdragslengde og kort utdragslengde i variabler, siden vi skal bruke disse verdiene to ganger, og vi vil kunne endre dem fra ett sted hvis vi trenger senere. Derfra tester vi om vi kan bruke Mobble's is_phone (). Hvis så er det satt det korte utdraget for telefoner og det lange utdraget hvis vi ikke er det. Deretter gjør vi det samme grunnleggende, men bruker wp_is_mobile, som vil påvirke alle mobilenheter, hvis is_phone () ikke kan brukes. Forhåpentligvis vil den andre delen av denne funksjonen aldri bli brukt, men det er godt å få en sikkerhetskopi bare i tilfelle. Når utdragslengdenlogikken er satt, kommer den bare til å hekte funksjonen til utdragslengden.
 
Forkorting av utdraget er et alternativ, men vi kan også gjøre det helt av med en enkel prosess. Her er en ny versjon av innholdsmasoni, med hele utdragspartiet overmited på telefoner:
 
 
           
 
Denne gangen har vi testet for å se om vi ikke er på en telefon / mobil enhet, og hvis så, returnerer vi utdragsdelen av vår loop. Hvis vi er på en telefon / mobil enhet, gjør vi ingenting.
 
En annen ting du kanskje vil gjøre er å øke bredden på Masonry-elementene, noe som reduserer nummeret på rad, på mobile enheter. For å gjøre dette vil vi legge til en annen inline-stil i overskriften basert på enhetsdeteksjon. Siden denne funksjonen bruker wp_add_inline_styles, vil den være avhengig av et bestemt stilark. I dette tilfellet bruker jeg masonry.css, som du kanskje vil ha, for å holde masonry-stilene dine separate. Hvis du ikke ender med å bruke det, kan du bruke håndtaket fra et annet, allerede registrert stilark.
 
 hvis (! function_exists ('slug_masonry_styles')): funksjon slug_masonry_styles () // angi bred bredde $ wide = '25% '; // sett smal bredde $ narrow = '50% '; / ** Bestem verdi for $ bredde ** / // hvis vi bare kan angi smal for telefoner, annet smal for alle mobile enheter hvis (function_exists ('is_phone') if (is_phone ()) $ width = $ narrow;  ellers $ width = $ wide; ellers if (wp_is_mobile ()) $ width = $ narrow; else $ width = $ wide; / ** Utdata CSS for .masonry-entry med riktig bredde ** / $ custom_css = ".masonry-entry width: $ width;"; // Du må bruke håndtaket til et allerede oppskrevet stilark her. wp_add_inline_style ('masonry', $ custom_css); add_action wp_enqueue_scripts ',' slug_masonry_styles '); endif; //! slug_masonry_styles finnes 
 
Denne funksjonen eneuques det egendefinerte stilarket, og angir deretter en verdi for bredde ved å bruke det som nå skal være veldig kjent logikk. Deretter lager vi $ custom_css-variabelen ved å overføre verdien for bredde til en ellers regelmessig leter bit av CSS med $ width. Deretter bruker vi wp_add_inline_style for å fortelle WordPress å skrive ut våre inline-stiler i overskriften når Masonry-stilarket blir brukt, og så kutter vi hele funksjonen til wp_enqueue_scripts og vi er ferdige.
 
Hvis du valgte å kombinere Masonry-stilene dine til et eksisterende stilark, må du bruke håndtaket på det stilarket med wp_add_inline_style, eller dine inline-stiler vil ikke bli inkludert. Jeg liker å bruke wp_add_inline_style fordi jeg vanligvis bryter handlingen kroken for enqueueing Masonry i en betinget, slik at det bare blir lagt til når det trengs. For eksempel hvis jeg bare bruker murverk på min bloggindeks og arkivsidene, ville jeg gjøre dette:
 
 hvis (is_home () || is_archive ()) add_action ('wp_enqueue_scripts', 'slug_scripts_masonry');  
 
Disse siste eksemplene bør åpne opp noen andre ideer i hjernen din. For eksempel kan du bruke lignende logikk for å hoppe over Masonry helt på en mobil enhet. Også wp_add_inline_style () er en mindre brukt, men likevel veldig nyttig funksjon, slik at du kan programmere sette forskjellige stiler basert på en hvilken som helst type betinget. Det kan tillate deg å radikalt endre stilen til ethvert element basert på ikke bare enhetsdeteksjon, men endringene kan også være basert på hvilken mal som brukes, eller om brukeren er logget inn eller ikke.
 
Jeg håper du ser disse forskjellige endringene jeg lager som en mulighet til å bli kreativ. Masonry og lignende cascading rutenett systemer har vært populære for en stund nå, så det er tid for noen nye vendinger på denne populære ideen. Vis oss i kommentarene hvilke kule måter du har kommet på med for å bruke Masonry i et WordPress-tema.
 
En multi-purpose WordPress-fyr, Josh Pollock skriver om WordPress, gjør temautvikling, fungerer som fellesskapssjef for Pods Framework og talsmenn åpen kildekode løsninger for bærekraftig design.