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)
Note : Den här metoden fungerar bara med ett klassiskt WordPress-tema. Om du använder ett block theme går du till metod 2.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Ahmed Mahdi says
i’ve changed the code slightly to work with child menus too:
function wpb_first_and_last_menu_class($items) {
foreach($items as $k => $v){
$parent[$v->menu_item_parent][] = $v;
}
foreach($parent as $k => $v){
$v[0]->classes[] = ’first’;
$v[count($v)-1]->classes[] = ’last’;
}
return $items;
}
add_filter(’wp_nav_menu_objects’, ’wpb_first_and_last_menu_class’);
Trevor Simonton says
exactly what i needed. thank you!
Georgios Panagiotakopoulos says
Thanks! This works great!
Munkhbayar says
Thanks for code. Works for me.
mad_doc says
Thank you for idea & help!
Charles says
Thanks for this nice code…
What about child menu first and last item?
It applied only for parent manu.
Do you have any idea about child last item?
jordi says
Anyone have any tip about use add_filter(”); for wp_nav_menu using STARKERS?
JS and CSS are fine to do that, it is just frustrating to don’t be able to fix it from the back…
can’t make it works
thanks to share anyway!!
Jake says
This does not work reliably if you have nested menus.
Editorial Staff says
Hmm, will look into a fix for this.
Administratör
Olivier says
It works when the menu item is the last, or the last child of a last menu item.
It does not work when the menu item is a last child of a menu item that is not the last.
Olivier says
Together with some other additions to functions.php that i’ve tried, this code fails to tag a menu item as first or last menu item when they are in a submenu. A fix for this would be great!
Elliott Richmond says
Nice! Would usually use CSS but this is a good tip
Mattia says
Great! This is particularly interesting because I have to class more than 2 menu items…
Now I got it!
Thanks
karen says
Thanks for this! Forgive me if I missed it – but – is there an example of the menu to see the difference in the nav created by this class? Thank you again!
Editorial Staff says
The site we designed for our client is not live yet. But the main reason was that we wanted to have a border left to the first menu item. All other items had border right element with a specific padding and margin. We used the last class to remove the margin right and the border right because there was no need for it. It was hitting the wrap container. Hope you can visualize it.
Administratör
Ivo Minchev says
I’ve tried this at the site http://aurorachalet-switzerland.com/ and I cannot see the effect. I’m using the ”Twenty Eleven” theme for this site. Where is the problem?
Ivo Minchev says
Pobably because of the #yourmenuid tag. I tried some ID’s but none of them worked.
Editorial Staff says
This should work as long as you specify the correct id tags.
Administratör
Editorial Staff says
Don’t think that you are using the wp_nav_menu. From the looks of it, it seems that your site is using the fall_back menu by listing all pages. Can you confirm that you have gone into Appearance > Menu and created a menu there. Then specified that menu as a primary location??
Administratör