Canvas pro vývojáře

Bloková šablona pro WordPress pro vývojáře, postavená na theme.json

Canvas je šablona pro WordPress s doprovodným pluginem a je blokovou šablonou až do nejhlubší vrstvy. Šablony jsou blokové šablony, styly se načítají ze souboru theme.json a to, co editor ukládá do databáze, je stejný blokový markup, jaký čte jakákoli jiná blokově založená šablona. Nic zde nezávisí na tvůrci stránek.

Aktualizováno

Architektura

Blokově založená šablona, upravovaná tam, kde ji WordPress uchovává

Šablona obsahuje předlohy, části předloh a varianty stylů; plugin obsahuje knihovnu bloků, tvůrce, formuláře, vrstvy SEO a výkonu a importér dem. Předlohy a globální styly zůstávají v Editoru webu, takže nic o webu není skryto v některém z našich nastavení.

  • 173 blokových předloh a 5 částí předlohy, vše upravitelné v Editoru webu
  • 4 stylové varianty, včetně tmavé a půlnoční, lze přepínat v Editoru webu.
  • Barvy a typografie se přenášejí přes theme.json, takže editor zobrazuje stejnou typografii jako veřejná část webu
  • 183 vzorů bloků vložených jako jednorázová kopie kódu
  • Stránka se otevře s celou šablonou vykreslenou kolem obsahu, který právě upravujete

Uvnitř editoru a Editoru webu

Editor webu WordPress zobrazující předlohy Canvas a varianty stylů
Předlohy, části a globální styly zůstávají v Editoru webu, kde je uchovává WordPress.
Obsah

Do databáze se nakonec ukládá blokový markup

Důvod dát přednost blokově založené šabloně není seznam funkcí. Jde o to, co vám zbude v rukou za pět let.

Žádný proprietární formát

Canvas upravuje standardní bloky WordPressu a nemá vlastní formát, takže příspěvky a stránky si zachovají svůj obsah, i kdyby se šablona změnila. Nemusíte si pamatovat žádné shortkódy ani otevírat zobrazení kódu.

Nastavení, ne úryvky kódu

Vše, co návštěvník vidí, lze nastavit v panelu nastavení bloku. Pokud dema potřebovalo něco, co blok nedokázal vyjádřit, blok získal toto nastavení a stránka nikdy nezískala surový HTML.

Pokročilý panel u každého bloku

V editoru se ke každému bloku přidávají animace, podmínky zobrazení, vlastní třídy, vlastní atributy a vlastní CSS pro jednotlivé bloky, a to včetně základních bloků a bloků od jiných autorů.

Soubory se přesouvají spolu se stránkou

Stránka načítá jen CSS a JavaScript bloků, které obsahuje, takže cenová stránka nikdy nenačte skript slideru. 35 dalších optimalizací jsou přepínače, není třeba instalovat žádný plugin

Přecházíte z jiné šablony? Elementor a Divi tvoří stránky v editorech vlastních, takže rozložení zmizí spolu s builderem: podívejte se na co si web v Elementoru zachová při přechodu a jak si Divi Builder stojí v porovnání. Kadence a GeneratePress také tvoří v editoru bloků, jejich bloky jsou v bezplatných pluginech (Canvas v porovnání s Kadence, Canvas v porovnání s GeneratePress) a Blocksy má tvůrce hlavičky v Customizeru.

Blokové šablony proti page builderům: srovnání

Rámec webu

Tvůrce hlavičky a tvůrce patičky se vykreslují jako části předlohy

Hlavičky, patičky, horní lišty, mega menu, boční panely a titulky stránek jsou záznamy sestavené z bloků a na front end se dostávají přes vlastní části šablony. Část Header vykresluje hlavičku přiřazenou dané stránce, část Footer vykresluje přiřazený záznam patičky. Díky tomu může Editor webu tyto prvky vidět a nastavení bloků zůstává stejné všude jinde.

  • 22 bloků hlavičky a 94 možností hlavičky za tvůrcem hlavičky
  • Přiřaďte hlavičku globálně nebo ji přepište na jedné stránce a totéž udělejte u patiček, horních lišt, mega menu, bočních panelů a titulků stránek
  • Hero sekce a slidery jsou také záznamy, které umisťuje blok slotu uvnitř šablony.
  • Oba bloky slotů se zobrazují v plátně editoru, takže se stránka otevře se stejnou sekcí, jakou uvidí návštěvník

Jak funguje tvůrce hlavičky

Záznam hlavičky sestavovaný z bloků hlavičky v editoru bloků WordPressu
Hlavička je záznam sestavený z bloků a vykreslený prostřednictvím šablonové části Header.
WooCommerce

24 obchodních bloků a 18 obchodních šablon

WooCommerce je volitelný a pokud je nainstalován, zajišťují ho bloky a předlohy, takže není třeba synchronizovat žádná přepsání předloh.

24

Obchodní bloky

Bloky pro stránku produktu, mřížku obchodu, košík a pokladnu, dále barevné vzorníky a přidání do košíku bez obnovení stránky.

18

Předlohy obchodu

Předlohy pro obchod, produkt, košík, pokladnu a účet, upravované v Editoru webu stejně jako každá jiná předloha.

21

Dema obchodů

21 z 88 demo webů se importuje jako kompletní e-shop s produkty, kategoriemi, atributy a pokladnou.

Úvodní stránka dema Clothing Store tak, jak ji vidí nakupující, s posuvníkem na celou obrazovku a košíkem v hlavičce
Domovská stránka dema Nábytek, obchod WooCommerce pro prodej a pronájem nábytku

Dva z 21 demo obchodů běžících na obchodních blocích a předlohách.

Bloky WooCommerce

Rozšiřování

Průvodce nastavením vytvoří dětskou šablonu, pokud ji chcete

Dceřinnou šablonu vytvořte, jen pokud plánujete přímo upravovat soubory předloh Canvas, protože právě ta zajišťuje, že úpravy přežijí aktualizaci. Průvodce nastavením ji nabízí na samostatném kroku před importem dema, zapíše do složky se šablonami a aktivuje ji. Váš web pak bude vypadat stejně. Většina webů ji nikdy nepotřebuje, protože běžné důvody se dnes řeší nastavením.

  • Vlastní CSS platné pro celý web a vlastní JavaScript pro hlavičku a patičku, v sekci Různé v Možnostech šablony
  • Vlastní CSS pro každý blok zvlášť, psané jako dvojice vlastnost a hodnota bez selektoru
  • Vlastní atributy pro jednotlivé bloky, jeden na řádek jako klíč a hodnota, včetně atributů data a aria
  • Vlastní pravidla typografie pro libovolný selektor, který zadáte v sekci Typografie
  • Zaregistrujte vlastní sadu ikon stejným rozhraním, jaké používají vestavěné sady (4 sady)
  • Exportujte celou konfiguraci Možností šablony jako soubor a importujte ji do dalšího webu.

Každá sekce Možností šablony

Panel nastavení bloku Canvas v editoru WordPress s rozbalenými pokročilými možnostmi
Pokročilý panel je dostupný u každého bloku, včetně základních bloků a bloků z jiných pluginů.
Prostředí

Co Canvas potřebuje a co dělá při načítání

Minimální požadavky jsou skutečné, nejde jen o doporučení. Canvas je sám ověřuje u vašeho hostingu, takže o neúspěšném importu se nikdy nedozvíte jako první.

WordPress 7.1 nebo novější PHP 7.4 nebo novější Testováno až do WordPress 7.1 Blokový editor a Editor webu, které dodává WordPress WooCommerce volitelný
  • Canvas Core nikdy nepřichází jako samostatné stažení: po aktivaci licence se nainstaluje přímo z WordPressu, takže není potřeba řešit párování verzí
  • Aktualizace přicházejí na obrazovku aktualizací WordPressu s režimem údržby, dočasnou zálohou a vrácením zpět přímo z WordPressu
  • Automatické aktualizace se týkají pouze opravných verzí, jsou ve výchozím nastavení zapnuté s přepínačem pro vypnutí, a verze, která změní předlohu, kterou jste upravili, to uvede
  • Obrazovka Health Check ověřuje požadavky serveru na váš skutečný hosting a hlásí, co vyžaduje pozornost, a stejné kontroly se zobrazí také ve Stavu webu v WordPressu
  • Každý řetězec je přeložitelný: předlohy pro překlad šablony a pluginu se při každém vydání znovu generují a plugin obsahuje konfigurační soubor WPML
  • Technické SEO, XML mapa webu a 16 typů schémat jsou odvozeny z vašeho obsahu v okamžiku vykreslení

388 dokumentačních článků generovaných z dodaného kódu

Otázky

Odpovědi na technické otázky

Pět věcí, které vývojář kontroluje před převzetím projektu, včetně té jediné, kterou Canvas nedělá.

Je Canvas blokový motiv, nebo motiv pro page builder?

Canvas je šablona pro WordPress vytvořená výhradně z bloků, což WordPress označuje jako block theme. Předlohy jsou blokové předlohy WordPressu, části předloh jsou části předloh, barvy a typografie se řídí souborem theme.json a vše se upravuje v editoru bloků a v Editoru webu, které jsou součástí WordPressu. Není třeba instalovat žádný samostatný builder, učit se druhý editor ani obnovovat předplatné builderu.

Co se stane s HTML značkováním, pokud web později změníte na jinou šablonu?

Zůstává standardním značkováním bloků pro WordPress, protože právě to Canvas ukládá. Blok Canvas, který jiná šablona nerozpozná, přestane zobrazovat svůj design, ale nadpisy, odstavce, obrázky a seznamy jsou základní bloky a čtou se normálně kdekoli. Nic se neukládá jako shortcode ani v proprietárním formátu rozvržení.

Kde se hlavičky a patičky ve skutečnosti zobrazují?

Canvas registruje 5 šablonových částí: Header, Footer, Page Title, Sidebar a Sidebar Alt. Část Header vykresluje záznam hlavičky přiřazený stránce, část Footer vykresluje přiřazený záznam patičky a část Page Title vykresluje to, na co se vyřeší nastavení titulku stránky. Šablonové části slouží jako technické zázemí; vzhled určuje záznam, který sestavíte z 22 bloků hlavičky.

Potřebuji dceřinou šablonu?

Pouze pokud hodláte upravovat soubory šablony Canvas přímo, což dceřiná šablona (child theme) chrání před aktualizacemi. Průvodce nastavením ji při volitelném kroku Child Theme vytvoří za vás a přepne na ni web, nebo můžete složku dceřiné šablony, která je součástí Canvas, zkopírovat do složky themes sami. Většina webů ji nikdy nepotřebuje: Možnosti šablony obsahují nastavení pro celý web, vlastní CSS a vlastní atributy jednotlivých bloků pokrývají úroveň bloků a pole Custom CSS a JavaScript pro celý web jsou v sekci Misc v Možnostech šablony.

Je Canvas šablonou pro jazyky psané zprava doleva?

Ano, každý soubor stylů Canvas má zrcadlovou verzi pro zprava doleva a WordPress ji načte sám, když web běží v arabštině, hebrejštině, perštině nebo jiném jazyce psaném zprava doleva. Před vydáním je v režimu zprava doleva zkontrolováno 88 dem z 88 dem dem, takže menu, mřížky a formuláře jsou na správné straně. Překlad je samostatná záležitost a je také kompletní: obě části produktu obsahují překladové šablony a konfigurační soubor WPML je součástí pluginu.

Šablona postavená na blocích, kterou můžete předat komukoli

Canvas vychází z editoru, který WordPress dodává, ukládá standardní značky bloků a drží předlohy v Editoru webu. Vytváříte pro klienty? Přečtěte si stránky pro agentury a freelancery.