Želite li kreirati a WordPress dodatak jednostavan Gutenberg blok?
Zar svi ne volimo WordPress? Platforma je doživjela ogroman uspjeh od svog početka, a programeri stalno dodaju nove funkcije. Jedna od istaknutih karakteristika novijeg vremena je WordPress Block Editor, kodno ime Gutenberg.
Gutenberg nudi korisnicima WordPress-a uzbudljiv novi način za objavljivanje sadržaja i prilagođavanje njihove web stranice. Nevjerovatno je jednostavan za korištenje, što je odlična vijest kako za početnike tako i za programere. Ako koristite najnoviju verziju WordPress-a, već ste upoznati sa uređivačem blokova i konceptom blokova.
WordPress blok uređivač podrazumevano dolazi sa nekim blokovima koji vam omogućavaju da uključite tekst, slike, citate, audio, video, ugrađivanje, itd. Osim toga, postoji tona Gutenberg dodataka koji vam omogućavaju da proširite uređivač bez prekida. znoj.
Međutim, možda imate specifičnu potrebu koja će vas potaknuti da kreirate vlastite prilagođene blokove. U ovom članku ćemo vam u nekoliko paragrafa pokazati kako kreirati prilagođene Gutenberg blokove kako bi zadovoljili vaše specifične potrebe.
Bez daljeg odlaganja, počnimo jer ima puno toga za naučiti.
Ali prije, ako nikad niste instalirali WordPress, otkrijte Kako instalirati WordPress blog u koracima 7 et Kako pronaći, instalirati i aktivirati WordPress temu na svom blogu
Onda se vratimo na pitanje zašto smo ovde.
Šta su uopšte blokovi?
Blokovi tretiraju pasuse, naslove, medije i ugradnje kao komponente koje, kada su spojene zajedno, čine sadržaj pohranjen u WordPress bazi podataka, zamjenjujući tradicionalni koncept teksta sa medijima i ugrađenim kratkim kodovima.
U prošlosti su se korisnici WordPress-a oslanjali na tekst i kratke kodove za dodavanje sadržaja. Gutenberg koristi blokova. Novi uređivač vam omogućava da koristite blok jedinice za kreiranje bogatih i fleksibilnih izgleda kojima je lako upravljati. Trenutno možete koristiti uređivač blokova za objave i stranice, ali postoje aktivni planovi podržavaju potpuno uređivanje web stranice u budućnosti.
Rad sa blokovima čini kreiranje sadržaja u WordPress-u prilično osvježavajućim. Osim toga, mnogi postojeći dodaci podržavaju novi uređivač i dolaze s spremnim blokovima koji olakšavaju dodavanje sadržaja iz navedenih dodataka. Uređivač vam omogućava da prevučete i ispustite blokove na stranicu tako da možete brže pritisnuti dugme za objavljivanje.
Baš kao program za pravljenje stranica integrisan direktno u WordPress.
Ako ste upoznati sa graditelji stranica kao što je Elementor, vjerovatno ste upoznati sa konceptom izgradnje stranica prevuci i ispusti. Gutenberg je pokušaj potpunog integrisanja drag-and-drop izgradnje web stranica u jezgro WordPress-a.
Dakle, idemo 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 Custom Blocks (ranije BlockLab), Lazy Blocks ou ACF. Kreiranje prilagođenih blokova je pomalo tehničko, pa ćemo za potrebe današnjeg članka koristiti dodatak.
Kako kreirati prilagođeni blok (koristeći genesis Custom Blocks)
Lakše je krenuti putem dodataka jer kreiranje prilagođenih Gutenberg 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 je dostupna u službenom WordPress spremištu, što znači da je možemo instalirati na WordPress admin kontrolnu tablu.
Instalirajte Genesis Custom Blocks
Prijavite se na svoju WordPress administratorsku tablu i idite na Proširenja> Dodaj, kao što je prikazano u nastavku.
Zatim unesite " Genesis Custom Blocks u polju za pretragu ključnih reči i klik na dugme Instalirajte sada
Nakon toga, aktivirati dodatak za početak
Zatim kreirajmo novi prilagođeni blok. U svrhu ilustracije, napravimo prilagođeni poziv na akciju (CTA) koji ćemo dodati na kraj svakog članka koji objavimo. Najbolji dio je što možete ponovo koristiti blokove kako biste se spasili od stvaranja istih blokova iznova i iznova.
U svom WordPress administratorskom meniju 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 kreiranje prilagođenog bloka (u našem slučaju, CTA):
Evo nekoliko riječi koje objašnjavaju ono što vidite na slici iznad. Počevši od vrha, imate ga.
Glavno područje uređivanja:
- graditelj – Vjerovatno ćete ovdje provesti dosta vremena dizajnirajući svoj prilagođeni blok. the Konstruktor omogućava 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 različitih polja), morat ćete kreirati predložak bloka (pročitati, dodati neki kod) u uređivač modela. Naučit ćemo više kada dizajniramo CTA.
- Pregled urednika – Omogućava vam pregled prilagođenog bloka u uređivaču blokova WordPress-a.
- Pregled prednjeg kraja – Ovdje možete pregledati kako će prilagođeni blok izgledati na vašoj web stranici.
- EditorField – Prikazaće polja u glavnoj oblasti za uređivanje posta ili stranice (znate, baš kao što vidite svoje redovne postove u WordPress uređivaču)
- InspectorField – Prikazuje polje u desnoj bočnoj traci ispod Inspektora blokova.
Opcije bočne trake
- puž golać – Popunjava se automatski na osnovu naslova koji date svom prilagođenom bloku. Ovo je važno prilikom kreiranja blok modela.
- ikona – Ova opcija vam omogućava da dodate ikonu vašem prilagođenom bloku.
- kategorija – Omogućava vam da dodijelite kategoriju vašem prilagođenom bloku. Možete kategorizirati svoj prilagođeni blok koristeći jednu od ugrađenih kategorija ili možete kreirati potpuno novu kategoriju.
- Ključne riječi – Dodajte najviše tri povezane ključne riječi svom prilagođenom bloku kako bi ga ljudi lako mogli pronaći u biraču blokova.
- Otvorite blok polja u modalnom obliku umjesto da se prikazuje na mjestu – Omogućite ako želite da otvorite polja u modalnom obliku. Ovo je korisno ako imate prilagođeni blok sa mnogo polja.
- Post Tipovi – Označite okvir(e) kako biste omogućili da se vaš prilagođeni blok prikaže na svakoj vrsti objave. Na primjer, ako poništite izbor postova, blok se neće pojaviti ni na jednoj objavi.
Kreirajte prilagođeni blok
Sada kada ste bolje razumjeli korisničko sučelje i šta svaki dio radi, krenimo s radom.
U Graditelj - Graditelj -, dajte vašem prilagođenom bloku odgovarajući naslov. Odabrat ćemo CTA za ovaj kao što je prikazano ispod.
Prije dodavanja novih polja, dodajmo ikonu, ključne riječi i odaberemo kategoriju za prilagođeni blok kao što je prikazano ispod.
Na to, dodajmo neka polja u naš prilagođeni blok. Za naš primjer CTA bloka, dodaćemo samo tri polja sljedećim redoslijedom: sliku, nešto teksta i polje datoteke koje omogućava ljudima da preuzmu e-knjigu.
Pročitajte takođe: 5 WooCommerce dodaci za uređivanje vaših proizvoda u rasutom stanju
Dodavanje blok polja
U sekciji Editor poljakliknite na ikona plus (+). da dodate prvo polje kao što je prikazano ispod.
Zatim, dodajmo polje za sliku. U bočnoj traci postavite Vrsta polja uključena slika i postavite ostale opcije. Takođe, uzmite u obzir puž jer ćemo ga koristiti prilikom kreiranja modela bloka.
Nakon toga na isti način dodajte polja teksta i datoteke.
Prebaciti na Uređivač predloška > Markup.
Ovdje ćemo dizajnirati kako će naš prilagođeni blok izgledati na vašoj web stranici. Urednik modela prihvata HTML, CSS i polja (koje morate staviti između 2 uglaste zagrade). Ako trebate koristiti PHP jezik, možete kreirati šablon koristeći Metoda PHP modeliranja
Ne brini, lako je.
u uređivač modela, pod markup tab, 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 uređivač modela Automatsko dovršavanje polja (npr. {{image-field}}) za vas.
Zatim idite na odjeljak CSS da dodate jednostavne stilove 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;
}
Možete prilagoditi ove stilove kako želite,
kliknite na objaviti :
Da vidite svoj novi prilagođeni blok u akciji, vratite se na svoju WordPress administratorsku kontrolnu tablu i kreirajte objavu kao i obično, kliknite na plus (+) da dodate novi blok i odaberete svoj novi prilagođeni blok, kao što ističemo u nastavku.
Zatim popunite svoj prilagođeni blok po želji i objavite svoju poruku:
Sada, ako provjerimo naš novi prilagođeni CTA blok na front-endu, to je ono što vidimo.
Naš prilagođeni CTA je tu! Ne brinite o našim mogućnostima dizajna – naravno, u stvarnom scenariju, potrošit ć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đe vas pozivamo da konsultujete sredstva ispod da preuzmete više vlasništva i kontrole nad vašom web lokacijom i blogom.
- 10 pridruženih WordPress dodataka za kreiranje programa
- Kako dodati više kolona u WordPress
- Kako dodati više kolona u WordPress
- Kako koristiti različite pozadine na WordPressu
- Elementor: Kako napraviti animaciju pri lebdenju
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 da li ste početnik ili ne, uspjet ćete ih kreirati. 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 sugestija, javite nam u roku komentari.
Međutim, takođe ćete moći da se konsultujete sa našim sredstva, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem o Izrada bloga WordPress ili onaj on Divi: najbolja WordPress tema svih vremena.
U međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
