Želite li stvoriti a WordPress plugin jednostavan Gutenbergov blok?

Zar svi ne volimo WordPress? Platforma je doživjela ogroman uspjeh od svog početka, a programeri neprestano dodaju nove značajke. Jedna od istaknutih značajki novijeg vremena je WordPress Block Editor, kodni naziv Gutenberg.

Gutenberg korisnicima WordPressa nudi uzbudljiv novi način objavljivanja sadržaja i prilagođavanja njihove web stranice. Nevjerojatno je jednostavan za korištenje, što je odlična vijest kako za početnike tako i za programere. Ako koristite najnoviju verziju WordPressa, već ste upoznati s uređivačem blokova i konceptom blokova.

Prema zadanim postavkama, WordPress uređivač blokova dolazi s nekim blokovima koji vam omogućuju da uključite tekst, slike, citate, audio, video, ugrađivanje itd. Osim toga, postoji tona Gutenbergovih dodataka koji vam omogućuju da proširite uređivač bez prekida znoj.

Međutim, možda imate određenu potrebu koja će vas potaknuti da izradite vlastite prilagođene blokove. U ovom članku ćemo vam u nekoliko paragrafa pokazati kako stvoriti prilagođene Gutenberg blokove kako bi zadovoljili vaše specifične potrebe.

Bez daljnjega, počnimo jer ima puno toga za naučiti.

Ali prije, ako nikad niste instalirali WordPress, otkrijte Kako instalirati 7 korake WordPress blog et Kako pronaći, instalirati i aktivirati WordPress temu na svoj blog

Onda se vratimo zašto smo ovdje. 

Što su uopće blokovi?

Blokovi tretiraju odlomke, naslove, medije i ugradnje kao komponente koje, kada su spojene zajedno, čine sadržaj pohranjen u bazi podataka WordPress, zamjenjujući tradicionalni koncept teksta s medijima i ugrađenim kratkim kodovima.

U prošlosti su se korisnici WordPressa oslanjali na tekst i kratke kodove za dodavanje sadržaja. Gutenberg koristi blokovi. Novi uređivač omogućuje korištenje blok jedinica za stvaranje bogatih i fleksibilnih izgleda kojima je lako upravljati. Trenutačno možete koristiti uređivač blokova za objave i stranice, ali postoje aktivni planovi podržavati potpuno uređivanje stranice u budućnosti.

Rad s blokovima čini stvaranje sadržaja u WordPressu prilično osvježavajućim. Osim toga, mnogi postojeći dodaci podržavaju novi uređivač i dolaze s blokovima spremnim za korištenje koji olakšavaju dodavanje sadržaja iz navedenih dodataka. Uređivač vam omogućuje povlačenje i ispuštanje blokova na stranicu kako biste brže mogli pritisnuti gumb za objavljivanje.

Baš kao alat za izradu stranica integriran izravno u WordPress.

Ako ste upoznati sa graditelji stranica kao što je Elementor, vjerojatno ste upoznati s konceptom izgradnje stranica povuci i ispusti. Gutenberg je pokušaj potpune integracije drag-and-drop izgradnje web stranice u jezgru WordPressa.

Pa prijeđimo na najbolji dio današnjeg članka. Naučimo kako napraviti jednostavan blok. To možete učiniti ručno ili pomoću dodataka kao što su Genesis prilagođeni blokovi (bivši BlockLab), Lijeni blokovi ou ACF. Stvaranje prilagođenih blokova je malo tehničko, pa ćemo za potrebe današnjeg članka koristiti dodatak.

Kako stvoriti prilagođeni blok (koristeći genesis Custom Blocks)

Lakše je krenuti putem dodatka jer stvaranje prilagođenih Gutenbergovih blokova od nule zahtijeva dobro razumijevanje HTML-a, CSS-a, PHP-a i što je najvažnije, javaScript-a. Također ćete morati razumjeti React.

Za sljedeći odjeljak koristit ćemo Genesis Custom Blocks. Njegova besplatna verzija dostupna je u službenom WordPress repozitoriju, što znači da ga možemo instalirati na WordPress admin nadzornu ploču.

Instalirajte Genesis Custom Blocks

Prijavite se na svoju WordPress administratorsku nadzornu ploču i idite na Proširenja> Dodaj, kako je prikazano dolje.

Zatim unesite " Genesis prilagođeni blokovi u okviru za pretraživanje ključnih riječi i klik na gumbu sada instalirati

nakon toga, aktivirati dodatak za početak

Zatim napravimo novi prilagođeni blok. U svrhu ilustracije, napravimo prilagođeni poziv na radnju (CTA) koji ćemo dodati na kraj svakog članka koji objavimo. Najbolji dio je to što blokove možete ponovno upotrijebiti kako biste vas spasili od stvaranja istih blokova iznova i iznova.

U svom WordPress administratorskom izborniku idite na Prilagođeni blokovi > Dodaj novi, kao što ističemo u nastavku.

Ovo će vas odvesti na sljedeću stranicu gdje ćete pronaći sve opcije za stvaranje prilagođenog bloka (u našem slučaju, CTA):

Evo nekoliko riječi koje objašnjavaju što vidite na gornjoj snimci zaslona. Počevši od vrha, imate ga.

Glavno područje uređivanja:

  • Graditelj – Vjerojatno ćete ovdje provesti dosta vremena dizajnirajući svoj prilagođeni blok. the Konstruktor omogućuje vam da dodate naslov, polja, oznaku, ključne riječi, kategoriju i pregledate svoj prilagođeni blok. Naučit ćete kako dodati polja.
  • Uređivač predloška – Nakon dizajniranja vašeg prilagođenog bloka (tj. dodavanja raznih polja), morat ćete stvoriti predložak bloka (pročitati, dodati neki kod) u urednik modela. Naučit ćemo više kada dizajniramo CTA.
  • Pregled urednika – Omogućuje vam pregled prilagođenog bloka u uređivaču blokova WordPress.
  • Prednji pregled – Ovdje možete pregledati kako će prilagođeni blok izgledati na vašoj web stranici.
  • EditorField – Prikazat će polja u glavnom području za uređivanje posta ili stranice (znate, baš kao što vidite svoje obične postove u uređivaču WordPress-a)
  • InspektorField – Prikazuje polje u desnoj bočnoj traci ispod Inspektora blokova.

Opcije bočne trake

  • Ljenčariti – Popunjava se automatski na temelju naslova koji date svom prilagođenom bloku. Ovo je važno pri izradi blok modela.
  • Ikona – Ova vam opcija omogućuje dodavanje ikone vašem prilagođenom bloku.
  • Kategorija – Omogućuje vam da dodijelite kategoriju vašem prilagođenom bloku. Svoj prilagođeni blok možete kategorizirati pomoću jedne od ugrađenih kategorija ili možete stvoriti potpuno novu kategoriju.
  • Ključne riječi – Dodajte do tri povezane ključne riječi svom prilagođenom bloku kako bi ga ljudi mogli lako pronaći u alatu za odabir blokova.
  • Otvorite blok polja u modalnom obliku umjesto da se prikazuje na mjestu – Omogućite ako želite otvoriti polja u modalnom obliku. Ovo je korisno ako imate prilagođeni blok s mnogo polja.
  • Post vrste – Označite okvire kako biste omogućili da se vaš prilagođeni blok prikaže na svakoj vrsti objave. Na primjer, ako poništite opciju Postovi, blok se neće pojaviti ni na jednom postu.

Napravite prilagođeni blok

Sada kada ste bolje razumjeli korisničko sučelje i što svaki dio radi, krenimo s radom.

Graditelj - Graditelj -, dajte svom prilagođenom bloku odgovarajući naslov. Odabrat ćemo CTA za ovaj kao što je prikazano u nastavku.

Prije dodavanja novih polja, dodajmo ikonu, ključne riječi i odaberimo kategoriju za prilagođeni blok kao što je prikazano u nastavku.

Na to, dodajmo neka polja našem prilagođenom bloku. Za naš primjer CTA bloka, dodat ćemo samo tri polja sljedećim redoslijedom: sliku, nešto teksta i polje datoteke koje ljudima omogućuje preuzimanje e-knjige.

Pročitajte također: 5 WooCommerce dodataka za uređivanje proizvoda u rasutom stanju

Dodavanje blok polja

U odjeljku Polja uređivačakliknite na ikona plus (+). da dodate prvo polje kao što je prikazano u nastavku.

izradite blok WordPress dodatak

Zatim dodajmo polje slike. Na bočnoj traci postavite Vrsta polja uključena Slika i postavite ostale opcije. Također, uzmite u obzir puž jer ćemo ga koristiti prilikom kreiranja modela bloka.

izradite blok WordPress dodatak

Nakon toga na isti način dodajte polja teksta i datoteke.

izradite blok WordPress dodatak

Prebaciti na Uređivač predloška > Označavanje.

Ovdje ćemo dizajnirati kako će naš prilagođeni blok izgledati na vašoj web stranici. Urednik modela prihvaća HTML, CSS i polja (koje morate staviti između 2 uglate zagrade). Ako trebate koristiti PHP jezik, možete kreirati predložak pomoću Metoda PHP modeliranja

Ne brini, lako je.

Dans urednik modela, pod, ispod kartica za označavanje, dodajte sljedeći 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>

Dok budete pisali svoj kod, primijetit ćete to urednik modela Automatsko dovršavanje polja puževa (npr. {{image-field}}) za vas.

Zatim idite na odjeljak CSS za dodavanje jednostavnih stilova sa sljedećim kodom:

.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;

}
izradite blok WordPress dodatak

Možete prilagoditi ove stilove kako želite,

Kliknite objaviti :

izradite blok WordPress dodatak

Da biste vidjeli svoj novi prilagođeni blok u akciji, vratite se na svoju WordPress administratorsku nadzornu ploču i stvorite objavu kao što to inače činite, kliknite na plus (+) da dodate novi blok i odaberete svoj novi prilagođeni blok, kao što ističemo u nastavku.

izradite blok WordPress dodatak

Zatim ispunite svoj prilagođeni blok po želji i objavite svoju poruku:

Sada, ako provjerimo naš novi prilagođeni CTA blok na prednjem dijelu, to je ono što vidimo.

Naš prilagođeni CTA je tu! Ne brinite o našim mogućnostima dizajna – naravno, u stvarnom scenariju, provest ćete malo više vremena prilagođavajući svoj blok. Ali nadamo se da ste ovdje nešto naučili.

Ostali preporučeni resursi

Također vas pozivamo da se posavjetujete s sredstva ispod kako biste preuzeli više vlasništva i kontrole nad svojom web stranicom i blogom.

Zaključak

Izgradnja prilagođenih blokova nije lak zadatak. Ali sa WordPress plugins kao što su Genesis Custom Blocks i Lazy Blocks, između ostalih, bez obzira jeste li početnik ili ne, uspjet ćete ih stvoriti. Od najosnovnijih do složenih, ovisno o vašim potrebama.

To je to za ovaj članak koji vam pokazuje kako dodati prilagođene fontove WordPress web stranici. Pozivamo vas da probate. Ako imate bilo kakvih nedoumica ili prijedloga, javite nam unutar Komentari.

Međutim, također ćete moći konzultirati naše sredstva, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.

U međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.   

...