WordPress 7.1: Co je nového a které funkce stojí za vyzkoušení

WordPress 7.1 je venku a tentokrát přináší několik změn, které si všimnete přímo při práci s webem. Nové možnosti se týkají vzhledu stránek, responzivního designu, práce s obrázky i samotného editoru. Řadu úprav, kvůli kterým bylo dříve potřeba sáhnout po CSS nebo doplňkovém pluginu, nyní zvládnete přímo ve WordPressu. Podíváme se na nejzajímavější novinky a ukážeme si, k čemu je můžete využít v praxi.

Responzivní vzhled přímo v editoru

Jednou z nejzajímavějších novinek WordPressu 7.1 je možnost upravovat vzhled bloků podle velikosti obrazovky přímo v editoru. WordPress sice už dříve umožňoval zobrazit náhled stránky pro počítač, tablet nebo mobil, pro odlišné styly bylo ale často nutné využít vlastní CSS nebo možnosti konkrétní šablony či pluginu.

Nově můžete pomocí Responsive styles přepnout na tablet nebo mobil a upravit podporované vlastnosti bloku pouze pro danou velikost obrazovky. Nastavit lze například: 

• velikost a další vlastnosti textu,
• odsazení a mezery mezi prvky,
• barvy a pozadí,
• ohraničení a rozměry,
• rozložení podporovaných bloků.

V praxi tak můžete například nastavit velký nadpis pro počítač, na tabletu jej zmenšit a pro mobil zároveň omezit mezery kolem něj. Pokud některou vlastnost pro menší obrazovku neupravíte, WordPress použije její výchozí hodnotu.

Výhodou je, že jednodušší responzivní úpravy už není nutné řešit pomocí vlastního CSS a jejich výsledek lze rovnou kontrolovat v editoru.

Vlastní breakpointy pro mobil a tablet

S responzivními styly souvisí také možnost přizpůsobit breakpointy, tedy hranice šířky obrazovky, při kterých se mění vzhled stránky pro různá zařízení. WordPress 7.1 ve výchozím nastavení používá hodnoty 480 px pro mobilní zobrazení a 782 px pro tablet.

Tyto hodnoty ale nemusí vyhovovat každému webu. Vývojáři šablon je proto mohou upravit prostřednictvím souboru theme.json a určit, při jaké šířce se mají jednotlivé responzivní styly začít používat.

Vlastní breakpointy se hodí například:

• u webů s netypickým rozložením nebo širokým obsahem,
• pokud se navigace či jiné prvky začnou na menší obrazovce překrývat,
• při optimalizaci webu pro konkrétní skupinu zařízení,
• pokud potřebujete přesněji určit, kdy se má desktopové rozložení změnit na jednodušší variantu.

Pro běžného autora obsahu jde spíše o změnu na pozadí. Tvůrcům šablon ale dává větší kontrolu nad tím, jak se web přizpůsobuje různým velikostem obrazovky, a dobře doplňuje nové responzivní možnosti editoru.

Hover efekt tlačítka bez vlastního CSS

Větší možnosti přizpůsobení vzhledu přinášejí pseudo-stavy. Díky nim lze nastavit, jak se má určitý prvek změnit ve chvíli, kdy s ním návštěvník pracuje. Podobné efekty bylo dříve často nutné řešit pomocí vlastního CSS.

Nejjednodušším příkladem je tlačítko. Přímo v editoru můžete nastavit jeho běžný vzhled a následně určit, jak se změní například po najetí kurzorem. Upravit lze třeba barvu textu, pozadí nebo ohraničení.

WordPress 7.1 pracuje s několika stavy:

• Hover – když uživatel na prvek najede kurzorem,
• Focus – když prvek získá zaměření,
• Focus Visible – zvýraznění při ovládání například pomocí klávesnice,
• Active – během aktivace prvku, například při kliknutí.

V praxi tak můžete vytvořit například modré tlačítko, které se po najetí myší změní na černé. Jednoduché interaktivní efekty lze díky tomu nastavit přímo ve vizuálním editoru bez psaní vlastního CSS.

Novinka se hodí nejen pro vzhled webu, ale také pro lepší orientaci návštěvníků. Změna barvy nebo ohraničení totiž uživateli jasně ukáže, se kterým prvkem právě pracuje.

Nový blok Tabs

Novinek se dočkala rovněž nabídka bloků v editoru. Jednou z nich je Tabs, který umožňuje obsah rozdělit do několika přepínatelných záložek. Návštěvník tak nemusí procházet dlouhou stránku, ale jednoduše si zobrazí pouze část obsahu, která ho právě zajímá.

Do jednotlivých záložek lze vkládat další bloky, takže nemusí obsahovat pouze obyčejný text. Využít je můžete například pro:

• parametry a vlastnosti produktu,
• návody a technickou dokumentaci,
• ceníky nebo varianty služby,
• často kladené otázky,
• rozdělení delšího obsahu do tematických částí.

Typickým příkladem může být produktová stránka se záložkami Popis, Parametry a FAQ. Všechny informace zůstávají na jedné stránce, ale návštěvník mezi nimi může pohodlně přepínat.

Výhodou je především to, že pro vytvoření jednoduchých záložek už není nutné instalovat samostatný plugin nebo vytvářet vlastní řešení. Blok je součástí editoru WordPressu a lze jej upravovat podobně jako ostatní bloky.

Tabs navíc myslí i na přístupnost. Záložky lze ovládat nejen myší, ale také pomocí klávesnice. To usnadňuje práci uživatelům, kteří nepoužívají klasické ovládání kurzorem.

Playlist přímo jako blok

Pro práci se zvukovým obsahem přibyl nový blok Playlist. Umožňuje seskupit více audio nahrávek do jednoho přehledného přehrávače, ve kterém mezi nimi mohou návštěvníci jednoduše přepínat.

Blok se může hodit například pro:

• podcasty a jejich jednotlivé epizody,
• hudební skladby a alba,
• záznamy přednášek nebo rozhovorů,
• audioknihy a další série zvukových nahrávek.

Playlist může u jednotlivých položek zobrazovat informace, jako je název nahrávky, interpret, délka nebo obrázek alba. Součástí přehrávače může být také waveform, tedy grafické znázornění zvukové stopy.

Hlavní výhodou je jednodušší práce s větším množstvím audia. Návštěvník má všechny související nahrávky na jednom místě a může mezi nimi pohodlně přepínat, aniž by bylo nutné pro každou vytvářet samostatný přehrávač nebo instalovat další plugin.

Poznámky umožňují přesnější spolupráci

Změny se netýkají jen tvorby samotných stránek, ale také spolupráce více lidí nad obsahem. Funkce Notes nyní umožňuje připojit poznámku ke konkrétnímu označenému textu, nikoliv pouze k celému bloku. V jednom bloku tak může současně probíhat několik samostatných diskusí.

Funkce se hodí zejména tam, kde na webu pracuje více lidí. Využít ji lze například při:

• kontrole a editaci článků,
• připomínkování konkrétních vět nebo údajů,
• požadavku na doplnění zdroje či odkazu,
• spolupráci autora, editora a dalších členů týmu.

Poznámky podporují také @zmínky konkrétních uživatelů a základní formátování textu. Kolega tak může například označit spornou větu v připravovaném článku, zmínit autora a požádat ho o její přepracování.

Výhodou je, že připomínky zůstávají přímo u místa, kterého se týkají. Redakční tým tak nemusí složitě vysvětlovat v e-mailu nebo chatu, kterou část textu je potřeba změnit, a část komunikace může probíhat přímo ve WordPressu.

WordPress přesouvá zpracování obrázků do prohlížeče

Výraznější proměny se odehrávají při nahrávání a zpracování obrázků. Část operací, které dříve zajišťoval server, může nově probíhat přímo v internetovém prohlížeči uživatele pomocí technologie WebAssembly.

V prohlížeči lze provádět například:

• změnu velikosti obrázku,
• kompresi,
• změnu formátu,
• otáčení obrázků,
• vytváření potřebných variant a náhledů.

Praktický přínos se projeví zejména při práci s velkými fotografiemi. Pokud jejich zpracování proběhne už na zařízení uživatele, server nemusí vykonávat tolik práce. To může snížit jeho zatížení a riziko problémů s PHP memory limitem nebo timeoutem.

Novinka pomáhá také s moderními formáty fotografií. WordPress může například zpracovat snímky HEIC a HEIF používané mimo jiné na iPhonech přímo v prohlížeči a před nahráním je převést do formátu vhodnějšího pro použití na webu.

Pro běžného uživatele se postup nahrávání obrázků výrazně nemění. Hlavní rozdíl se odehrává na pozadí. Část práce se přesouvá ze serveru do prohlížeče, což může nahrávání a zpracování náročnějších obrázků zefektivnit.

K rychlosti a stabilitě webu přispívá vedle samotného WordPressu také vhodně zvolený WordPress hosting.

Úprava obrázků dostala vlastní prostředí

Na vylepšení ve zpracování obrázků dále navazuje nové prostředí pro jejich základní editaci. Obrázek tak můžete před publikováním rychle upravit přímo v administraci, aniž byste kvůli jednoduchým změnám museli přecházet do externího programu.

K dispozici jsou základní nástroje pro:

• oříznutí obrázku,
• změnu poměru stran,
• otáčení doleva nebo doprava,
• převrácení obrázku,
• vrácení provedených změn.

Při ořezu můžete zvolit vlastní oblast nebo některý z připravených poměrů stran. To se hodí například tehdy, když potřebujete fotografii rychle přizpůsobit rozměrům používaným na webu.

Nové prostředí samozřejmě nenahrazuje plnohodnotný grafický nebo fotografický editor. U jednodušších úprav ale není nutné obrázek stahovat, otevírat v jiném programu a následně znovu nahrávat. Vše lze vyřešit přímo při práci ve WordPressu.

Vlastní SVG ikony

Nová aktualizace také rozšiřuje práci s SVG ikonami. Vývojáři pluginů a šablon mohou nově registrovat vlastní kolekce ikon a zpřístupnit je přímo v editoru WordPressu.

Díky tomu lze používat například:

• firemní nebo produktové ikony,
• vlastní sadu ikon pro konkrétní šablonu,
• symboly používané v navigaci nebo tlačítkách,
• jednotný vizuální styl napříč celým webem.

Hlavní výhodou je, že vlastní ikony mohou být dostupné přímo v prostředí WordPressu a není nutné pokaždé vkládat SVG kód ručně nebo spoléhat na externí knihovny.

Pro běžného autora obsahu se změna projeví hlavně tím, že šablony a pluginy mohou nabídnout širší a lépe přizpůsobený výběr ikon. Pro vývojáře pak jde o jednodušší způsob, jak vlastní ikonografii integrovat do editoru a udržet ji konzistentní.

Horní administrační lišta zůstává i v editoru

Drobných změn se dočkala rovněž navigace v administraci. Horní administrační lišta nyní zůstává dostupná i při práci v editoru, takže uživatel má důležité odkazy po ruce při úpravě příspěvku nebo stránky.

Z lišty se lze rychleji dostat například:

• zpět do administrace nebo na web,
• k vytvoření nového obsahu,
• k uživatelskému profilu,
• k dalším položkám přidaným šablonou či pluginy.

Současně se sjednocuje způsob navigace mezi jednotlivými částmi WordPressu. Logo WordPressu už v editoru neslouží jako tlačítko pro návrat, tuto funkci přebírá samostatná šipka. Jednotlivé ikony tak mají napříč administrací srozumitelnější a konzistentnější význam.

Jde sice o drobnou změnu, při každodenní správě webu ale může omezit zbytečné přecházení mezi editorem a administrací. Výjimkou je režim Distraction Free, který rozhraní záměrně omezuje, aby při psaní zobrazoval co nejméně rušivých prvků.

Přístupnější WordPress

Úpravy se netýkají jen nových funkcí a pohodlnější práce v editoru. Vývojáři se zaměřili na přístupnost administrace a samotného editoru, aby se v nich lépe orientovali lidé využívající klávesnici, čtečku obrazovky nebo jiné asistivní technologie.

Jednou ze změn jsou vylepšené tooltipy, tedy krátké nápovědy u jednotlivých ovládacích prvků. Důležité jsou zejména u tlačítek tvořených pouze ikonou, u kterých nemusí být na první pohled zřejmé, k čemu slouží.

Vylepšení se týkají také:

• ovládání a navigace pomocí klávesnice,
• spolupráce se čtečkami obrazovky,
• srozumitelnějšího označení ovládacích prvků,
• orientace v editoru a jeho jednotlivých částech,
• přístupnosti některých nových funkcí a bloků.

S přístupností se počítá také u novinek zmíněných výše. Například blok Tabs lze ovládat nejen myší, ale také pomocí klávesnice.

Pro většinu uživatelů nemusí být tyto úpravy na první pohled příliš výrazné. Pomáhají ale zpřístupnit tvorbu a správu webu širšímu okruhu lidí a současně zpříjemňují ovládání samotného editoru.

Více možností bez dalšího pluginu nebo CSS

WordPress 7.1 není aktualizací, která by kompletně změnila podobu redakčního systému. Místo toho rozšiřuje několik oblastí, na kterých WordPress pracuje už delší dobu.

Společným jmenovatelem řady novinek je přesouvání funkcí přímo do základního editoru. Responzivní úpravy, hover efekty, záložky, playlisty nebo základní editace médií jsou věci, kvůli kterým bylo dříve častěji nutné sáhnout po CSS, pluginu nebo externím nástroji.

Změny ocení jak běžní tvůrci obsahu, tak správci webů a vývojáři. A přestože část novinek pracuje spíše na pozadí, WordPress se díky nim opět o něco více přibližuje editoru, ve kterém lze větší část webu vytvořit a spravovat bez zásahu do zdrojového kódu.

Pokud se chystáte vytvořit nový web ve WordPressu, vedle samotného redakčního systému je potřeba vyřešit také doménu a vhodný WordPress hosting. CZECHIA nabízí WordPress hosting připravený přímo pro provoz tohoto redakčního systému, takže se nemusíte zabývat jeho instalací a základním nastavením.