Vil du lage en WordPress Plugin enkel Gutenberg-blokk?
Elsker vi ikke alle WordPress? Plattformen har hatt enorm suksess siden starten, med utviklere som stadig legger til nye funksjoner. En av de fremtredende funksjonene i nyere tid er WordPress Block Editor, kodenavn Gutenberg.
Gutenberg tilbyr WordPress-brukere en spennende ny måte å publisere innhold og tilpasse nettsiden deres. Det er utrolig enkelt å bruke, noe som er gode nyheter for både nybegynnere og utviklere. Hvis du bruker den nyeste versjonen av WordPress, er du allerede kjent med blokkredigeringsprogrammet og konseptet med blokker.
Som standard kommer WordPress-blokkredigeringsprogrammet med noen blokker som lar deg inkludere tekst, bilder, sitater, lyd, video, innebygging osv. I tillegg er det massevis av Gutenberg-tillegg som lar deg utvide redigeringsprogrammet uten å gå i stykker en svette.
Du kan imidlertid ha et spesifikt behov som ber deg lage dine egne tilpassede blokker. I denne artikkelen vil vi vise deg i noen få avsnitt hvordan du lager tilpassede Gutenberg-blokker for å møte dine spesifikke behov.
Uten videre, la oss komme i gang fordi det er mye å lære.
Men før, hvis du aldri har installert WordPress Discover Hvordan installere en WordPress blogg 7 trinn et Hvordan finne, installere og aktivere en WordPress tema på bloggen din
Så tilbake til hvorfor vi er her.
Hva er blokker, forresten?
Blokker behandler avsnitt, overskrifter, medier og innbygginger som komponenter som, når de settes sammen, utgjør innholdet som er lagret i WordPress-databasen, og erstatter det tradisjonelle konseptet med tekst med medier og innebygde kortkoder.
Tidligere stolte WordPress-brukere på tekst og kortkoder for å legge til innhold. Gutenberg bruker blokker. Den nye editoren lar deg bruke blokkenheter til å lage rike og fleksible oppsett som er enkle å administrere. Foreløpig kan du bruke blokkredigeringsprogrammet for innlegg og sider, men det er aktive planer å ta støtte full nettstedsredigering i fremtiden.
Å jobbe med blokker gjør innholdsskaping i WordPress ganske forfriskende. I tillegg støtter mange eksisterende plugins den nye editoren og kommer med klare til bruk blokker som gjør det enkelt å legge til innhold fra nevnte plugins. Editoren lar deg dra og slippe blokker på en side slik at du kan trykke på publiser-knappen raskere.
Akkurat som en sidebygger integrert direkte i WordPress.
Hvis du er kjent med sidebyggere som Elementor, er du sannsynligvis kjent med konseptet med dra-og-slipp-sidebygging. Gutenberg er et forsøk på å fullt ut integrere dra-og-slipp-nettstedbygging i WordPress-kjernen.
Så la oss komme til den beste delen av dagens artikkel. La oss lære hvordan du lager en enkel blokk. Du kan gjøre dette manuelt eller ved hjelp av plugins som f.eks Genesis Custom Blocks (tidligere BlockLab), Lazy blokker ou ACF. Å lage egendefinerte blokker er litt teknisk, så i forbindelse med dagens artikkel, vil vi bruke en plugin.
Hvordan lage en egendefinert blokk (ved hjelp av Genesis Custom Blocks)
Det er lettere å gå plugin-veien fordi å lage tilpassede Gutenberg-blokker fra bunnen av krever en god forståelse av HTML, CSS, PHP, og viktigst av alt, javaScript. Du må også forstå React.
For neste seksjon bruker vi Genesis Custom Blocks. Den gratis versjonen er tilgjengelig i det offisielle WordPress-depotet, noe som betyr at vi kan installere det i WordPress-administrasjonsdashbordet.
Installer Genesis Custom Blocks
Logg på WordPress-admin-dashbordet og naviger til Utvidelser> Legg til, som vist under.
Skriv deretter inn " Genesis Custom Blocks i søkeordsøkboksen og klikk på knappen installere nå
Etter det, aktivere plugin for å komme i gang
La oss deretter lage en ny tilpasset blokk. For illustrasjonsformål, la oss lage en egendefinert handlingsfremmende oppfordring (CTA) som vi legger til på slutten av hver artikkel vi publiserer. Det beste er at du kan gjenbruke blokkene for å redde deg fra å lage de samme blokkene om og om igjen.
I WordPress-administrasjonsmenyen din, naviger til Egendefinerte blokker > Legg til ny, som vi fremhever nedenfor.
Dette tar deg til følgende side hvor du finner alle alternativene for å lage en tilpasset blokk (i vårt tilfelle en CTA):
Her er noen få ord for å forklare hva du ser i skjermbildet ovenfor. Fra toppen har du det.
Hovedredigeringsområde:
- Builder – Du vil sannsynligvis bruke mye tid her på å designe din egendefinerte blokk. de CONSTRUCTEUR lar deg legge til tittel, felt, slug, nøkkelord, kategori og forhåndsvise din egendefinerte blokk. Du vil lære hvordan du legger til felt.
- Maleditor – Etter å ha designet din egendefinerte blokk (dvs. lagt til forskjellige felt), må du lage en blokkmal (lese, legge til litt kode) i modellredaktøren. Vi vil lære mer når vi utformer CTA.
- Redaktør forhåndsvisning – Den lar deg forhåndsvise den tilpassede blokken i WordPress-blokkredigereren.
- Forhåndsvisning av grensesnitt – Her kan du forhåndsvise hvordan den tilpassede blokken vil se ut på nettstedet ditt.
- EditorField – Vil vise felt i hovedredigeringsområdet til et innlegg eller en side (du vet, akkurat som du ser dine vanlige innlegg i WordPress-editoren)
- Inspektørfelt – Viser feltet i høyre sidefelt under blokkinspektøren.
Alternativer for sidefelt
- Slug – Den fylles ut automatisk basert på tittelen du gir til din egendefinerte blokk. Dette er viktig når du lager blokkmodellen.
- Ikon – Dette alternativet lar deg legge til et ikon til din egendefinerte blokk.
- Kategori – Den lar deg tilordne en kategori til din egendefinerte blokk. Du kan kategorisere din egendefinerte blokk ved å bruke en av de innebygde kategoriene, eller du kan opprette en helt ny kategori.
- nøkkelord – Legg til opptil tre relaterte søkeord til den egendefinerte blokken din slik at folk enkelt kan finne den i blokkvelgeren.
- Åpne blokkfelt i en modal i stedet for å gjengi på plass – Aktiver hvis du vil åpne felt i en modal. Dette er nyttig hvis du har en egendefinert blokk med mange felt.
- Innlegg Typer – Merk av i boksen(e) for å tillate at din egendefinerte blokk vises på hver posttype. Hvis du for eksempel fjerner merket for Innlegg, vil ikke blokkeringen vises på noen innlegg.
Lag en egendefinert blokk
Nå som du har en bedre forståelse av brukergrensesnittet og hva hver del gjør, la oss sette i gang.
i Byggmester – Byggmester –, gi din egendefinerte blokk en passende tittel. Vi skal velge CTA for denne som vist nedenfor.
Før du legger til nye felt, la oss legge til et ikon, nøkkelord og velge en kategori for den tilpassede blokken som vist nedenfor.
Til det, la oss legge til noen felt i vår egendefinerte blokk. For eksempelet CTA-blokken vår legger vi bare til tre felt i følgende rekkefølge: et bilde, litt tekst og et filfelt som lar folk laste ned en e-bok.
Les også: 5 WooCommerce-plugin for å redigere produktene dine i bulk
Legger til blokkfelt
I avsnittet RedaktørfeltKlikk på pluss-ikonet (+). for å legge til det første feltet som vist nedenfor.
La oss deretter legge til et bildefelt. I sidefeltet angir du Felttype på Bilde og angi de andre alternativene. Vurder også sneglen slik vi skal bruke den når vi lager blokkmodellen.
Etter det legger du til tekst- og filfeltene på samme måte.
Bytte til Maleditor > Markup.
Her vil vi designe hvordan vår egendefinerte blokk vil se ut på nettstedet ditt. Modellredaktøren aksepterer HTML, CSS og feltsnegler (som du må plassere mellom 2 firkantede parenteser). Hvis du trenger å bruke PHP-språk, kan du lage malen ved å bruke PHP-modelleringsmetode
Ikke bekymre deg, det er enkelt.
dans modellredaktøren, under Markup-fanen, legg til 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 koden din, vil du legge merke til det modellredaktøren Autofullfør feltsnegler (f.eks. {{image-field}} ) for deg.
Gå deretter til seksjonen CSS for å legge til enkle stiler 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 stilene som du vil,
Klikk på publisere :
For å se den nye egendefinerte blokken din i aksjon, gå tilbake til WordPress-admin-dashbordet og opprett et innlegg som du vanligvis gjør, klikk på Mer (+) for å legge til en ny blokk og velge din nye tilpassede blokk, som vi fremhever nedenfor.
Deretter fyller du inn din egendefinerte blokk som ønsket og legger ut meldingen din:
Nå, hvis vi sjekker vår nye tilpassede CTA-blokk på front-end, er dette hva vi ser.
Vår tilpassede CTA er der! Ikke bekymre deg for designegenskapene våre – selvfølgelig, i et virkelighetsscenario vil du bruke litt mer tid på å tilpasse blokken din. Men vi håper du har lært noe her.
Andre anbefalte ressurser
Vi inviterer deg også til å konsultere ressources nedenfor for å gå dypere inn i å komme i gang med og kontrollere nettstedet og bloggen din.
- 10 tilknyttede WordPress-plugins for å lage et program
- Hvordan legge til flere kolonner i WordPress
- Hvordan legge til flere kolonner i WordPress
- Ved hjelp av forskjellige bakgrunner WordPress
- Elementor: Hvordan lage en animasjon ved å sveve
konklusjonen
Å bygge tilpassede blokker er ikke en lett oppgave. Men med WordPress plugins som Genesis Custom Blocks og Lazy Blocks, blant andre, enten du er nybegynner eller ikke, vil du lykkes med å lage dem. Fra det mest grunnleggende til komplekse avhengig av dine behov.
Det er det for denne artikkelen som viser deg hvordan du legger til egendefinerte fonter på et WordPress-nettsted. Vi inviterer deg til å prøve. Hvis du har noen bekymringer eller forslag, vennligst gi oss beskjed innen commentaires.
Du vil imidlertid også kunne konsultere våre ressources, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
I mellomtiden del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
