Als we bladeren door de WordPress-themamap, een meerderheid van de thema's toont omslagafbeeldingen. Het is een functie waar veel vraag naar is. De trend op de omslagpagina is waar, zelfs in de themamap blokkeren ook schermafbeeldingen.
Laten we het volgende voorbeeld bekijken van: Twintig Twintig (een klassiek thema) met een omslagsjabloon die kan worden gebruikt om zowel in een enkel bericht als op een pagina weer te geven, waarbij de uitgelichte afbeelding van het bericht bovenaan wordt weergegeven die zich uitstrekt over het browserscherm, met de titel van het bericht en andere gewenste metagegevens eronder. Met omslagsjablonen kunt u inhoud maken die zich onderscheidt van de traditionele beperkingen van het weergeven van inhoud.
Het maken van omslagsjablonen vereist momenteel het schrijven van PHP-code zoals hier vastgelegd in de Voorbladsjabloon van Twenty Twenty standaardthema. Als we kijken naar de template-parts/content-cover.php bestand, het bevat de code voor het weergeven van inhoud wanneer de cover-template is gebruikt.
Het is dus niet mogelijk om een voorblad op maat te maken als je geen diepgaande kennis van PHP hebt. Voor veel gewone WordPress-gebruikers is de enige optie het gebruik van plug-ins zoals Custom Post Type UI zoals beschreven in deze korte video.
Bedek secties in blokthema's
Sinds WordPress 5.8, konden thema-auteurs aangepaste sjablonen maken (zoals een enkele post, auteur, categorie en andere) met een topheld-sectie met blok-editor bedek blok en gebundeld in hun thema's met minimale of geen code.
Voordat we ingaan op hoe grote omslagsecties worden gemaakt in sjablonen voor blokthema's, laten we kort kijken naar de twee blokthema's Twintig Tweeëntwintig en Wabi door Rich Tabor (volledige recensie hier).
Achter de schermen implementeert Twenty Twenty-Two een grote header door een verborgen afbeelding toevoegen die is opgeslagen als een patroon in de header-dark-large onderdelen. Terwijl in het Wabi-thema de achtergrondkleur van de grote kop in een enkele post wordt geïmplementeerd met achtergrondkleuren accentueren en een afstandsblok van 50 px hoog (regels: 5-9). De accentkleuren worden beheerd door de assets/js/accent-colors.js bestand.
Vele anderen kozen ervoor om een bovenklepgedeelte te maken met behulp van afdekblok, waarmee gebruikers de achtergrondkleur konden wijzigen en een statische afbeelding uit de mediabibliotheek konden toevoegen of konden uploaden vanaf media-apparaten - zonder enige code te schrijven. Met deze aanpak worden beelden uit de post aanbevolen afbeeldingsblok moest handmatig aan elk afzonderlijk bericht worden toegevoegd als je de afbeelding van het bericht als achtergrondafbeelding in afzonderlijke berichten wilde hebben.
Bedek blokken met een dynamische afbeelding van de post
WordPress 6.0 heeft weer een coole beschikbaar gesteld uitgelichte afbeelding omslagblokken functie, waarmee de uitgelichte afbeelding van een bericht of pagina als achtergrondafbeelding in het omslagblok kan worden gebruikt.
In de volgende korte video, Automattic-ingenieurs bespreken het toevoegen van uitgelichte afbeeldingen om blokken te bedekken met een voorbeeld van Archaeo thema:
Het afbeeldingsblok inclusief post-featured afbeeldingsblok kan verder worden aangepast met behulp van duotone kleur in theme.json zoals besproken in deze korte De punten verbinden YouTube-video (Anne McCarthy van Automatic).
Gebruiksvoorbeelden (Wei, Heldere modus)
Als we door de miniatuurafbeeldingen bladeren in de themamap blokkeren, we zien dat de meeste daarvan grote koptekstsecties bevatten. Als we in hun sjabloonbestanden duiken, maken ze gebruik van omslagblokken met een statische afbeeldingsachtergrond.
Sommige recent ontwikkelde thema's maken gebruik van omslagblokken met de dynamische achtergrond van de afbeelding (bijvoorbeeld Archeo, Wei, Frost, Bright Mode, enz.). Een kort overzicht van de nieuwe functie is beschikbaar in deze korte GitHub-video.
Het combineren van dynamische accentkleuren kenmerken van Wabi thema met omslag en post-uitgelichte afbeeldingsblokken, breidt Rich Tabor zijn creativiteit verder uit in zijn nieuwe Wei thema (volledige recensie beschikbaar hier) om dynamische omslagafbeeldingen van een enkele post weer te geven.
In zijn Wei-aankondigingsbericht, Rich Tabor schrijft: “Achter de schermen, de single.html sjabloon gebruikt een Cover-blok dat gebruikmaakt van de uitgelichte afbeelding van het bericht. Vervolgens wordt de duotoon aangebracht door het kleurenschema dat aan de paal is toegewezen. Zo ziet zowat elke afbeelding er goed uit”.
Als je dieper in het koptekstblok van het Wei-thema wilt graven en wilt leren hoe je er zelf een kunt maken, dan is hier een korte video oppompen van Frank Klein (WP Development Courses) die stap voor stap uitlegt hoe het is gemaakt.
Net als bij het Wei-thema, Brian Gardner maakt ook gebruik van een omslagblok met een post-uitgelicht afbeeldingsblok in zijn recente Heldere modus thema om opvallende inhoud mee weer te geven levendige kleuren.
Brian vertelde WPTavern: "hij houdt het meest van het thema is de manier waarop het Cover Block wordt gebruikt" enkele pagina's. Het trekt de afgebeelde afbeelding in het Cover-blok en biedt ook aangepaste blokstijlen voor schaduwen en opties op volledige hoogte. […] Ik heb het gevoel dat dit echt laat zien wat er allemaal mogelijk is met moderne WordPress.”
Voor meer details, hier is het: demosite en volledige recensie van Brian's Bright Mode-thema.
Complexe lay-outs ontwerpen met blokeditor
Onlangs lanceerde WordPress een nieuwe blokeditor ontworpen landingsstartpagina en download pagina. De aankondiging trok gemengde reacties van zijn lezers, waaronder van Matt Mullenweg (Automattic) die commentaar gaf op de 33 dagen die nodig waren om zo'n "eenvoudige pagina" te ontwerpen en te lanceren. Je kunt vinden extra discussies achter de schermen hier.
Als reactie hierop creëerde Jamie Marsland van Pootlepress deze YouTube-video waar hij in bijna 20 minuten een bijna identieke homepage reproduceert.
Reageren op Marsland-video, Sarah Gooding van WP Travern schrijft:: “Hij is wat je zou kunnen omschrijven als een power user met de block editor. Hij kan snel rijen, kolommen en groepen door elkaar schudden, de opvulling en marges aanpassen als dat nodig is, en elke sectie de bijbehorende kleur voor het ontwerp toewijzen. Op dit moment is dit niet iets wat de meeste gemiddelde WordPress-gebruikers zouden kunnen doen.”
Hoewel de blokeditor een lange weg heeft afgelegd, zijn er nog steeds groeiende pijnpunten voor de meeste thema-ontwikkelaars en gewone gebruikers om er complexe lay-outs mee te maken en te ontwerpen.
Verbetering toevoegen aan TT2 Gopher-blokken
In dit gedeelte zal ik u laten zien hoe ik verbeteringen heb toegevoegd aan de TT2 Gopher Blocks-thema waar ik in mijn vorige artikel naar verwees. Geïnspireerd door omslagblokken van thema's die ik eerder beschreef, wilde ik drie omslagsjablonen (auteur, categorie en enkele omslag) aan het thema toevoegen.
Tijdens het browsen op websites zien we twee soorten omslagkoppen. De kop die het vaakst wordt waargenomen, is de omslagsectie die is vermengd met de koptekst van de site (sitetitel en navigatie bovenaan) in het omslagblok (bijv. Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode, etc.). We vinden ook een koptekstgedeelte dat niet is vermengd met de koptekst van de site en er net onder is geplaatst, zoals dit BBC Future website. Voor het thema TT2 Gopher-blokken koos ik voor het laatste.
Patronen voor omslagkopteksten maken
Laten we eerst omslagkoppatronen maken voor sjablonen voor auteurs, enkele en andere (categorieën, tags) met behulp van omslagblokken. Dan zetten we ze om in patronen (zoals beschreven) hier eerder) en roep de respectieve kopomslagpatronen op in de sjablonen.
Als u bekend bent met het werken met de blokeditor, ontwerp dan uw koptekstgedeelte met omslagblokken in de site-editor en converteer vervolgens de omslagkopcode in patronen. Als u echter niet bekend bent met de FSE-editor, dan is de eenvoudigste manier om patronen te kopiëren uit de patronen directory in een bericht, breng de nodige wijzigingen aan en zet het om in een patroon.
Naar mijn vorig CSS-Tricks artikel, heb ik in detail besproken over het maken en gebruiken van blokpatronen. Hier is een kort overzicht van de workflow die ik gebruik om het koptekstpatroon voor een enkele postomslag te maken:
Koppatroon voor enkele postomslag
Stap 1: Laten we met behulp van de FSE-interface een nieuw leeg bestand maken en beginnen met het bouwen van de blokstructuur zoals weergegeven in het linkerdeelvenster.
Als alternatief kan dit eerst in een bericht of pagina worden gedaan en vervolgens de opmaak kopiëren en plakken in een patroonbestand, later.
Stap 2: Vervolgens, om de bovenstaande opmaak in een patroon om te zetten, moeten we eerst de code-opmaak kopiëren en in een nieuw /patterns/header-single-cover.php in onze code-editor. We moeten ook de vereiste opmaak voor de koptekst van het patroonbestand toevoegen (bijv. titel, slug, categorieën, invoeger, enz.).
Hier is de volledige code van de /patterns/header-single-cover.php file:
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
Stap 3: Voor deze demo heb ik gebruikt deze afbeelding uit de fotomap als een opvulachtergrondafbeelding, en paste de Middernacht duotoon kleur. Om post-uitgelichte afbeelding dynamisch te gebruiken, moeten we toevoegen: "useFeaturedImage":true in het omslagblok door de bovenstaande afbeeldingslink te vervangen net voor de "dimRatio":50 zodat de regel 10 er als volgt uit moet zien:
Als alternatief kan de opvulafbeelding ook worden gewijzigd door te klikken op vervangen en selecteren Uitgelichte afbeelding gebruiken optie:
Nu moeten de kopomslagpatronen zichtbaar zijn in het paneel voor het invoegen van patronen voor gebruik overal in de sjablonen, berichten en pagina's.
Kopteksten archiefomslag
Geïnspireerd door dit WP Tavern-bericht en een stapsgewijze uitleg om een koptekst van een auteursjabloon te maken, wilde ik een vergelijkbare omslagkop maken en ook toevoegen aan het TT2 Gopher-thema.
Laten we eerst het koptekstpatroon van de archiefomslag maken voor author.html de sjabloon ook, volgens de bovenstaande workflow. In dit geval maak ik dit op een nieuwe lege pagina door blokken toe te voegen (zoals hieronder weergegeven in lijstweergave):
Op de achtergrond voor de omslag heb ik dezelfde afbeelding gebruikt als in de omslag met één berichtkop.
Omdat we een korte auteursbiografie op het auteursblok willen weergeven, moet er ook een biografische verklaring worden toegevoegd aan de gebruikersprofielpagina, anders wordt er een lege ruimte in de front-end weergegeven.
Het volgende is de opmaakcode van de header-author-cover, dat we patroon zullen gebruiken, in de volgende stap:
Published by:
Om de markup te verbergen in a header-author-cover patroon, moeten we de vereiste opmaak voor de koptekst van het patroonbestand toevoegen, zoals eerder beschreven. Door het bewerken van de header-author-cover.php patroon, kunnen we vergelijkbare koptekstomslagen maken voor tags, taxonomie en andere aangepaste sjablonen.
De header-category-cover.php patroon voor mijn category.html sjabloon is beschikbaar op GitHub.
Sjablonen maken met blokken voor koptekst
WordPress 6.0 en de recente Gutenberg 13.7 uitgebreide functies voor het maken van sjablonen in de blokeditor, waardoor het voor veel WordPress-gebruikers, zonder diepgaande kennis van codering, mogelijk is om hun aangepaste sjablonen te maken.
Voor meer gedetailleerde informatie en gebruiksscenario's vindt u hier een: grondige aanpassingsnota door Justin Tadlock.
Blok-editor maakt het mogelijk om verschillende soorten sjablonen te maken, inclusief omslagsjablonen. Laten we kort samenvatten hoe combineren afdekblok en post aanbevolen afbeeldingsblok met de nieuwe sjabloon-gebruikersinterface is het eenvoudig om verschillende soorten aangepaste omslagsjablonen te maken, zelfs met geen of weinig codeervaardigheden.
Het maken van sjablonen is veel eenvoudiger gemaakt met Gutenberg 13.7. Hoe bloksjablonen te maken met codes en in site-editor wordt beschreven in de Thema handboek en in mijn vorige artikel.
Auteursjabloon met omslagblok
Top (kopgedeelte) opmaak van de author.html sjabloon wordt hieronder weergegeven (regel 6):
...
...
...
... Hier zijn screenshots van omslagkoppen voor de author.html en category.html Sjablonen:
De hele code voor beide sjablonen is beschikbaar op GitHub.
Enkele paal met afdekblok
Om het omslagblok in onze enkele post weer te geven, moeten we de . bellen header-cover-single pattern onder het kopgedeelte (regel 3):
....
....
....Hier is een schermafbeelding met de front-end weergave van de enkele post met het koptekstgedeelte:
De hele single-cover.html sjabloon is beschikbaar op GitHub.
U kunt aanvullende stapsgewijze handleidingen vinden over het maken van een held kop bericht sectie en het gebruik van achtergrondafbeeldingsblokken voor post-uitgelichte afbeeldingen on WP Tavern en Volledige site bewerken website.
Daar heb je het!
Resources
Uitgelichte afbeelding omslagblok
Artikelen
Ook al zijn de blokthema's in het algemeen: veel pushback krijgen van leden van de WordPress-community, Naar mijn mening, zij zijn de toekomst van WordPress, te. Met blokthema's kunnen amateur-thema-auteurs, zonder de diepe codeervaardigheden en beheersing van PHP- en JavaScript-talen, nu thema's maken met complexe lay-outs met een hero-coversectie zoals beschreven in dit artikel in combinatie met patronen en stijlvariaties.
Als een vroege Gutenberg-gebruiker kon ik niet enthousiaster zijn over de nieuwe thematools zoals maak een blokthema plug-in en andere waarmee thema-auteurs het volgende rechtstreeks vanuit de gebruikersinterface van de blokeditor kunnen bereiken zonder code te schrijven:
- (I) en je merk te creëren
- (ii) themabestanden overschrijven en exporteren
- (iii) blanco of een child-thema genereren, en
- (iv) stijlvariatie van het huidige thema wijzigen en opslaan
Bovendien maken de recente iteraties van de Gutenberg-plug-in het mogelijk om: vloeiende typografie en lay-out uitlijningen en andere stilistische bedieningselementen met alleen theme.json bestand zonder JavaScript en een regel met CSS-regels.
Bedankt voor het lezen en deel uw opmerkingen en gedachten hieronder!
