Ako vytvoriť blokové vzory na urýchlenie budovania webových stránok

Blokové vzory sa stanú veľkým problémom pre všetkých používateľov WordPress av tomto príspevku vám ukážem, ako presne vytvoriť vlastné blokové vzory..


add_action ('init', function () {

register_pattern („NAME“, [
'title' => __ ('TITLE'),
'content' =>
'PATTERN'
]);
});

Pred dvoma dňami som prišiel s videom a predstavil som tento koncept, ktorý prichádza hneď za roh k WordPressu, ktorý sa nazýva vzory blogov. Práve teraz je to trochu experiment, a je to niečo, čo ma nadchlo. A myslím si, že ak sa zamyslíte nad potenciálom toho, aké blokové vzorce sú, potom vidíte potenciál, ktorý vám môže pomôcť, aby ste rýchlejšie dodávali webové stránky, ak máte klientov, aby ste im mohli umožniť viac sa venovať ich webové stránky.

Takže ti ukážem. Presne ako vytvoriť blokovanie v tomto videu. Teraz sa chystáme urobiť nejaké veci, ktoré sú trochu na technickej stránke, a viem, že toto je kanál WordPress pre netechikov, takže sa pokúsim urobiť to čo najjednoduchšie, ale vy ste do konca uvidíme, aké jednoduché je vytvoriť jeden z týchto blokových vzorcov.

Poďme sa teda na to pozrieť. Takže tu je stránka, kde sa hovorí o novom vydaní tejto funkcie pri jej výrobe. Schopný iba pre priemerných ľudí, aby vytvorili blokovací vzor. Takže keď prejdem nadol, poskytne to druh šablóny. Takže všetko, čo sa na tom podieľa, je vytvorenie niečoho, čo sa nazýva vlastná funkcia.

Ale nebojte sa, urobím to pre každého jednoduchým, ale tu je ten malý útržok kódu. Teraz budem mať odkaz v popise videa dole. Dostanete sa na môj web. Dostanete písomné pokyny, ako to urobiť, ako aj. Tento malý útržok kódu, ktorý môžete skopírovať a vložiť na svoju vlastnú webovú stránku.

Dobre, tu je to, čo budeme potrebovať. Toto je nová funkcia pre Gutenberg a budete potrebovať nainštalovaný aktivovaný plugin Gutenberg, takže budete potrebovať minimálnu verziu 7,8 a to je to, čo nedávno vyšlo. Teraz sa to pravdepodobne stane za štyri až šesť mesiacov, možno do konca leta 2020 bude to štandardne zahrnuté v programe WordPress, ale zatiaľ to budete musieť, ak si to chcete vyskúšať , budete musieť nainštalovať doplnok Gutenberg.

Ďalšiu vec, ktorú môžete urobiť, a to je voliteľné, ak neviete, ako pridať vlastnú funkciu k podradenej téme, a podriadenú tému už ani nepoužívam, môžete použiť tento bezplatný doplnok, a toto je jeden z najlepších bezplatných doplnkov. Že som kedy narazil, a to sa nazýva úryvky kódu. A to nám umožní pridať túto vlastnú funkciu a veľmi ľahko použiteľný spôsob, ktorý sa ľahko spravuje.

V poriadku? Takže to budete potrebovať. A to je voliteľné. Toto je bezplatný doplnok s názvom kadenčné bloky. A čo to robí je, že do Gutenbergu pridáva veľa funkcií na tvorbu stránok. Je celkom pekné, čo vám umožňuje robiť. Môžete presunúť a zmeniť veľkosť stĺpcov. Je tu veľa prvkov, ktoré pridávajú veľa funkcií tohto nástroja na tvorbu stránok, ale do Gutenbergu, a je to úplne bezplatný doplnok.

Poriadku. Teraz prejdeme na môj web. Takže tu je webová stránka. Všetko je nastavené práve teraz. A ak neviete, ako nainštalovať doplnok, niekto sa na mňa v druhý deň skutočne zbláznil, že mu neukázal, ako nainštalovať doplnok a video. Prejdete na doplnky, kliknete na Pridať nový a potom tu vyhľadáte názov tohto doplnku a potom kliknete na.

Stiahnite si, alebo je mi ľúto, kliknete teraz na inštaláciu a aktivujete ho. Je to veľmi jednoduchý proces. Takže kliknem na moje nainštalované doplnky a uvidíte, že mám nainštalovaný Gutenberg a toto boli voliteľné bloky kadencie, a tu sú úryvky kódu. Takže budem pokračovať a aktivujem útržky kódu a uvidíte, že je teraz aktivovaný práve tu.

Tak potom choďte do toho a kliknite na útržky kódu a uvidíte nejaké, s čím prídete. A tu je tento prepínač a je prepnutý. Všetci sú prepnutí na vypnuté a vy skutočne nepotrebujete ponechať tie, s ktorými sa predvolene dodáva. Stačí kliknúť priamo sem a môžete ich všetky odstrániť, ale ja som už išiel dopredu a pridal som jeden sem nazývaný šablóna blokového vzoru.

Čo by ste urobili. Kliknete na pridať novú a túto šablónu blokového vzoru môžete pomenovať v tomto zlomku kódu, ktorý som vám ukázal, že je to tu, ale na mojej webovej stránke vám poskytnem jeho modifikovanú verziu. Toto jednoducho skopírujete a prilepíte tu a potom kliknete na uloženie zmien.

Nebudete klikať na uloženie a aktiváciu, kliknete na uloženie zmien a ukážem vám prečo práve o chvíľu. Poriadku. Teraz budete chcieť vytvoriť tento blokovací vzor. A blokový vzor je jednoducho iba uložená časť. Takže ak používate nástroj na tvorbu stránok, teraz viete, že by ste mohli uložiť oddiely a niektoré z nich sú dodávané s predurčenými sekciami, ale používateľské skúsenosti, myslím, že v Gutenbergu je oveľa lepšie.

Čo teda budete chcieť urobiť, je ísť na stránky. A kliknite na pridať nové a budete to chcieť pomenovať. Vlastne, dovoľte mi zbaviť sa tohto turné. Tento blokovací vzor budete chcieť pomenovať a práve tu vytvoríme tento blokovací vzor. Teraz sa teraz nebudem zaoberať vytváraním blokového vzoru.

Ukážem vám toho, ktorý som už vytvoril, a je to. Práve tu. Takže tu je vzorec blokov, ktorý som vytvoril. Mohli ste vidieť, že je to táto sekcia. Má toto farebné pozadie. Mám tu nadpis, niektoré podnadpisy a pár tlačidiel a vložím video. Takže urobím tento blokovací vzor, ​​aby som mohol iba dvoma kliknutiami myšou, pridať ho kamkoľvek na moju webovú stránku.

Takže urobím kliknutie v pravom hornom rohu, sú tu tieto tri bodky. Je to trochu ťažké vidieť a keď na ne kliknete, je tu táto možnosť, ktorá hovorí, že editor kódu. Takže budete chcieť kliknúť na editor kódu a potom vám ukáže všetok kód, ktorý sa podieľa na tom, aby sa blog stal vzorom blokovania vzoru blogu..

V poriadku? Takže kliknete tu a potom kliknete na ovládanie alebo na príkaz a, aby ste to všetko zvýraznili. A to je nový rok. Vložte ju do svojej schránky. Takže urobím kontrolu C. Takže teraz je to v mojej schránke. Takže teraz urobím to, že sa odtiaľto dostanem. V skutočnosti, ak sa chcete dostať z tohto pohľadu, je tu trochu X, ktoré hovorí, že editor výstupných kódov, a teraz mi to ukáže tak, ako je to normálne práve tu.

Poriadku. Môžete to uložiť ako koncept, ak chcete, ale nebudete to potrebovať. Toto je len pre vás, aby ste vytvorili tento blokovací vzor a mohli ste vytvoriť blokovací vzorec, ktorý je čokoľvek, a nemusí to byť jeden blok vecí. Môže to byť napríklad celá šablóna pre blogový príspevok. Dobre, takže teraz idem kliknúť, kde je to, čo ma dostane z editora blokov.

Teraz sa vrátim späť na úryvky kódu. Práve tu je miesto, kde som vytvoril šablónu blokového vzoru. Kliknem na klon a teraz je vytvorený jeho klon a potom kliknem do názvu, aby som ho začal upravovať. Takže pokiaľ ide o nadpis, zmením ho na názov, ktorý má zmysel pre jeho správu.

Takže pre mňa to jednoducho pomenujem. Hrdina s videom. Takže teraz viem, čo to je, keď sa pozriem na zoznam v budúcnosti. Dobre, takže tu je pár vecí, ktoré budete musieť upraviť. Tri veci. Je to super jednoduché. Prvým je meno. Môže to byť ľubovoľný názov, musí to byť malé písmeno, žiadne medzery alebo funky znaky.

Takže teraz idem napísať meno. Vidíte, že som videom nazval hrdinu. Ďalej musíte zadať názov. Nahrádzame teda tento názov slova a toto sa bude zobrazovať. Pozeráte sa na zoznam vzorov blogov, blokov, nie vzorov blokov blogov. A ak si všimnete, môžete, je to priateľské meno, takže môže mať medzery.

Uh, nedal by som tam žiadne funky postavičky. Priestory sú v poriadku. To je to, čo sa zobrazí v tomto zozname a ďalej tu, kde sa hovorí vzor a. Stačí vložiť to, čo ste práve skopírovali do svojej schránky. Teraz chcem, aby si si všimol jednu vec. Pre každú z nich. Malú apostrof som nechal na prednej a zadnej strane.

Vidíte, že tu musí byť apostrof. Ak to omylom odstránite, vráťte ho späť. Poriadku. Len sa meníme. Nahrádzame iba zástupný symbol textu. Takže tu nechcem všetko nahradiť. Chcem len nahradiť vzor slova, takže ho zvýrazním a potom vložím to, čo som skopíroval.

A tam to je. Teraz prejdem nadol a tentokrát kliknem na zmeny a aktivujem. A teraz by sa malo povedať, že útržok je aktualizovaný a aktivovaný. A keď kliknem na všetky úryvky, môžete teraz vidieť, že je tento jeden hrdina s videom zapnutý. Takže v budúcnosti pre ďalšie blokové vzory chcem ísť tam, kde sa hovorí šablóna blokových vzorov a kliknúť na klon a vytvoriť tak šablónu blokových vzorov týmto spôsobom.

Takto mám vždy k dispozícii šablónu. Ak už viete a máte svoj vlastný spôsob pridávania vlastných funkcií, nepotrebujete útržky kódu a všetky tieto veci môžete umiestniť tam, kam chcete umiestniť. Je to oveľa jednoduchší spôsob, ako to zvládnuť, ak sa ma pýtate. Dobre, takže teraz pôjdem na stránky po kliknutí na položku Pridať nový a ak chcete vidieť.

Blokové vzory. Uh, práve tu je ikona. A keď sa nad ňou vznášate, hovorí to o blokových vzorcoch. A keď naň kliknem, uvidíte niektoré zo vzorcov blokov, s ktorými práve teraz experimentujeme. Ale keď sa posuniete nadol, uvidíte ten blok, ktorý som vytvoril. A čo je skutočne pekné, je to, že vytvára náhľad miniatúry.

A to dynamicky. Máte nástroje na vytváranie stránok, ktoré to ani nerobia. Uh, a je tak oveľa jednoduchšie spravovať vaše vzory blokov. Takže, a tu môžete vidieť, že hovorí hrdina so šablónou. Ak to teraz chcem použiť kdekoľvek na svojej webovej stránke, je to jedno kliknutie myšou. A potom to tak je. A všetko, čo by som musel urobiť, som začal robiť zmeny textov, zmeniť odkazy na tlačidlá.

Môžem kliknúť priamo sem a môžem video zmeniť. So. Takto vytvoríte blokovací vzor. Teraz si myslím, že je to veľká vec, pretože to, čo sa stane, je téma. Vývojári a tvorcovia doplnkov budú môcť tieto blokovacie vzory vytvoriť za vás, takže bude oveľa rýchlejšie, rýchlejšie a ľahšie zostaviť webovú stránku pomocou natívneho nástroja na vytváranie blokov, ktorý už WordPress obsahuje.

Nie je čo kupovať, nie je tam žiadny kód. Nič z toho nie je a. Čo to ešte ďalej. Môžete vidieť, aké ľahké je pre vás vytvoriť si vlastné vzory blokov, a je skutočne ľahké ich vidieť v zozname. Kliknite na tlačidlo a dostanete sa tam. Takže teraz by ste mohli premýšľať o tom, aké jednoduchšie môže byť zostavenie webovej stránky, keď máte vlastnú knižnicu blokových vzorov.

Ak teda vytvárate webové stránky pre klientov a nechcete používať nástroj na tvorbu stránok. Chcete iba použiť zabudovaný nástroj na tvorbu blokov. Mohli by ste si vytvoriť svoju vlastnú knižnicu vzorov. Videli ste, aké ľahké to je. Môžem to urobiť. Dalo by sa to urobiť. Uh, mohli by ste si vytvoriť svoju vlastnú knižnicu blokových vzorov, ktoré môžete presúvať z jedného miesta na druhého a môžete ukázať svojmu klientovi, ako to môžu vybudovať..

Teraz to nie je len pre stránky, to je pre príspevky a nie je to obmedzené iba na tú časť, ktorú ste videli. V podstate všetko, čo na stránke môžete vytvoriť. Môžete vytvoriť vzor bloku. Ak teda používate nástroj na vytváranie blokov iba pre príspevky na blogu a v blogovom príspevku sú určité prvky, ktoré chcete opakovane používať na zlepšenie rozloženia príspevkov na blogu, môžete tiež vytvoriť vzor bloku pre to.

A je to naozaj ľahké. Jedno kliknutie a môžete ho použiť. V skutočnosti je celá šablóna blogu. Ak teda existuje vzorec, ktorý dodržiavate v sekciách blogového príspevku, môžete urobiť, aby celý blog uverejnil blokovú šablónu. Že jedno kliknutie sa aplikuje a potom všetko, čo musíte urobiť, je poukázať, kliknúť a upraviť.

Takže posledná vec, ktorú tu zabalíme, je to nový koncept a je to niečo, na čo by ste mali myslieť v nasledujúcich mesiacoch. Teraz experimentujte. Nie je to celkom Yeti, Yeti. Nie je to celkom pripravené na hlavný čas, pretože ak ste si to všimli, jediný negatívny jav, ktorý som videl, je, keď sa pozeráte na blog. Uvidíme sa znova.

Ak sa pozeráte na vzory blokov, je to len zoznam vyšších článkov, v ktorých sa musíte posúvať, takže musia zlepšiť proces kategorizácie a organizácie. Možno pre to majú nejaké rozhranie, aby bolo vizuálnejšie a ľahšie s ním pracovať. Ak budete mať 50 rôznych blokov.

Vzory. Potrebujú to len vylepšiť. A časť syntaxe kódu sa môže trochu zmeniť. Kto vie, kedy to nakoniec vyjde. Celým zmyslom tohto videa je iba ukázať, čo bude možné veľmi, veľmi skoro, aby ste mohli začať. Premýšľate, ako sa môže vzťahovať na váš pracovný postup a čo robíte ako tvorca webových stránok.

Každopádne to je všetko, čo pre vás mám v tomto príspevku. Dúfam, že oceníte pokročilý pohľad na budúcnosť programu WordPress, ako je tento, a ak ste ocenili toto video alebo našli nejakú hodnotu, zvážte, či mu dáte palec hore a zdieľate toto video, aby ľudia videli, čo sa deje za rohom.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map