Cum să adăugați clasa CSS de prim și ultim element la elementele meniului WordPress

Ați observat vreodată site-uri web cu elemente de meniu de prim și ultim element stilizate în mod unic? Nu este o coincidență – este CSS inteligent la lucru. Această tehnică poate evidenția link-uri importante, cum ar fi pagina de contact sau o ofertă specială.

Mulți dintre cititorii noștri au încercat să adauge clase personalizate la elementele meniului lor, doar pentru a constata că atunci când își rearanjează meniul, stilizarea se strică. Elementele etichetate ca „primul” și „ultimul” nu mai sunt în acele poziții, lăsând meniul să pară inconsistent.

Acesta este motivul pentru care acest ghid vă va arăta cum să adăugați o clasă .first și .last care se va atașa la elementele meniului dvs., chiar dacă veți amesteca lucrurile mai târziu. Vom acoperi două metode: un filtru pentru temele clasice și selectori CSS pentru toate temele, inclusiv temele bloc.

De ce să stilizați diferit elementele de navigare primul și ultimul?

Uneori, este posibil să fie necesar să adăugați stiluri personalizate primului și ultimului element dintr-un meniu de navigare. Acest lucru poate face ca linkurile importante să iasă în evidență, cum ar fi linkul către formularul de contact al site-ului dvs. sau pagina coșului WooCommerce.

În acest caz, ați putea pur și simplu să adăugați o clasă CSS personalizată la primul și ultimul element de meniu. Cu toate acestea, dacă schimbați ordinea meniului în orice moment, acest lucru ar putea strica complet stilul personalizat.

Din acest motiv, recomandăm utilizarea filtrelor în schimb.

În acest ghid, vă vom arăta cum să stilizați primele și ultimele elemente ale meniului dumneavoastră de navigare, astfel încât să puteți rearanja meniul fără a rupe stilizarea personalizată. Pur și simplu utilizați legăturile rapide de mai jos pentru a sări direct la metoda pe care doriți să o utilizați:

• Metoda 1: Adăugarea clasei Primul și Ultimul folosind un filtru (Recomandat)
• Metoda 2: Stilizați primele și ultimele elemente folosind selectoare CSS (funcționează cu toate temele)

Metoda 1: Adăugarea clasei Primul și Ultimul folosind un filtru (Recomandat)

Notă: Această metodă funcționează doar cu o temă WordPress clasică. Dacă utilizați o temă bloc, accesați Metoda 2.

Cel mai simplu mod de a stiliza elementele meniului de navigare este să adăugați un filtru la tema dvs.

Adesea veți găsi fragmente de cod în tutoriale WordPress cu instrucțiuni de a le adăuga în fișierul functions.php al temei dumneavoastră.

Cea mai mare problemă este că chiar și o mică greșeală în fragmentul de cod personalizat poate bloca site-ul dvs. WordPress și îl poate face inaccesibil. Fără a mai menționa că, dacă actualizați tema WordPress, veți pierde toate personalizările.

Aici intervine WPCode .

Acest plugin gratuit facilitează adăugarea de CSS, PHP, HTML personalizat și multe altele în WordPress, fără a pune site-ul dvs. în pericol.

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul gratuit WPCode. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activare, accesați Fragmente de cod » Adăugare fragment.

Aici, pur și simplu treceți mouse-ul peste „Adăugați codul dvs. personalizat”.

Când apare, faceți clic pe „Utilizați fragment”.

Pentru a începe, introduceți un titlu pentru fragmentul de cod personalizat. Acesta poate fi orice vă ajută să identificați fragmentul în tabloul de bord WordPress.

După aceea, deschide meniul derulant „Tip cod” și selectează „Fragment PHP”.

Puteți apoi adăuga următorul cod PHP în caseta de cod:

function wpb_first_and_last_menu_class($items) {
    $items[1]->classes[] = 'first';
    $items[count($items)]->classes[] = 'last';
    return $items;
}
add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');

După aceea, sunteți gata să derulați în partea de sus a ecranului și să faceți clic pe comutatorul 'Inactive' pentru ca acesta să se schimbe în 'Active'.

În final, faceți clic pe „Salvare fragment” pentru a face fragmentul PHP live.

Acest lucru creează clase CSS .first și .last pentru primul și ultimul element al meniului dvs. Acum puteți folosi aceste clase pentru a aplica stiluri unice acestor elemente pe meniul dvs. de navigare personalizat.

Pentru a face acest lucru, va trebui să adăugați un al doilea fragment de cod la site-ul dvs. WordPress. Pentru a începe, creați un nou fragment de cod personalizat urmând același proces descris mai sus.

După aceea, tastează un titlu pentru fragmentul de cod personalizat.

Apoi, deschideți meniul derulant „Tip cod”, dar de data aceasta selectați „Fragment CSS”.

Pentru acest ghid, vom îngroșa pur și simplu primul și ultimul element de meniu adăugând următoarea formatare CSS în caseta de cod:

.first a {font-weight: bold;}

.last a {font-weight: bold;}

După ce ați făcut acest lucru, faceți clic pe comutatorul „Inactiv” pentru ca acesta să devină „Activ”.

În cele din urmă, faceți clic pe „Salvează fragmentul” pentru a face fragmentul CSS live.

Acum, dacă vizitați site-ul dvs. web, veți vedea meniul nou stilizat live.

Metoda 2: Stilizați primele și ultimele elemente folosind selectoare CSS (funcționează cu toate temele)

Dacă nu doriți să utilizați un plugin pentru fragmente de cod, atunci puteți stiliza primul și ultimul element de meniu folosind selectoare CSS. Cu toate acestea, această metodă s-ar putea să nu funcționeze cu unele browsere mai vechi, cum ar fi Internet Explorer.

Având în vedere acest lucru, este o idee bună să testați site-ul dvs. WordPress în diferite browsere.

Pentru a urma această metodă, va trebui să adăugați cod în foaia de stil a temei dvs. sau în secțiunea „CSS suplimentar” a Personalizatorului de teme WordPress.

Dacă nu ați mai făcut acest lucru înainte, consultați ghidul nostru despre cum să adăugați cu ușurință CSS personalizat pe site-ul dvs. WordPress.

Primul pas este editarea fișierului style.css al temei dumneavoastră sau accesarea Aspect » Personalizare și apoi faceți clic pe „CSS suplimentar”.

După aceea, continuați și adăugați următorul fragment de cod pe site-ul dvs.:

ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }

Rețineți că va trebui să înlocuiți „yourmenuid” cu ID-ul meniului de navigare.

Selectorii ‘first-child’ și ‘last-child’ selectează primul și ultimul copil al părintelui său, care sunt primul și ultimul element din meniul de navigare.

De exemplu, am folosit acest cod pentru a face bold elementele de meniu de navigare primul și ultimul pe blogul nostru WordPress:

ul#primary-menu-list > li:first-child a {
    font-weight: bold;
}
ul#primary-menu-list > li:last-child a {
    font-weight: bold;
}

Dacă utilizați o temă bloc WordPress, atunci Personalizatorul de temă va lipsi din administratorul dvs. WordPress. Trebuie să introduceți acest URL în browser pentru a accesa Personalizatorul de temă:

https://yourdomainname.com/wp-admin/customize.php

Asigurați-vă că înlocuiți domeniul cu numele domeniului site-ului dvs.

După aceea, deschideți fila „CSS suplimentar” ca înainte și introduceți următorul cod. Observați cum codul arată puțin diferit, deoarece nu trebuie să adăugați ID-ul meniului.

li:first-child a,
li:last-child a {
    background-color: black;
    border: none;
    color: white !important; /* Ensures the color white is prioritized */
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
}

Simțiți-vă liber să personalizați codul în funcție de nevoile dumneavoastră. În exemplul de mai jos, am transformat primele și ultimele link-uri în butoane.

Iată cum arată:

Sperăm că acest tutorial v-a ajutat să învățați cum să adăugați clasele .first și .last la meniurile de navigare WordPress. De asemenea, ați putea dori să consultați articolul nostru despre cum să creați un meniu de navigare vertical în WordPress și ghidul nostru pentru începători despre crearea unui meniu dropdown pe un site WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.