Jak vytvořit blokové vzory pro urychlení vytváření webových stránek

Blokové vzory budou velkým přínosem pro všechny uživatele WordPress a v tomto příspěvku vám ukážu, jak přesně vytvořit vlastní vzory bloků.


add_action ('init', function () {

registrer_pattern ('NAME', [
'title' => __ ('TITLE'),
'content' =>
'VZOR'
]);
});

Před dvěma dny jsem vyšel s videem a představil jsem tento koncept, který přichází hned za roh k WordPressu nazvanému vzory blogů. Teď je to trochu experimentální a je to něco, co mě nadchlo. A myslím si, že pokud se zamyslíte nad tím, jaké blokové vzorce jsou, pak vidíte potenciál, který vám může pomoci, abyste rychleji dodávali webové stránky, pokud máte klienty, abyste jim mohli umožnit více se svými webová stránka.

Takže vám ukážu. Přesně jak vytvořit v tomto videu vzor bloku. Teď se chystáme udělat nějaké věci, které jsou trochu na straně techie, a vím, že toto je kanál WordPress pro netechnické, takže se pokusím udělat to co nejjednodušší, ale ty do konce uvidíme, jak snadné je vytvořit jeden z těchto blokových vzorců.

Tak pojďme se na to podívat. Zde je stránka, kde se hovoří o novém vydání této funkce. Schopen jen průměrným lidem vytvořit blokovací vzor. Takže když přejdu dolů, dává to druh šablony. Takže vše, co se na tom podílí, je vytvoření něčeho, co se nazývá vlastní funkce.

Ale nebojte se, udělám to pro každého snadné, ale tady je ten malý útržek kódu. Nyní budu mít níže uvedený odkaz na popis videa. Zavede vás na můj web. Získáte písemné pokyny, jak to udělat stejně. Tento malý úryvek kódu, který můžete zkopírovat a vložit na svůj vlastní web.

Dobře, tady je to, co budeme potřebovat. Toto je nová funkce pro Gutenberg a budete potřebovat nainstalovaný Gutenberg plugin aktivovaný, takže budete potřebovat minimální verzi 7,8 a to je to, co nedávno vyšlo. Teď se to asi stane za čtyři až šest měsíců, možná do konce léta 2020 bude to ve výchozím nastavení zahrnuto do WordPress, ale prozatím budete muset, pokud si to chcete vyzkoušet , budete muset nainstalovat plugin Gutenberg.

Další věc, kterou můžete udělat, a to je volitelné, pokud nevíte, jak přidat vlastní funkci k podřízenému tématu, a já už ani nepoužívám podřízené téma, možná budete chtít použít tento bezplatný plugin, a to je jeden z nejlepších bezplatných pluginů. Že jsem kdy narazil, a to se nazývá úryvky kódu. A to nám umožní přidat tuto vlastní funkci a velmi snadno použitelným způsobem, snadno spravovatelným způsobem.

Dobře? Takže to budete potřebovat. A to je volitelné. Jedná se o bezplatný plugin s názvem kadenční bloky. A co to dělá, je to, že přidá do Gutenbergu spoustu funkcí pro tvorbu stránek. Je docela hezké, co vám umožňuje dělat. Můžete přetahovat a měnit velikost sloupců. Je v něm mnoho prvků, které přidávají spoustu funkcí tohoto nástroje pro tvorbu stránek, ale do Gutenbergu, a je to zcela zdarma plugin.

Dobře. Nyní přejdeme na můj web. Tady je web. Všechno je nastaveno právě teď. A pokud nevíte, jak nainstalovat plugin, někdo mě na druhý den opravdu naštval, že neukazoval, jak nainstalovat plugin a video. Jdete na pluginy, kliknete na přidat nový a pak přímo zde vyhledáte název tohoto pluginu a poté kliknete na.

Stáhněte, nebo je mi líto, kliknete na tlačítko nainstalovat a poté jej aktivujete. Je to velmi jednoduchý proces. Takže budu klikat na mé nainstalované pluginy a uvidíte, že mám nainstalovaný Gutenberg, a to byly volitelné bloky kadence, a tady jsou úryvky kódu. Takže jdu do toho a aktivuji útržky kódu a uvidíte, že je aktivován právě zde.

Tak jděte do toho a klikněte na fragmenty kódu a uvidíte nějaké, s čím přichází. A tady je tento přepínač a je přepnutý. Všichni jsou vypnuti a vy vlastně nepotřebujete ty, které jsou ve výchozím nastavení dodávány. Stačí kliknout přímo sem a můžete je všechny smazat, ale já jsem už šel napřed a přidal jsem jeden tady nazývaný šablona vzoru bloku.

Co byste tedy udělali. Stačí kliknout na přidat novou a můžete tuto šablonu vzoru bloků pojmenovat v tom malém úryvku kódu, který jsem vám ukázal, že je to právě tady, ale já vám na svém webu dám upravenou verzi tohoto. Právě to zkopírujete a vložíte přímo sem a potom kliknete na uložení změn.

Nebudete klikat na uložení a aktivaci, kliknete na uložení změn a já vám ukážu proč za chvíli. Dobře. Nyní tedy budete chtít vytvořit tento blokovací vzor. A blokový vzor je prostě jen uložená sekce. Takže pokud používáte tvůrce stránek, nyní víte, že byste mohli ukládat oddíly a některé z nich přicházejí s předem navrženými sekcemi, ale uživatelská zkušenost je v Gutenbergu mnohem lepší.

Takže budete chtít jít na stránky. A klikněte na přidat nové a budete to chtít pojmenovat. Vlastně, dovolte mi zbavit se tohoto turné. Budete chtít pojmenovat tento blokový vzor, ​​a to je místo, kde budeme tento blokový vzor vytvářet. Teď nebudu procházet vytvářením blokového vzoru právě teď.

Ukážu vám ten, který jsem již vytvořil, a je to. Právě tady. Tady je blokový vzor, ​​který jsem vytvořil. Viděli jste, že je to tato sekce. Má toto barevné pozadí. Mám tu nadpis, několik podnadpisů a pár tlačítek a vložím video. Takže udělám tento můj blokovací vzor, ​​abych mohl pouhým dvěma kliknutími myší přidat toto místo kdekoli na mém webu.

Takže, co udělám, je kliknout vpravo nahoře, jsou tam tyto tři tečky. Jsou trochu těžko vidět, a když na to kliknete, je zde tato možnost, která říká editor kódu. Takže budete chtít kliknout na editor kódu a pak vám ukáže veškerý kód, který se podílí na tom, aby byl tento blog blokovým vzorem..

Dobře? Takže kliknete sem a pak kliknete na ovládací prvek nebo na počítač a zvýrazníte to vše. A jsou nový rok. Vložte ji do schránky. Takže budu dělat kontrolu C. Takže teď je to v mé schránce. Takže teď udělám to, že se odtud dostanu. Vlastně, pokud se chcete z tohoto pohledu dostat, tady je trochu X, které říká editor výstupních kódů, a teď mi to ukáže tak, jak je to normálně právě tady.

Dobře. Pokud to chcete, můžete to uložit jako koncept, ale nebudete to potřebovat. Toto je jen pro vás, abyste vytvořili tento blokový vzor a mohli byste vytvořit blokový vzor, ​​který je cokoli, a nemusí to být jeden blok věcí. Může to být například celá šablona pro blogový příspěvek. Dobře, takže teď kliknu, kde je to, co mě dostane z editoru bloků.

Teď se vrátím zpět na úryvky kódu. Tady je místo, kde jsem vytvořil šablonu blokového vzoru. Jdu kliknout na klon a nyní je vytvořen jeho klon a jdu kliknout do názvu a začít jej upravovat. Takže pokud jde o titul, změním to na titul, který má smysl pro jeho správu.

Takže pro mě to jen pojmenuji. Hrdina s videem. Takže teď vím, co to je, když se dívám na seznam v budoucnu. Dobře, takže je tu pár věcí, které budete muset upravit. Tři věci. Je to super jednoduché. První z nich je jméno. Takže to může být libovolné jméno, které to bude, musí to být malá písmena, žádné mezery nebo funky postavy.

Takže teď půjdu a pojmenuji. Můžete vidět, že jsem videem jmenoval hrdinu. Dále musíte zadat název. Nahrazujeme tedy tento název slova a to je to, co se bude zobrazovat. Díváte se na seznam vzorů blogů, bloků, nikoli vzorů bloků blogů. A pokud si všimnete, můžete, je to přátelské jméno, takže může mít mezery.

Uh, nedal bych tam žádné funky postavy. Prostory jsou v pořádku. To je to, co se v tomto seznamu zobrazí, a hned tady, kde se uvádí vzorec a. Stačí vložit to, co jste právě zkopírovali do své schránky. Teď chci, abys si poznamenal jednu věc. Pro každý z nich. Nechal jsem malý apostrof na přední a zadní straně.

Vidíte, že tam musí být apostrof. Pokud to omylem odstraníte, dejte to hned zpět. Dobře. Jen se mění. Nahrazujeme pouze zástupný symbol textu. Takže tady nechci všechno nahrazovat. Chci jen nahradit vzorec slov, takže ho zvýrazním a pak vložím to, co jsem zkopíroval.

A tady to je. Takže teď přejdu dolů a tentokrát kliknu na uložení změn a aktivuji. A teď by mělo být uvedeno, že úryvek byl aktualizován a aktivován. A když kliknu na všechny úryvky, můžete nyní vidět, že je tento jeden hrdina s videem zapnutý. Takže v budoucnu pro další blokové vzory chci jít tam, kde se říká šablona blokových vzorů a kliknout na klon a vytvořit takovou šablonu blokových vzorů tímto způsobem.

Tímto způsobem mám vždy k dispozici šablonu. Nyní, pokud již víte a máte svůj vlastní způsob přidávání vlastních funkcí, nepotřebujete úryvky kódu a všechny tyto druhy věcí můžete umístit tam, kam chcete umístit. Je to mnohem jednodušší způsob, jak to zvládnout, pokud se mě zeptáte. Dobře, takže teď jdu na stránky kliknutím na přidat nový, a pokud chcete vidět.

Blokové vzory. Uh, právě tady je ikona. A když se nad ním vznášíte, říká to blokové vzory. A když na něj kliknu, uvidíte několik blokových vzorců, se kterými se právě experimentuje. Když však přejdete dolů, uvidíte blokovací vzor, ​​který jsem vytvořil. A co je opravdu pěkné, je to, že vytváří náhled miniatur.

A to dynamicky. Máte nástroje pro vytváření stránek, které to ani nedělají. Uh, a je tak mnohem snazší spravovat vaše blokové vzory. Takže, a tady vidíte, říká hrdina se šablonou. Nyní, pokud chci použít kdekoli na svém webu, je to jedno kliknutí myší. A pak to tak je. A všechno, co bych v tomto bodě musel udělat, abych začal měnit některé texty, změnil odkazy na tlačítka.

Můžu kliknout přímo sem a můžu změnit video. Tak. Takto vytvoříte blokovací vzor. Tohle je hodně, myslím, že to, co se stane, je téma. Vývojáři a tvůrci pluginů, budou pro vás schopni vytvořit tyto vzory bloků, takže bude mnohem rychlejší, rychlejší a snadnější vytvořit web pomocí nástroje pro tvorbu nativních bloků, který již WordPress obsahuje.

Není co kupovat, není nadýmání kódu. Nic z toho není, a. Co to ještě více. Můžete vidět, jak snadné je pro vás vytvořit vlastní vzory bloků, a je opravdu snadné vidět je v seznamu. Klikněte na tlačítko a dostane se tam. Takže teď byste mohli přemýšlet o tom, jak mnohem jednodušší může být vytvoření webové stránky, když máte vlastní knihovnu blokových vzorů.

Pokud tedy vytváříte webové stránky pro klienty a nechcete používat tvůrce stránek. Chcete pouze použít vestavěný blok bloků. Mohli byste si vytvořit vlastní knihovnu vzorů. Viděli jste, jak snadné to je. Zvládnu to. Můžeš to udělat. Uh, mohli byste si vytvořit vlastní knihovnu blokových vzorů, které můžete přesouvat z jednoho místa na druhého, a můžete ukázat svému klientovi, jak to mohou vybudovat.

Teď to není jen pro stránky, to je pro příspěvky, a to není omezeno pouze na jednu část, kterou jste viděli. V podstatě cokoli, co můžete na stránce vytvořit. Můžete vytvořit blokový vzor. Pokud tedy používáte nástroj pro vytváření bloků pouze pro příspěvky na blogu a v blogovém příspěvku jsou určité prvky, které chcete znovu a znovu použít k vylepšení rozložení příspěvků na blogu, můžete také vytvořit vzor bloku pro to.

A je to opravdu snadné. Jedním kliknutím, a jste schopni použít. Ve skutečnosti jsou celé šablony příspěvků na blogu. Takže pokud existuje vzorec, který používáte pro části blogového příspěvku, můžete tento blog vytvořit jako šablonu bloku. Že jedno kliknutí se aplikuje a pak vše, co musíte udělat, je ukázat, kliknout a upravit.

Takže poslední věc, než tu zabalíme, je to nový koncept a je to něco, o čem je třeba v následujících měsících přemýšlet. Experimentujte s nyní. Není to úplně Yeti, Yeti. Není to úplně připravené na hlavní čas, protože pokud jste si všimli, um, jediná negativní věc, kterou jsem viděl, je, když se díváte na blog. Uvidíme se, jdu znovu.

Pokud se díváte na vzory bloků, je to pouze vyšší seznam článků, kde musíte procházet, takže musí zlepšit proces kategorizace a organizování. Možná pro to mají nějaký druh rozhraní, aby bylo vizuální a snadnější s ním pracovat. Pokud budete mít 50 různých bloků.

Vzory. Takže to prostě musí vylepšit. A část syntaxe kódu se může trochu změnit. Kdo ví, kdy to konečně vyjde. Ale smyslem tohoto videa je pouze ukázat, co bude možné velmi, velmi brzy, abyste mohli začít. Přemýšlíte, jak se může vztahovat na váš pracovní postup a co děláte jako tvůrce webových stránek.

Každopádně to je všechno, co pro vás v tomto příspěvku mám. Doufám, že oceníte pokročilé pohledy na budoucnost WordPress, jako je tento, a pokud jste toto video ocenili nebo našli nějakou hodnotu, zvažte, zda mu dáte palce a toto video sdílíte, aby lidé mohli vidět, co se děje za rohem.

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