WordPress Gutenberg Výukový program pro uživatele:uvnitř

Maddy Osman Naposledy aktualizováno 5. ledna 2021
11 min.
Gutenberg -Průvodce
Naposledy aktualizováno 5. ledna 2021

Pokud uvažujete o použití webové stránky WordPress pravděpodobně jste byli z Gutenberg Slyšel. Gutenberg je editor pro WordPress , který byl vydán ve verzi 5.0. 

Od svého prvního vydání bylo mnoho funkcí WordPress Editor bloků, včetně blokového seskupení a vzorů bloků. Ale proč Gutenberg je tak populární, je to hlavně proto, že příspěvky a stránky lze upravovat mnohem vizuálněji než se standardem WordPress Editor.

WordPress Gutenberg Výukový program pro uživatele:uvnitř

Tato příručka obsahuje:

  • Co je Gutenberg
  • kompletního průvodce Gutenberg pro vývojáře:uvnitř
  • krátký seznam různých funkcí v Gutenberg

A už vám mohu slíbit jednu věc: Podle tohoto průvodce víte, jak používat Gutenberg vytvářet profesionální rozvržení pro vaše webové stránky.

WordPress 5.6 je konečně tady!

Nejnovější verze WordPress zaměřuje se na rozvržení a design: zcela nový Theme , další možnosti rozložení pro příspěvky a stránky a blokové vzory pro celý web. Všechny podrobnosti naleznete v úřední poznámce k verzi a v WordPress Průvodce polem.

Co je nového na Gutenberg Blokový editor?

Než se dostaneme do WordPress Gutenberg tutorial, pojďme se nejprve podívat na to, co Gutenberg vlastně je. 

Gutenberg nahrazuje Editor TinyMCE a umožňuje používat bloky obsahu k přidávání textu, obrázků a dalších médií do příspěvků a stránek. Klasický Editor TinyMCE byl založen na textu a omezoval nové uživatele, kteří nevěděli, jak kódovat. 

I když znalosti HTML nebyly nezbytné pro použití klasického editoru, často jste museli jít do zobrazení HTML, abyste provedli jakékoli změny. V opačném případě byste potřebovali mít samostatný Plugin chcete-li na svůj web přidat jednoduché funkce, jako jsou tabulky nebo galerie obrázků.

WordPress Gutenberg Výukový program pro uživatele:uvnitř

S Gutenberg můžete navrhnout svůj web ne s textem, ale s obrázky. S WordPress Gutenberg Block Editor umožňuje snadno přidávat bloky obsahu na stránky a příspěvky. Existují bloky pro obrázky, pro odstavce – a pro téměř každou další položku, kterou chcete na svém webu.

WordPress Gutenberg Výukový program pro uživatele:uvnitř

Gutenberg je nyní standardním blokový editor WordPress a je dodáván s mnoha bloky mimo krabici. Můžete také WordPress Plugins přidejte ještě více bloků, abyste mohli snadno vkládat různé funkce do příspěvků a stránek. 

WordPress Gutenberg Tutorial

Při vytváření webů není nikdy špatné zjednodušit pracovní postup. Gutenberg vám může ušetřit spoustu času. Takže je nejvyšší čas WordPress Zablokujte Editor, abyste se na něj podívali zblízka. Nejdřív půjdeme společně do Základy Gutenberg Do toho.  

Jak vy Gutenberg Používá

  1. Jako obvykle vytvořte novou položku blogu v WordPress . 
  2. Klikněte na modré znaménko plus v levém horním rohu. 
  3. Vyberte blok, který chcete zahrnout do příspěvku. 
  4. Upravte nastavení bloku v příspěvku konceptu. 
  5. Přeuspořádejte bloky tak, že je přetáhnete.

To je ono! Abychom pochopili, jak každý blok funguje, upravte je a seskupte, je zapotřebí trochu více vysvětlení. To je přesně to, k čemu nyní přicházíme ve zbytku našeho WordPress Gutenberg Návody. 

Podrobná příručka k Gutenberg Editor bloků 

Nyní, když jsme vyčistili základy z cesty, nyní se ponořili do zvláštností WordPress Editory bloků. Při prvním použití obrazovky editoru stránky nebo příspěvku Gutenberg editor vypadá docela prázdně – ještě více než klasický editor, protože tradiční možnosti nabídky chybí. To je OK. Prvním krokem je přidání několika bloků. 

1. Přidejte bloky do příspěvku

Chcete-li k příspěvku přidat blok, stiskněte znaménko plus v levém horním rohu návrhu příspěvku. Nový blok je překryt malou sadou možností nabídky. 

Nejprve se zaměříme na hlavní menu a později probereme, jak provést další úpravy se sekundární nabídkou.

WordPress Gutenberg Výukový program pro uživatele:uvnitř

Můžete procházet typy bloků nebo pomocí vyhledávacího panelu najít typ bloku, který chcete. Pak přidejte blok zadáním "/" a typu bloku. Chcete-li například vložit obrázek, zadejte "/obrázek".

K dispozici je mnoho bloků, včetně

  • Odstavce
  • Obrázky
  • Záhlaví
  • Seznamy
  • Tabulky
  • Oddělovač
  • Galerie
  • Tlačítka
  • Videa
  • Audio 

Pokud Plugins s vlastními bloky se také zobrazí v tomto seznamu. 

Případně můžete přidat blok kliknutím na černou znaménko plus: to se zobrazí, když kliknete na pracovní verzi, kde se píše: "Napište něco nebo klepněte pro výběr bloku". 

WordPress Gutenberg Výukový program pro uživatele:uvnitř

Nebo můžete postupovat podle pokynů v textu a zadat "/" a vybrat z rozevíracího seznamu možností.  

WordPress Gutenberg Výukový program pro uživatele:uvnitř

2. Změna uspořádání bloků

Bloky můžete přetáhnout šipkami na samotném bloku nebo stisknutím bodů mezi šipkami na místo, kde se mají zobrazit.

WordPress Gutenberg Výukový program pro uživatele:uvnitř

S WordPress Blokový editor je mnohem jednodušší pro reorganizaci obsahu než u klasického editoru. Nemusíte se obávat porušení kódu, protože všechny informace o obsahu bloku (včetně písma, barvy a velikosti) se pohybují s blokem. 

Jednoduchost, s jakou můžete uspořádat své bloky, je jednou z nejlepších vlastností Gutenberg Editory bloků. Ušetříte čas opravou vadného kódu a nemusíte se spoléhat na kopírování a vkládání, abyste svou práci odvedli.

3. Přizpůsobení nastavení stylu bloku

Dalším krokem v našem WordPress Gutenberg Kurz se se dozvídá nabídku Nastavení stylu. V některých případech se některé možnosti zobrazí v blízkosti bloku, když na něj kliknete. Pokud například pracujete na bloku odstavce, některé známé možnosti se zobrazí těsně nad blokem. 

WordPress Gutenberg Výukový program pro uživatele:uvnitř

Na pravé straně obrazovky se však zobrazí také sekundární nabídka. Klikněte na kartu"Nastavení ".  

WordPress Gutenberg Výukový program pro uživatele:uvnitř

Možnosti nastavení stylu, které můžete přizpůsobit, závisí na bloku. Například nastavení bloku odstavců vypadá jinak než nastavení bloku obrázku.

WordPress Gutenberg Výukový program pro uživatele:uvnitř

Pomocí nabídky Nastavení stylu můžete snadno přizpůsobit bloky v příspěvcích. Opět, na rozdíl od klasického editoru, se nemusíte starat o provádění změn v titulku obrázku, abyste pokazili formátování podkladového textu. 

Opakovaně Gutenberg Vytvoření bloků editoru

Nyní se dostaneme k pokročilým tipům WordPress Gutenberg Návody. Ušetříte spoustu času a úsilí tím, že ušetříte bloky, které můžete použít v budoucích příspěvcích, stránkách a dalších WordPress může weby znovu použít.

WordPress Gutenberg Výukový program pro uživatele:uvnitř

Nelze použít bloky, které lze znovu použít, pokud máte položky, které je třeba pravidelně přiřazovat na určitou stránku nebo typ příspěvku. 

Řekněme, že píšete filmové recenze a máte tabulku, která zobrazuje vaše žebříčky pro každý film. To by mělo vždy vypadat stejně, s konkrétním stylem a stejným počtem sloupců a řádků. Když vytvoříte blokovatelný blok, můžete ušetřit značné množství času tím, že jej znovu vytvoříte s každým příspěvkem. 

Ukládání stylingu a různých atributů prvků může také ušetřit skutečný čas pro tlačítka. 

Řekněme, že potřebujete stejné CTA (Call to Action) v každém příspěvku, který napíšete. Chcete-li vytvořit blokovatelné tlačítko, začněte tím, že projdeš typickým procesem přidání bloku tlačítek. Upravte styl a text tak, aby vypadal tak, jak chcete.  

WordPress Gutenberg Výukový program pro uživatele:uvnitř

Pak klepněte na tři tečky v nabídce bloku a vyberte Přidat do blokovatelných bloků

WordPress Gutenberg Výukový program pro uživatele:uvnitř

Zde můžete svému novému bloku pojmenovat. 

WordPress Gutenberg Výukový program pro uživatele:uvnitř

Pokud chcete tento blok znovu použít, přejděte donabídky Běžnébloky,přejděte na kartu "Nelze znovu použít"a vyberte uložený blok. 

WordPress Gutenberg Výukový program pro uživatele:uvnitř

Můžete také exportovat lyzovatelné bloky pro použití na jiných webových stránkách. Jednoduše klikněte na tři tečky vedle bloku, vyberte Exportovat jako JSON a stáhněte soubor. 

WordPress Gutenberg Výukový program pro uživatele:uvnitř

Za účelem převodu exportovaného blokovatelného bloku na jiný WordPress Přidejte web, přejděte na kartu Zvolitelné v nabídce Bloky a vyberte Spravovat všechny řiditelné bloky. 

WordPress Gutenberg Výukový program pro uživatele:uvnitř

Tím se otevře tradičnější sekce v WordPress Řídicípanel , kde můžete spravovat všechny ovšem použitelné bloky, které vytvoříte. 

Pokud jste bloky nelze znovu použít z jiných webů, můžete je nahrát kliknutím na Importovat z JSON. Jakmile to jednou uděláte, měli byste k němu mít přístup jako obvykle na kartě Nelze znovu použít v nabídce Bloky. 

Umístěte bloky do skupin

V dalším Pro Tipu našeho WordPress Gutenberg Výukové programy jsou o seskupování bloků. Pokud ve skupině vložíte dva nebo více bloků, můžete je přizpůsobit a manipulovat s nimi, jako by se na nich naštýslo. 

Můžete například seskupit blok výzvy k akci sociálních médií s blokem, který obsahuje ikony sdílení na sociálních sítích. Můžete také seskupit blok odstavce s blokem tlačítek a vytvořit tak standardní CTA, které můžete vložit na konec příspěvků. 

Chcete-li vytvořit skupinu bloků pomocí Gutenberg Blokový editor vyberte všechny bloky, které chcete seskupit. Poté klikněte na vrstvenou ikonu na levé straně malé nabídky Překrytí:

WordPress Gutenberg Výukový program pro uživatele:uvnitř

Zobrazí se nová nabídka s nápisem "Transformovat po", klikněte na Seskupit. To je ono. Nyní můžete tyto bloky přesunout a přizpůsobit, jako by byly jedním z nich. 

Nastavení každého bloku můžete přesto změnit. Můžete například přidat text do bloku odstavce a změnit jeho vzhled. 

Chcete-li oddělit bloky, vyberte skupinu a klepněte na tři tečky v nabídce překrytí. Posuňte se dolů a klepněte na tlačítko Oddělit.

WordPress Gutenberg Výukový program pro uživatele:uvnitř

Tato funkce také pracuje s lyzovatelnými bloky. Po seskupení bloků je můžete uložit jako bloky, které lze znovu použít, pomocí stejného postupu, jak je popsáno výše. 

Blokovat vzorky v oblasti WordPress Použití editoru bloků

S WordPress Blokové vzorky umožňují vytvářet a sdílet předdefinovaná rozložení bloků. Blokové vzorky vám umožní vytvářet složitá rozložení pomocí několika kliknutí myši.

Chcete-li získat přístup k blokovým vzorům, klepněte na stejné znaménko plus, které jste použili pro přístup k nabídce Blokování. Vyberte kartu Vzorky. 

WordPress Gutenberg Výukový program pro uživatele:uvnitř

Na první pohled vypadají blokové vzory podobně jako lyzovatelné bloky. Blokové vzory jsou však to, co schopnost vytvářet celé stránky v Gutenberg je nejblíž. 

Blokové vzorky vám umožní přidat k příspěvkům nebo stránkám oddíly s plným rozložením jediným kliknutím. Ty jsou ideální, pokud chcete vytvořit a uložit rozložení pro použití ve více příspěvcích. 

Tá WordPress Editor bloků je dodáván s různými prefabrikované vzory, včetně

  • více textových sloupců
  • Tlačítka vedle sebe
  • vlastní záhlaví
  • Citace s obrázky
WordPress Gutenberg Výukový program pro uživatele:uvnitř

Další výhodou blokových vzorů je, že umožňují snadněji přepínat mezi Themes přepnout. Vzhledem k tomu, že formátování je vázáno v blocích samých, není podporováno jiným Theme Postižené. 

Pokud chcete vytvořit vlastní blokové vzory ručně, vyžaduje to určité znalosti programování. V Průvodci vývojem se označují jako předdefinovaná rozložení bloků. 

Vytváření vzorů bloků od začátku vyžaduje použití rozhraní API (Block Application Programming Interface). Tá Plugin Tvůrce blokových vzorů však může pomoci. 

WordPress Gutenberg Výukový program pro uživatele:uvnitř

Další bloky Gutenberg Přidat

Než začneme používat tento WordPress Gutenberg tutorial, měli byste vědět, že existují různé Plugins které vám umožní přidat do editoru ještě více typů bloků, včetně

  • Obsah
  • Cena
  • Mapy Google
  • Kontaktní formuláře

K dispozici je Úředním WordPress Block Directory, ve kterém můžete vytvořit další bloky pro Gutenberg najít a přidat. 

WordPress Gutenberg Výukový program pro uživatele:uvnitř

Původně bylo plánováno vytvoření podadresáře pro Jeden blok Plugins k vytvoření. Místo toho je aktuální adresář pododdílem standardního Plugin Adresář WordPress s prohledávatelným seznamem blokových Plugins . 

Úplné úpravy webových stránek v Gutenberg

V současné době je možné Gutenberg web ještě nebyl zcela upraven. Tá WordPress Vývojový tým však v tomto cíli dělá velké pokroky, včetně přidání vzorců bloků. 

V současné době existuje experimentální verze Dvacet dvacet Themes , který využívá kompletní úpravy webových stránek a myšlenku blokové Themes Zvedne. 

S WordPress Block Editor teď umožňuje vytvářet plně přizpůsobená rozložení založená na blokech, ale jenom pro příspěvky a stránky. Jakmile je kompletní webová stránka zpracována Gutenberg widgety se stávají nadbytečnými. To dává uživatelům úplnou kontrolu nad každým prvkem rozložení, včetně záhlaví, ér stránek a zápatí. 

Ačkoli Gutenberg Blokový editor ještě není plnohodnotný WordPress Page Builder, je na cestě tam. Mezitím blokové vzory, jako jsou vzory používané v horní části WordPress Gutenberg Blokový výukový program bude vysvětlen sada funkcí, která je velmi blízko úplné úpravě webu. 

Nevýhody Gutenberg Editory 

I když Gutenberg je užitečný nástroj, který změnil způsob, jakým mnoho uživatelů: WordPress a vytvářet obsah, editor samozřejmě není bez nevýhod. 

Jako Gutenberg například poprvé to bylo docela náchylné k chybám. Většina z nich byla nyní opravena. 

Jedna věc, která však není chyba, je skutečnost, že Gutenberg stále s mnoha Themes je nekompatibilní. Takže pokud máte konkrétní Theme a líbí se vám design, je pravděpodobné, že jej nepřizpůsobíte nebo Gutenberg může ji použít. Když to zkusíte, výsledek je často prostě nepořádek. 

Nwo Gutenberg je s některými Themes kompatibilní, ale ne dost na to, aby se chlubila rozšířenou kompatibilitou. 

Další problém, který Gutenberg na stole je skutečnost, že nenabízí stejnou flexibilitu jako klasický editor. Jistý Gutenberg eliminuje některé z idiosynkratických problémů s formátováním, ke kterým dochází u klasického editoru – bohužel máte omezený typ stránek, které můžete vytvořit. 

Jako širší možnosti pro Theme Přizpůsobení Gutenberg ještě nejsou k dispozici, musíte se vyrovnat s tím, s jakým Gutenberg Kompatibilní Themes k dispozici a které bloky a bloky jsou Plugins K dispozici. 

Informace použité pro použití Gutenberg zdrojů, které jsou k dispozici, rostou stálým tempem, Theme Tvůrce je Gutenberg to však není. Zatím ne. 

Nakonec Gutenberg ideální volba pro ty, kteří jsou již zvyklí na tvůrce stránek nebo čistě vizuální editory a chtějí si tento zážitek zachovat, nebo kteří se chtějí jen zaměřit na obsah a přetáhnout design. 

Závěrečné myšlenky: Průvodce WordPress Gutenberg 

Tá Gutenberg Editor je nyní součástí WordPress Core. Vývojový tým, který stojí za WordPress Má s tím velké plány. V určitém okamžiku budete moci Gutenberg vytvářet navigační nabídky, vytvářet úplná rozložení webových stránek a vytvářet Gutenberg budou použity s ještě více Themes být kompatibilní. 

Do té doby můžete používat funkce, které WordPress Block Editor v současné době nabízí optimální použití a vizuálně přitažlivé příspěvky a stránky – aniž by znal řádek kódu. Docela dobrý obchod, pokud se nás zeptáte. 

Takže pokračujte: Použijte tipy v našich WordPress Gutenberg výukový program a začněte přizpůsobovat obsah webu. A ujistěte se, že váš web je připojen WordPress Nabídka hostingu webových stránek od RAIDBOXES optimální rychlostí. 

WordPress Gutenberg Editor: Vaše dotazy

Co si myslíte o WordPress Gutenberg Editor? Jaké máte otázky na Maddy? Použijte funkci komentáře. Chcete více tipů na WordPress ? Pak nás sledujte na Twitteru, Facebooku nebo prostřednictvím našeho zpravodaje.

Maddy Osman je SEO Content Strategist. Spolupracuje s vybranými zákazníky v oblasti WordPressu a webhostingu. Vzhledem ke svým znalostem v oblasti webového designu a WordPressu se se SEO opravdu vyzná – a přesně ví, jak propojit značky s obsahem, který je pro SEO relevantní.

Podobné články

Komentáře k tomuto článku

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena *.