Ako navrhnúť navigačné ponuky WordPress

Chcete upraviť svoje navigačné ponuky WordPress tak, aby zmenili ich farby alebo vzhľad? Aj keď téma WordPress spracováva vzhľad vašich navigačných ponúk, môžete ich ľahko prispôsobiť pomocou CSS tak, aby vyhovovalo vašim požiadavkám. V tomto článku vám ukážeme, ako navrhnúť navigačné ponuky WordPress na svojich stránkach.


Štýl navigačných ponúk v programe WordPress

Ukážeme dve rôzne metódy. Prvá metóda je určená pre začiatočníkov, pretože používa doplnok a nevyžaduje žiadne znalosti kódu. Druhá metóda je určená pre stredne pokročilých domácich majstrov, ktorí uprednostňujú použitie kódu CSS namiesto doplnku.

Metóda 1: Styling navigačných ponúk WordPress pomocou doplnku

Vaša téma WordPress používa štýl CSS na úpravu navigačných ponúk. Mnoho začiatočníkov nie je spokojných s úpravou tematických súborov ani s vlastným písaním kódu CSS.

V takom prípade je užitočný doplnok na úpravu štýlu WordPress. To vám ušetrí od editácie súborov tém alebo písania kódu.

Najprv musíte nainštalovať a aktivovať doplnok CSS Hero. Ďalšie informácie nájdete v našej podrobnej príručke o tom, ako nainštalovať doplnok WordPress.

CSS Hero je prémiový doplnok WordPress, ktorý vám umožňuje navrhnúť si vlastnú tému WordPress bez toho, aby ste museli písať jediný riadok kódu (nevyžaduje sa HTML ani CSS). Viac informácií nájdete v našej recenzii CSS Hero Hero.

Používatelia WPBeginner môžu pomocou tohto kupónu CSS Hero Coupon získať zľavu 34% na nákup.

Po aktivácii budete presmerovaný na získanie svojho licenčného kľúča CSS Hero. Jednoducho postupujte podľa pokynov na obrazovke a pomocou niekoľkých kliknutí vás presmerujeme späť na vaše stránky.

Ďalej musíte kliknúť na tlačidlo CSS Hero na paneli nástrojov WordPress.

Spustite CSS Hero

CSS Hero ponúka editor WYSIWYG (to, čo vidíte, je to, čo získate). Kliknutím na tlačidlo sa dostanete na svoju webovú stránku s pohyblivou lištou nástrojov CSS Hero na obrazovke.

Panel nástrojov CSS Hero

Ak chcete začať s úpravami, musíte kliknúť na modrú ikonu v hornej časti.

Po kliknutí na modrú ikonu prejdite myšou do navigačnej ponuky a program CSS Hero ju zvýrazní zobrazením ohraničení okolo nej. Po kliknutí na zvýraznenú navigačnú ponuku sa zobrazia položky, ktoré môžete upraviť.

Ukážte a kliknutím upravte ponuku

Na obrázku vyššie nám ukazuje najvyšší kontajner navigačnej ponuky. Predpokladajme, že chceme zmeniť farbu pozadia našej navigačnej ponuky. V takom prípade vyberieme najvyššiu navigáciu, ktorá ovplyvňuje celú našu ponuku.

CSS Hero vám teraz ukáže rôzne vlastnosti, ktoré môžete upravovať, napríklad text, pozadie, orámovanie, okraje, výplň atď.

Vlastnosti CSS

Môžete kliknúť na akékoľvek vlastníctvo, ktoré chcete zmeniť. CSS Hero vám ukáže jednoduché rozhranie, kde môžete vykonať zmeny.

Zmena vzhľadu prvku

Na obrázku vyššie sme vybrali pozadie a ukázalo sa nám príjemné rozhranie na výber farby pozadia, gradientu, obrázka a ďalších.

Po vykonaní zmien ich budete môcť vidieť naživo v ukážke témy.

Živý náhľad zmien v CSS

Keď ste so zmenami spokojní, zmeny uložte kliknutím na tlačidlo Uložiť na paneli nástrojov CSS Hero.

Najlepšie je použitie tejto metódy, že môžete ľahko vrátiť späť všetky vykonané zmeny. CSS Hero uchováva úplnú históriu všetkých vašich zmien a medzi týmito zmenami sa môžete pohybovať tam a späť.

Metóda 2: Ručné nastavenie navigačných ponúk WordPress

Táto metóda vyžaduje manuálne pridanie vlastného CSS a je určená pre stredne pokročilých používateľov.

Navigačné ponuky WordPress sa zobrazujú v neusporiadanom zozname (zoznam s odrážkami).

Zvyčajne, ak používate predvolenú značku ponuky WordPress, zobrazí sa zoznam bez priradených tried CSS.

<?php wp_nav_menu (); ?>

Váš neusporiadaný zoznam bude mať názov triedy „menu“, pričom každá položka zoznamu bude mať svoju vlastnú triedu CSS.

Môže to fungovať, ak máte iba jedno umiestnenie v ponuke. Väčšina motívov však má viacero umiestnení, na ktorých je možné zobraziť navigačné ponuky.

Použitie iba predvolenej triedy CSS môže spôsobiť konflikt s ponukami na iných miestach.

Preto musíte definovať aj umiestnenie triedy a ponuky CSS. Je pravdepodobné, že vaša téma WordPress to už robí pridaním navigačných ponúk pomocou kódu, ako je tento:

<?php
wp_nav_menu (pole (
‘theme_location’ => ‘primárny’,
‘menu_class’ => , Primárne ponuky ‘,
));
?>

Tento kód hovorí WordPress, že práve tu sa zobrazuje hlavná ponuka. Do navigačnej ponuky tiež pridá primárnu ponuku triedy CSS.

Teraz môžete upravovať svoje navigačné menu pomocou tejto štruktúry CSS.

// trieda kontajnera
#header .primary-menu {}

// zoznam kontajnerov prvý neusporiadaný
#header .primary-menu ul {}

// neusporiadaný zoznam v rámci neusporiadaného zoznamu
#header .primary-menu ul ul {}

// každá navigačná položka
#header .primary-menu li {}

// ukotvenie každej navigačnej položky
#header .primary-menu li a {}

// neusporiadaný zoznam, ak sú rozbaľovacie položky
#header .primary-menu li ul {}

// každá rozbaľovacia položka navigácie
#header .primary-menu li li {}

// každá zakotvená kotva navigačnej položky
#header .primary-menu li li a {}

Budete musieť nahradiť #header triedou CSS kontajnera používanou v navigačnej ponuke.

Táto štruktúra vám pomôže úplne zmeniť vzhľad navigačnej ponuky.

Do každej ponuky a položky ponuky sa však automaticky pridávajú ďalšie triedy CSS generované WordPress. Tieto triedy vám umožňujú ešte viac prispôsobiť navigačné menu.

// Trieda pre aktuálnu stránku
.current_page_item {}

// Trieda pre aktuálnu kategóriu
.prúdu mačka {}

// Trieda pre akúkoľvek inú aktuálnu položku ponuky
.aktuálnej ponuky položka {}

// Trieda pre kategóriu
.Menu-item-typu taxonómie {}

// Trieda pre typy príspevkov
.Menu-item-typu post_type {}

// Trieda pre akékoľvek vlastné odkazy
.Menu-item-type-custom {}

// Trieda pre domáci odkaz
.Menu-item-home {}

WordPress vám tiež umožňuje pridať svoje vlastné triedy CSS do jednotlivých položiek ponuky.

Túto funkciu môžete použiť na úpravu položiek ponuky, ako je napríklad pridanie ikon obrázkov do ponúk alebo zmena farby a zvýraznenie položky ponuky.

Zamierte na Vzhľad »Ponuky stránku v aplikácii WordPress a kliknite na tlačidlo Možnosti obrazovky.

Povoliť možnosť tried CSS pre jednotlivé položky ponuky

Po zaškrtnutí tohto políčka uvidíte, že pri zmene jednotlivých položiek ponuky sa pridá ďalšie pole.

Pridanie vlastnej triedy CSS do položky ponuky v programe WordPress

Teraz môžete použiť túto triedu CSS vo vašej šablóne so štýlmi na pridanie svojej vlastnej CSS. Ovplyvní to iba položku ponuky s pridanou triedou CSS.

Príklady navigačných ponúk stylingu vo WordPress

Rôzne témy WordPress môžu používať rôzne možnosti stylingu, triedy CSS a dokonca aj JavaScript na vytvorenie navigačných ponúk. Takto získate veľa možností na zmenu týchto štýlov a prispôsobenie navigačných ponúk tak, aby vyhovovali vašim vlastným požiadavkám.

Nástroj na kontrolu vo vašom webovom prehliadači bude najlepším priateľom pri zisťovaní, ktoré triedy CSS sa majú zmeniť. Ak ste to ešte predtým nepoužili, prečítajte si nášho sprievodcu o tom, ako pomocou nástroja Inspect prispôsobiť témy WordPress..

V podstate stačí nasmerovať kurzor na prvok, ktorý chcete upraviť, kliknite pravým tlačidlom myši a potom v ponuke prehliadača vyberte príkaz Skontrolovať nástroj..

Pomocou nástroja Inspect vyhľadajte úpravy tried CSS

Ako už bolo povedané, poďme sa pozrieť na niektoré príklady štýlov navigačných ponúk v systéme WordPress.

1. Ako zmeniť farbu písma v navigačných ponukách WordPress

Tu je ukážka vlastných CSS, ktoré môžete pridať do svojej témy a zmeniť farbu písma navigačných ponúk.

# top menu li.menu-item a {
color: # FF0000;
}

V tomto príklade je horná ponuka # ID priradené k neusporiadanému zoznamu, ktorý zobrazuje našu navigačnú ponuku. Na zistenie ID použitého vo vašej téme budete musieť použiť nástroj kontroly.

Zmena farby písma navigačných ponúk WordPress

2. Ako zmeniť farbu pozadia navigačnej ponuky

Najprv musíte zistiť CSS ID alebo triedu, ktorú používa váš motív pre navigačnú ponuku obklopujúcu kontajner.

Hľadá sa trieda CSS pre kontajner navigačnej ponuky

Potom môžete pomocou nasledujúceho vlastného CSS zmeniť farbu pozadia navigačnej ponuky.

.navigation-top {
background-color: # 000;
}

Takto to vyzeralo na našej demonštračnej webovej stránke.

Zmena farby pozadia navigačnej ponuky

3. Ako zmeniť farbu pozadia jednej položky ponuky

Možno ste si všimli, že veľa webových stránok používa pre najdôležitejšie odkazy v navigačnej ponuke inú farbu pozadia. Týmto odkazom môže byť tlačidlo prihlásenia, registrácie, kontaktu alebo nákupu. Vďaka odlišnej farbe je spojenie zreteľnejšie.

Aby sme to dosiahli, pridáme k položke ponuky vlastnú triedu CSS, ktorú chceme zvýrazniť inou farbou pozadia.

Zamierte na Vzhľad »Ponuky a kliknite na tlačidlo Možnosti obrazovky v pravom hornom rohu obrazovky. Zobrazí sa rozbaľovacia ponuka, v ktorej musíte začiarknuť políčko vedľa možnosti „Triedy CSS“.

Povoliť možnosť tried CSS pre jednotlivé položky ponuky

Potom musíte prejsť nadol na položku ponuky, ktorú chcete upraviť, a kliknutím ju rozbaľte. Všimnete si novú možnosť, ako pridať svoju vlastnú triedu CSS.

Pridanie vlastnej triedy css do položky ponuky

Teraz môžete použiť túto triedu CSS na rôzne štýly danej položky ponuky.

.kontaktuj nás {
farba pozadia: # ff0099;
border-radius: 5px;
}

Takto to vyzeralo na našom testovacom webe.

Zmena farby pozadia jednej položky ponuky v navigačných ponukách WordPress

4. Pridanie efektov umiestnenia kurzora do navigačných ponúk WordPress

Chcete, aby položky menu pri prechode myšou zmenili farby? Tento konkrétny trik CSS robí vaše navigačné ponuky interaktívnejšími.

Do svojho motívu jednoducho pridajte nasledujúce vlastné CSS.

# top menu li.menu-item a: hover {
background-color: #fff;
color: # 666;
border-radius: 5px;
}

V tomto príklade je # top-menu CSS ID, ktoré používa vaša téma pre neusporiadaný zoznam navigačných ponúk.

Takto to vyzeralo na našej testovacej stránke.

Efekt prechodu myšou v navigačných ponukách WordPress

5. Vytvorte lepivé plávajúce navigačné ponuky vo WordPress

Navigačné ponuky sa zvyčajne zobrazujú navrchu a zmiznú, keď používateľ posúva stránku nadol. Lepkavé plávajúce navigačné ponuky zostanú na vrchole, keď používateľ posúva stránku nadol.

Do svojej témy môžete pridať nasledujúci kód CSS, aby boli vaše navigačné ponuky lepivé.

# top-menu {
background: # 2194af;
výška: 60 pixelov;
z-index: 170;
okraj: 0 auto;
hraničné dno: 1px solídne #dadada;
šírka: 100%;
Pozícia: pevné;
top: 0;
vľavo: 0;
vpravo: 0;
zarovnanie textu: vpravo;
padding-right: 30PX
}

Jednoducho nahraďte # hornú ponuku CSS ID vašej navigačnej ponuky.

Takto to vyzeralo v našej ukážke:

Lepkavé navigačné menu

Podrobnejšie pokyny a alternatívna metóda nájdete v našom sprievodcovi o tom, ako vytvoriť lepivú plávajúcu navigačnú ponuku vo WordPress.

6. Vytvorte priehľadné navigačné ponuky vo WordPress

Mnoho webových stránok používa na tlačidlách s výzvou na akciu obrázky na pozadí alebo na celú obrazovku. Použitím priehľadných ponúk sa vaša navigácia spojí s obrázkom. Vďaka tomu sa používatelia častejšie zameriavajú na vašu výzvu na akciu.

Jednoducho pridajte nasledujúci vzorový CSS do svojej témy, aby boli vaše navigačné ponuky transparentné.

# site-navigation {
background-color: transparent;
}

Takto to vyzeralo na našej demonštračnej stránke.

Transparentné navigačné ponuky vo WordPress

V závislosti od vašej témy bude možno potrebné upraviť polohu obrázka hlavičky tak, aby pokrýval oblasť za priehľadnými ponukami.

Dúfame, že vám tento článok pomohol naučiť sa navrhovať navigačné ponuky programu WordPress. Môžete tiež navštíviť nášho sprievodcu o tom, ako pridať ponuku WordPress, ktorá je pripravená pre mobilné zariadenia.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map