Hoe gebruik je metselwerk om een ​​Pinterest-stijl-berichtraster in WordPress te plaatsen

Dit is een gastpost van Josh Pollock

De Pinterest-achtige rasterweergave van berichten is al een tijdje een populair ontwerp voor WordPress-blogindexpagina's. Het is populair, niet alleen omdat het het uiterlijk van de populaire sociale mediasite nabootst, maar ook omdat het de ruimte op het scherm optimaal gebruikt. In een WordPress-blogindex kan elk postvoorbeeld de grootte hebben die het natuurlijk nodig heeft, zonder extra ruimte over te houden.

In deze zelfstudie laat ik je zien hoe je de populaire Masonry JavaScript-bibliotheek kunt gebruiken om trapsgewijze rasterlay-outs voor je blogindex te maken en om pagina's voor je thema te archiveren. Ik zal enkele problemen bespreken die je moet overwegen voor mobiel-optimalisatie en hoe deze op te lossen.

Opmerking: Dit is een zelfstudie op geavanceerd niveau voor diegenen die zich prettig voelen bij het bewerken van WordPress-thema's en voldoende kennis van HTML / CSS hebben.

Stap 1: voeg de nodige bibliotheken toe aan uw thema

Bijwerken: WordPress 3.9 bevat nu de nieuwste versie van Masonry.

Eerst moet je metselwerk in je thema laden, met behulp van deze code:

 if (! function_exists ('slug_scripts_masonry')): if (! is_admin ()): function slug_scripts_masonry () wp_enqueue_script ('metselwerk'); wp_enqueue_style ('metselwerk', get_template_directory_uri (). '/ css /');  add_action ('wp_enqueue_scripts', 'slug_scripts_masonry'); stop als; //! is_admin () endif; //! slug_scripts_masonry bestaat 

Deze code laadt eenvoudig metselwerk en maakt deze beschikbaar voor de sjabloondocumenten van uw thema (zie onze handleiding over het correct toevoegen van JavaScripts en stijlen in WordPress). Merk ook op dat we jQuery niet als afhankelijkheid voor beide toevoegen. Een van de voordelen van Masonry 3 is dat het geen jQuery vereist, maar ermee kan worden gebruikt. In mijn ervaring is het initialiseren van Metselwerk zonder jQuery betrouwbaarder en opent het de mogelijkheid om jQuery te overslaan, wat kan helpen met zowel laadtijden van de pagina als compatibiliteitsproblemen.

Stap 2: Initialiseer de Javascript

Met deze volgende functie wordt metselen ingesteld, worden de containers gedefinieerd die ermee worden gebruikt en wordt ook alles in de juiste volgorde uitgevoerd. Metselwerk moet de grootte van elk item op de pagina berekenen om het raster dynamisch in te delen. Een probleem dat ik in veel browsers tegenkwam met Metselwerk is dat metselwerk de hoogte van items verkeerd inschat met traag ladende afbeeldingen, wat leidt tot overlappende items. De oplossing is het gebruik van imagesLoaded om te voorkomen dat metselwerk de lay-out berekent totdat alle afbeeldingen zijn geladen. Dit zorgt voor een goede dimensionering.

Dit is de functie en actie die het initialisatiescript in de voettekst van de pagina uitvoert:

 if (! function_exists ('slug_masonry_init')): function slug_masonry_init () ?> // plaats de container waar Masonry in staat in een var var container = document.querySelector ('# metsel-lus'); // create empty var msnry var msnry; // initialiseer metselwerk nadat alle afbeeldingen zijn geladen. Geladen (container, functie () msnry = new Metselwerk (container, itemSelector: '.masonry-entry'););   
De functie wordt stap voor stap uitgelegd met inline opmerkingen. Wat de Javascript-functie doet is vertellen aan Masonry om in een container te kijken met de id "metselsteen-lus" voor items met de klasse "metselwerk-invoer" en om het raster alleen te berekenen nadat de afbeeldingen zijn geladen. We plaatsen de buitenste container met querySelector en de binnenste met itemSelector.
 
Stap 2: Maak metselwerk lus
 
In plaats van de HTML-opmaak voor Masonry rechtstreeks aan een sjabloon toe te voegen, gaan we er een apart sjabloononderdeel voor maken. Maak een nieuw bestand met de naam "content-masonry.php" en voeg het toe aan je thema. Hiermee kun je de Masonry-lus toevoegen aan zoveel verschillende sjablonen als je wilt.
 
In uw nieuwe bestand voegt u de onderstaande code toe. De opmaak is vergelijkbaar met wat u normaal zou zien voor elke voorbeeldweergave. Je kunt het hoe dan ook aanpassen, maar wees er zeker van dat het buitenste element de klasse van "metselwerk-invoer" heeft die we in de laatste stap als itemSelector hebben ingesteld.
 
 
             
 
Deze opmaak heeft klassen voor elk onderdeel, zodat u markeringen kunt toevoegen die passen bij uw thema. Ik vind het leuk om een ​​mooie, enigszins afgeronde rand toe te voegen aan .masonry-entry. Een andere leuke optie is geen grens voor .masonry-entry, maar om het een lichte schaduw te geven. Dat ziet er bijzonder goed uit als de postminiatuur helemaal tot aan de rand van de container reikt, wat kan worden bereikt door .masonry-thumbnailmarges en paddings van 0 in alle richtingen te geven. Je zult al deze stijlen willen toevoegen in een bestand met de naam masonry.css in de css-map van je thema.
 
Stap 3: voeg masoneloop toe aan sjablonen
 
Nu we onze sjabloonpart hebben, kunt u deze gebruiken in elke sjabloon in uw thema dat u bevalt. U kunt het toevoegen aan index.php, maar niet category.php als u niet wilt dat het wordt gebruikt voor categoriearchieven. Als je alleen wilt dat het wordt gebruikt op de startpagina van je thema, wanneer het is ingesteld om blogposts te tonen, zou je het in home.php gebruiken. Waar je ook voor kiest alles wat je hoeft te doen is je lus in een container inpakken met de id "metsel-lus" en het sjabloononderdeel in de lus toevoegen met get_template_part (). Zorg ervoor dat je de container van de metsellus eerst vóór het begin start (have_posts ()).
 
Hier is bijvoorbeeld de hoofdlus van de index van twentythirteen.php:
 
          
 
En hier is het aangepast om gebruik te maken van onze Masonry-lus:
 
            
 
Stap 4: Stel de responsieve breedtes van metselwerkitems in
 
Er zijn verschillende manieren om de breedte van elk item van de steen te bepalen. U kunt de breedte instellen met een aantal pixels wanneer u metselwerk initialiseert. Ik ben geen fan van dat te doen omdat ik responsieve thema's gebruik en het vereist een aantal complexe mediaquery's om dingen recht te zetten op kleine schermen. Voor responsieve ontwerpen, heb ik vastgesteld dat het het beste is om een ​​width-waarde in te stellen voor .masonry-entry met een percentage, op basis van het aantal items dat u achter elkaar wilt hebben en laat Masonry de rest van de wiskunde voor u doen.
 
Dit vereist allemaal dat de 100 wordt gedeeld door het aantal items waarvoor u het percentage wilt instellen in een eenvoudige invoer in de stijl van uw thema. Als u bijvoorbeeld vier items in elke rij wilt, kunt u dit doen in uw bestand masonry.css:
 
.metselwerk-entry width: 25%
 
Stap 5: Mobiele optimalisatie
 
We kunnen hier stoppen, maar ik denk niet dat het eindresultaat ongelooflijk goed werkt op kleine telefoonschermen. Als je tevreden bent met hoe jouw thema eruitziet met het nieuwe Masonry-raster op je bureaublad, bekijk het dan op je telefoon. Als je niet tevreden bent over hoe het eruit ziet op je telefoon, dan moet je een beetje werk doen.
 
Ik denk niet dat er voldoende ruimte is op het scherm van een telefoon voor alles wat we hebben toegevoegd aan ons inhouds-metselwerk-sjabloongedeelte. Twee goede oplossingen voor u zijn om het uittreksel voor telefoons in te korten of volledig over te slaan. Hier is een extra functie die u kunt toevoegen aan de functies van uw thema.php om dat te doen. Omdat ik niet denk dat deze problemen een probleem vormen op tablets, gebruik ik een geweldige plug-in Mobble in alle voorbeelden in deze sectie om alleen de wijzigingen aan te brengen op telefoons, niet op tablets. Ik ben ook aan het controleren om te zien of Mobble actief is alvorens het te gebruiken en indien nodig terug te vallen op de meer algemene mobiele detectiefunctie wp_is_mobile die is ingebouwd in WordPress. 
 
 if (! function_exists ('slug_custom_excerpt_length')): function slug_custom_excerpt_length ($ length) // stel de kortere lengte eenmaal $ short = 10 in; // stel lange lengte in eenmaal $ lang = 55; // als we alleen een kort uittreksel voor telefoons kunnen instellen, anders een tekort voor alle mobiele apparaten als (function_exists ('is_phone') if (is_phone ()) return $ short; else return $ long; else if (wp_is_mobile ()) return $ short; else return $ long; add_filter ('excerpt_length', 'slug_custom_excerpt_length', 999); endif; //! slug_custom_excerpt_length bestaat 
 
Zoals je ziet, beginnen we met het opslaan van de lange uittreksellengte en korte uittreksellengte in variabelen, omdat we die waarden twee keer zullen gebruiken en we ze van één plek willen kunnen veranderen als we dat later nodig hebben. Van daaruit testen we of we Mobles is_phone () kunnen gebruiken. Als dat zo is, stellen we het korte fragment voor telefoons en het lange fragment in als dat niet zo is. Daarna doen we hetzelfde fundamentele ding, maar gebruiken we wp_is_mobile, wat van invloed is op alle mobiele apparaten, als is_phone () niet kan worden gebruikt. Hopelijk wordt het andere deel van deze functie nooit gebruikt, maar het is goed om een ​​back-up te hebben voor het geval dat. Zodra de logica van de uittreksellengte is ingesteld, komt het er gewoon op neer om de functie aan het excerpt_length-filter te koppelen.
 
Het verkorten van het fragment is een optie, maar we kunnen het ook volledig afschaffen met een eenvoudig proces. Hier is een nieuwe versie van inhoudsmetselwerk, waarbij het hele fragment is omsloten op telefoons:
 
 
           
 
Deze keer testen we om te zien of we geen telefoon / mobiel apparaat hebben en zo ja, dan geven we het uittreksel uit onze lus. Als we op een mobiel apparaat werken, doen we niets.
 
Een ander ding dat u misschien wilt doen, is de breedte van de Masonry-items vergroten, waardoor het aantal op een rij op mobiele apparaten wordt verminderd. Om dit te doen, zullen we een andere inline-stijl toevoegen aan de header op basis van apparaatdetectie. Aangezien deze functie wp_add_inline_styles gebruikt, is deze afhankelijk van een specifiek stijlblad. In dit geval gebruik ik masonry.css, wat je misschien wilt, om je metselstijlen gescheiden te houden. Als u dit niet gebruikt, kunt u de handle gebruiken van een andere, reeds geregistreerde stylesheet.
 
 if (! function_exists ('slug_masonry_styles')): function slug_masonry_styles () // stel de brede breedte in $ breed = '25%'; // stel smalle breedte in $ narrow = '50% '; / ** Bepaal de waarde voor $ width ** / // als we alleen smal voor telefoons kunnen instellen, anders smal voor alle mobiele apparaten if (function_exists ('is_phone') if (is_phone ()) $ width = $ narrow;  else $ width = $ wide; else if (wp_is_mobile ()) $ width = $ narrow; else $ width = $ wide; / ** Uitvoer CSS voor .masonry-entry met de juiste breedte ** / $ custom_css = ".masonry-entry width: $ width;"; // Je moet hier de handle van een reeds in een wachtrij geplaatst stylesheet gebruiken. wp_add_inline_style ('metselwerk', $ custom_css); add_action (' wp_enqueue_scripts ',' slug_masonry_styles '); endif; //! slug_masonry_styles bestaat 
 
Deze functie bepaalt het aangepaste stylesheet en stelt vervolgens een waarde in voor de breedte met behulp van wat nu zeer vertrouwde logica zou moeten zijn. Daarna maken we de $ custom_css-variabele door de waarde voor width in een anders regulier ogend stukje CSS met $ width door te geven. Daarna gebruiken we wp_add_inline_style om WordPress te vertellen om onze inline-stijlen in de koptekst af te drukken telkens wanneer het stijlblad van de Metselwerk wordt gebruikt en dan koppelen we de hele functie aan wp_enqueue_scripts en zijn we klaar.
 
Als je ervoor kiest om je Metselwerkstijlen te combineren in een bestaande stylesheet, gebruik dan de handle van dat stijlblad met wp_add_inline_style of je inline stijlen worden niet opgenomen. Ik gebruik graag wp_add_inline_style omdat ik over het algemeen de actieknop omloop om metselwerk in een voorwaardelijke versie te plaatsen, zodat deze alleen wordt toegevoegd wanneer dat nodig is. Als ik bijvoorbeeld alleen metselwerk op mijn blogindex en archiefpagina's gebruik, zou ik dit doen:
 
 if (is_home () || is_archive ()) add_action ('wp_enqueue_scripts', 'slug_scripts_masonry');  
 
Deze laatste paar voorbeelden zouden enkele andere ideeën in je brein moeten openen. U kunt bijvoorbeeld soortgelijke logica gebruiken om Masonry helemaal over te slaan op een mobiel apparaat. Ook wp_add_inline_style () is een minder gebruikte, maar zeer nuttige functie omdat je op programmatische wijze verschillende stijlen kunt instellen op basis van elk type voorwaardelijk. Hiermee kunt u de stijl van elk element radicaal wijzigen, niet alleen op basis van apparaatdetectie, maar de wijzigingen kunnen ook gebaseerd zijn op welke sjabloon wordt gebruikt of zelfs als de gebruiker is aangemeld of niet.
 
Ik hoop dat je deze verschillende veranderingen die ik maak, zie als een kans om creatief te worden. Metselwerk en soortgelijke cascadesystemen zijn al een tijdje populair, dus het is tijd voor een aantal nieuwe wendingen over dit populaire idee. Laat ons in de reacties zien welke coole manieren je hebt bedacht voor het gebruik van metselwerk in een WordPress-thema.
 
Josh Pollock, een veelzijdige WordPress-man, schrijft over WordPress, werkt thema-ontwikkeling, is de communitymanager van het Pods Framework en pleit voor open source-oplossingen voor duurzaam ontwerp.