Så här använder du Masonry för att lägga till Pinterest Style Post Grid i WordPress

Detta är ett gästpost av Josh Pollock

Pinterest-liknande rutnätvisning av inlägg har varit en populär design för WordPress bloggindex sidor ett tag. Det är populärt, inte bara för att det efterliknar utseendet på den populära sociala medieplatsen, men också för att den utnyttjar utrymme på skärmen optimalt. På ett WordPress bloggindex tillåter det att varje inläggsförhandsgranskning är den storlek det naturligtvis behöver vara utan att lämna extra utrymme.

I den här handledningen visar jag dig hur du använder det populära Masonry JavaScript-biblioteket för att skapa kaskadrapplayouter för ditt bloggindex samt arkivsidor för ditt tema. Jag kommer att ta upp några frågor som du måste överväga för mobiloptimering och hur man löser dem.

Obs! Det här är en handledning för avancerad nivå för dem som känner sig bekväma att redigera WordPress-teman och har tillräcklig HTML / CSS-kunskap.

Steg 1: Lägg till nödvändiga bibliotek till ditt tema

Uppdatering: WordPress 3.9 innehåller nu den senaste versionen av Masonry.

Först måste du ladda Masonry till ditt tema med hjälp av den här koden:

 om (! function_exists ('slug_scripts_masonry')): om (! is_admin ()): funktion slug_scripts_masonry () wp_enqueue_script ('masonry'); wp_enqueue_style ("murverk", get_template_directory_uri (). '/ css /');  add_action ('wp_enqueue_scripts', 'slug_scripts_masonry'); endif; //! is_admin () endif; //! slug_scripts_masonry finns 

Den här koden laddar helt enkelt murverk och gör den tillgänglig för tematets mallfiler (se vår guide om hur du korrekt lägger till JavaScripts and Styles i WordPress). Observera också att vi inte lägger till jQuery som ett beroende för heller. En av fördelarna med Masonry 3 är att den inte kräver jQuery, men kan användas med den. Enligt min erfarenhet är initiering av Masonry utan jQuery mer tillförlitlig, och öppnar möjligheten att hoppa över jQuery-laddning, vilket kan hjälpa till med både sidlastningstider och kompatibilitetsproblem.

Steg 2: Initiera Javascript

Den här nästa funktionen sätter upp Masonry, definierar behållarna som kommer att användas med det och ser till att allt händer i rätt ordning. Masonry måste göra beräkning av storleken på var och en av föremålen på sidan för att kunna formatera sitt rutnät dynamiskt. Ett problem som jag har stött på med murverk i många webbläsare är att Masonry kommer att beräkna höjden på objekt med långsamma bilder, vilket leder till överlappande objekt. Lösningen är att använda bilderLadda för att förhindra att Masonry beräknar layouten tills alla bilder laddas. Detta garanterar korrekt storlek.

Detta är funktionen och åtgärden som kommer att mata ut initialiseringsskriptet i sidfoten:

 om (! function_exists ('slug_masonry_init')): funktion slug_masonry_init () ?> // ställa in behållaren som Masonry kommer att vara inuti i en var var container = document.querySelector ('# masonry-loop'); // skapa tom var msnry var msnry; // initiera Masonry efter att alla bilder har laddat bilderLadda (behållare, funktion () msnry = new Masonry (container, itemSelector: '.masonry-entry';);   
Funktionen förklaras steg för steg med inline kommentarer. Vad Javascript-funktionen gör är att berätta för Masonry att titta in i en behållare med id "masonry-loop" för objekt med klassen "masonry-entry" och att beräkna rutnätet först efter att bilder har laddats. Vi ställer den yttre behållaren med frågeSelector och det inre med objektSelektorn.
 
Steg 2: Skapa Masonry Loop
 
Istället för att lägga till HTML-markeringen för Masonry direkt till en mall ska vi skapa en separat malldel för den. Skapa en ny fil som heter "content-masonry.php" och lägg till den i ditt tema. Det här låter dig lägga till Masonry loop till så många olika mallar som du vill.
 
I din nya fil lägger du till koden som visas nedan. Markeringen liknar vad du normalt ser för innehållsförhandsgranskning. Du kan ändra det ändå du behöver, bara vara säker på att det yttersta elementet har klassen "murverk" som vi ställer in som objektet Selector i det sista steget.
 
 
             
 
Denna markering har klasser för var och en av dess delar så att du kan lägga till markering för att matcha ditt tema. Jag gillar att lägga till en fin, något rundad kant till .masonry-entry. Ett annat bra alternativ är ingen gräns för .masonry-entry, men för att ge den en liten skugga. Det ser särskilt bra ut när miniatyrbilden sträcker sig hela vägen till behållarens kant, vilket kan uppnås genom att ge .masonry-miniatyrmarginaler och paddningar av 0 i alla riktningar. Du kommer att vilja lägga till alla dessa stilar i en fil som heter masonry.css i ditt temas css-katalog.
 
Steg 3: Lägg till Masonry Loop till mallar
 
Nu när vi har vår malldel kan du använda den i vilken mall som helst i ditt tema. Du kan lägga till den i index.php, men inte category.php om du inte vill att den ska användas i kategorin arkiv. Om du bara vill att den används på ditt temas hemsida, när det är inställt att visa blogginlägg, skulle du använda det i home.php. Var du än väljer allt du behöver göra är att linda din slinga i en behållare med id "masonry-loop" och lägg till malldelen i slingan med get_template_part (). Var noga med att börja masonry loop container innan (have_posts ()).
 
Till exempel är här huvudslingan från tjugotrediens index.php:
 
          
 
Och här är det ändrat för att få använda vår Masonry loop:
 
            
 
Steg 4: Ställ in Responsive Widths of Masonry Items
 
Det finns flera sätt att du kan ställa in bredden på varje Masonry-objekt. Du kan ställa in bredden med ett antal pixlar när du initierar Masonry. Jag är inte en fan av att göra det eftersom jag använder lyhörda teman och det kräver några komplexa mediafrågor för att få saker direkt på små skärmar. För responsiva mönster har jag funnit det bästa att göra är att ange ett breddvärde för .masonry-entry med en procentandel, baserat på hur många objekt du vill ha i en rad och låt Murverk göra resten av matte för dig.
 
Allt detta kräver är att dela 100 med antalet objekt du vill ställa in procenten i en enkel post i ditt temas stil.css. Om du till exempel vill ha fyra objekt i varje rad kan du göra det i din masonry.css-fil:
 
.murverk-entry bredd: 25%
 
Steg 5: Mobiloptimering
 
Vi kunde stanna här, men jag tror inte att slutresultatet fungerar otroligt bra på små telefonskärmar. När du är nöjd med hur ditt tema ser ut med det nya Masonry-nätet på skrivbordet, kolla det på din telefon. Om du inte är glad över hur det ser ut på telefonen, måste du göra lite arbete.
 
Jag tror inte att det finns tillräckligt med utrymme på en telefons skärm för allt vi lagt till i vår innehållsmonteringsmalldel. Två bra lösningar tillgängliga för dig är att förkorta utdraget för telefoner eller hoppa över det helt. Här är en extra funktion som du kan lägga till i ditt temas funktioner.php för att göra det. Eftersom jag inte tror att dessa problem är ett problem på tabletter använder jag en bra plugin Mobble i alla exemplen i det här avsnittet för att bara göra ändringarna på telefoner, inte tabletter. Jag kontrollerar också för att se om Mobble är aktiv innan den används och om det behövs faller tillbaka till den mer allmänna mobila detekteringsfunktionen wp_is_mobile som är inbyggd i WordPress. 
 
 om (! function_exists ('slug_custom_excerpt_length')): funktion slug_custom_excerpt_length ($ length) // sätt in den kortare längden en gång $ short = 10; // Ange lång längd en gång $ long = 55; // om vi bara kan ange korta utdrag för telefoner, annars kort för alla mobila enheter om (function_exists ('is_phone') if (is_phone ()) return $ short; annat return $ long; annat om (wp_is_mobile ()) return $ short; else return $ long; add_filter ('utdragslängd', 'slug_custom_excerpt_length', 999); endif; //! slug_custom_excerpt_length existerar 
 
Som vi kan se börjar vi genom att lagra lång längd och kort utdragslängd i variabler, eftersom vi kommer att använda dessa värden två gånger och vi vill kunna ändra dem från en plats om vi behöver senare. Därifrån testar vi om vi kan använda Mobble's is_phone (). Om så sätter vi det korta utdraget för telefoner och det långa utdraget om vi inte är. Därefter gör vi samma grundläggande sak, men använder wp_is_mobile, vilket påverkar alla mobila enheter, om is_phone () inte kan användas. Förhoppningsvis kommer den andra delen av den här funktionen aldrig att användas, men det är bra att ha en säkerhetskopia bara om det är fallet. När utdragslängdslogiken är inställd kommer det bara att haka funktionen till excerpt_length-filtret.
 
Förkortning av utdraget är ett alternativ, men vi kan också göra det helt av med en enkel process. Här är en ny version av innehålls-murverk, med hela utdragsdelen omarmad på telefoner:
 
 
           
 
Den här gången har vi testat för att se om vi inte är på en telefon / mobilenhet och om så är fallet returnerar vi utdragsdelen av vår slinga. Om vi ​​är på en telefon / mobil enhet gör vi ingenting.
 
En annan sak du kanske vill göra är att öka bredden på Masonry-objekten, vilket minskar antalet i rad på mobila enheter. För att göra detta lägger vi till en annan inline-stil i rubriken baserat på enhetsdetektering. Eftersom den här funktionen använder wp_add_inline_styles kommer den att vara beroende av ett visst stilark. I det här fallet använder jag masonry.css, som du kanske vill ha, för att hålla dina masonry stilar separata. Om du inte slutar använda det kan du använda handtaget från ett annat, redan registrerat stilark.
 
 om (! function_exists ('slug_masonry_styles')): funktion slug_masonry_styles () // ställ in den breda bredden $ wide = '25% '; // Ange smal bredd $ narrow = '50% '; / ** Bestäm värdet för $ bredd ** / // om vi bara kan ange smala för telefoner, annars smal för alla mobila enheter om (function_exists ('is_phone') if (is_phone ()) $ width = $ narrow;  annat $ width = $ wide; annat om (wp_is_mobile ()) $ width = $ narrow; annat $ width = $ wide; / ** Utdata CSS för .masonry-entry med rätt bredd ** / $ custom_css = ".masonry-entry width: $ width;"; // Du måste använda handtaget på ett redan uppskattat stilark här. wp_add_inline_style ('masonry', $ custom_css); add_action wp_enqueue_scripts ',' slug_masonry_styles '); endif; //! slug_masonry_styles finns 
 
Denna funktion eneuques det anpassade formatarket och anger sedan ett värde för bredd med hjälp av vad som nu skulle vara mycket välkänt logik. Därefter skapar vi variabeln $ custom_css genom att överföra värdet för bredd till en annars regelbunden bit av CSS med $ width. Därefter använder vi wp_add_inline_style för att berätta för WordPress att skriva ut våra inline-stilar i rubriken när Masonry-stilarket används och sedan kopplar vi hela funktionen till wp_enqueue_scripts och vi är färdiga.
 
Om du valde att kombinera dina Masonry-stilar i ett befintligt stylesheet, var noga med att använda handtaget på det stilarket med wp_add_inline_style eller dina inline-stilar kommer inte att inkluderas. Jag gillar att använda wp_add_inline_style eftersom jag i allmänhet sätter in handkroken för enqueueing Masonry i en villkorlig så att den bara läggs till vid behov. Till exempel om jag bara använder murverk på mitt bloggindex och arkivsidor skulle jag göra det här:
 
 om (is_home () || is_archive ()) add_action ('wp_enqueue_scripts', 'slug_scripts_masonry');  
 
Dessa sista få exempel borde öppna några andra idéer i din hjärna. Till exempel kan du använda liknande logik för att hoppa över Masonry helt och hållet på en mobil enhet. Dessutom är wp_add_inline_style () en mindre använd men ändå väldigt hjälpsam funktion eftersom det tillåter dig att programmera olika olika stilar baserat på vilken typ av villkor som helst. Det kan ge dig möjlighet att radikalt ändra stilen för ett element baserat på inte bara enhetsdetektering, men ändringarna kan också baseras på vilken mall som används, eller om användaren är inloggad eller inte.
 
Jag hoppas att du ser dessa olika förändringar som jag gör som ett tillfälle att bli kreativ. Masonry och liknande cascading rutnät system har varit populär för ett tag nu, så det är dags för några nya vridningar på denna populära idé. Visa oss i kommentarerna vilka coola sätt du har kommit på för att använda Masonry i ett WordPress-tema.
 
En mångsidig WordPress-kille, Josh Pollock skriver om WordPress, gör temat utveckling, tjänar som community manager för Pods Framework och förespråkar öppen källkodslösningar för hållbar design.