Ievads
Veidojot vietni WordPress bloku motīvos, iespējams, pamanījāt, ka jūsu vietnes galvenajai navigācijai ir ierobežotas stila iespējas. Piemēram, ja galvenajā navigācijā noklikšķināt uz lapas saites, lai apmeklētu kādu savas vietnes lapu, aktīvās lapas saite galvenajā navigācijā nemaina krāsu. Citiem vārdiem sakot, lietotājam nav norādes par to, kurā lapā viņš pašlaik atrodas.
Laba lietotāju pieredze liecina, ka vietnes apmeklētājiem vienmēr ir jābūt informācijai par viņu atrašanās vietu jūsu vietnē — tas palīdz viņiem nepazust.
Šajā apmācībā es jums parādīšu, kā ātri pielāgot vietnes navigāciju WordPress bloku motīvos, lai aktīvajai lapai parādītu pielāgotu krāsu. Šajā demonstrācijā es izmantošu tēmu Divdesmit četri.
1. darbība. Pārejiet uz bloku redaktoru
Savā WordPress informācijas panelī dodieties uz Izskats> Redaktors (sarkanā bultiņa iepriekš redzamajā fotoattēlā). Tas jūs novirzīs uz vietnes redaktoru.
Noklikšķiniet uz galvenā satura apgabala izvēlnes labajā pusē. Tādējādi jūs nonāksit bloku redaktorā.
2. darbība. Pievienojiet pielāgotu CSS
Pēc tam noklikšķiniet uz ikonas "Stili" bloku redaktora augšējā labajā stūrī.
Noklikšķiniet uz ikonas “Vairāk” (vertikālā trīs punktu ikona), pēc tam noklikšķiniet uz “Papildu CSS”.
Tekstlodziņā “Papildu CSS” ielīmējiet šādu CSS kodu:
.current-menu-item {
color: #e23f1b;
}Nomainiet vērtību starp simbolu “#” un “;” simbolu ar heksadecimālo kodu jebkurai krāsai, kuru vēlaties izmantot (jūs varat iegūt krāsu heksades koda vērtības pakalpojumā WordPress, rediģējot visu, kam ir krāsas vērtība, vai izmantojot krāsu rīku, piemēram, HueMint or Coolors).
Bloku redaktora augšdaļā noklikšķiniet uz pogas “Saglabāt”, pēc tam vēlreiz noklikšķiniet uz “Saglabāt”.
3. darbība: skatiet lapu
Kad izmaiņas ir saglabātas, tagad varat noklikšķināt uz ikonas Skatīt lapu, lai galvenajā navigācijas panelī priekšskatītu savu vietni ar jauno aktīvās lapas krāsu.
Problēmu novēršana
Ja iepriekš minētais kods jums nederēja, iespējams, izmantojat motīvu, kurā aktīviem izvēlnes vienumiem tiek izmantotas dažādas klases, vai arī jūs savā navigācijas blokā izmantojat pielāgotas saites, nevis lapu saites.
Motīvi, kas nav bloķēti, vai trešās puses bloķēšanas motīvi
Lai atrisinātu iepriekšējo problēmu, pārlūkprogrammā ir jāizmanto rīks “Pārbaude” un jānoskaidro, kura klase tiek izmantota aktīvajām lapu saitēm galvenajā navigācijā (varat arī mēģināt meklēt Google “Kādu klasi ____ motīvs izmanto aktīvai lapas saites galvenajā navigācijā”).
Pielāgotu saišu izmantošana lapu saišu vietā
Attiecībā uz pēdējo problēmu vienkārši mainiet savas pielāgotās saites uz lapu saitēm vietnes redaktorā. Lai to izdarītu, izmantojot bloku redaktoru, noklikšķiniet uz logotipa redaktora augšējā kreisajā stūrī (tas būs WordPress logotips vai jūsu vietnes logotips).
Pēc tam noklikšķiniet uz "Navigācija". Noklikšķiniet uz ikonas Rediģēt blakus savas vietnes galvenās izvēlnes nosaukumam.
Noklikšķiniet uz navigācijas izvēlnes, lai to rediģētu. Pēc tam bloķēšanas iestatījumu sānjoslā noklikšķiniet uz “Doties uz vecāknavigācijas bloku”, ja tas nav tur pēc noklusējuma.
Bloķēšanas iestatījumu sānjoslas virsraksta “Izvēlne” redzēsit visu to lapu sarakstu, kas atrodas jūsu galvenajā navigācijā. Ja jums ir kādas vietnes lapas navigācijā, kas ir norādītas kā pielāgota saite (piemēram, fotoattēla parauga apakšējais ieraksts), ieraksts ir jāizdzēš un atkārtoti jāpievieno kā lapa (ja iespējams).
Lai to izdarītu, blakus ierakstam noklikšķiniet uz ikonas “Opcijas”, pēc tam noklikšķiniet uz “Noņemt ____”. Pēc tam noklikšķiniet uz ikonas “+” lapu saraksta apakšā.
Pēc tam noklikšķiniet uz “Lapas saite”, pēc tam atrodiet lapu, kuru vēlaties pievienot. Kad esat pievienojis lapu, noklikšķiniet uz "Saglabāt" un vēlreiz noklikšķiniet uz "Saglabāt". Jautājums ir jāatrisina.
Tas ir par šo mācību! Ja jums patika, varat pārbaudīt manu citu Apmācības WordPress vai reģistrēties manā WordPress kurss par Udemy!
