Kaip stiliaus “WordPress” naršymo meniu

Ar norite formuoti „WordPress“ naršymo meniu, kad pakeistumėte jų spalvas ar išvaizdą? Nors jūsų „WordPress“ tema tvarko naršymo meniu išvaizdą, galite lengvai pritaikyti ją naudodami CSS, kad atitiktumėte jūsų reikalavimus. Šiame straipsnyje mes jums parodysime, kaip formuoti „WordPress“ naršymo meniu savo svetainėje.


Stiliaus naršymo meniu „WordPress“

Mes parodysime du skirtingus metodus. Pirmasis metodas yra skirtas pradedantiesiems, nes jis naudoja įskiepį ir nereikalauja jokių žinių apie kodą. Antrasis metodas skirtas tarpiniams „pasidaryk pats“ vartotojams, kurie nori naudoti CSS kodą, o ne papildinį.

1 būdas: „WordPress“ naršymo meniu stilius naudojant papildinį

„WordPress“ tema naudoja CSS naršymo meniu stiliams kurti. Daugeliui pradedančiųjų nėra malonu redaguoti temų failus ar rašyti CSS kodus.

Štai tada naudingas „WordPress“ stiliaus papildinys. Tai taupo jus nuo teminių failų redagavimo ar kodo rašymo.

Pirmiausia turite įdiegti ir suaktyvinti CSS Hero įskiepį. Norėdami gauti daugiau informacijos, skaitykite mūsų nuoseklų vadovą, kaip įdiegti „WordPress“ papildinį.

„CSS Hero“ yra aukščiausios kokybės „WordPress“ įskiepis, leidžiantis susikurti savo „WordPress“ temą nerašant vienos kodo eilutės (nereikia HTML ar CSS). Norėdami sužinoti daugiau, skaitykite mūsų CSS herojaus apžvalgą.

„WPBeginner“ vartotojai gali naudoti šį CSS herojaus kuponą ir gauti 34% nuolaidą pirkiniui.

Aktyvavę būsite nukreipti, kad gautumėte savo CSS herojaus licencijos raktą. Tiesiog vykdykite ekrane pateikiamus nurodymus ir keliais paspaudimais būsite nukreipti atgal į savo svetainę.

Tada turite spustelėti CSS herojaus mygtuką „WordPress“ administratoriaus įrankių juostoje.

Paleiskite CSS herojus

CSS Hero siūlo WYSIWYG (tai, ką matai, ką gauni) redaktorių. Spustelėję mygtuką pateksite į savo svetainę su ekrane matoma plūduriuojančia CSS Hero įrankių juosta.

CSS herojaus įrankių juosta

Norėdami pradėti taisyti, turite spustelėti mėlyną piktogramą viršuje.

Spustelėję mėlyną piktogramą, nuveskite pelę į savo naršymo meniu, o „CSS Hero“ ją paryškins parodydama aplink esančias kraštines. Spustelėjus pažymėtą naršymo meniu, jame bus rodomi elementai, kuriuos galite redaguoti.

Norėdami pritaikyti meniu, pažymėkite ir spustelėkite

Aukščiau esančioje ekrano kopijoje rodomas viršutinis naršymo meniu konteineris. Tarkime, kad norime pakeisti naršymo meniu fono spalvą. Tokiu atveju pasirinksime aukščiausią naršymą, kuris turi įtakos visam mūsų meniu.

„CSS Hero“ dabar parodys jums skirtingas ypatybes, kurias galite redaguoti, pavyzdžiui, tekstą, foną, kraštą, paraštes, užpildymą ir pan..

CSS savybės

Galite spustelėti bet kurią nuosavybę, kurią norite pakeisti. „CSS Hero“ parodys jums paprastą sąsają, kurioje galėsite atlikti pakeitimus.

Pakeisti elemento išvaizdą

Aukščiau esančioje ekrano kopijoje pasirinkome foną, kuris mums parodė gražią sąsają, leidžiančią pasirinkti fono spalvą, nuolydį, vaizdą ir dar daugiau..

Atlikdami pakeitimus galėsite juos pamatyti tiesiogiai temos peržiūroje.

Tiesioginė jūsų CSS pakeitimų peržiūra

Kai būsite patenkinti pakeitimais, spustelėkite išsaugojimo mygtuką CSS herojaus įrankių juostoje, kad išsaugotumėte pakeitimus.

Geriausias dalykas naudojant šį metodą yra tai, kad galite lengvai atšaukti atliktus pakeitimus. „CSS Hero“ saugo išsamią visų jūsų pakeitimų istoriją, o jūs galite grįžti atgal ir atgal.

2 būdas: „WordPress“ naršymo meniu neautomatinis stilius

Šis metodas reikalauja rankiniu būdu pridėti pasirinktinę CSS ir yra skirtas tarpiniams vartotojams.

„WordPress“ naršymo meniu rodomi nesuderintame sąraše (sąrašas su brūkšneliais).

Paprastai, jei naudojate numatytąją „WordPress“ meniu žymą, tada joje bus pateiktas sąrašas su jokiomis CSS klasėmis, nesusijusiomis su juo.

<?php wp_nav_menu (); ?>

Neužsakytas sąrašas turėtų klasės pavadinimą „meniu“, o kiekvienas sąrašo elementas turėtų savo CSS klasę.

Tai gali veikti, jei turite tik vieną meniu vietą. Tačiau daugumoje temų yra kelios vietos, kuriose galite rodyti naršymo meniu.

Naudojant tik numatytąją CSS klasę, gali kilti konfliktų su meniu kitose vietose.

Štai kodėl taip pat turite apibrėžti CSS klasę ir meniu vietą. Gali būti, kad „WordPress“ tema tai jau daro, pridėdami naršymo meniu naudodami tokį kodą:

<?php
wp_nav_menu (masyvas (
‘tema_lokacija’ => ‘pirminis’,
‘meniu_klasė’ => ‘pagrindinis meniu’,
));
?>

Šis kodas „WordPress“ nurodo, kad štai tema rodo pagrindinį meniu. Tai taip pat prideda CSS klasės pirminį meniu prie naršymo meniu.

Dabar galite formuoti savo naršymo meniu naudodami šią CSS struktūrą.

// konteinerių klasė
#header .primary-menu {}

// konteinerių klasės pirmasis nesuderintas sąrašas
#header .primary-menu ul {}

// nesutvarkytas sąrašas per nesutvarkytą sąrašą
#header .primary-menu ul ul {}

// kiekvienas naršymo elementas
#header .primary-menu li {}

// kiekvieno naršymo elemento inkaras
#header .primary-menu li a {}

// netvarkytas sąrašas, jei yra išskleidžiamųjų elementų
#header .primary-menu li ul {}

// kiekvienas išskleidžiamasis naršymo elementas
#header .primary-menu li li {}

// kiekvieno nuleisto naršymo elemento inkaras
#header .primary-menu li li a {}

#Header turėsite pakeisti konteinerio CSS klase, naudojama jūsų naršymo meniu.

Ši struktūra padės visiškai pakeisti naršymo meniu išvaizdą.

Tačiau yra ir kitų „WordPress“ sugeneruotų CSS klasių, automatiškai pridedamų prie kiekvieno meniu ir meniu elementų. Šios klasės leidžia dar labiau pritaikyti naršymo meniu.

// Dabartinio puslapio klasė
.current_page_item {}

// Dabartinės kategorijos klasė
.dabartinė katė {}

// Bet kurio kito esamo meniu elemento klasė
.dabartinis meniu punktas {}

// Kategorijos klasė
.meniu elementas-tipas-taksonomija {}

// Skelbimų tipų klasė
.menu-item-type-post_type {}

// Bet kokių pasirinktinių nuorodų klasė
.menu-item-type-custom {}

// Namų saito klasė
.meniu punktas-namas {}

„WordPress“ taip pat leidžia pridėti savo pasirinktines CSS klases prie atskirų meniu elementų.

Šią funkciją galite naudoti norėdami stiliuoti meniu elementus, pavyzdžiui, pridėti vaizdų piktogramas prie savo meniu arba tiesiog keisdami spalvas, kad paryškintumėte meniu elementą.

Eikite į Išvaizda »Meniu puslapyje „WordPress“ administratoriuje ir spustelėkite mygtuką Ekrano parinktys.

Įgalinti CSS klasių parinktį atskiriems meniu elementams

Pažymėję šį langelį pamatysite, kad einant į redaguoti kiekvieną atskirą meniu elementą pridedamas papildomas laukas.

Pridedami pasirinktinę CSS klasę prie meniu elemento „WordPress“

Dabar galite naudoti šią CSS klasę savo stiliaus lape norėdami pridėti savo pasirinktinę CSS. Tai turės įtakos tik jūsų pridėtai CSS klasei.

„WordPress“ naršymo meniu stiliaus parinkimo pavyzdžiai

Skirtingos „WordPress“ temos gali naudoti skirtingas stiliaus parinktis, CSS klases ir net „JavaScript“, kad sukurtų naršymo meniu. Tai suteikia daug galimybių pakeisti tuos stilius ir pritaikyti naršymo meniu, kad jie atitiktų jūsų pačių reikalavimus.

Tikrinimo įrankis jūsų naršyklėje bus geriausias jūsų draugas, kai reikia išsiaiškinti, kurias CSS klases pakeisti. Jei nenaudojote jo anksčiau, peržiūrėkite mūsų vadovą, kaip naudoti tikrinimo įrankį tinkinant „WordPress“ temas.

Iš esmės jums tereikia nukreipti žymeklį į elementą, kurį norite modifikuoti, dešiniuoju pelės mygtuku spustelėkite ir tada naršyklės meniu pasirinkite Patikrinti įrankį..

Tikrinimo įrankio naudojimas ieškant modifikuotų CSS klasių

Pažvelkime į keletą realių gyvenimo pavyzdžių, susijusių su „WordPress“ naršymo meniu stiliumi.

1. Kaip pakeisti šrifto spalvą „WordPress“ naršymo meniu

Čia yra pasirinktinio CSS pavyzdys, kurį galite pridėti prie savo temos, kad pakeistumėte naršymo meniu šrifto spalvą.

# viršutinis meniu li.menu-punktas a {
spalva: # ff0000;
}

Šiame pavyzdyje # pagrindinis meniu yra ID, priskirtas netvarkingam sąrašui, kuriame rodomas mūsų naršymo meniu. Turėsite naudoti tikrinimo įrankį, kad sužinotumėte ID, kurį naudoja jūsų tema.

Keičiama „WordPress“ naršymo meniu šrifto spalva

2. Kaip pakeisti naršymo meniu juostos fono spalvą

Pirmiausia turėsite sužinoti CSS ID arba klasę, kurią jūsų tema naudoja konteinerio, esančio aplink jį esančiame naršymo meniu.

Surasti naršymo meniu konteinerio CSS klasę

Po to galite naudoti šią pasirinktinę CSS, norėdami pakeisti naršymo meniu juostos fono spalvą.

.navigacijos viršuje {
fono spalva: # 000;
}

Štai kaip tai atrodė mūsų demonstracinėje svetainėje.

Keičiama naršymo meniu juostos fono spalva

3. Kaip pakeisti vieno meniu elemento fono spalvą

Turbūt pastebėjote, kad daugelis svetainių naudoja skirtingas fono spalvas svarbiausioms nuorodoms naršymo meniu. Ši nuoroda gali būti prisijungimo, registracijos, susisiekimo ar pirkimo mygtukas. Suteikdamas jai kitokią spalvą, ji daro nuorodą labiau pastebimą.

Norėdami tai pasiekti, prie meniu elemento, kurį norime paryškinti su kita fono spalva, pridėsime pasirinktinę CSS klasę.

Eikite į Išvaizda »Meniu ir spustelėkite mygtuką Ekrano parinktys, esančius viršutiniame dešiniajame ekrano kampe. Bus atidarytas meniu, kuriame turite išskleisti, kur turite pažymėti laukelį šalia parinkties „CSS klasės“.

Įgalinti CSS klasių parinktį atskiriems meniu elementams

Po to turite slinkti žemyn iki meniu elemento, kurį norite modifikuoti, ir spustelėkite jį išplėsti. Pastebėsite naują variantą, kaip pridėti pasirinktinę CSS klasę.

Pridedant pasirinktinę css klasę prie meniu elemento

Dabar galite naudoti šią CSS klasę tam, kad pasirinktumėte tam tikrą meniu elementą skirtingai.

.Susisiekite su mumis {
fono spalva: # ff0099;
kraštinės spindulys: 5 taškai;
}

Štai kaip tai atrodė mūsų bandymų svetainėje.

Vieno meniu elemento fono spalvos keitimas „WordPress“ naršymo meniu

4. „Hover“ efektų įtraukimas į „WordPress“ naršymo meniu

Ar norite, kad jūsų meniu elementai pakeistų pelės žymeklio spalvas? Dėl šio konkretaus CSS triuko jūsų naršymo meniu atrodo interaktyvesni.

Tiesiog pridėkite šią pasirinktinę CSS prie savo temos.

# viršutinio meniu li.menu punktas a: užveskite pelę {
fono spalva: #fff;
spalva: # 666;
kraštinės spindulys: 5 taškai;
}

Šiame pavyzdyje # viršutinis meniu yra CSS ID, kurį jūsų tema naudoja netvarkyto naršymo meniu sąraše.

Štai kaip tai atrodė mūsų bandymo svetainėje.

Pelės žymeklio efektas „WordPress“ naršymo meniu

5. „WordPress“ sukurkite lipnius plaukiojančius naršymo meniu

Paprastai naršymo meniu rodomi viršuje ir dingsta vartotojui slenkant žemyn. Lipnūs plaukiojantys naršymo meniu lieka viršuje, vartotojui slenkant žemyn.

Prie savo temos galite pridėti šį CSS kodą, kad naršymo meniu taptų lipnus.

# viršutinis meniu {
fonas: # 2194af;
aukštis: 60 taškų;
z-indeksas: 170;
paraštė: 0 auto;
kraštas-dugnas: 1px kietas #dadada;
plotis: 100%;
padėtis: fiksuota;
viršuje: 0;
kairė: 0;
dešinėje: 0;
tekstas lygiuoti: dešinėje;
paminkštinimas dešinėje: 30 taškų
}

Tiesiog pakeiskite # viršutinį meniu savo naršymo meniu CSS ID.

Štai kaip tai atrodė mūsų demonstracinėje versijoje:

Lipnus naršymo meniu

Norėdami gauti išsamesnių instrukcijų ir alternatyvaus metodo, skaitykite mūsų vadove, kaip sukurti lipnų slankųjį naršymo meniu „WordPress“.

6. Sukurkite skaidrius naršymo meniu „WordPress“

Daugelis svetainių naudoja didelius arba viso ekrano foninius vaizdus su raginimo veikti mygtukais. Naudodamiesi skaidriais meniu, jūsų naršymas susimaišo su vaizdu. Dėl to vartotojai labiau linkę sutelkti dėmesį į jūsų raginimą veikti.

Tiesiog pridėkite šį CSS pavyzdį prie savo temos, kad jūsų naršymo meniu būtų skaidrus.

# site-navigation {
fono spalva: skaidri;
}

Kaip tai atrodė mūsų demonstracinėje svetainėje.

Skaidrus „WordPress“ naršymo meniu

Priklausomai nuo jūsų temos, gali tekti pakoreguoti antraštės atvaizdą taip, kad jis apimtų sritį už skaidrių meniu.

Tikimės, kad šis straipsnis padėjo išmokti formuoti „WordPress“ naršymo meniu. Taip pat galbūt norėsite pamatyti mūsų vadovą, kaip pridėti mobiliesiems pritaikytą „WordPress“ meniu.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me