Bruke jQuery Masonry for Pinterest-Like Posting

Med inkluderingen av jQuery Masonry i WordPress 3.5-kjernebiblioteket, har det aldri vært enklere å endre opp en malens layout for nylig publisert.

Å tjene opp innholdet ditt i et murverkoppsett kan gjøre bloggdelen av nettstedet ditt mer visuelt interessant for leserne dine. Med jQuery Masonry, spiller det ingen rolle lengden på ditt utdrag (innen grunn selvfølgelig), det vil tilpasse seg for å fylle hver eneste plass. Denne opplæringen skal undersøke ideen bak ved å bruke det nylig inkludert jQuery Masonry-biblioteket med WordPres 3.5.

Hva er en Masonry Layout?

Hvis du har hørt om en mur av murstein (tenk på en murvegg), så har du et ganske godt mentalt bilde av hva en murverkslayout på nettstedet ditt kan se ut. Hvis du fortsatt er forvirret, besøk Pinterest og sjekk ut hvordan de har lagt ut hver "pin" på deres nettside. Alt er ordnet vertikalt, og fyller all ledig plass. Det er viktig å merke termen "vertikal" i den siste setningen. Du kan oppnå samme type murverkseffekt ved hjelp av CSS-flyter, men det kan føre til problemer med avstand. Dette skjer fordi, i motsetning til jQuery Masonry, vil CSS flyter arrangere elementer horisontalt først, deretter vertikalt. Dette kan føre til svært inkonsekvente og noen ganger uønskede hull i rommet i oppsettet. Bruke jQuery Masonry kan bidra til å løse dette problemet.

CSS Float Eksempel

Legg merke til hvordan det er hull mellom innlegg av varierende høyder når du bruker CSS-flyter.

jQuery Masonry Eksempel

Med jQuery Masonry passer hvert innlegg pent på plass, og gir ingen vanskelige hull.

Nå som vi vet hva en Masonry-layout er, la oss begynne å lage et enkelt, jQuery Masonry-layout for våre siste innlegg.

Trinn 1 Bruke `wp_enqueue_script` å laste inn biblioteket

Før vi kan begynne å bygge veggen vår, må vi laste inn riktig skript. Du må legge til følgende kode i din functions.php fil.

 funksjon mason_script () wp_enqueue_script ('jquery-masonry');  add_action ('wp_enqueue_scripts', 'mason_script');

Trinn 2 Sette opp rutenettet

For min grunnleggende murverksstruktur, skal jeg implementere følgende HTML i min loop (eller tilpasset mal - uansett hvor du planlegger å bygge veggen din). Først skal jeg sette beholderen til murvegget og deretter sette opp beholderen for hvert innlegg i veggen.

Sette opp CSS

Du må definere beholderbredden og innleggbredden for å oppnå den faktiske murverkseffekten. For min demonstrasjon har jeg satt beholderen til 960 piksler bred og jeg vil ha 4 kolonner med innlegg. Så, jeg trenger å gjøre litt enkel matte for å finne hvilken størrelsesbredde hvert innlegg på veggen min skal være.

Teglbredde = 960px / 4 innlegg = 240 piksler hver.

Med det nummeret i tankene kan jeg sette opp oppsettet mitt i stilarket mitt:

 #container width: 960px; // bredde av hele beholderen til veggen .brick width: 220px; // bredde av hver murstein mindre polstring mellom polstring: 0px 10px 15px 10px;

Trinn 3 Oppsett funksjonen

Deretter må vi sette opp murverkfunksjonen slik at våre div-containere alle sammen maskeres i veggen. Bruk følgende kode for å gjøre dette:

 jQuery (dokument) .ready (funksjon ($) $ ('#container') .masonry (columnWidth: 220););

Konklusjon

Masonry kommer med mange innebygde alternativer som gjør det veldig attraktivt å bruke med WordPress. For eksempel kan du bruke animasjonsalternativet til å "animere" postordninger, legge til flere elementer på veggen (flott for porteføljeoppsett), eller inkorporere det med Paul Irlands Infinte Scroll. Uansett hvordan du planlegger å bruke jQuery Masonry-skriptet, er det et godt tillegg til WordPress 3.5.

Side Merk: Å oppnå samme effekt i CSS3 er mulig. Du må imidlertid bruke den nye funksjonen "kolonner", som ennå ikke støttes i alle nettlesere.

Kode