Vill du skapa en Wordpress plugin enkelt Gutenberg-block?
Älskar vi inte alla WordPress? Plattformen har haft enorm framgång sedan starten, med utvecklare som ständigt lägger till nya funktioner. En av de framstående funktionerna på senare tid är WordPress Block Editor, kodnamn Gutenberg.
Gutenberg erbjuder WordPress-användare ett spännande nytt sätt att publicera innehåll och anpassa sin webbplats. Det är otroligt lätt att använda, vilket är fantastiska nyheter för både nybörjare och utvecklare. Om du använder den senaste versionen av WordPress är du redan bekant med blockredigeraren och konceptet med block.
Som standard kommer WordPress-blockredigeraren med några block som låter dig inkludera text, bilder, citat, ljud, video, inbäddningar, etc. Utöver det finns det massor av Gutenberg-tillägg som låter dig utöka redigeraren utan att gå sönder en svett.
Du kan dock ha ett specifikt behov som uppmanar dig att skapa dina egna anpassade block. I den här artikeln kommer vi att visa dig i några stycken hur du skapar anpassade Gutenberg-block för att möta dina specifika behov.
Låt oss utan vidare sätta igång för det finns mycket att lära.
Men tidigare, om du aldrig har installerat WordPress-upptäckt Hur man installerar en Wordpress-blogg 7 steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg
Tillbaka till varför vi är här.
Vad är block, egentligen?
Block behandlar stycken, rubriker, media och inbäddningar som komponenter som, när de är sammansatta, utgör innehållet som lagras i WordPress-databasen, och ersätter det traditionella konceptet med text med media och inbyggda kortkoder.
Tidigare förlitade sig WordPress-användare på text och kortkoder för att lägga till innehåll. Gutenberg använder block. Den nya redigeraren låter dig använda blockenheter för att skapa rika och flexibla layouter som är enkla att hantera. För närvarande kan du använda blockredigeraren för inlägg och sidor, men det finns aktiva planer att ta stödja fullständig webbplatsredigering i framtiden.
Att arbeta med block gör innehållsskapande i WordPress ganska uppfriskande. Dessutom stöder många befintliga plugins den nya redigeraren och kommer med färdiga block som gör det enkelt att lägga till innehåll från nämnda plugins. Editorn låter dig dra och släppa block på en sida så att du kan trycka på publicera-knappen snabbare.
Precis som en sidbyggare integrerad direkt i WordPress.
Om du är bekant med sidbyggare som Elementor, är du förmodligen bekant med konceptet med dra-och-släpp sidbyggnad. Gutenberg är ett försök att helt integrera dra-och-släpp-webbplatsbyggnad i WordPress-kärnan.
Så låt oss komma till den bästa delen av dagens artikel. Låt oss lära oss hur man skapar ett enkelt block. Du kan göra detta manuellt eller med hjälp av plugins som t.ex Genesis Custom Blocks (tidigare BlockLab), Lata block ou ACF. Att skapa anpassade block är lite tekniskt, så för dagens artikel kommer vi att använda ett plugin.
Hur man skapar ett anpassat block (med Genesis Custom Blocks)
Det är lättare att gå pluginvägen eftersom att skapa anpassade Gutenberg-block från början kräver en god förståelse för HTML, CSS, PHP och viktigast av allt, javaScript. Du måste också förstå React.
För nästa avsnitt kommer vi att använda Genesis Custom Blocks. Dess gratisversion finns tillgänglig i det officiella WordPress-förrådet, vilket innebär att vi kan installera det i WordPress-administrationspanelen.
Installera Genesis Custom Blocks
Logga in på din WordPress admin-dashboard och navigera till Tillägg> Lägg till, enligt nedanstående.
Ange sedan " Genesis Custom Blocks i sökrutan för nyckelord och klick på knappen installera nu
Efter det, aktivera plugin för att komma igång
Låt oss sedan skapa ett nytt anpassat block. I illustrationssyfte skapar vi en anpassad uppmaning (CTA) som vi lägger till i slutet av varje artikel vi publicerar. Det bästa är att du kan återanvända blocken för att rädda dig från att skapa samma block om och om igen.
I din WordPress adminmeny, navigera till Anpassade block > Lägg till nytt, som vi belyser nedan.
Detta tar dig till följande sida där du hittar alla alternativ för att skapa ett anpassat block (i vårt fall en CTA):
Här är några ord för att förklara vad du ser i skärmdumpen ovan. Börja från toppen, du har det.
Huvudredigeringsområde:
- Builder – Du kommer förmodligen att spendera mycket tid här med att designa ditt anpassade block. de CONSTRUCTEUR låter dig lägga till titel, fält, snigel, nyckelord, kategori och förhandsgranska ditt anpassade block. Du kommer att lära dig hur du lägger till fält.
- Mallredigerare – Efter att ha designat ditt anpassade block (dvs. lagt till olika fält), måste du skapa en blockmall (läs, lägg till kod) i modellredaktören. Vi kommer att lära oss mer när vi utformar CTA.
- Redaktörsförhandsgranskning – Det låter dig förhandsgranska det anpassade blocket i WordPress-blockredigeraren.
- Front End-förhandsgranskning – Här kan du förhandsgranska hur det anpassade blocket kommer att se ut på din webbplats.
- EditorField – Kommer att visa fält i huvudredigeringsområdet för ett inlägg eller sida (du vet, precis som du ser dina vanliga inlägg i WordPress-redigeraren)
- Inspektörsfält – Visar fältet i det högra sidofältet under Block Inspector.
Alternativ i sidofältet
- Snigel – Den fylls i automatiskt baserat på titeln du ger till ditt anpassade block. Detta är viktigt när man skapar blockmodellen.
- icon – Det här alternativet låter dig lägga till en ikon till ditt anpassade block.
- Kategori – Det låter dig tilldela en kategori till ditt anpassade block. Du kan kategorisera ditt anpassade block med en av de inbyggda kategorierna, eller så kan du skapa en helt ny kategori.
- Nyckelord – Lägg till upp till tre relaterade sökord till ditt anpassade block så att folk enkelt kan hitta det i blockväljaren.
- Öppna blockfält i en modal istället för att rendera på plats – Aktivera om du vill öppna fält i en modal. Detta är användbart om du har ett anpassat block med många fält.
- Post Typer – Markera rutorna för att tillåta att ditt anpassade block visas på varje inläggstyp. Om du till exempel avmarkerar Inlägg kommer blockeringen inte att visas på några inlägg.
Skapa ett anpassat block
Nu när du har en bättre förståelse för användargränssnittet och vad varje del gör, låt oss börja jobba.
i Byggare - Byggare -, ge ditt anpassade block en lämplig titel. Vi kommer att välja CTA för den här som visas nedan.
Innan vi lägger till nya fält, låt oss lägga till en ikon, nyckelord och välja en kategori för det anpassade blocket som visas nedan.
Till det, låt oss lägga till några fält i vårt anpassade block. För vårt exempel på CTA-block lägger vi bara till tre fält i följande ordning: en bild, lite text och ett filfält som låter människor ladda ner en e-bok.
Läs också: 5 WooCommerce-plugins för att redigera dina produkter i bulk
Lägga till blockfält
I avsnittet RedaktörsfältKlicka på plusikonen (+). för att lägga till det första fältet som visas nedan.
Låt oss sedan lägga till ett bildfält. I sidofältet ställer du in Fälttyp på Bild och ställ in de andra alternativen. Tänk också på snigeln eftersom vi kommer att använda den när vi skapar blockmodellen.
Efter det lägger du till text- och filfälten på samma sätt.
Byta till Mallredigerare > Markering.
Här kommer vi att designa hur vårt anpassade block kommer att se ut på din webbplats. Modellredaktören accepterar HTML, CSS och field slugs (som du måste placera mellan 2 hakparenteser). Om du behöver använda PHP-språket kan du skapa mallen med PHP-modelleringsmetod
Oroa dig inte, det är lätt.
Dans modellredaktören, under fliken markering, lägg till följande kod:
<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>När du skriver din kod kommer du att märka det modellredaktören Fyll i fältsniglar automatiskt (t.ex. {{bildfält}} ) åt dig.
Gå sedan till avsnittet CSS för att lägga till enkla stilar med följande kod:
.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;
}
Du kan anpassa dessa stilar som du vill,
Klicka på offentliggöra :
För att se ditt nya anpassade block i aktion, gå tillbaka till din WordPress admin-dashboard och skapa ett inlägg som du normalt gör, klicka på mer (+) för att lägga till ett nytt block och välja ditt nya anpassade block, som vi markerar nedan.
Fyll sedan i ditt anpassade block enligt önskemål och skicka ditt meddelande:
Nu, om vi kollar vårt nya anpassade CTA-block på front-end, är detta vad vi ser.
Vår anpassade CTA finns där! Var snäll och oroa dig inte för våra designmöjligheter – naturligtvis, i ett verkligt scenario kommer du att spendera lite mer tid på att anpassa ditt block. Men vi hoppas att du lärde dig något här.
Andra rekommenderade resurser
Vi inbjuder dig också att konsultera medel nedan för att ta mer ägande och kontroll över din webbplats och blogg.
- 10 affiliate WordPress-plugins för att skapa ett program
- Hur man lägger till flera kolumner i WordPress
- Hur man lägger till flera kolumner i WordPress
- Med hjälp av olika bakgrunder Wordpress
- Elementor: Hur man skapar en animation när man svävar
Slutsats
Att bygga anpassade block är inte en lätt uppgift. Men med Wordpress plugins som Genesis Custom Blocks och Lazy Blocks, bland annat, oavsett om du är nybörjare eller inte kommer du att lyckas skapa dem. Från det mest grundläggande till komplext beroende på dina behov.
Det är det för den här artikeln som visar hur du lägger till anpassade typsnitt på en WordPress-webbplats. Vi inbjuder dig att prova. Om du har några funderingar eller förslag, vänligen meddela oss inom detta område commentaires.
Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
under tiden, dela den här artikeln på dina olika sociala nätverk.
.
