Kapag nagdidisenyo ng iyong website sa WordPress block na mga tema, maaaring napansin mo na ang pangunahing nabigasyon para sa iyong site ay may limitadong mga pagpipilian sa pag-istilo. Halimbawa, kapag nag-click ka sa isang link ng pahina sa iyong pangunahing nabigasyon upang bisitahin ang isang pahina sa iyong website, ang link para sa aktibong pahina ay hindi nagbabago ng kulay sa loob ng pangunahing nabigasyon. Sa madaling salita, walang indikasyon para sa user kung saang page sila kasalukuyang naroroon.

Ang magandang karanasan ng user ay nagsasabi na ang mga bisita sa site ay dapat palaging may ilang uri ng indikasyon kung nasaan sila sa iyong site – nakakatulong itong pigilan sila na mawala.

Sa tutorial na ito, ipapakita ko sa iyo kung paano mabilis na i-customize ang iyong site navigation sa WordPress block theme para magpakita ng custom na kulay para sa aktibong page. Gagamitin ko ang Twenty Twenty Four na tema para sa demonstrasyon na ito.

Hakbang 1: Mag-navigate sa Block Editor

Mula sa iyong WordPress Dashboard, pumunta sa Hitsura>Editor (pulang arrow sa larawan sa itaas). Dadalhin ka nito sa Editor ng Site.

I-click ang pangunahing bahagi ng nilalaman sa kanan ng menu. Dadalhin ka nito sa loob ng Block Editor.

Hakbang 2: Magdagdag ng Custom na CSS

Susunod, mag-click sa icon na "Mga Estilo" sa kanang sulok sa itaas ng Block Editor.

I-click ang icon na “Higit pa” (ang icon na patayong tatlong tuldok), pagkatapos ay i-click ang “Karagdagang CSS.”

I-paste ang sumusunod na CSS code sa "Karagdagang CSS" na text box:

.current-menu-item {
  color: #e23f1b;
}

Palitan ang halaga sa pagitan ng "#" na simbolo at ng ";" simbolo na may hex code para sa anumang kulay na gusto mong gamitin (maaari kang makakuha ng mga value ng color hex code sa loob ng WordPress sa pamamagitan ng pag-edit ng anumang bagay na may halaga ng kulay, o sa pamamagitan ng paggamit ng color tool tulad ng HueMint or Mga Palamig).

I-click ang button na "I-save" sa tuktok ng Block Editor, pagkatapos ay i-click muli ang "I-save".

Hakbang 3: Tingnan ang Pahina

Kapag na-save ang iyong mga pagbabago, maaari mo na ngayong i-click ang icon na "Tingnan ang Pahina" upang i-preview ang iyong site gamit ang bagong kulay para sa aktibong pahina sa iyong pangunahing nabigasyon.

Troubleshooting

Kung hindi gumana para sa iyo ang code sa itaas, maaaring gumagamit ka ng tema na gumagamit ng iba't ibang klase para sa mga aktibong item sa menu, o maaaring gumagamit ka ng mga custom na link sa iyong navigation block kaysa sa mga link ng page.

Mga Non-Block na Tema o Third-Party na Block Theme

Upang malutas ang dating isyu, kakailanganin mong gamitin ang tool na “inspeksyon” sa iyong browser at alamin kung anong klase ang ginagamit para sa mga aktibong link ng page sa iyong pangunahing nabigasyon (maaari mo ring subukan ang Googling “Anong klase ang ginagamit ng ____ na tema para sa aktibo mga link ng pahina sa pangunahing nabigasyon”).

Para sa huling isyu, baguhin lang ang iyong mga custom na link sa mga link ng pahina sa loob ng Site Editor. Upang gawin ito mula sa loob ng Block Editor, mag-click sa logo sa kaliwang sulok sa itaas ng editor (ay magiging logo ng WordPress o logo ng iyong site).

Pagkatapos, i-click ang “Navigation.” I-click ang icon na “I-edit” sa tabi ng pangalan ng pangunahing menu ng iyong site.

Mag-click sa menu ng nabigasyon upang i-edit ito. Pagkatapos, i-click ang "Pumunta sa parent navigation block" sa Block Settings Sidebar kung hindi dadalhin doon bilang default.

Sa ilalim ng heading na “Menu” sa Block Settings Sidebar, makikita mo ang isang listahan ng lahat ng iyong page na nasa iyong pangunahing nabigasyon. Kung mayroon kang anumang mga pahina ng site sa nabigasyon na nakalista bilang isang custom na link (tulad ng ibabang entry sa halimbawang larawan), kakailanganin mong tanggalin ang entry at muling idagdag ito bilang isang pahina (kung maaari).

Upang gawin ito, i-click ang icon na "Mga Opsyon" sa tabi ng entry, pagkatapos ay i-click ang "Alisin ____." Susunod, i-click ang icon na “+” sa ibaba ng listahan ng page.

Susunod, i-click ang “Page Link,” pagkatapos ay hanapin ang page na gusto mong idagdag. Kapag naidagdag mo na ang page, i-click ang “I-save” at i-click muli ang “I-save”. Ang isyu ay dapat malutas.