Naučte se, jak vytvořit pevné menu pro hlavní navigaci vašeho webu WordPress! Pevné nabídky pomáhají zlepšit uživatelský dojem tím, že zpřístupňují nabídku vašeho webu návštěvníkům webu. Navíc může pomoci zlepšit celkový vzhled vašeho webu. Pusťme se do toho!
1. Přejděte do Editoru webu
Prvním krokem v tomto procesu je přejít do „Editoru webu“ v oblasti správy WordPress. Editor stránek je k dispozici pro „Block Themes“ ve WordPressu, za předpokladu, že používáte WordPress verze 5.9 nebo novější.
Chcete-li přejít do Editoru webu, přejděte na Vzhled> Editor (červená šipka na obrázku výše) z hlavní navigace v oblasti WP Admin.
Klikněte na oblast hlavního obsahu na pravé straně obrazovky (naznačená světle modrou a označená modrou šipkou ve výše uvedeném obrázku). Tím se dostanete do Editoru bloků v Editoru webu.
Na pravé straně pod záložkou „Stránka“ uvidíte řádek označený „Šablona“ (na obrázku výše označený modře). Klikněte na název/odkaz šablony (červená šipka). Poté klikněte na „Upravit šablonu“ (zelená šipka – někdy je „Upravit šablonu“ malý modrý textový odkaz pod rozevíracím seznamem, který zobrazuje název vaší šablony).
2. Upravte svou šablonu
Nyní budete v Editoru šablon domovské stránky vašeho webu. (Pokud pro svůj web nemáte nastavenou domovskou stránku, můžete se podívat tento tutoriál o nastavení statické domovské stránky pro váš web WordPress).
V horní části šablony je vaše hlavní navigace pro vaši stránku – také nazývaná „Záhlaví“ vaší webové stránky. Když na tento prvek najedete myší, uvidíte fialový rámeček s jeho obrysem (červená šipka na obrázku výše). To znamená, že tento prvek je a "synchronizovaný vzor", což znamená, že provedení změny v jedné instanci vzoru použije změny ve všech instancích na celém webu. Klepnutím na tuto oblast vyberte synchronizovaný vzor záhlaví.
Pokud je toto hlavní prvek záhlaví vašeho webu, měli byste nyní vidět, že synchronizovaný vzor je na panelu nástrojů bloku označen jako „Záhlaví“.
3. Přidejte své záhlaví do skupiny
Na panelu nástrojů bloku pro vybraný vzor záhlaví klikněte na ikonu „Možnosti“ (červená šipka na obrázku výše) a vyberte „Skupina“ (zelená šipka). Tím se synchronizovaný vzor vloží do skupinového bloku.
Všimnete si, že panel nástrojů bloků má nyní ikonu skupinového bloku (modrá šipka na obrázku výše) a obrys kolem hlavní navigační oblasti je nyní modrý místo fialové (červená šipka).
Pamatujte, že to může změnit šířku hlavní navigační nabídky. Chcete-li upravit šířku, najeďte myší na synchronizovaný vzor záhlaví a kliknutím jej vyberte (červená šipka).
Na panelu nástrojů bloku pro synchronizovaný vzor záhlaví klikněte na ikonu „Zarovnat“ (zelená šipka) a změňte ji zpět na požadovanou šířku (modrá šipka – v mém případě jsem zvolil „Šířka“).
Chcete-li se vrátit zpět do bloku Skupina, klikněte na ikonu „Vybrat skupinu“ na panelu nástrojů bloku záhlaví (růžová šipka).
4. Nastavte skupinu na „Sticky“
S vybranou skupinou přejděte na kartu „Blokovat“ na postranním panelu Nastavení na pravé straně obrazovky (červená šipka na obrázku výše).
Klikněte na položku nabídky označenou „Pozice“ (zelená šipka). Nyní zde uvidíte rozevírací seznam označený jako „Výchozí“ (růžová šipka). Klikněte na rozbalovací nabídku a vyberte možnost „Sticky“ (modrá šipka).
Přejděte do horní části editoru a klikněte na tlačítko „Uložit“ (červená šipka), poté znovu klikněte na „Uložit“. Nyní budete mít hlavní navigaci v hlavní nabídce pro váš web WordPress!
5. Upravte styl Sticky Menu
Mnoho prvků nové lepivé nabídky si můžete přizpůsobit/stylovat, ale pro tento tutoriál jednoduše přidám pozadí za skupinový blok, aby se nabídka rozprostírala po celé šířce webové stránky.
Chcete-li to provést, s vybraným blokem Skupina přejdu na kartu „Styly“ na postranním panelu Nastavení (červená šipka na obrázku výše).
V části „Barva“ kliknu na možnost „Pozadí“ (modrá šipka) a poté výběrem bílého políčka nastavíte barvu pozadí na bílou (zelená šipka).
Ještě jednou dvakrát kliknu na „Uložit“ pro uložení změn.
Všimněte si, že vždy můžete upravit šířku, výšku nebo mezeru záhlaví vašeho webu v části „Dimensions“ pomocí posuvníků „Padding“ a „Margin“.
Náhled svého webu můžete zobrazit kliknutím na ikonu zařízení (červená šipka) a poté kliknutím na „Zobrazit web“ (zelená šipka).
Můžete posouvat svůj web a sledovat, jak lepkavá navigační nabídka zůstane na svém místě nahoře (zelená šipka)!
Jakmile dokončíte úpravy své lepivé nabídky, klikněte na tlačítko „Zpět“ v horní části editoru (červená šipka). Tím se vrátíte na svou webovou stránku v Editoru stran.
Pro návrat do oblasti WP Admin jednoduše klikněte na logo v levém horním rohu.
To je pro tento tutoriál vše! Pokud vás to bavilo, můžete Naučte se WordPress s mým hloubkovým kurzem na Udemy. Nebo se můžete podívat na další zdarma WordPress video tutoriály a Články nápovědy WordPress na mé webové stránce.
