Så här addar du den första och sista CSS-klassen till menu items i WordPress

Vill du add to custom styling till de första och sista objekten i din WordPress menu?

Ett alternativ är att helt enkelt add to en custom CSS-klass till de första och sista menu items. Men om du omorganiserar menyn vid något tillfälle kanske dessa objekt inte längre är först och sist.

I den här artikeln visar vi hur du add to en .first- och .last-klass som formaterar de första och sista objekten även om du ändrar ordningen på menu-item vid ett senare tillfälle.

Varför Styling av det första och sista objektet i navigationen på olika sätt?

Ibland kan du behöva add to custom styling till de första och sista objekten i en navigation menu. Detta kan få viktiga länkar att sticka ut, till exempel länken till webbplatsens kontaktformulär eller WooCommerce cart page.

I det här fallet kan du helt enkelt lägga till en custom CSS-klass till de första och sista menu items. Men om du ändrar menyns order vid någon tidpunkt, kan detta helt bryta den anpassade stylingen.

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

I den här guiden visar vi dig hur du stylar det första och sista objektet i din navigation menu, så att du kan omorganisera menyn utan att bryta custom stylingen. Använd bara snabblänkarna under för att hoppa direkt till den metod du vill använda:

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

Det enklaste sättet att styla dina navigation menu items är att add to ett filter till your theme.

Ofta hittar du code snippets i WordPress tutorials med instruktioner för att add dem till ditt temas functions.php-fil.

Det största problemet är att även ett litet misstag i det anpassade code snippet kan förstöra din WordPress site och göra den otillgänglig. Om du uppdaterar ditt WordPress theme kommer du dessutom att förlora all din customize.

Det är där WPCode kommer in i bilden.

Detta gratis plugin gör det enkelt att add to custom CSS, PHP, HTML, och mer till WordPress utan att riskera din site.

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

Efter aktivering, head över till Code Snippets ” Add Snippet.

Här är det bara att hovera musen över ”Add Your Custom Code”.

När det visas klickar du på ”Use snippet”.

Till att börja med skriver du in en titel för det anpassade code snippet. Det kan vara vad som helst som hjälper dig att identifiera snippet i WordPress dashboard.

Därefter öppnar du dropdown ’Code Type’ och väljer ’PHP Snippet’.

Du kan sedan add to följande PHP till code box:

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

Efter det är du redo att rulla högst upp på vyn och klicka på ”Inaktiverad” toggle så att den ändras till ”Aktiv”.

Slutligen klickar du på ”Save Snippet” för att göra PHP snippet live.

Detta skapar .first och .last CSS-klasser för dina första och sista menu-items. Du kan nu använda dessa klasser för att tillämpa unik styling på dessa objekt.

För att göra detta måste du add a second snippet till din WordPress website. Börja med att skapa ett nytt custom code snippet genom att följa samma process som beskrivs ovan.

Efter det skriver du in en titel för det anpassade code snippet.

Öppna sedan dropdown ’Code Type’, men den här gången väljer du ’CSS Snippet’.

I den här guiden kommer vi helt enkelt att fetstila de första och sista menu items genom att lägga till följande CSS-format i kodboxen:

.first a {font-weight: bold;}

.last a {font-weight: bold;}

När du har gjort det klickar du på ”Inaktiverad” toggle så att den ändras till ”Aktiv”.

Slutligen klickar du på ”Save Snippet” för att göra CSS-snippet live.

Nu, om du besöker din website, kommer du att se den uppdaterade menyn live.

Metod 2: Styling av första och sista objekt med CSS-selektorer (fungerar med alla teman)

Om du inte vill använda ett plugin kan du utforma det första och sista menu-item med hjälp av CSS-selektorer. Den här metoden kanske dock inte fungerar med vissa äldre webbläsare, till exempel Internet Explorer.

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

För att följa denna metod måste du add to kod till ditt temas stilmall eller sektionen ”Additional CSS” i WordPress Theme Customize.

Om du inte har gjort det tidigare kan du läsa vår guide om hur du enkelt lägger till custom CSS på din site i WordPress.

Det första steget är att redigera ditt temas style.css-fil eller heada över till Appearance ” Customize och sedan klicka på ’Additional CSS’.

Följ det, gå vidare och add följande code snippet till din site:

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

Obs/observera att du måste ersätta ”yourmenuid” med ID:n för din navigation menu.

Selektorerna ”first-child” och ”last-child” selectar det första och sista barnet till sin parent, vilket är det första och sista objektet i navigation menu.

Vi använde till exempel den här koden för att fetstila det första och sista navigation menu items på vår WordPress blogg:

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 block theme, då kommer Theme Customize att saknas i din WordPress admin. Du måste enter denna URL i din webbläsare för att komma åt Theme Customizer:

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

Se till att ersätta domänen med din websites domain name.

Följ detta genom att öppna tabben ”Additional CSS” som tidigare och infoga följande kod. Notice how the code looks slightly different as you don’t need to add your menu 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;
}

Känn dig fri att customize koden efter dina behov. I exemplet under har vi gjort om den första och den sista linken till knappar.

Så här ser det ut:

Vi hoppas att denna tutorial hjälpte dig att lära dig hur du add to klasserna .first och .last till WordPress navigations menyer. Du kanske också vill se vår guide om hur man skapar en landing page med WordPress eller kontrollera vår lista över de bästa drag and drop page builders.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.