Gutenberg: Nový WordPress WYSIWYG editor

WordPress Gutenberg WYSIWYG editor

Tvorba webových stránek už dávno není zasvěcena jen profíkům v oboru webdesignu a programování. Možnost vytvořit si své vlastní stránky dostali do rukou i amatéři, kteří se nebojí prostředí internetových aplikací. Díky novému WYSIWYG editoru Gutenberg je tvorba WordPress stránek hračkou, protože je mimořádně intuitivní, navíc takto lze vytvořit i sofistikované stránky s mnoha různými prvky, které jste dříve museli svěřit pouze zkušeným odborníkům.

Snadnější tvorba díky WYSIWYG

Internetové stránky se zcela původně vytvářely prostým psaním kódu v jazyce HTML do nějakého textového editoru, většinou do poznámkového bloku. To bylo pochopitelně náročné na odborné znalosti. Vše se posléze zjednodušilo díky tzv. WISYWIG editorům, ve kterých bylo možné vytvářet stránky tak, jak jsou v konečné podobě zobrazitelné. Editory jsou běžně dostupné na webu, takže není nutné nic instalovat. Stačí se pouze zaregistrovat v určité službě. Je ovšem rozdíl mezi editory placenými a těmi zdarma, které nabízejí množství funkcí. Podobným způsobem se tvoří webové stránky i na platformě WordPress, jedné z nejrozšířenějších, která je navíc zdarma.

Gutenberg nyní coby plugin

I WordPress obsahuje editor pro tvorbu webové stránky. Ten umožňuje vytvářet stránku v prostředí tak, jak bude na webu vypadat, jde však o editor poměrně dost prostý. Naštěstí je možné se o další úpravy stránky pokusit v režimu HTML kódu, který je ale třeba ovládat. Nyní se ale chystá ve WordPressu velká změna. Od verze 5 by se totiž mělo přejít na zbrusu nový editor, kterým je Gutenberg, pojmenovaný podle vynálezce knihtisku. Editor je možné vyzkoušet již nyní coby plugin, který je dostupný ve vyšších verzích WordPressu. Jde o plugin, který zatím nemá příliš vysoké hodnocení (dva a půl hvězdičky), je ale třeba mít na paměti, že jde o plugin ve zkušebním beta provozu, který by se tedy neměl nasazovat u komerčních stránek, které mají být plně vytížené. Od další verze WordPressu by se ale měl stát editor součástí WordPressu, zabudovaný v něm a plně podporován, proto je možná lepší počkat na tento okamžik. Mezi tím můžete zkusit testovat i jiné vizuální editory zdarma, například nyní reklamou hojně tlačený Wix.com, který pracuje na podobném základě jako Gutenberg.

Běžný WordPress WYSIWYG editor
Běžný WordPress WYSIWYG editor, jak jej známe.
WordPress Gutenberg Plugin
WordPress plugin Gutenberg

Gutenberg součástí WordPress pětky

Verze WordPress 5.0 nemá přesný datum uvedení, vývojáři ale slibují, že to bude ještě letos, tedy v roce 2018. Nový editor Gutenberg bychom měli tedy začít využívat již brzo. Na co se tedy můžeme těšit? V zásadě jde o to, že je práce s editorem mnohem snazší a intuitivnější, vytvořit pěknou složitější stránku by měl umět skoro každý, pochopitelně znalost HTML a CSS je i v tomto případě velkou výhodou. Po instalaci pluginu Gutenberg se u vašich příspěvků zobrazí možnost editace v tomto editoru. Tato možnost se zřejmě poté, co bude Gutenberg pevnou součástí WordPressu, skryje. Pokud vám ale z nějakého důvodu nebude vyhovovat, můžete si instalovat editor stávající.

WordPress Gutenberg WYSIWYG
Gutenberg: nový WYSIWYG editor

Stránky jako skládačka

V Gutenbergu se stránky tvoří jako skládačka – přidáváte jednotlivé prvky v blocích. Na výběr máte například titulek, odstavec textu, citace, obrázek, seznam, galerie apod. S bloky můžete libovolně manipulovat, pokud nad ně najedete kurzorem, zobrazí se možnosti na jejich přesunutí, či vymazání a na další nastavení zobrazení bloků. Blok přidáte na stránku velmi snadno pomocí kliknutí na tlačítko se symbolem plus, dále si vyberete druh bloku. Opravdu snadno přidáte na stránku tabulku, a to větší jen o dvou řádcích a dvou sloupcích, či vytvoříte odstavce a sloupce textu. Pokud vytváříte stránky třeba na notebooku, který má menší obrazovku, jistě uvítáte větší editační pole, ve kterém se vám bude lépe manévrovat. Stránky se tak poměrně dobře spravují i prostřednictvím mobilního telefonu, pokud potřebujete udělat například nějakou rychlou změnu a nemáte k dispozici počítač. Nový editor umožňuje vytvářet hne několik sloupců responzivního textu, ve stávající verzi Gutenbergu jsou to čtyři sloupce.

WordPress Gutenberg WYSIWYG
Gutenberg: obsah je možné vytvářet z velké nabídky předpřipravených funkčních bloků (nadpisy, video, galerie atd.).

Vlastní HTML kód okamžitě v náhledu

Do bloku můžete přidat i vlastní HTML kód, během chviličky, po kliknutí na Preview si přímo v bloku zobrazíte náhled tohoto kódu, tedy to, jak bude kód na stránce zobrazen. Odpadá tak zdlouhavé přepínání mezi zobrazením celé stránky copy náhledu. Obrázky lze na stránku přesouvat pomocí drag & drop, či je vybírat z knihovny, i to práci ulehčuje a zrychluje. Velmi pěkně se pracuje také s textem samotným. Díky Gutenbergu si vytvoříte na začátku textu efektní iniciálu, dále pomocí posuvníku zformátujete velikost fontu, barvu písma, pozadí, přičemž na výběr je mnoho odstínů barev, včetně duhových. Gutenberg vám nabídne také možnost odkazů na záložky na stránce (anchors).

TIP REDAKCE
Chcete rychlé WordPress stránky? Zkuste plugin Google AMP.

Vloží tlačítka a informuje

Editor jistě potěší tím, jak je přehledný. V postranní liště máte k dispozici tabulku obsahu (Table of contents), díky ní se po jednom kliknutí ocitnete v místě, které chcete dále upravovat. Dále se po kliknutí na ikonu se symbolem písmene I vždy dozvíte, kolik slov jste napsali, kolik bloků vytvořili, nebo kolik jste uvedli nadpisů. Velmi efektně na stránce působí také citace. V Gutenbergu pro ni najdete speciální nástroj, a to s nabídkou formátování a umístění, a to doprava, doleva, doprostřed, nebo roztažená přes celou šířku stránky. Gutenberg nezapomněl na vkládání tlačítek, pro ty už nebudete muset použít externí kód. Výčet uvedených možností není úplný, je také otázkou, jak konkrétně bude vestavěný Gutenberg ve WordPressu vypadat. Již nyní je ale jasné, že se máme nač těšit.

WordPress Gutenberg WYSIWYG
Gutenberg: editor umožňuje i formátování rozložení bloků na stránce.
(1 hlasů, průměr: 5,00 z 5)
Loading...

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

This site uses Akismet to reduce spam. Learn how your comment data is processed.