Hur man lägger till den första och sista CSS-klassen till WordPress-menyobjekt

Har du någonsin sett webbplatser med unikt stylade första och sista menyobjekt? Det är ingen slump – det är smart CSS i arbete. Den här tekniken kan lyfta fram viktiga länkar, som din kontaktsida eller ett specialerbjudande.

Många av våra läsare har försökt lägga till egna klasser till sina menyalternativ, bara för att upptäcka att när de ordnar om sin meny, bryts stylingen. Objekten som taggats som 'första' och 'sista' är inte längre i de positionerna, vilket gör att menyn ser inkonsekvent ut.

Det är därför den här guiden visar dig hur du lägger till en .first och .last klass som fäster vid dina menyalternativ, även om du flyttar runt saker senare. Vi kommer att täcka två metoder: ett filter för klassiska teman och CSS-selektorer för alla teman, inklusive blockteman.

Varför styla de första och sista navigeringsmenyobjekten olika?

Ibland kan du behöva lägga till anpassad styling för de första och sista objekten i en navigeringsmeny. Detta kan få viktiga länkar att sticka ut, som länken till din webbplats kontaktformulär eller WooCommerce-varukorgssida.

I det här fallet kan du helt enkelt lägga till en anpassad CSS-klass till de första och sista menyobjekten. Men om du ändrar ordningen på menyn vid något tillfälle, kan detta helt förstöra den anpassade stylingen.

Av denna anledning rekommenderar vi att använda filter istället.

I den här guiden visar vi dig hur du stylar de första och sista objekten i din navigeringsmeny, så att du kan ordna om menyn utan att bryta den anpassade stylingen. Använd helt enkelt snabblänkarna nedan för att hoppa direkt till den metod du vill använda:

• Metod 1: Lägga till första och sista klass med ett filter (rekommenderas)
• Metod 2: Stylar första och sista objekt med CSS-väljare (fungerar med alla teman)

Metod 1: Lägga till första och sista klass med ett filter (rekommenderas)

Notera: Den här metoden fungerar bara med ett klassiskt WordPress-tema. Om du använder ett blocktema, gå sedan till Metod 2.

Det enklaste sättet att styla dina navigeringsmenyobjekt är att lägga till ett filter i ditt tema.

Ofta hittar du kodavsnitt i WordPress-handledningar med instruktioner om att lägga till dem i ditt temas functions.php fil.

Det största problemet är att även ett litet fel i det anpassade kodavsnittet kan förstöra din WordPress-webbplats och göra den otillgänglig. För att inte tala om, om du uppdaterar ditt WordPress-tema, kommer du att förlora alla dina anpassningar.

Det är där WPCode kommer in.

Detta gratis plugin gör det enkelt att lägga till anpassad CSS, PHP, HTML och mer till WordPress utan att riskera din webbplats.

Det första du behöver göra är att installera och aktivera det gratis WPCode-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till Code Snippets » Add Snippet.

Här, för muspekaren över 'Lägg till din anpassade kod'.

När den visas, klicka på 'Använd kodavsnitt'.

Till att börja med, skriv in en titel för det anpassade kodavsnittet. Detta kan vara vad som helst som hjälper dig att identifiera avsnittet i WordPress-instrumentpanelen.

Öppna sedan rullgardinsmenyn 'Kodtyp' och välj 'PHP-utdrag'.

Du kan sedan lägga till följande PHP i kodrutan:

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');

Därefter är du redo att skrolla till toppen av skärmen och klicka på växlingsknappen 'Inaktiv' så att den ändras till 'Aktiv'.

Klicka slutligen på ‘Spara utdrag’ för att göra PHP-utdraget live.

Detta skapar CSS-klasser .first och .last för dina första och sista menyalternativ. Du kan nu använda dessa klasser för att applicera unik stil på dessa objekt i din anpassade navigeringsmeny.

För att göra detta behöver du lägga till ett andra kodavsnitt till din WordPress-webbplats. För att börja, skapa ett nytt anpassat kodavsnitt genom att följa samma process som beskrivs ovan.

Skriv sedan en titel för kodavsnittet.

Öppna sedan rullgardinsmenyn ‘Kodtyp’, men välj den här gången ‘CSS-utdrag’.

För den här guiden kommer vi helt enkelt att göra de första och sista menyobjekten fetstilta genom att lägga till följande CSS-formatering i kodrutan:

.first a {font-weight: bold;}

.last a {font-weight: bold;}

När det är gjort, klicka på växlingsknappen ‘Inaktiv’ så att den ändras till ‘Aktiv’.

Klicka slutligen på ‘Spara kodavsnitt’ för att göra CSS-kodavsnittet live.

Nu, om du besöker din webbplats, kommer du att se den nytt stylade menyn live.

Metod 2: Stylar första och sista objekt med CSS-väljare (fungerar med alla teman)

Om du inte vill använda ett plugin för kodavsnitt kan du styla de första och sista menyobjekten med CSS-väljare. Denna metod kanske dock inte fungerar med vissa äldre webbläsare, som Internet Explorer.

Med det i åtanke är det en bra idé att testa din WordPress-webbplats i olika webbläsare.

För att följa denna metod måste du lägga till kod i ditt temas stilmall eller avsnittet 'Ytterligare CSS' i WordPress Theme Customizer.

Om du inte har gjort detta tidigare, se vår guide om hur du enkelt lägger till anpassad CSS på din WordPress-webbplats.

Det första steget är att redigera din temas style.css-fil eller gå till Utseende » Anpassa och sedan klicka på 'Ytterligare CSS'.

Därefter kan du lägga till följande kodavsnitt på din webbplats:

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

Notera att du måste ersätta 'yourmenuid' med ID:t för din navigeringsmeny.

Väljarna ‘first-child’ och ‘last-child’ väljer det första respektive sista barnet till sin förälder, vilket är de första och sista objekten i navigeringsmenyn.

Till exempel använde vi den här koden för att göra de första och sista navigeringsmenyobjekten på vår WordPress-blogg fetstilta:

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

Om du använder ett WordPress blocktema, kommer Temaanpassaren att saknas i din WordPress-admin. Du måste ange denna URL i din webbläsare för att komma åt Temaanpassaren:

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

Se till att ersätta domänen med din webbplats domännamn.

Efter det, öppna fliken 'Ytterligare CSS' som tidigare och infoga följande kod. Lägg märke till hur koden ser lite annorlunda ut eftersom du inte behöver lägga till ditt meny-ID.

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;
}

Anpassa gärna koden efter dina behov. I exemplet nedan har vi gjort om de första och sista länkarna till knappar.

Här är hur det ser ut:

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du lägger till .first och .last klasser till WordPress-navigeringsmenyer. Du kanske också vill se vår artikel om hur man skapar en vertikal navigeringsmeny i WordPress och vår nybörjarguide om att skapa en rullgardinsmeny på en WordPress-webbplats.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.