Paano Mag-istilo ng Mga menu sa Pag-navigate ng WordPress

Nais mo bang i-istilo ang iyong mga menu sa pag-navigate sa WordPress upang baguhin ang kanilang mga kulay o hitsura? Habang pinangangasiwaan ng iyong WordPress tema ang hitsura ng iyong mga menu ng pag-navigate, madali mo itong ipasadya gamit ang CSS upang matugunan ang iyong mga kinakailangan. Sa artikulong ito, ipapakita namin sa iyo kung paano i-istilo ang mga menu ng pag-navigate sa WordPress sa iyong site.


Mga naka-istilong menu ng nabigasyon sa WordPress

Magpapakita kami ng dalawang magkakaibang pamamaraan. Ang unang paraan ay para sa mga nagsisimula dahil gumagamit ito ng isang plugin at hindi nangangailangan ng anumang kaalaman sa code. Ang pangalawang pamamaraan ay para sa mga intermediate na gumagamit ng DIY na mas gusto na gumamit ng CSS code sa halip na isang plugin.

Pamamaraan 1: Pag-istilo ng Mga menu sa Navigation ng WordPress Paggamit ng isang Plugin

Ang iyong WordPress tema ay gumagamit ng CSS sa mga menu ng pag-navigate ng estilo. Maraming mga nagsisimula ay hindi komportable sa pag-edit ng mga tema ng tema o pagsulat ng CSS code.

Iyon ay kapag madaling gamitin ang isang WordPress na estilo ng plugin. Nai-save ka nito mula sa pag-edit ng mga file ng tema o pagsulat ng anumang code.

Una na kailangan mong gawin ay i-install at i-aktibo ang plugin ng CSS Hero. Para sa higit pang mga detalye, tingnan ang aming hakbang-hakbang na gabay sa kung paano mag-install ng isang plugin ng WordPress.

Ang CSS Hero ay isang premium na plugin ng WordPress na nagbibigay-daan sa iyo upang mag-disenyo ng iyong sariling tema ng WordPress nang hindi sumulat ng isang linya ng code (Walang kinakailangang HTML o CSS). Tingnan ang aming pagsusuri sa CSS Hero upang matuto nang higit pa.

Ang mga gumagamit ng WPBeginner ay maaaring gumamit ng CSS Hero Kupon upang makakuha ng 34% na diskwento sa kanilang pagbili.

Sa pag-activate, mai-redirect ka upang makuha ang iyong key ng CSS Hero Lisensya. Sundin lamang ang mga tagubilin sa screen, at mai-redirect ka pabalik sa iyong site sa ilang mga pag-click.

Susunod, kailangan mong mag-click sa pindutan ng CSS Hero sa iyong toolbar ng admin ng WordPress.

Ilunsad ang CSS Hero

Nag-aalok ang CSS Hero ng isang WYSIWYG (Ang nakikita mo ay kung ano ang nakukuha mo) editor. Ang pag-click sa pindutan ay magdadala sa iyo sa iyong website gamit ang isang lumulutang na tool ng CSS Hero na nakikita sa screen.

CSS Hero Toolbar

Kailangan mong mag-click sa asul na icon sa tuktok upang simulan ang pag-edit.

Matapos mong i-click ang asul na icon, dalhin ang iyong mouse sa iyong menu ng nabigasyon, at i-highlight ito ng CSS Hero sa pamamagitan ng pagpapakita ng mga hangganan sa paligid nito. Kapag nag-click ka sa naka-highlight na menu ng nabigasyon, ipapakita sa iyo ang mga item na maaari mong i-edit.

Ituro at i-click upang i-customize ang menu

Sa screenshot sa itaas, ipinapakita nito sa amin ang top container menu ng nabigasyon. Ipagpalagay nating nais na baguhin ang kulay ng background ng aming menu ng nabigasyon. Sa kasong iyon, pipiliin namin ang tuktok na pag-navigate na nakakaapekto sa aming buong menu.

Ipapakita sa iyo ngayon ng CSS Hero ang iba’t ibang mga katangian na maaari mong mai-edit tulad ng teksto, background, hangganan, margin, padding, atbp.

Mga katangian ng CSS

Maaari kang mag-click sa anumang pag-aari na nais mong baguhin. Ipapakita sa iyo ng CSS Hero ang isang simpleng interface kung saan maaari mong gawin ang iyong mga pagbabago.

Baguhin ang hitsura ng isang elemento

Sa screenshot sa itaas, napili namin ang background, at ipinakita sa amin ang isang magandang interface upang pumili ng kulay ng background, gradient, image, at higit pa.

Habang gumagawa ka ng mga pagbabago, makikita mo silang mabubuhay sa preview ng tema.

Live na preview ng iyong mga pagbabago sa CSS

Kapag nasiyahan ka sa mga pagbabago, mag-click sa pindutan ng pag-save sa CSS Hero toolbar upang mai-save ang iyong mga pagbabago.

Ang pinakamagandang bagay tungkol sa paggamit ng pamamaraang ito ay madali mong mai-undo ang anumang mga pagbabago na ginawa mo. Ang CSS Hero ay nagpapanatili ng isang kumpletong kasaysayan ng lahat ng iyong mga pagbabago, at maaari kang bumalik sa pagitan ng mga pagbabagong iyon.

Pamamaraan 2: Manu-manong Estilo ng Pag-navigate ng WordPress na Estilo

Ang pamamaraang ito ay hinihiling sa iyo na manu-manong magdagdag ng pasadyang CSS at nilalayon para sa mga tagapamagitan.

Ang mga menu sa pag-navigate ng WordPress ay ipinapakita sa isang hindi nakakaugnay na listahan (listahan ng bullet).

Karaniwan kung gumagamit ka ng default na WordPress menu tag, pagkatapos ay magpapakita ito ng isang listahan na walang mga klase sa CSS na nauugnay dito.

<?php wp_nav_menu (); ?>

Ang iyong hindi nakakaugnay na listahan ay magkakaroon ng ‘menu’ ng pangalan ng klase sa bawat item ng listahan na mayroong sariling klase ng CSS.

Maaaring gumana ito kung mayroon ka lamang isang lokasyon ng menu. Gayunpaman, ang karamihan sa mga tema ay may maraming mga lokasyon kung saan maaari mong ipakita ang mga menu ng nabigasyon.

Ang paggamit lamang ng default na klase ng CSS ay maaaring magdulot ng salungat sa mga menu sa iba pang mga lokasyon.

Ito ang dahilan kung bakit kailangan mong tukuyin ang lokasyon ng CSS at lokasyon ng menu. Pagkakataon na ang iyong tema ng WordPress ay nagagawa na sa pamamagitan ng pagdaragdag ng mga menu ng pag-navigate gamit ang isang code tulad nito:

<?php
wp_nav_menu (array
‘theme_location’ => ‘pangunahing’,
‘menu_class’ => ‘Pangunahing Menu’,
));
?>

Sinasabi ng code na ito sa WordPress na ito ay kung saan ang tema ay nagpapakita ng pangunahing menu. Nagdaragdag din ito ng isang pangunahing menu sa klase ng CSS sa menu ng nabigasyon.

Ngayon ay maaari mong istilo ang iyong menu ng pag-navigate gamit ang istrukturang CSS na ito.

// klase ng lalagyan
#header .primary-menu {}

// listahan ng lalagyan unang listahan ng hindi nakaayos
#header .primary-menu ul {}

// listahan na hindi nakakaugnay sa loob ng isang hindi nakakaugnay na listahan
#header .primary-menu ul ul {}

// bawat item sa nabigasyon
#header .primary-menu li {}

// bawat angkla ng nabigasyon
#header .primary-menu li a {}

// listahan na hindi nakakaugnay kung mayroong mga drop down na item
#header .primary-menu li ul {}

// bawat drop down na item ng nabigasyon
#header .primary-menu li li {}

// bawat drap down na pag-navigate ng item sa pag-navigate
#header .primary-menu li li a {}

Kailangan mong palitan ang #header sa lalagyan na CSS klase na ginamit ng iyong menu ng nabigasyon.

Ang istraktura na ito ay makakatulong sa iyo na ganap na baguhin ang hitsura ng iyong menu ng nabigasyon.

Gayunpaman, mayroong iba pang mga klase ng nabuo na WordPress na awtomatikong idinagdag sa bawat item sa menu at menu. Pinapayagan ka ng mga klase na ito na i-customize ang iyong menu ng pag-navigate.

// Class para sa Kasalukuyang Pahina
.kasalukuyang_page_item {}

// Class para sa Kasalukuyang kategorya
.kasalukuyang-pusa {}

// Class para sa anumang iba pang kasalukuyang Item Item
.kasalukuyang-menu-item {}

// Class para sa isang kategorya
.menu-item-type-taxonomy {}

// Class para sa mga uri ng Post
.menu-item-type-post_type {}

// Class para sa anumang mga pasadyang link
.menu-item-type-custom {}

// Class para sa Link ng bahay
.menu-item-bahay {}

Pinapayagan ka ng WordPress na magdagdag ng iyong sariling mga pasadyang klase ng CSS sa mga indibidwal na item sa menu.

Maaari mong gamitin ang tampok na ito sa mga item sa menu ng estilo, tulad ng pagdaragdag ng mga icon ng imahe sa iyong mga menu o sa pamamagitan lamang ng pagpapalit ng mga kulay upang i-highlight ang isang item sa menu.

Tumungo sa Hitsura »Mga menu pahina sa iyong WordPress admin at mag-click sa pindutan ng Mga Pagpipilian sa Screen.

Paganahin ang pagpipilian ng mga klase ng CSS para sa mga indibidwal na item sa menu

Kapag nasuri mo ang kahon na iyon, makikita mo na ang isang karagdagang patlang ay idinagdag kapag nagpunta ka upang i-edit ang bawat item sa menu ng indibidwal.

Pagdaragdag ng isang pasadyang klase ng CSS sa isang item sa menu sa WordPress

Ngayon ay maaari mong gamitin ang klase ng CSS na ito sa iyong styleheet upang idagdag ang iyong pasadyang CSS. Makakaapekto lamang ito sa item ng menu sa klase ng CSS na iyong idinagdag.

Mga halimbawa ng Styling Navigation Menus sa WordPress

Ang iba’t ibang mga tema ng WordPress ay maaaring gumamit ng iba’t ibang mga pagpipilian sa estilo, CSS klase, at kahit na JavaScript upang lumikha ng mga menu ng nabigasyon. Nagbibigay ito sa iyo ng maraming mga pagpipilian upang baguhin ang mga estilo at ipasadya ang iyong mga menu ng nabigasyon upang matugunan ang iyong sariling mga kinakailangan.

Ang tool na suriin sa iyong web browser ay magiging iyong pinakamahusay na kaibigan pagdating sa pag-uunawa kung aling mga klase ng CSS ang mababago. Kung hindi mo ito ginamit dati, tingnan ang aming gabay sa kung paano gamitin ang inspeksyon tool upang ipasadya ang mga tema ng WordPress.

Karaniwan, kailangan mo lamang ituro ang cursor sa elementong nais mong baguhin, mag-right click at pagkatapos ay piliin ang tool na Inspect mula sa menu ng browser.

Gamit ang inspeksyon tool upang maghanap para sa mga klase ng CSS upang baguhin

Na sinasabi, tingnan natin ang ilang mga tunay na halimbawa ng buhay sa estilo ng pag-navigate sa WordPress.

1. Paano Baguhin ang Kulay ng font sa Mga menu sa Navigation ng WordPress

Narito ang halimbawang pasadyang CSS na maaari mong idagdag sa iyong tema upang mabago ang kulay ng font ng mga menu ng nabigasyon.

# top-menu li.menu-item ng {
kulay: # ff0000;
}

Sa halimbawang ito, ang # top-menu ay ang ID na itinalaga sa listahan na hindi nakakaugnay na nagpapakita ng aming menu ng nabigasyon. Kailangan mong gamitin ang tool na suriin upang malaman ang ID na ginamit ng iyong tema.

Pagbabago ng kulay ng font ng mga menu ng nabigasyon ng WordPress

2. Paano Baguhin ang Kulay ng Background ng Navigation Menu Bar

Una kailangan mong malaman ang CSS ID o klase na ginamit ng iyong tema para sa lalagyan na nakapalibot sa menu ng nabigasyon.

Paghahanap ng klase ng CSS para sa lalagyan ng nabigasyon sa menu

Pagkatapos nito maaari mong gamitin ang sumusunod na pasadyang CSS upang baguhin ang kulay ng background ng menu ng nabigasyon.

.nabigasyon-itaas {
kulay ng background: # 000;
}

Narito kung paano ito tumingin sa aming website ng demo.

Ang pagbabago ng kulay ng background ng menu ng nabigasyon

3. Paano Baguhin ang Kulay ng Background ng isang Item na Item

Maaaring napansin mo na maraming mga website ang gumagamit ng ibang kulay ng background para sa pinakamahalagang mga link sa kanilang menu ng nabigasyon. Ang link na ito ay maaaring isang pag-login, pag-sign up, makipag-ugnay, o bumili ng pindutan. Sa pamamagitan ng pagbibigay nito ng ibang kulay, ginagawang mas kapansin-pansin ang link.

Upang makamit ito, magdagdag kami ng isang pasadyang klase ng CSS sa item ng menu na nais naming i-highlight na may ibang kulay ng background.

Tumungo sa Hitsura »Mga menu at mag-click sa pindutan ng Mga Pagpipilian sa Screen sa kanang tuktok na sulok ng screen. Dadalhin nito ang isang fly down menu kung saan kailangan mong suriin ang kahon sa tabi ng pagpipilian ng ‘Mga klase sa CSS’.

Paganahin ang pagpipilian ng mga klase ng CSS para sa mga indibidwal na item sa menu

Pagkatapos nito kailangan mong mag-scroll pababa sa item ng menu na nais mong baguhin at mag-click upang mapalawak ito. Mapapansin mo ang isang bagong pagpipilian upang idagdag ang iyong pasadyang klase ng CSS.

Pagdaragdag ng pasadyang klase ng css sa isang item sa menu

Ngayon ay maaari mong gamitin ang klase ng CSS na istilo ng kakaibang item sa menu na naiiba.

.Makipag-ugnayan sa amin {
kulay ng background: # ff0099;
hangganan-radius: 5px;
}

Narito kung paano ito tumingin sa aming site ng pagsubok.

Ang pagbabago ng kulay ng background ng isang solong item ng menu sa mga menu ng pag-navigate sa WordPress

4. Pagdaragdag ng Mga Hover effects sa WordPress Navigation Menus

Nais mo bang baguhin ng iyong mga item sa menu ang mga kulay sa mouse-over? Ang partikular na trick na CSS ay ginagawang mas interactive ang iyong pag-navigate sa mga menu.

Idagdag lamang ang sumusunod na pasadyang CSS sa iyong tema.

# top-menu li.menu-item a: hover {
kulay ng background: #fff;
kulay: # 666;
hangganan-radius: 5px;
}

Sa halimbawang ito, ang # top-menu ay ang CSS ID na ginamit ng iyong tema para sa hindi nakaayos na listahan ng menu ng nabigasyon.

Narito kung paano ito tumingin sa aming site ng pagsubok.

Ang epekto ng mouse sa WordPress menu ng pag-navigate

5. Lumikha ng Malagkit na Mga menu ng Navigation na Lumulutang sa WordPress

Karaniwan ang mga menu ng pag-navigate ay lilitaw sa tuktok at mawala habang ang isang gumagamit ay nag-scroll pababa. Ang mga naka-istilong mga menu ng lumulutang na lumulutang ay nananatili sa tuktok habang ang isang gumagamit ay nag-scroll pababa.

Maaari kang magdagdag ng sumusunod na CSS code sa iyong tema upang maging malagkit ang iyong mga menu ng nabigasyon.

# top-menu {
background: # 2194af;
taas: 60px;
z-index: 170;
margin: 0 auto;
hangganan-ibaba: 1px solid #dadada;
lapad: 100%;
posisyon: naayos;
tuktok: 0;
kaliwa: 0;
tama: 0;
pag-align ng teksto: tama;
padding-kanan: 30px
}

Palitan lamang ang # top-menu sa CSS ID ng iyong menu ng nabigasyon.

Narito kung paano ito tumingin sa aming demo:

Malagkit na menu ng nabigasyon

Para sa mas detalyadong mga tagubilin at kahaliling pamamaraan, tingnan ang aming gabay sa kung paano lumikha ng isang malagkit na lumulutang na menu ng nabigasyon sa WordPress.

6. Lumikha ng Transparent Navigation menu sa WordPress

Maraming mga website ang gumagamit ng malaki o fullscreen background na mga larawan sa kanilang tawag sa mga pindutan ng pagkilos. Gamit ang mga transparent na menu ay ginagawang pagsasama-sama ang iyong nabigasyon sa imahe. Ginagawa nitong mas malamang na ituon ng mga gumagamit ang iyong tawag sa aksyon.

Idagdag lamang ang sumusunod na sample CSS sa iyong tema upang maging malinaw ang iyong mga menu ng nabigasyon.

# site-nabigasyon {
kulay ng background: transparent;
}

Ito ay kung paano ito tumingin sa aming demo site.

Transparent na mga menu ng nabigasyon sa WordPress

Depende sa iyong tema, maaaring kailanganin mong ayusin ang posisyon ng imahe ng header upang sakupin nito ang lugar sa likod ng iyong mga transparent na menu.

Inaasahan namin na ang artikulong ito ay nakatulong sa iyo na malaman kung paano i-istilo ang mga menu ng pag-navigate sa WordPress. Maaari mo ring makita ang aming gabay sa kung paano magdagdag ng mobile-handa na tumutugon WordPress menu.

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