Hoe blokpatronen te maken om het bouwen van websites te versnellen

Blokpatronen worden een groot probleem voor alle WordPress-gebruikers en in dit bericht zal ik je precies laten zien hoe je je eigen blokpatronen kunt maken.


add_action ('init', function () {

register_pattern ('NAAM', [
'title' => __ ('TITLE'),
'content' =>
'PATROON'
]);
});

Twee dagen geleden kwam ik met een video en introduceerde ik dit concept dat om de hoek bij WordPress komt, genaamd blogpatronen. Het is nu een beetje experimenteel en het is iets waar ik erg enthousiast over ben. En ik denk dat als je je geest rond het potentieel van wat blokpatronen concentreert, je het potentieel daarvoor kunt zien, om je te helpen websites sneller te leveren als je klanten hebt, om hen in staat te stellen meer te doen met hun website.

Dus ik laat het je zien. Precies hoe je een blokpatroon maakt in deze video. Nu gaan we een paar dingen doen die een beetje technisch zijn, en ik weet dat dit het WordPress-kanaal is voor niet-techneuten, dus ik ga proberen het zo eenvoudig mogelijk te maken, maar je bent aan het einde gaan zien hoe eenvoudig het is om een ​​van deze blokpatronen te maken.

Dus laten we gewoon doorgaan en ernaar kijken. Dus hier is de pagina waar het praat over de nieuwe release van deze functie bij het maken ervan. Alleen de gemiddelde mensen kunnen een blokpatroon maken. Dus als ik naar beneden scrol, geeft het het soort sjabloon ervoor. Dus alles wat erbij betrokken is, is iets maken dat een aangepaste functie wordt genoemd.

Maar maak je geen zorgen, ik ga het voor iedereen supergemakkelijk maken, maar hier is dat kleine codefragment. Nu heb ik een link in de videobeschrijving hieronder. Het brengt je naar mijn website. U krijgt ook schriftelijke instructies over hoe u dit moet doen. Dit kleine codefragment dat u kunt kopiëren en op uw eigen website kunt plakken.

Oké, dit is wat we nodig hebben. Dit is een nieuwe functie voor Gutenberg en je moet de Gutenberg-plug-in hebben geïnstalleerd en geactiveerd, dus je hebt een minimale versie van 7.8 nodig en dit is wat onlangs uitkwam. Wat er uiteindelijk zal gebeuren, is misschien over vier tot zes maanden, misschien wordt dit tegen het einde van de zomer van 2020 standaard opgenomen in WordPress, maar voor nu moet je dit doen, als je dit wilt uitproberen , je moet de Gutenberg-plug-in installeren.

Het volgende dat u kunt doen, en dit is optioneel, als u niet weet hoe u een aangepaste functie aan een kindthema kunt toevoegen, en ik gebruik zelfs geen kindthema meer, wilt u misschien deze gratis plug-in gebruiken, en dit is een van de beste gratis plug-ins. Dat ik ooit ben tegengekomen, en het heet codefragmenten. En dit zal ons in staat stellen om deze aangepaste functie toe te voegen en een zeer gemakkelijk te gebruiken manier, gemakkelijk te beheren manier.

Oke? Dus dat heb je nodig. En dit is optioneel. Dit is een gratis plug-in genaamd cadansblokken. En wat dit doet, is dat het veel functionaliteit voor paginabuilder toevoegt aan Gutenberg. Het is best netjes in wat je ermee kunt doen. U kunt kolommen slepen en het formaat ervan wijzigen. Er zijn veel elementen die veel van die paginabuilderfunctionaliteit toevoegen, maar aan Gutenberg, en het is een volledig gratis plug-in.

Oke. Laten we nu naar mijn website springen. Dus hier is een website. Het is nu allemaal ingesteld. En als je niet weet hoe je een plug-in moet installeren, werd iemand laatst boos op me omdat hij niet liet zien hoe je een plug-in en een video installeert. Je gaat naar plug-ins, je klikt op nieuwe toevoegen, en dan hier zoek je naar de naam van die plug-in, en dan klik je.

Download, of het spijt me, je klikt nu op installeren en dan activeer je het. Het is een heel eenvoudig proces. Dus ik klik op mijn geïnstalleerde plug-ins en je kunt zien dat ik Gutenberg heb geïnstalleerd en dit waren optionele cadansblokken, en hier zijn codefragmenten. Dus ik ga door en activeer codefragmenten en je kunt zien dat het nu hier is geactiveerd.

Dus ga je gang en klik op codefragmenten en je zult zien dat het erbij komt. En hier is deze tuimelschakelaar en deze is geschakeld. Ze zijn allemaal uitgeschakeld en u hoeft deze eigenlijk niet te bewaren, zoals deze standaard wordt geleverd. Je kunt hier gewoon klikken en je zou ze allemaal kunnen verwijderen, maar ik ben al doorgegaan en heb hier een sjabloon met de naam blokpatroon toegevoegd.

Dus wat je zou doen. Klik op nieuw toevoegen en je kunt dit blokpatroonsjabloon een naam geven in dat kleine codefragment dat ik je hier heb laten zien, maar ik ga je een aangepaste versie hiervan op mijn website geven. Je kopieert en plakt dat hier, en dan klik je op wijzigingen opslaan.

U klikt niet op opslaan en activeren, u klikt op om wijzigingen op te slaan en ik zal u in een oogwenk laten zien waarom. Oke. Dus wat u nu wilt gaan doen, is dit blokpatroon maken. En een blokpatroon is gewoon een opgeslagen sectie. Dus als je een paginabuilder gebruikt, weet je nu dat je secties kunt opslaan en sommige daarvan hebben vooraf ontworpen secties, maar de gebruikerservaring, ik denk dat het veel beter is in Gutenberg.

Dus wat u wilt doen, is naar pagina’s gaan. En klik op nieuw toevoegen en u wilt dit een naam geven. Um, laat me eigenlijk van deze tour afkomen. Je zult dit blokpatroon een naam willen geven, en dit is precies waar we dit blokpatroon gaan maken. Nu ga ik niet doorgaan met het maken van een blokpatroon.

Ik laat je degene zien die ik al heb gemaakt, en het is. Hier. Dus hier is een blokpatroon dat ik heb gemaakt. Je zou kunnen zien dat het deze sectie is. Het heeft deze kleurrijke achtergrond. Ik heb een kop, een paar tussenkoppen en een paar knoppen hier, en ik heb er een video in gezet. Dus ik ga dit mijn blokpatroon maken, zodat ik met twee muisklikken dit overal op mijn website kan toevoegen.

Dus wat ik ga doen is rechtsboven klikken, er zijn drie punten. Ze zijn nogal moeilijk te zien, en als je daarop klikt, is er hier een optie die code-editor zegt. Dus je wilt op de code-editor klikken en dan zie je alle code die nodig is om van die blog een blokpatroon blogpatroon te maken.

Oke? Dus je gaat hier klikken en dan klik je op control a of command a op je computer om het allemaal te markeren. En ze zijn nieuw jaar. Zet het op je klembord. Dus ik ga het doen, controle C. Dus nu staat het in mijn klembord. Dus nu ga ik hier weg. Eigenlijk, als je deze weergave wilt verlaten, is er hier een kleine X die de exitcode-editor zegt, en nu laat het me zien hoe het normaal hier is.

Oke. Je kunt dit dus als concept opslaan als je wilt, maar je hebt dit niet nodig. Dit is alleen voor jou om dit blokpatroon te maken, en je zou een blokpatroon kunnen maken dat van alles is, en het hoeft niet één blok dingen te zijn. Het kan bijvoorbeeld een hele sjabloon zijn voor een blogpost. Oké, dus nu ga ik klikken waar het me uit de blokeditor haalt.

Nu ga ik terug naar codefragmenten. Dus hier heb ik die blokpatroonsjabloon gemaakt. Ik klik op kloon, en nu is er een kloon van gemaakt, en ik klik op de titel om het te bewerken. Dus voor de titel ga ik dit veranderen in een titel die logisch is voor het beheren ervan.

Dus voor mij noem ik het gewoon. Een held met video. Dus nu weet ik wat dit is als ik in de toekomst naar de lijst kijk. Oké, dus er zijn een paar dingen die je moet bewerken. Drie dingen. Het is super simpel. De eerste is naam. Dus dit kan elke naam zijn, het moet allemaal kleine letters zijn, geen spaties of funky karakters.

Dus ik zal doorgaan en nu een naam invoeren. Je kunt zien dat ik het een held noemde met video. Vervolgens moet je hier een titel invoeren. Dus we vervangen deze woordtitel, en dit is wat er te zien is. Je kijkt naar een lijst met blogpatronen, niet met blogblokpatronen. En als je het merkt, kan dit, dit is de vriendelijke naam, dus het kan spaties hebben.

Uh, ik zou er gewoon geen funky personages in stoppen. Spaces is prima. Dus dat is wat er zal verschijnen in deze lijst a en daarna hier waar patroon a staat. Je plakt gewoon wat je zojuist hebt gekopieerd in je klembord. Nu wil ik dat je één ding noteert. Voor elk van deze. Ik heb de kleine apostrof op de voor- en achterkant achtergelaten.

U ziet dat er de apostrof is die daar moet zijn. Als je dat per ongeluk verwijdert, plaats het dan terug. Oke. We veranderen gewoon. We vervangen alleen de tijdelijke aanduiding voor tekst. Dus hier wil ik niet alles vervangen. Ik wil gewoon het woordpatroon vervangen, dus ik ga het markeren en dan ga ik plakken wat ik heb gekopieerd.

En daar is het. Dus nu ga ik naar beneden scrollen en deze keer klik ik op wijzigingen opslaan en activeren. En dus zou het nu moeten zeggen dat het fragment is bijgewerkt en geactiveerd. En als ik op alle fragmenten klik, kon je zien dat deze ene held met video is ingeschakeld. Dus in de toekomst wil ik voor aanvullende blokpatronen naar de plaats gaan waar het blokpatroonsjabloon staat en klik op kloon en maak dat blokpatroonsjabloon op die manier.

Op die manier heb ik altijd de sjabloon erin. Als je het nu al weet en je hebt je eigen manier om aangepaste functies toe te voegen, heb je geen codefragmenten nodig en, en al dit soort dingen, je zou het kunnen plaatsen waar je het wilt plaatsen. Dit is gewoon een veel eenvoudigere manier om het te beheren als je het mij vraagt. Oké, dus nu ga ik naar pagina’s met mijn klik op nieuwe toevoegen en als je de wilt zien.

Blokkeer patronen. Uh, hier is het pictogram ervoor. En als je erover zweeft, staan ​​er blokpatronen. En als ik erop klik, zie je enkele blokpatronen waarmee momenteel wordt geëxperimenteerd. Maar als je naar beneden scrolt, zie je dat blokpatroon dat ik heb gemaakt. En wat echt leuk is, is dat het een miniatuurvoorbeeld genereert.

En het doet dit dynamisch. Je hebt tools voor het maken van pagina’s die dit niet eens doen. Uh, en het maakt het zoveel gemakkelijker om je blokpatronen te beheren. Dus, en je kunt hier zien dat het held met sjabloon zegt. Als ik dit nu overal op mijn website wil gebruiken, is het één muisklik. En dan is het daar. En alles wat ik op dat moment zou moeten doen om wat teksten te veranderen, veranderde de links naar de knoppen.

Ik kan hier klikken en ik kan de video wijzigen. Zo. Zo creëer je een blokpatroon. Dit is een groot probleem, denk ik, want wat er gaat gebeuren, is een thema. Ontwikkelaars en makers van plug-ins, ze zullen deze blokpatronen voor u kunnen maken, dus het gaat zoveel sneller, sneller en gemakkelijker om een ​​website te bouwen met behulp van de native tool voor het bouwen van blokken die WordPress al bevat.

Er is niets te kopen, er is geen opgeblazen code. Er zijn geen van deze dingen, en. Wat brengt het nog verder. Je kunt zien hoe gemakkelijk het is om je eigen blokpatronen te maken, en het is heel gemakkelijk om het in een lijst te zien. Klik op een knop en deze wordt erin geplaatst. Dus nu zou je kunnen bedenken hoeveel gemakkelijker het kan zijn om een ​​website te bouwen als je je eigen bibliotheek met blokpatronen hebt.

Dus als u websites maakt voor klanten en u geen paginabuilder wilt gebruiken. U wilt gewoon de ingebouwde blokbouwer gebruiken. U kunt uw eigen bibliotheek met patronen maken. Je zag hoe gemakkelijk het is. Ik kan het doen. Je zou het kunnen doen. Uh, je zou je eigen bibliotheek met blokpatronen kunnen maken die je van site naar site kunt verplaatsen, en je kunt je klant laten zien hoe ze dit kunnen uitwerken.

Dit is niet alleen voor pagina’s, dit is voor berichten en het is niet beperkt tot alleen dat ene gedeelte dat je hebt gezien. Eigenlijk alles wat u op een pagina kunt maken. Je kunt een blokpatroon maken. Dus als je de blokbouwer alleen voor blogposts gebruikt, en er zijn bepaalde elementen die je keer op keer wilt gebruiken in een blogpost om de lay-out van de blogposts te verbeteren, dan kun je een blokpatroon maken voor het.

En het is heel eenvoudig. Eén klik en je kunt het gebruiken. In feite zijn de hele blogpostsjablonen. Dus als er een formule is die u volgt voor de secties van een blogpost, kunt u van die hele blogpost een bloksjabloon maken. Die ene klik wordt toegepast en het enige dat u hoeft te doen is aanwijzen, klikken en bewerken.

Dus het laatste voordat we hier eindigen, dit is een nieuw concept en het is iets om over na te denken de komende maanden. Experimenteer nu. Het is niet helemaal Yeti, Yeti. Het is nog niet helemaal klaar voor prime time, want als je het hebt opgemerkt, het enige negatieve dat ik zag, is wanneer je naar de blog kijkt. Zie, daar ga ik weer.

Als je naar de blokpatronen kijkt, is het gewoon een hogere artikellijst waar je doorheen moet scrollen, dus ze moeten het proces van categoriseren en organiseren verbeteren. Misschien hebben ze een soort interface om het visueler en gemakkelijker te maken om mee te werken. Als je 50 verschillende blokken krijgt.

Patronen. Dus ze moeten dat gewoon verbeteren. En sommige syntaxis van de code kan een beetje veranderen. Wie weet wanneer dit eindelijk uitkomt. Maar het hele punt van deze video is gewoon om je te laten zien wat er heel, heel snel mogelijk zal zijn, zodat je kunt beginnen. Bedenk hoe het van toepassing kan zijn op uw workflow en wat u doet als websitebouwer.

Hoe dan ook, dat is alles wat ik voor je heb in deze post. Ik hoop dat je geavanceerde blik op de toekomst van WordPress op deze manier zult waarderen, en als je deze video op prijs stelde of waarde vond, overweeg dan om een ​​duimpje omhoog te geven en deze video te delen, zodat mensen kunnen zien wat er om de hoek komt.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Adblock
    detector