Jak vytvořit hlavičku ve WordPressu bez pluginu
Hlavička je jediná část webu, kterou vidí každý návštěvník, a motivy ji obvykle skrývají za obrazovkou nastavení s devíti možnostmi. V Canvas je hlavička záznam, který sestavíte z bloků v editoru, takže tento průvodce je návod na stavbu, ne prohlídka zaškrtávacích políček.
Krok 1: Co je hlavička v šabloně Canvas
Hlavička je záznam, který se v administraci WordPressu vypisuje jako stránka a upravuje se ve stejném editoru bloků. Právě toto jediné rozhodnutí odstraní z vašeho řešení plugin pro hlavičky.
Jiné šablony staví hlavičku jinde. Blocksy i Astra mají tvůrce hlavičky v Customizeru, panelu nastavení vedle webu, odděleném od editoru, ve kterém píšete stránky. Naše srovnání s Blocksy ukazuje oba přístupy vedle sebe.
Vnořování
Záznam hlavičky obsahuje Header Root. Kořen obsahuje Header Container, který určuje, zda je hlavička v rámci, na celou šířku, nebo jedna na jednom breakpointu a druhá jinde. Kontejner obsahuje Header Zones a zóna je buňka v řádku hlavičky. Logo patří do jedné, navigace do další a ikona vyhledávání s košíkem do poslední.
Z bloků pro hlavičku existuje celkem 22 bloků, a na typickém webu použijete čtyři nebo pět z nich. Vše ostatní je tu pro chvíli, kdy potřebujete vyhledávání v obchodě, odkaz na přepnutí jazyka nebo blok s otevírací dobou v rohu.
Nic z toho není samostatný editor. Pokud upravujete stránky ve WordPressu, můžete upravovat i hlavičku a platí pro ni stejné vrácení změn, nastavení bloků i klávesové zkratky.
Krok 2: Vytvořte záznam hlavičky
Otevřete seznam hlaviček v menu Canvas a přidejte nový záznam. Máte dva upřímné výchozí body.
Začněte ze vzoru
Vložíte-li vzor hlavičky, dostanete běžné bloky, které jsou za vás uspořádány a připraveny k přeuspořádání, přejmenování nebo smazání. Hlavičky jsou v produktu největší kategorií vzorů, z celkem 183 vzorů, takže obvykle najdete něco blízkého tvaru, jaký chcete. Je to nejrychlejší cesta a doporučujeme ji zvolit při prvním sestavování.
Začněte z dema
Pokud jste importovali jeden z 88 demo webů, jeho hlavička je už záznamem na vašem webu. Otevřete ji a upravte, nebo ji duplikujte a experimentujte s kopií. Úprava fungující hlavičky vás naučí strukturu rychleji než prázdné plátno.
Dejte záznamu název, který napoví, k čemu slouží, například Hlavní hlavička nebo Hlavička landing page. Za měsíc jich budete mít tři a názvy jsou jediné, čím je rozlišíte.
Krok 3: Rozmístěte zóny
Zóny řídí rozvržení, takže se téměř nikdy nemusíte potýkat s třídami pro zarovnání.
- Posuňte zónu k okraji. Levá zóna pro logo, střední zóna pro menu a pravá zóna pro akce je uspořádání, ke kterému se většina webů nakonec dostane.
- Seskupujte prvky, které patří k sobě. Ikona hledání, košík a tlačítko v jedné zóně zůstanou pohromadě a jejich rozestup bude jako u jedné skupiny.
- Změňte pořadí podle breakpointu. Zóna, která je na počítači třetí, může být na telefonu první, bez druhého záznamu hlavičky.
- Omezte zónu na úroveň zařízení. Nastavte zóně, aby přeskočila zařízení, na která se nevejde, a nemusíte nic dodatečně skrývat pomocí CSS.
- Přidejte vlastní třídy k zóně, pokud na ni chcete cílit z vlastního souboru stylů.
Nejprve sestavte desktopové rozložení a nechte ho být, dokud nebudou na místě všechny části. Rozhodovat o rozvržení je mnohem snazší, když už řádek obsahuje skutečný obsah.
Krok 4: Přidejte části
Nyní vyplňte zóny. Každá z nich je blok a každá má panel nastavení s volbami, které daný blok podporuje.
- Header Logo. Vaše logo se samostatnými soubory pro stav při posouvání (sticky) a pro tmavý stav, takže průhledná hlavička nad tmavou fotografií nevyžaduje žádné obcházení.
- Header Navigation. Hlavní nabídka s rozbalovacími seznamy a panely mega menu. Vykresluje nabídku WordPressu, takže se nabídka sama spravuje tam, kde očekáváte.
- Vyhledávání v hlavičce. Ikona, která otevře pole, nebo pole, které je vždy otevřené, podle toho, co se hodí k návrhu.
- Tlačítko hlavičky. Výzva k akci s obvyklými nastaveními velikosti, stylu a odkazu. Jedno přesvědčí, tři už jen ruší.
- Header Cart. Košík WooCommerce s počtem položek a rozbalovacím přehledem, pro e-shopy.
- Header Icon Link, Header Social and Header Info. Telefonní číslo, řadu sociálních profilů, krátký blok kontaktních údajů, adresu nebo otevírací dobu.
Mega menu, když seznam nestačí
Mega menu je samostatný záznam, navržený z bloků a vykreslený blokem Mega menu, takže položka menu otevře celošířkový panel se sloupci, obrázky a tlačítky. Mega Menu Column udržuje panel v mřížce. Sáhněte po něm, když kategorie opravdu má strukturu, a ne proto, aby malý web působil přeplněně.
Krok 5: Lepivá, průhledná a předvolby rozvržení
Chování vychází z předvoleb, což jsou sady nastavení rozvržení, které použijete jedním kliknutím a pak upravíte. Vyberte chování, které chcete, a později můžete cokoli změnit.
- Průhledná. Bez pozadí, takže cokoli za hlavičkou prosvítá. Zkombinujte ji s tmavou nebo světlou variantou loga, aby název zůstal čitelný.
- Poloprůhledné. Průhledné pozadí, které ponechá obrázek za ním viditelný a text čitelný. Obvykle bezpečnější volba oproti přeplněné fotografii.
- Plovoucí, a plovoucí poloprůhledná nebo plovoucí malá, kdy hlavička sedí uvnitř stránky s prostorem kolem sebe, mimo okraje okna.
- Celá šířka, lepivá. Zabírá celou šířku zobrazení a zůstává při posouvání stránky ukotvená.
- Přilepená při posunu nahoru. Při posunu dolů zmizí z horní části a vrátí se, když návštěvník posune stránku zpět nahoru, čímž dlouhým stránkám vrátí místo.
Nastavení pro celý web, na kterém to celé stojí
Možnosti hlavičky jsou nejrozsáhlejším oddílem v Možnostech šablony, s 94 z 533 polí, a obsahují nastavení, která by neměl spravovat žádný jednotlivý záznam: výchozí hlavičku, chování přilepené hlavičky, výšku, rozestupy a bod zlomu pro mobilní zobrazení. Import dema vyplní všechna pole a vy změníte ta, na kterých vám záleží.
Krok 6: Hlavička pro telefon
Většina návštěvnosti přichází z telefonu, proto to zkontrolujte jako první. Dobrá zpráva je, že jde o stejný záznam.
- Přeřaďte, nestavte znovu. Přesuňte logo doprostřed, přepínač vlevo a tlačítko pro volání vpravo, a to vše pomocí řazení zón.
- Vynechejte, co se nevejde. Omezte kontaktní údaje nebo řádek sociálních sítí jen na větší obrazovky. Vtěsnávat je na telefon nikomu nepomůže.
- Ponechte dotykové plochy velké. Přepínač menu a ikona telefonu jsou dvě věci, na které lidé při chůzi klepají.
- Nastavte zlomový bod promyšleně. Šířka, při které se menu sbalí, je nastavení, takže dlouhé menu se může sbalit dříve než krátké.
- Zvažte boční panel pro mobilní menu. Boční panel je prvek, který vyjíždí z okraje obrazovky a pojme skutečné menu, vyhledávací pole i tlačítko.
Zkontrolujte to v editoru, dříve než zveřejníte. Canvas vykresluje hlavičku v editační ploše stejným kódem, jaký ji vykresluje pro návštěvníka, takže rozvržení pro telefon si můžete prohlédnout už při tvorbě.
Krok 7: Přiřaďte ji pro celý web nebo pro jednotlivé stránky
Záznam nic nedělá, dokud na něj něco neodkazuje. Existují dvě úrovně a fungují stejně u každého prvku rozhraní webu.
Výchozí nastavení pro celý web
Výchozí hlavičku nastavte v Možnostech šablony a každá stránka ji použije. Stejně postupujte u horní lišty, návrhu titulku stránky a patičky. Právě toto nastavení zajistí, že nová stránka bude vypadat správně ihned po publikování.
Přepsání pro jednotlivé stránky
Libovolná stránka může kterékoli z těchto nastavení přepsat ve svém vlastním nastavení. Kampaňová vstupní stránka použije průhlednou hlavičku a bez horní lišty; kontaktní stránka si ponechá standardní. Nic se nemusí duplikovat a nic si nemusíte pamatovat, protože přepsání platí na stránce, které se týká.
Horní lišty
Horní lišta je samostatný záznam se vlastními bloky: telefonní číslo, otevírací doba, přepínač jazyka, oznámení. Blok Header Topbar ji umístí nad řádek hlavičky. Protože je oddělená, upozornění na svátky se změní na celém webu, aniž byste vůbec museli otevírat hlavičku.
Zdroje
Tam, kde tento průvodce popisuje něco mimo samotný Canvas, najdete oficiální stránky, které to dokumentují.
- Obrazovka Menu v části Vzhledwordpress.org · Kde se vytvářejí nabídky WordPress a přiřazují k pozicím, které šablona nabízí
- Pochopení kritéria úspěchu 2.5.8: Velikost cíle (minimum)w3.org · Proč dotykové cíle potřebují minimální velikost 24 × 24 CSS px
Kam dál
Dva průvodci o tom, proč o celém webu rozhoduje hlavička, a samotný tvůrce hlavičky.
Potřebuji pro mobilní zobrazení druhou hlavičku?
Obvykle ne, protože jeden záznam hlavičky Canvas se na telefonu přizpůsobí sám. Zóny se přeskupují podle breakpointu a každou lze omezit na určitou úroveň zařízení, takže jediný záznam může na telefonu vycentrovat logo, skrýt kontaktní údaje a přesunout menu za přepínač. Vytvořte druhý záznam, až opravdu chcete jiný návrh, a ne kvůli opravě rozložení.
Může mít jedna stránka jinou hlavičku?
Ano, každá stránka Canvas může mít vlastní hlavičku. Hlavičky, horní lišty, titulky stránky a patičky mají výchozí nastavení pro celý web i přepsání pro jednotlivou stránku, takže kampaňová landing page může mít průhlednou hlavičku nad fotografií, zatímco všechny ostatní stránky zůstanou u standardní.
Je to oblast pro widgety, nebo menu?
Hlavička Canvas není ani jedno z toho: je to záznam, který upravujete v editoru bloků, stejně jako stránku, a logo, navigace, vyhledávání, košík a tlačítka v ní jsou bloky s vlastními panely nastavení. Vaše nabídky WordPressu zůstávají nabídkami WordPressu; blok Header Navigation je vykresluje.
Co se stane s vaší hlavičkou, když vyprší platnost vaší licence?
Váš web se dál vykresluje přesně jako dnes. Pozastavena je služba: aktualizace, importy dem, CanvasAI Engine a úpravy prémiových bloků se zastaví, dokud licenci neobnovíte. Pokud kontrola licence nedosáhne na naše servery, máte odklad 14 dní.
Vytvořte svůj další web s Canvas
Ať už jste začátečník, freelancer, nebo agentura, dostanete stejné bloky i stejná dema. Začněte jedním webem a vytvářejte tolik, kolik potřebujete, na stejné licenci.