Vytvoření podnabídky nebo víceúrovňové nabídky ve WordPressu je vlastně docela snadné! WordPress má ve své dokumentaci dokonale vysvětlenou příručku pro vytváření víceúrovňových nabídek, zhruba v polovině obecného průvodce vytvářením nabídek.
Proč tedy máme příspěvek o něčem, co už WordPress pokryl? No… pokud ve WordPressu vytváříte podnabídku, možná jste narazili na problém:WordPress ve výchozím nastavení chce ve své nabídce pouze klikací odkazy. Někdy však chcete položku nabídky nejvyšší úrovně, která existuje pouze proto, aby návštěvníkům vašeho webu poskytla přístup k podstránkám pod ní. Je to poměrně snadný úkol, ale jak to rozhodně není jasné!
Ukážeme vám, jak toho dosáhnout, a poté se podíváme na některé pokročilejší úpravy, které zlepší použitelnost nabídky.
Jak přidat nepropojený štítek podnabídky ve WordPress
- Ve správci WordPress přejděte na Vzhled> Nabídky
- V levém postranním panelu této stránky klikněte na „Vlastní odkaz“
- Nastavte adresu URL jednoduše:
# - Nastavte hodnotu „text odkazu“ na název, který se má zobrazovat v nabídce
- Nyní přidejte skutečné stránky (podstránky), které se mají zobrazovat pod tímto nadpisem, a přetáhněte je na místo a vložte je pod položku nabídky, kterou jste právě přidali. Když se jedná o položky podnabídky, zobrazí se odsazené.
A je to! To je jeho základní verze. Zobrazí se nabídka s možnostmi podnabídky a když na ni kliknete, nepřenese vás na jinou stránku.
Jak to udělat, aby to vypadalo a chovalo se méně jako odkaz
A nyní poněkud pokročilejší (ale ne ve skutečnosti) přídavek.
Problémem, který z hlediska použitelnosti zůstává, je to, že když návštěvník webových stránek umístí na odkaz, stále má velmi „cítí“, jako byste na něj měli být schopni kliknout. Má kurzor na odkaz, funguje jako odkaz, jen ukazuje někam, kam nikam nevede. To je pravděpodobně v pořádku, ale pokud vás to přivádí k šílenství (ahoj, to jsem já!), existuje způsob, jak to obejít.
Na svůj web budete muset přidat nějaké CSS. Přejděte do nabídky Vzhled> Přizpůsobení a otevřete sekci Vlastní CSS, vložte ji do ní a poté uložte změny:
a[href="#"] {
pointer-events: none;
cursor: default;
}
Tento CSS říká:na všechny odkazy, které mají jako cílovou adresu URL „#“, již nebude možné kliknout (pointer-events: none; ) a nastaví kurzor tak, aby nebyl rukou (cursor: default; ).
Nyní máte ve své nabídce záhlaví, které nikam nevede, může pod sebou mít dílčí prvky a z hlediska použitelnosti mě nebolí.
Pomáhá vám váš webový hostitel s WordPress?
Ne? Možná je čas na změnu. Podívejte se na náš vysoce výkonný kanadský hosting WordPress!
Přečtěte si více