Wil je een maken WordPress Plugin simpel Gutenberg blok?
Houden we niet allemaal van WordPress? Het platform heeft sinds de oprichting enorm veel succes gekend, waarbij ontwikkelaars voortdurend nieuwe functies toevoegen. Een van de opvallende kenmerken van de afgelopen tijd is de WordPress Block Editor, codenaam Gutenberg.
Gutenberg biedt WordPress-gebruikers een spannende nieuwe manier om inhoud te publiceren en hun website aan te passen. Het is ongelooflijk gemakkelijk te gebruiken, wat geweldig nieuws is voor zowel beginners als ontwikkelaars. Als je de nieuwste versie van WordPress gebruikt, ben je al bekend met de blokeditor en het concept van blokken.
Standaard wordt de WordPress-blokeditor geleverd met enkele blokken waarmee je tekst, afbeeldingen, citaten, audio, video, insluitingen, enz. kunt opnemen. Daarnaast zijn er een heleboel Gutenberg-add-ons waarmee je de editor kunt uitbreiden zonder te breken een zweet.
Het kan echter zijn dat u een specifieke behoefte heeft die u ertoe aanzet uw eigen aangepaste blokken te maken. In dit artikel laten we u in een paar alinea's zien hoe u aangepaste Gutenberg-blokken kunt maken om aan uw specifieke behoeften te voldoen.
Zonder verder oponthoud, laten we beginnen, want er valt veel te leren.
Maar eerder, als je WordPress nog nooit hebt geïnstalleerd, ontdek je Hoe maak je een WordPress blog 7 stappen te installeren et Hoe te vinden, installeren en activeren van een WordPress theme op uw blog
Ga dan terug naar waarom we hier zijn.
Wat zijn blokken eigenlijk?
Blokken behandelen alinea's, koppen, media en insluitsels als componenten die, wanneer ze aan elkaar worden geregen, de inhoud vormen die is opgeslagen in de WordPress-database, waarbij het traditionele concept van tekst wordt vervangen door media en insluitsels.
In het verleden vertrouwden WordPress-gebruikers op tekst en shortcodes om inhoud toe te voegen. Gutenberg gebruikt blocs. Met de nieuwe editor kunt u blokeenheden gebruiken om rijke en flexibele lay-outs te maken die gemakkelijk te beheren zijn. Momenteel kun je de blokeditor gebruiken voor berichten en pagina's, maar er zijn actieve plannen om te nemen ondersteuning voor volledige sitebewerking in de toekomst.
Werken met blokken maakt het creëren van inhoud in WordPress behoorlijk verfrissend. Bovendien ondersteunen veel bestaande plug-ins de nieuwe editor en worden ze geleverd met kant-en-klare blokken die het gemakkelijk maken om inhoud van genoemde plug-ins toe te voegen. Met de editor kun je blokken naar een pagina slepen en neerzetten, zodat je sneller op de publicatieknop kunt drukken.
Net als een paginabuilder die direct in WordPress is geïntegreerd.
Als u bekend bent met de paginabuilders zoals Elementor, bent u waarschijnlijk bekend met het concept van het slepen en neerzetten van pagina's. Gutenberg is een poging om het bouwen van websites met slepen en neerzetten volledig te integreren in de WordPress-kern.
Dus laten we naar het beste deel van het artikel van vandaag gaan. Laten we leren hoe we een eenvoudig blok kunnen maken. U kunt dit handmatig doen of met plug-ins zoals: Genesis aangepaste blokken (voorheen BlockLab), Luie blokken ou ACF. Het maken van aangepaste blokken is een beetje technisch, dus voor de doeleinden van het artikel van vandaag gebruiken we een plug-in.
Een aangepast blok maken (met behulp van Genesis Custom Blocks)
Het is gemakkelijker om de plug-in-route te volgen, omdat het maken van aangepaste Gutenberg-blokken vanaf het begin een goed begrip van HTML, CSS, PHP en vooral javaScript vereist. Je moet ook React begrijpen.
Voor de volgende sectie gebruiken we Genesis Custom Blocks. De gratis versie is beschikbaar in de officiële WordPress-repository, wat betekent dat we deze in het WordPress-beheerdersdashboard kunnen installeren.
Genesis Custom Blocks installeren
Log in op uw WordPress-beheerdersdashboard en navigeer naar Extensies> Toevoegen, zoals hieronder weergegeven.
Vul dan " Genesis aangepaste blokken in het trefwoordzoekvak en klikken op de knop Installeer nu
Daarna, activeren de plug-in om u op weg te helpen
Laten we vervolgens een nieuw aangepast blok maken. Laten we ter illustratie een aangepaste call-to-action (CTA) maken die we toevoegen aan het einde van elk artikel dat we publiceren. Het beste is dat je de blokken kunt hergebruiken, zodat je niet steeds dezelfde blokken hoeft te maken.
Navigeer in uw WordPress-beheerdersmenu naar Aangepaste blokken > Nieuw toevoegen, zoals we hieronder benadrukken.
Dit brengt je naar de volgende pagina waar je alle opties vindt om een ​​aangepast blok te maken (in ons geval een CTA):
Hier zijn een paar woorden om uit te leggen wat u in de bovenstaande schermafbeelding ziet. Vanaf de top, je hebt het.
Hoofdbewerkingsgebied:
- Bouwer – U zult hier waarschijnlijk veel tijd besteden aan het ontwerpen van uw aangepaste blok. de Constructeur laat je titel, velden, slug, trefwoorden, categorie toevoegen en een voorbeeld van je aangepaste blok bekijken. U leert hoe u velden kunt toevoegen.
- Sjabloon-editor – Na het ontwerpen van uw aangepaste blok (d.w.z. het toevoegen van verschillende velden), moet u een bloksjabloon maken (lezen, code toevoegen) in de modeleditor. We zullen meer leren wanneer we de CTA ontwerpen.
- Editorvoorbeeld - Hiermee kunt u een voorbeeld van het aangepaste blok bekijken in de WordPress-blokeditor.
- Front-end voorbeeld – Hier kunt u een voorbeeld bekijken van hoe het aangepaste blok eruit zal zien op uw website.
- EditorField – Zal velden tonen in het hoofdbewerkingsgebied van een bericht of pagina (je weet wel, net zoals je je normale berichten ziet in de WordPress-editor)
- InspecteurVeld – Toont het veld in de rechterzijbalk onder de Block Inspector.
Zijbalkopties
- Naaktslak - Het wordt automatisch gevuld op basis van de titel die u aan uw aangepaste blok geeft. Dit is belangrijk bij het maken van het blokmodel.
- icon – Met deze optie kunt u een pictogram toevoegen aan uw aangepaste blok.
- Categorie - Hiermee kunt u een categorie toewijzen aan uw aangepaste blok. U kunt uw aangepaste blok categoriseren met behulp van een van de ingebouwde categorieën, of u kunt een geheel nieuwe categorie maken.
- Trefwoorden - Voeg maximaal drie gerelateerde trefwoorden toe aan uw aangepaste blok, zodat mensen het gemakkelijk kunnen vinden in de blokkiezer.
- Open blokvelden in een modaal in plaats van op hun plaats te renderen – Schakel deze optie in als u velden in een modaal wilt openen. Dit is handig als je een aangepast blok hebt met veel velden.
- Bericht Types – Vink het/de vakje(s) aan om toe te staan ​​dat uw aangepaste blok op elk berichttype wordt weergegeven. Als u bijvoorbeeld Berichten uitschakelt, wordt de blokkering niet weergegeven bij berichten.
Een aangepast blok maken
Nu u een beter begrip heeft van de gebruikersinterface en wat elk onderdeel doet, gaan we aan de slag.
in Bouwer - Bouwer -, geef je aangepaste blok een passende titel. We gaan CTA kiezen voor deze zoals hieronder weergegeven.
Voordat we nieuwe velden toevoegen, laten we een pictogram, trefwoorden toevoegen en een categorie kiezen voor het aangepaste blok, zoals hieronder weergegeven.
Laten we daaraan wat velden toevoegen aan ons aangepaste blok. Voor ons voorbeeld-CTA-blok voegen we slechts drie velden toe in de volgende volgorde: een afbeelding, wat tekst en een bestandsveld waarmee mensen een e-boek kunnen downloaden.
Lees ook: 5 WooCommerce-plug-ins om uw producten bulksgewijs te bewerken
Blokvelden toevoegen
In de sectie Editor veldenKlik op het plusteken (+) om het eerste veld toe te voegen, zoals hieronder weergegeven.
Laten we vervolgens een afbeeldingsveld toevoegen. Stel in de zijbalk de in Veldtype aan Beeld en stel de andere opties in. Houd ook rekening met de slug zoals we deze zullen gebruiken bij het maken van het blokmodel.
Voeg daarna op dezelfde manier de tekst- en bestandsvelden toe.
Overschakelen naar Sjabloon-editor > Markering.
Hier zullen we ontwerpen hoe ons aangepaste blok eruit zal zien op uw website. De modeleditor accepteert HTML, CSS en field slugs (die u tussen 2 vierkante haken moet plaatsen). Als u PHP-taal moet gebruiken, kunt u de sjabloon maken met PHP-modelleringsmethode
Maak je geen zorgen, het is gemakkelijk.
In de modeleditoronder opmaak tabblad, voeg de volgende code toe:
<div class="cta-block">
<div class="cta-image">
<img src ="{{image-field}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Telecharger</button></a>
</div>
</div>Terwijl u uw code schrijft, zult u merken dat: de modeleditor Vul veldslugs automatisch in (bijv. {{image-field}} ) voor u.
Ga dan naar de sectie CSS om eenvoudige stijlen toe te voegen met de volgende code:
.cta-block {
text-align:center;
background-color:orange;
width:100%;
height:auto;
border: 2px solid orange;
}
.dwnld {
background-color: black;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
border-radius:2px;
}
U kunt deze stijlen naar wens aanpassen,
Klik op publiceren :
Om uw nieuwe aangepaste blok in actie te zien, gaat u terug naar uw WordPress-beheerdersdashboard en maakt u een bericht zoals u normaal doet, klikt u op de Meer (+) om een ​​nieuw blok toe te voegen en je nieuwe aangepaste blok te kiezen, zoals we hieronder benadrukken.
Vul vervolgens naar wens je custom block in en plaats je bericht:
Als we nu ons nieuwe aangepaste CTA-blok aan de front-end controleren, zien we dit.
Onze aangepaste CTA is daar! Maak je geen zorgen over onze ontwerpmogelijkheden - in een realistisch scenario besteed je natuurlijk wat meer tijd aan het aanpassen van je blok. Maar we hopen dat je hier iets hebt geleerd.
Andere aanbevolen bronnen
We nodigen u ook uit om de ressources hieronder om meer eigendom en controle over uw website en blog te krijgen.
- 10 aangesloten WordPress-plug-ins om een ​​programma te maken
- Meerdere kolommen toevoegen in WordPress
- Meerdere kolommen toevoegen in WordPress
- Hoe kunt u verschillende achtergronden gebruiken op WordPress
- Elementor: Hoe maak je een animatie op hover
Conclusie
Het bouwen van aangepaste blokken is geen gemakkelijke taak. Maar met WordPress plugins zoals Genesis Custom Blocks en Lazy Blocks, onder andere, of je nu een beginner bent of niet, je zult erin slagen ze te maken. Van de meest eenvoudige tot complexe, afhankelijk van uw behoeften.
Dat is het voor dit artikel dat u laat zien hoe u aangepaste lettertypen aan een WordPress-website kunt toevoegen. We nodigen je uit om het te proberen. Als u zich zorgen maakt of suggesties heeft, laat het ons dan weten binnen commentaires.
U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Ondertussen, deel dit artikel op uw verschillende sociale netwerken.
...
