Chceli by ste vytvoriť a WordPress Plugin jednoduchý Gutenbergov blok?
Nemáme všetci radi WordPress? Platforma od svojho vzniku zaznamenala obrovský úspech a vývojári neustále pridávajú nové funkcie. Jednou z výnimočných funkcií poslednej doby je editor blokov WordPress, kódové označenie Gutenberg.
Gutenberg ponúka používateľom WordPress vzrušujúci nový spôsob, ako publikovať obsah a prispôsobiť svoje webové stránky. Jeho používanie je neuveriteľne jednoduché, čo je skvelá správa pre začiatočníkov aj vývojárov. Ak používate najnovšiu verziu WordPress, už poznáte editor blokov a koncept blokov.
V predvolenom nastavení sa editor blokov WordPress dodáva s niektorými blokmi, ktoré vám umožňujú zahrnúť text, obrázky, citácie, zvuk, video, vložené prvky atď. Okrem toho existuje množstvo doplnkov Gutenberg, ktoré vám umožnia rozšíriť editor bez prerušenia pot.
Môžete však mať špecifickú potrebu, ktorá vás vyzve na vytvorenie vlastných vlastných blokov. V tomto článku vám v niekoľkých odsekoch ukážeme, ako vytvoriť vlastné Gutenbergove bloky, aby vyhovovali vašim špecifickým potrebám.
Bez ďalších okolkov začnime, pretože sa máme veľa čo učiť.
Ale predtým, ak ste nikdy nenainštalovali WordPress objaviť Ako nainštalovať 7 krokov WordPress blogu et Ako nájsť, nainštalovať a aktivovať WordPress tému na svojom blogu
Potom späť k tomu, prečo sme tu.
Čo sú to vlastne bloky?
Bloky považujú odseky, nadpisy, médiá a vloženia za komponenty, ktoré, keď sa spoja, tvoria obsah uložený v databáze WordPress a nahrádzajú tradičný koncept textu médiami a vloženými vstavanými krátkymi kódmi.
V minulosti sa používatelia WordPressu pri pridávaní obsahu spoliehali na text a krátke kódy. Gutenberg používa bloky. Nový editor vám umožňuje používať blokové jednotky na vytváranie bohatých a flexibilných rozložení, ktoré sa ľahko spravujú. V súčasnosti môžete použiť editor blokov pre príspevky a stránky, existujú však aktívne plány podporovať úplnú úpravu stránok v budúcnosti.
Práca s blokmi robí tvorbu obsahu vo WordPress celkom osviežujúcou. Okrem toho mnohé existujúce doplnky podporujú nový editor a prichádzajú s blokmi pripravenými na použitie, ktoré uľahčujú pridávanie obsahu z uvedených doplnkov. Editor vám umožňuje presúvať bloky na stránku, takže môžete rýchlejšie stlačiť tlačidlo publikovať.
Rovnako ako nástroj na tvorbu stránok integrovaný priamo do WordPress.
Ak ste oboznámení s tvorcov stránok, ako napríklad Elementor, pravdepodobne poznáte koncept vytvárania stránok presunutím myšou. Gutenberg je pokus o plnú integráciu vytvárania webových stránok drag-and-drop do jadra WordPress.
Poďme teda k najlepšej časti dnešného článku. Poďme sa naučiť, ako vytvoriť jednoduchý blok. Môžete to urobiť ručne alebo pomocou pluginov ako napr Vlastné bloky Genesis (predtým BlockLab), Lenivé bloky ou ACF. Vytváranie vlastných blokov je trochu technické, takže pre účely dnešného článku budeme používať plugin.
Ako vytvoriť vlastný blok (pomocou vlastných blokov genesis)
Je jednoduchšie ísť cestou doplnku, pretože vytváranie vlastných Gutenbergových blokov od začiatku si vyžaduje dobré pochopenie HTML, CSS, PHP a čo je najdôležitejšie, javaScript. Budete tiež musieť pochopiť React.
V ďalšej časti budeme používať vlastné bloky Genesis. Jeho bezplatná verzia je k dispozícii v oficiálnom úložisku WordPress, čo znamená, že si ho môžeme nainštalovať do administračného panela WordPress.
Nainštalujte vlastné bloky Genesis
Prihláste sa do svojho administračného panela WordPress a prejdite na Rozšírenia> Pridať, ako je uvedené nižšie.
Potom zadajte " Vlastné bloky Genesis vo vyhľadávacom poli kľúčového slova a cvaknutie na tlačidle nainštalovať teraz
Potom, aktivovať plugin, ktorý vám pomôže začať
Ďalej vytvoríme nový vlastný blok. Pre ilustráciu si vytvorte vlastnú výzvu na akciu (CTA), ktorú pridáme na koniec každého článku, ktorý publikujeme. Najlepšie na tom je, že bloky môžete znova použiť, aby ste si ušetrili vytváranie rovnakých blokov znova a znova.
V ponuke správcu WordPress prejdite na Vlastné bloky > Pridať nový, ako zdôrazňujeme nižšie.
Tým sa dostanete na nasledujúcu stránku, kde nájdete všetky možnosti vytvorenia vlastného bloku (v našom prípade CTA):
Tu je niekoľko slov na vysvetlenie toho, čo vidíte na snímke obrazovky vyššie. Počnúc zhora, máte to.
Hlavná oblasť úprav:
- Staviteľ – Pravdepodobne tu strávite veľa času navrhovaním vlastného bloku. a constructeur umožňuje pridať názov, polia, slimák, kľúčové slová, kategóriu a zobraziť ukážku vlastného bloku. Naučíte sa pridávať polia.
- Editor šablón – Po navrhnutí vlastného bloku (t. j. pridaní rôznych polí) budete musieť vytvoriť šablónu bloku (prečítať, pridať nejaký kód) v editor modelov. Viac sa dozvieme, keď navrhneme CTA.
- Ukážka editora – Umožňuje vám zobraziť ukážku vlastného bloku v editore blokov WordPress.
- Ukážka klientskeho rozhrania – Tu si môžete pozrieť, ako bude vlastný blok vyzerať na vašom webe.
- EditorField – Zobrazí polia v hlavnej oblasti úprav príspevku alebo stránky (viete, rovnako ako vidíte svoje bežné príspevky v editore WordPress)
- Inšpekčné pole – Zobrazí pole v pravom bočnom paneli pod inšpektorom blokov.
Možnosti bočného panela
- Slimák – Vypĺňa sa automaticky na základe názvu, ktorý priradíte svojmu vlastnému bloku. Toto je dôležité pri vytváraní modelu bloku.
- Ikona – Táto možnosť vám umožňuje pridať ikonu do vlastného bloku.
- kategórie - Umožňuje vám priradiť kategóriu k vášmu vlastnému bloku. Svoj vlastný blok môžete kategorizovať pomocou jednej zo vstavaných kategórií alebo môžete vytvoriť úplne novú kategóriu.
- Kľúčové slová – Do vlastného bloku pridajte maximálne tri súvisiace kľúčové slová, aby ho ľudia mohli ľahko nájsť vo výbere bloku.
- Otvárajte polia blokov v modálnom režime namiesto vykresľovania na mieste – Povoliť, ak chcete otvárať polia v modálnom režime. To je užitočné, ak máte vlastný blok s mnohými poľami.
- Post Druhy – Začiarknutím políčok umožníte zobrazenie vlastného bloku pri každom type príspevku. Ak napríklad zrušíte začiarknutie políčka Príspevky, blokovanie sa nezobrazí na žiadnych príspevkoch.
Vytvorte si vlastný blok
Teraz, keď ste lepšie porozumeli používateľskému rozhraniu a tomu, čo jednotlivé časti robia, poďme sa pustiť do práce.
v Staviteľ - Staviteľ -, dajte svojmu vlastnému bloku vhodný názov. Vyberieme CTA pre tento, ako je uvedené nižšie.
Pred pridaním nových polí pridajte ikonu, kľúčové slová a vyberte kategóriu pre vlastný blok, ako je uvedené nižšie.
K tomu pridáme niektoré polia do nášho vlastného bloku. V našom príklade bloku CTA pridáme iba tri polia v nasledujúcom poradí: obrázok, nejaký text a pole súboru, ktoré ľuďom umožňuje stiahnuť si e-knihu.
Čítajte tiež: Zásuvné moduly 5 WooCommerce na hromadné úpravy vašich produktov
Pridanie blokových polí
V sekcii Polia editoraKliknutím na ikonu plus (+). pridajte prvé pole, ako je uvedené nižšie.
Ďalej pridáme obrázkové pole. Na bočnom paneli nastavte Typ poľa zapnutý Obraz a nastavte ostatné možnosti. Zvážte aj slimák, ako ho budeme používať pri vytváraní modelu bloku.
Potom rovnakým spôsobom pridajte textové polia a polia súboru.
Prepnúť na Editor šablón > Označenie.
Tu navrhneme, ako bude náš vlastný blok vyzerať na vašom webe. Editor modelov akceptuje HTML, CSS a pole slugs (ktoré musíte umiestniť medzi 2 hranaté zátvorky). Ak potrebujete použiť jazyk PHP, môžete vytvoriť šablónu pomocou PHP metóda modelovania
Nebojte sa, je to jednoduché.
Dans editor modelov, pod záložka označenia, pridajte nasledujúci kód:
<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>Pri písaní kódu si to všimnete editor modelov Automaticky dopĺňajte polia (napr. {{image-field}}) za vás.
Potom prejdite do sekcie CSS na pridanie jednoduchých štýlov s nasledujúcim kódom:
.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;
}
Tieto štýly si môžete prispôsobiť, ako chcete,
Kliknite na publikovať :
Ak chcete vidieť svoj nový vlastný blok v akcii, vráťte sa na svoj administračný panel WordPress a vytvorte príspevok ako zvyčajne, kliknite na plus (+) pridať nový blok a vybrať si svoj nový vlastný blok, ako je uvedené nižšie.
Ďalej vyplňte svoj vlastný blok podľa potreby a odošlite správu:
Ak teraz skontrolujeme náš nový vlastný blok CTA na front-ende, vidíme toto.
Naša vlastná CTA je tu! Nerobte si starosti s našimi možnosťami návrhu – samozrejme, v skutočnom scenári strávite trochu viac času prispôsobením vášho bloku. Ale dúfame, že ste sa tu niečo naučili.
Ďalšie odporúčané zdroje
Pozývame vás tiež na konzultáciu zdroje nižšie, aby ste sa dostali hlbšie do začiatkov a ovládania vašich webových stránok a blogu.
- 10 pridružených doplnkov WordPress na vytvorenie programu
- Ako pridať viac stĺpcov do WordPress
- Ako pridať viac stĺpcov do WordPress
- Za použitia rôznych pozadí WordPress
- Elementor: Ako vytvoriť animáciu pri umiestnení kurzora myši
záver
Vytváranie vlastných blokov nie je ľahká úloha. Ale s WordPress pluginy ako sú Genesis Custom Blocks a Lazy Blocks, medzi inými, či už ste začiatočník alebo nie, podarí sa vám ich vytvoriť. Od najzákladnejších po komplexné v závislosti od vašich potrieb.
To je všetko pre tento článok, ktorý vám ukáže, ako pridať vlastné písma na webovú stránku WordPress. Pozývame vás vyskúšať. Ak máte nejaké obavy alebo návrhy, dajte nám vedieť Komentáre.
Môžete sa však poradiť aj s našimi zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Medzitým, zdieľajte tento článok na rôznych sociálnych sieťach.
...
