Kunne du tænke dig at oprette en WordPress plugin simpel Gutenberg blok?
Elsker vi ikke alle WordPress? Platformen har oplevet massiv succes siden starten, hvor udviklere konstant tilføjer nye funktioner. En af de iøjnefaldende funktioner i nyere tid er WordPress Block Editor, kodenavn Gutenberg.
Gutenberg tilbyder WordPress-brugere en spændende ny måde at udgive indhold og tilpasse deres hjemmeside. Det er utroligt nemt at bruge, hvilket er gode nyheder for både begyndere og udviklere. Hvis du bruger den nyeste version af WordPress, er du allerede bekendt med blokeditoren og begrebet blokke.
Som standard leveres WordPress-blokeditoren med nogle blokke, der giver dig mulighed for at inkludere tekst, billeder, citater, lyd, video, indlejringer osv. Udover det er der et væld af Gutenberg-tilføjelser, der lader dig udvide editoren uden at gå i stykker en sved.
Du kan dog have et specifikt behov, der beder dig om at oprette dine egne tilpassede blokke. I denne artikel vil vi vise dig i et par afsnit, hvordan du opretter brugerdefinerede Gutenberg-blokke for at opfylde dine specifikke behov.
Lad os uden videre komme i gang, for der er meget at lære.
Men før, hvis du aldrig har installeret WordPress-opdagelse Sådan installeres en WordPress blog 7 trin et Hvordan at finde, installere og aktivere et WordPress tema på din blog
Så tilbage til, hvorfor vi er her.
Hvad er blokke overhovedet?
Blokke behandler afsnit, overskrifter, medier og indlejringer som komponenter, der, når de er sat sammen, udgør indholdet, der er gemt i WordPress-databasen, og erstatter det traditionelle tekstbegreb med medier og indlejrede indbyggede kortkoder.
Tidligere stolede WordPress-brugere på tekst og kortkoder for at tilføje indhold. Gutenberg bruger blokke. Den nye editor lader dig bruge blokenheder til at skabe fyldige og fleksible layouts, der er nemme at administrere. I øjeblikket kan du bruge blok-editoren til indlæg og sider, men der er aktive planer at tage understøtte fuld webstedsredigering i fremtiden.
At arbejde med blokke gør oprettelse af indhold i WordPress ret forfriskende. Derudover understøtter mange eksisterende plugins den nye editor og kommer med klar-til-brug blokke, der gør det nemt at tilføje indhold fra nævnte plugins. Editoren lader dig trække og slippe blokke på en side, så du kan trykke på udgiv-knappen hurtigere.
Ligesom en sidebygger integreret direkte i WordPress.
Hvis du er bekendt med sidebyggere såsom Elementor, er du sikkert bekendt med konceptet med træk-og-slip sidebygning. Gutenberg er et forsøg på fuldt ud at integrere træk-og-slip hjemmesidebygning i WordPress-kernen.
Så lad os komme til den bedste del af dagens artikel. Lad os lære, hvordan man opretter en simpel blok. Du kan gøre dette manuelt eller ved hjælp af plugins som f.eks Genesis brugerdefinerede blokke (tidligere BlockLab), Dovne blokke ou ACF. At oprette brugerdefinerede blokke er lidt teknisk, så i forbindelse med dagens artikel bruger vi et plugin.
Sådan opretter du en brugerdefineret blok (ved hjælp af Genesis Custom Blocks)
Det er nemmere at gå plugin-vejen, fordi oprettelse af tilpassede Gutenberg-blokke fra bunden kræver en god forståelse af HTML, CSS, PHP og vigtigst af alt, javaScript. Du skal også forstå React.
Til næste afsnit bruger vi Genesis Custom Blocks. Dens gratis version er tilgængelig i det officielle WordPress-lager, hvilket betyder, at vi kan installere det i WordPress admin-dashboard.
Installer Genesis Custom Blocks
Log ind på dit WordPress admin dashboard og naviger til Udvidelser> Tilføjsom vist nedenfor.
Indtast derefter " Genesis brugerdefinerede blokke i søgeordssøgefeltet og klik på knappen installere nu
Efter det, aktivere pluginnet for at komme i gang
Lad os derefter oprette en ny brugerdefineret blok. Lad os til illustrationsformål oprette en tilpasset opfordring til handling (CTA), som vi tilføjer til slutningen af hver artikel, vi udgiver. Det bedste er, at du kan genbruge blokkene for at redde dig fra at oprette de samme blokke igen og igen.
I din WordPress admin-menu skal du navigere til Brugerdefinerede blokke > Tilføj ny, som vi fremhæver nedenfor.
Dette fører dig til næste side, hvor du vil finde alle mulighederne for at oprette en brugerdefineret blok (i vores tilfælde en CTA):
Her er et par ord for at forklare, hvad du ser på skærmbilledet ovenfor. Startende fra toppen, har du det.
Hovedredigeringsområde:
- Builder – Du vil sandsynligvis bruge meget tid her på at designe din tilpassede blok. det CONSTRUCTEUR lader dig tilføje titel, felter, slug, nøgleord, kategori og forhåndsvise din tilpassede blok. Du lærer, hvordan du tilføjer felter.
- Skabeloneditor – Efter at have designet din brugerdefinerede blok (dvs. tilføjet forskellige felter), skal du oprette en blokskabelon (læs, tilføj noget kode) i modelredaktøren. Vi vil lære mere, når vi designer CTA'en.
- Forhåndsvisning af redaktør – Det giver dig mulighed for at få vist den brugerdefinerede blok i WordPress-blokeditoren.
- Frontend forhåndsvisning – Her kan du forhåndsvise, hvordan den tilpassede blok vil se ud på din hjemmeside.
- EditorField – Vil vise felter i hovedredigeringsområdet på et indlæg eller en side (du ved, ligesom du ser dine almindelige indlæg i WordPress-editoren)
- Inspektørfelt – Viser feltet i højre sidebjælke under blokinspektøren.
Indstillinger for sidebjælke
- Slug – Den udfyldes automatisk baseret på den titel, du giver til din brugerdefinerede blok. Dette er vigtigt, når du opretter blokmodellen.
- ikon – Denne mulighed giver dig mulighed for at tilføje et ikon til din brugerdefinerede blok.
- Boligtype – Det giver dig mulighed for at tildele en kategori til din brugerdefinerede blok. Du kan kategorisere din brugerdefinerede blok ved hjælp af en af de indbyggede kategorier, eller du kan oprette en helt ny kategori.
- nøgleord – Tilføj op til tre relaterede søgeord til din tilpassede blok, så folk nemt kan finde den i blokvælgeren.
- Åbn blokfelter i en modal i stedet for at rendere på plads – Aktiver, hvis du vil åbne felter i en modal. Dette er nyttigt, hvis du har en brugerdefineret blok med mange felter.
- Indlæg Typer – Marker afkrydsningsfeltet/felterne for at tillade, at din tilpassede blok vises på hver posttype. Hvis du f.eks. fjerner markeringen af Indlæg, vises blokeringen ikke på nogen indlæg.
Opret en brugerdefineret blok
Nu hvor du har en bedre forståelse af brugergrænsefladen og hvad hver del gør, lad os komme i gang.
I Bygmester - Bygmester -, giv din tilpassede blok en passende titel. Vi vil vælge CTA til denne som vist nedenfor.
Før du tilføjer nye felter, lad os tilføje et ikon, nøgleord og vælge en kategori for den tilpassede blok som vist nedenfor.
Til det, lad os tilføje nogle felter til vores tilpassede blok. Til vores eksempel på CTA-blok tilføjer vi kun tre felter i følgende rækkefølge: et billede, noget tekst og et filfelt, der giver folk mulighed for at downloade en e-bog.
Læs også: 5 WooCommerce-plugins til at redigere dine produkter i bulk
Tilføjelse af blokfelter
I afsnittet Editor felterKlik på plus-ikonet (+). for at tilføje det første felt som vist nedenfor.
Lad os derefter tilføje et billedfelt. Indstil i sidebjælken Felttype på Billede og indstil de andre muligheder. Overvej også sneglen, da vi vil bruge den, når vi opretter blokmodellen.
Tilføj derefter tekst- og filfelterne på samme måde.
Skifte til Skabeloneditor > Markup.
Her vil vi designe, hvordan vores tilpassede blok vil se ud på din hjemmeside. Modelredaktøren accepterer HTML, CSS og field slugs (som du skal placere mellem 2 firkantede parenteser). Hvis du skal bruge PHP-sprog, kan du oprette skabelonen vha PHP-modelleringsmetode
Bare rolig, det er nemt.
dans modelredaktøren, under opmærkningsfanen, tilføj følgende kode:
<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 kode, vil du bemærke det modelredaktøren Automatisk udfyldning af feltsnegle (f.eks. {{image-field}} ) til dig.
Gå derefter til afsnittet CSS for at tilføje simple stilarter med følgende kode:
.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 tilpasse disse stilarter, som du vil,
Klik offentliggøre :
For at se din nye brugerdefinerede blok i aktion, skal du gå tilbage til dit WordPress admin-dashboard og oprette et indlæg, som du plejer, klik på Mere (+) for at tilføje en ny blok og vælge din nye brugerdefinerede blok, som vi fremhæver nedenfor.
Udfyld derefter din tilpassede blok som ønsket og send din besked:
Hvis vi nu tjekker vores nye brugerdefinerede CTA-blok på front-end, er dette, hvad vi ser.
Vores brugerdefinerede CTA er lige der! Vær venlig ikke at bekymre dig om vores designmuligheder – selvfølgelig vil du i et virkelighedsscenario bruge lidt mere tid på at tilpasse din blok. Men vi håber, du har lært noget her.
Andre anbefalede ressourcer
Vi inviterer dig også til at konsultere ressourcer nedenfor for at tage mere ejerskab og kontrol over din hjemmeside og blog.
- 10 tilknyttede WordPress-plugins til at oprette et program
- Sådan tilføjer du flere kolonner i WordPress
- Sådan tilføjer du flere kolonner i WordPress
- Ved hjælp af forskellige baggrunde WordPress
- Elementor: Sådan opretter du en animation ved at svæve
Konklusion
At bygge tilpassede blokke er ikke en let opgave. Men med WordPress plugins såsom Genesis Custom Blocks og Lazy Blocks, blandt andre, uanset om du er nybegynder eller ej, vil det lykkes dig at skabe dem. Fra det mest basale til komplekse afhængigt af dine behov.
Det er det for denne artikel, der viser dig, hvordan du tilføjer brugerdefinerede skrifttyper til et WordPress-websted. Vi inviterer dig til at prøve. Hvis du har nogen bekymringer eller forslag, så lad os det vide inden for kommentarer.
Du vil dog også kunne konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
En medarbejder, del denne artikel på dine forskellige sociale netværk.
...
