Od verze WordPress 5.0 mají uživatelé tohoto CMS systému k dispozici nový editor vytváření obsahu webu. Při tvorbě stránky využívá tzn. bloky. Jednotlivé bloky lze upravovat. V následujícím návodu si řekneme, jak používat editor Gutenberg při vytváření obsahu webové stránky.
Obsah
Co je Gutenberg?
Gutenberg je novým výchozím editorem pro WordPress . Funguje na odlišném principu než doposud používaný TinyMCE editor. Díky vytváření stránky pomocí bloků nabízí zbrusu novou zkušenost tvorby webu. V jednotlivých blocích lze pracovat s textem jako v textovém editoru.
Bloky lze po stránce přesouvat a seskupovat podle konkrétních představ uživatele. Díky Gutenbergu má uživatel možnost lepšího přizpůsobení vzhledu a rozložení stránky.
Co je blok?
Bloky jsou části obsahu na stránce . Můžete vytvořit blok pro text, widgety, obrázky, video, citaci a podobně. S každým blokem lze dále pracovat. Přínosem při tvorbě webu je funkce drag and drop , pomocí které lze bloky jednoduše přesouvat.
Jak vytvořit stránku v editoru Gutenberg
Chcete-li vytvořit novou stránku, přejděte v administraci stránky na volbu Stránky › Přidat novou . Otevře se vám následující stránka:
Do zobrazeného bloku napíšete nadpis. Najdete zde také možnost pro úpravu slugu stránky . Slug můžete upravit, kdykoli po kliknutí na nadpis. Stačí, když klepnete na tlačítko Upravit vedle URL adresy stránky.
Vytváření bloků
Po napsání nadpisu, můžete přidat další text do předem nastaveného bloku pro psaní textu, nebo můžete vložit vlastní blok. Učiníte tak kliknutím na ikonku plus:
. Zde si můžete vybrat druh obsahu, který chcete přidat.
V mém příkladu jsem zvolil přidání odstavce. V bloku pro odstavec najdete možnosti písma, zarovnání a ikonku pro vložení odkazu. Na konci panelu nástrojů pro úpravu bloku naleznete tlačítko dalších možnosti úpravy
. S ním můžete například skrýt nastavení bloku, duplikovat, upravit jako HTML, přidat ke znovu použitelným blokům a odebrat blok.
Další možnosti pro text naleznete v pravé části obrazovky . K dispozici je nastavení písma. Vyberete si velikost písma z několika předem nastavených možností nebo si nastavíte vlastní. Můžete zde zvolit také barvu pozadí, barvu textu nebo nastavit vlastní pokročilé úpravy.
Možnosti pro úpravu bloků přímo nad blokem i v pravé části obrazovky se liší podle jednotlivých druhů bloků.
Změna typu bloku
Během vytváření stránky můžete kdykoli změnit typ bloku. Učiníte tak klepnutím na první tlačítko nad aktivním blokem. Zde se vždy zobrazuje znak pro aktivní typ bloku. Po kliknutí se zobrazí seznam bloků, ze kterého si můžete vybírat.
Typy bloků
Při vytváření stránek máte k dispozici několik typů bloků. Jsou seřazeny do přehledného seznamu, který je rozdělen na několik částí:
Nejvíce používané – zde jsou zobrazeny nejvíce používané typy bloků jako odstavec, obrázek, galerie a podobně.
Přímé elementy – k dispozici je blok pro přímý obrázek.
Běžné bloky – zde naleznete bloky pro obrázky, video, soubor, seznam, citaci a jiné běžně používané části stránky.
Formátování – umožňuje přidat formátovaný obsah jako tabulka, kód, vlastní HTML ale také blok v klasickém WordPress textovém editoru.
Prvky rozložení -zde najdete bloky pro špatném strany, tlačítko, sloupce nebo blok s předem vytvořeným rozložením pro média a text.
Widgety – díky dostupným možnostem můžete přidávat shortkódy, kategorie, seznam posledních komentářů a podobně.
Vložené prvky – umožňují vkládání externího obsahu jako YouTube, Twitter, Instagram, Facebook a jiného obsahu.
Jak vytvořit základní uspořádání na stránce
Na začátek vytvoříme jednoduchou stránku. Bude stačit, pokud bude mít nadpis, text, obrázek, seznam s odrážkami a galerii obrázků.
Přidání textu
Po zadání nadpisu začněte jednoduše psát do předem nastaveného bloku. Pro každý odstavec vytvoří Gutenberg samostatný blok. Nemusíte jej pokaždé přidávat na stránku. Stačí, když stisknete Enter. Nový blok pro odstavec se vytvoří sám.
Přidání obrázku
Pokud budete chtít přidat obrázek, vyberte příslušný blok ze seznamu bloků. Seznam bloků se zobrazí po kliknutí na obrázek ikonka plus v levé horní části obrazovky. Obrázek můžete vybrat z knihovny multimédií nebo jej na stránku nahrát.
Hned po nahrání se zobrazí v rozložení stránky. V pravé části obrazovky nastavíte velikost obrázku, vyplníte alternativní text, případně vložíte odkaz.
Přidání seznamu s odrážkami
Vyberte příslušný blok ze seznamu. Při úpravě textu máte k dispozici také možnost volby očíslovaného seznamu, vložení odkazu a podobně.
Přidání galerie obrázků
Ze seznamu bloků vyberte blok pro galerii . Potom nahrajte obrázky. V bloku pro galerii můžete upravovat zarovnání, vložit nebo odebrat obrázek. V pravé části obrazovky naleznete funkce pro nastavení počtu sloupců a oříznutí obrázků v galerii.
Jak přesunout bloky
Jednotlivé bloky lze na stránce přesouvat. Potřebná tlačítka se zobrazí, když přejedete myší na blok, který chcete přemístit. Jsou zde k dispozici dvě šipky pro posun nahoru a dolů. Tyto přemístí vybraný blok vždy o jednu pozici výše nebo níže. Mezi šipkami naleznete ikonku pro funkci drag&drop
. Když na ni přejedete myší, objeví se ručička, kterou blok jednoduše uchytíte a přesunete na požadované místo.
Jak znovu použít vytvořené bloky
Pokud jste vytvořili blok, který byste chtěli později znovu použít, klepněte na ikonku Více možností. Naleznete ji v nabídce funkcí nahoře bloku. Zde zvolte možnost Přidat ke znovupoužitelným blokům .
Takto budete mít přístup k vytvořeným blokům vždy při vytváření nového příspěvku. Uložené bloky se zobrazí v seznamu typů bloků pod položkou Znovupoužitelný . Dají se také spravovat. Můžete je převést zpět na normální blok nebo odstranit z nabídky.
Další funkce
Při vytváření stránek či článků máte k dispozici ještě několik praktických funkcí . Jako první se podíváme na tlačítka nahoře stránky.
První z ikonek jsem už zmiňoval. Slouží pro přidání bloku na stránku.
Šipky dozadu a dopředu není třeba představovat – vrátí vás o krok vpřed nebo vzad.
i – zde si můžete prohlédnout strukturu obsahu.
Zajímavou funkci nabízí poslední tlačítko – bloková navigace . Kromě zobrazení pořadí jednotlivých bloků slouží také k rychlému přechodu na vybraný blok.
V pravé části stránky naleznete další funkce. Některé už možná znáte z předchozí práce s WordPress . Jiné jsou nové.
Dokument – umožní přístup k nastavením dokumentu jako úprava URL stránky, přidání ilustračního obrázku a povolení komentářů. Na stránce vytváření příspěvku je k dispozici také přiřazení kategorií a značek. Můžete také přidat text pro shrnutí.
Blok – o některých funkcích tohoto tlačítka jsem se již zmínil výše v části Vytváření bloků. Liší se v závislosti na zvoleném typu bloku.
Náhled – tlačítko náhled zobrazí živý náhled stránky nebo příspěvku.
Publikovat – pomocí tohoto tlačítka stránku publikujete. V případě, že upravujete již existující stránku, zobrazuje se místo tlačítka Publikovat tlačítko Aktualizovat.
Trvalý odkaz – zde upravíte textovou část URL.
Vlastnosti stránky – slouží pro nastavení šablony stránky a přiřazení nadřazené stránky.
Zobrazit více nástrojů a možností – poslední tlačítko v pravém horním rohu stránky je Zobraz více nástrojů a možností . Naleznete zde několik funkcí jako režim reflektorů, který vám při vytváření stránky pomůže upřít se na obsah konkrétního bloku.
Dále zde naleznete přepínání mezi vizuálním editorem a editorem kódu i režim celé obrazovky. Kromě toho zde naleznete klávesové zkratky, možnost spravovat znovupoužitelné bloky a jiné možnosti nastavení stránky.
Tipy pro pokročilé
Jmenuji i pár pokročilejších funkcí editoru:
Rychlé vytvoření bloku
Abyste nemuseli vždy vyhledávat konkrétní blok v seznamu, můžete si práci usnadnit. Stačí, když do předem nastaveného bloku napíšete lomítko a první písmena z názvu bloku :
/názov bloku
Jakmile začnete psát text, zobrazí se vám seznam odpovídajících možností.
Úprava zdrojového kódu
V každém kroku tvorby obsahu stránky můžete upravovat jeho zdrojový kód. Učiníte tak kliknutím na ikonku . Zde vyhledejte možnost editor kódu.
Aktivace režimu celé obrazovky
V editoru Gutenberg lze pracovat bez zbytečného rozptylování nabídkou menu stránky. Přejděte do pravého horního rohu stránky a klikněte na . Zde naleznete funkci Režim celé obrazovky. Pro ještě lepší soustředění na konkrétní blok, můžete vybrat také Režim reflektorů.
Používání klávesových zkratek
Gutenberg umožňuje používat kromě běžných zkratek mnoho speciálních klávesových zkratek. Například:
- zobrazit nebo skrýt nastavení postranního panelu Ctrl + Shift + ,
- odvolat vaše poslední změny Ctrl + Z
- znovu provést odvolané změny Ctrl + Shift + Z
Pro otevření seznamu zkratek použijte zkratku Ctrl+Shift+H.
Rozšíření možností pomocí pluginů
Chcete-li rozšířit své designové možnosti, nainstalujte si některý z pluginů pro Gutenberg. Sbírku předem připravených bloků nabízí například plugin Stackable . Vytvoříte jím zajímavé hlavní stránky. Výborným pluginem je také Otter Blocks . Umožňuje vytvářet bloky, jako jsou ceny, mapy Google a jiné.
Několik odpovědí na často kladené dotazy
Co když si nepřeji používat Gutenberg?
Někteří uživatelé se ptají, zda WordPress umožňuje používat předchozí TinyMCE editor. Ano, je to možné. Gutenberg lze v takovém případě deaktivovat. Stačí, když si nainstalujete WordPress plugin Classic Editor .
Změní se starý obsah?
Veškerý obsah, který již na stránce máte, bude beze změny. Gutenberg umístí konkrétní stránku či článek do jednoho bloku. Za tímto účelem má Gutenberg k dispozici tzv. klasický blok. Tento umožňuje pracovat s původním obsahem jako v klasickém TinyMCE editoru.
Původní obsah jednoduše upravíte v klasickém bloku nebo jej můžete konvertovat do bloků . Potřebnou funkci naleznete pod ikonkou Více možností . Dále můžete s obsahem pracovat jako kdybyste jej vytvořili v blokovém editoru.
