Volete aggiungere elementi personalizzati a menu specifici di WordPress?
I menu di WordPress sono menu di navigazione che vengono visualizzati nella parte superiore della maggior parte dei siti web. A volte è possibile visualizzare nei menu di navigazione elementi personalizzati diversi dai semplici link.
In questo articolo vi mostreremo come aggiungere facilmente elementi personalizzati a specifici menu di WordPress.
Perché aggiungere elementi personalizzati ai menu di WordPress
I menu di WordPress sono collegamenti di navigazione solitamente visualizzati nella parte superiore di un sito web. Sui dispositivi mobili, sono spesso visualizzati quando si tocca un’icona di menu.
Poiché si tratta di una posizione di rilievo nel tipico layout di un sito web WordPress, è opportuno sfruttarla inserendo nel menu elementi personalizzati diversi dai semplici link.
Ad esempio, alcuni utenti potrebbero voler visualizzare il modulo di ricerca come facciamo noi di WPBeginner. Un sito di membership potrebbe voler mostrare i link di login e logout, oppure si potrebbero aggiungere icone o immagini al menu.
Per impostazione predefinita, i menu di navigazione sono progettati per visualizzare link di testo semplice. Tuttavia, è possibile inserire elementi personalizzati nei menu di WordPress.
Detto questo, vediamo come aggiungere elementi personalizzati a menu specifici in WordPress, mantenendo intatto il resto del menu di navigazione.
Aggiunta di elementi personalizzati a menu di navigazione specifici in WordPress
Esistono diversi modi per aggiungere elementi personalizzati a un menu di navigazione in WordPress. Dipende dal tipo di elemento personalizzato che si sta cercando di aggiungere.
Vi mostreremo alcuni degli esempi più comuni. Per alcuni di essi è necessario utilizzare dei plugin, mentre per altri è necessario aggiungere del codice.
Se si desidera passare a una determinata sezione, è possibile utilizzare l’indice:
- Aggiungere un popup di ricerca al menu di WordPress
- Aggiungere icone o immagini al menu
- Aggiungere link di login/logout al menu
- Aggiungere testo personalizzato a un menu di WordPress
- Aggiungere la data corrente al menu
- Visualizzare i nomi utente nel menu
- Mostrare menu diversi su pagine diverse
Cominciamo.
1. Aggiunta di un popup di ricerca nel menu di WordPress
Normalmente, è possibile aggiungere un modulo di ricerca alla barra laterale di WordPress utilizzando il widget o il blocco di ricerca predefinito. Tuttavia, non c’è modo di aggiungere la ricerca al menu di navigazione per impostazione predefinita.
Alcuni temi WordPress hanno un’opzione per aggiungere una casella di ricerca all’area del menu principale. Ma se il vostro non ce l’ha, potete usare il metodo seguente.
A tal fine, è necessario installare e attivare il plugin SearchWP Modal Search Form. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.
Questo plugin è un addon per SearchWP, che è il miglior plugin di ricerca per WordPress sul mercato.
L’addon è gratuito e funziona anche con la ricerca predefinita di WordPress. Tuttavia, si consiglia di utilizzarlo con SearchWP se si desidera migliorare la ricerca su WordPress.
Dopo aver installato l’addon, basta andare alla pagina Aspetto ” Menu. Nella colonna “Aggiungi voci di menu”, fare clic sulla scheda “SearchWP Modal Search Forms” per espanderla.
Selezionate il vostro motore di ricerca e fate clic sul pulsante Aggiungi al menu.
Il plugin aggiunge la ricerca al menu di navigazione. Fare clic su “Modulo di ricerca modale” sotto le voci di menu per espanderlo e cambiare l’etichetta in Ricerca o in qualsiasi altra cosa si desideri.
Non dimenticate di fare clic sul pulsante Salva menu per memorizzare le modifiche.
Ora è possibile visitare il proprio sito web e vedere la voce Ricerca aggiunta al menu di navigazione. Facendo clic su di esso si aprirà il modulo di ricerca in un popup lightbox.
Per maggiori dettagli, consultate la nostra guida su come aggiungere un pulsante di ricerca a un menu di WordPress.
2. Aggiungere icone e immagini personalizzate a menu specifici
Un altro elemento personalizzato molto diffuso che gli utenti desiderano aggiungere a un menu specifico è un’immagine o un’icona.
A tal fine, è necessario installare e attivare il plugin Menu Image Icon. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.
Dopo l’attivazione, andare alla pagina Aspetto ” Menu e spostare il mouse sulla voce di menu in cui si desidera visualizzare un’icona o un’immagine.
Fare clic sul pulsante blu Immagine del menu per continuare.
Si aprirà una finestra a comparsa. Da qui è possibile scegliere un’immagine o un’icona da visualizzare con quella voce di menu.
Si può anche scegliere la posizione dell’immagine o dell’icona rispetto alla voce di menu. Ad esempio, è possibile visualizzare l’icona subito prima della voce di menu, come nel nostro esempio qui sotto, oppure nascondere il titolo del menu, in modo da visualizzare solo l’icona.
Non dimenticate di fare clic sul pulsante Salva modifiche per memorizzare le impostazioni. Ripetete la procedura se dovete aggiungere icone o immagini ad altre voci di menu.
Successivamente, è possibile visitare il sito web per vedere l’immagine o l’icona personalizzata in voci di menu specifiche.
Per istruzioni più dettagliate, consultate il nostro tutorial su come aggiungere immagini nei menu di WordPress.
3. Aggiungere i link di login/logout a un menu specifico di WordPress
Se si utilizza un plugin per l’iscrizione a WordPress o si gestisce un negozio online, si potrebbe voler consentire agli utenti di accedere facilmente ai loro account.
Per impostazione predefinita, WordPress non offre un modo semplice per visualizzare i collegamenti di login e logout nei menu di navigazione.
Vi mostreremo come aggiungerli utilizzando un plugin o uno snippet di codice.
1. Aggiungere link di login/logout ai menu utilizzando un plugin
Questo metodo è più semplice e consigliato a tutti gli utenti.
Innanzitutto, è necessario installare e attivare il plugin Login or Logout Menu Item. Successivamente, è necessario visitare la pagina Aspetto ” Menu e fare clic sulla scheda Login/Logout per espanderla.
Da qui, è necessario selezionare la voce ‘Log in|Log Out’ e fare clic sul pulsante Aggiungi al menu.
Non dimenticate di fare clic sul pulsante Salva menu per memorizzare le modifiche. Ora è possibile visitare il sito web per vedere in azione il link di accesso e uscita personalizzato.
Il link cambia dinamicamente in login o logout a seconda dello stato di accesso dell’utente.
Per saperne di più, consultate il nostro tutorial su come aggiungere link di login e logout nei menu di WordPress.
2. Aggiungere link di accesso/disconnessione utilizzando un codice personalizzato
Questo metodo richiede l’aggiunta di codice al vostro sito WordPress. Se non l’avete mai fatto prima, date un’occhiata alla nostra guida su come aggiungere codice personalizzato in WordPress.
Innanzitutto, è necessario scoprire il nome che il vostro tema WordPress utilizza per la posizione specifica del menu di navigazione.
Il modo più semplice per trovarlo è visitare la pagina Aspetto ” Menu e passare con il mouse all’area delle posizioni dei menu.
Fare clic con il pulsante destro del mouse per selezionare lo strumento Ispezione e vedere il nome della posizione nel codice sorgente sottostante. Ad esempio, il nostro tema demo utilizza primary, footer e top-bar-menu.
Si noti il nome utilizzato per la posizione di destinazione in cui si desidera visualizzare il link di login/logout.
Successivamente, è necessario aggiungere il seguente codice al file functions.php del tema o a un plugin specifico del sito.
add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
if (is_user_logged_in() && $args->theme_location == 'primary') {
$items .= '<li><a href="'. wp_logout_url() .'">Log Out</a></li>';
}
elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
$items .= '<li><a href="'. site_url('wp-login.php') .'">Log In</a></li>';
}
return $items;
}
Successivamente, è possibile visitare il proprio sito web e vedere il link di login e logout nel menu di navigazione.
Questo link dinamico passa automaticamente al login o al logout in base allo stato di accesso dell’utente.
4. Aggiunta di testo personalizzato al menu di navigazione di WordPress
E se si volesse aggiungere solo del testo e non un link al menu di navigazione?
Ci sono due modi per farlo.
1. Aggiungere testo personalizzato a un menu specifico (modo semplice)
Basta andare alla pagina Aspetto ” Menu e aggiungere un link personalizzato con il segno # come URL e il testo che si desidera visualizzare come testo del link.
Fare clic sul pulsante Aggiungi al menu per continuare.
WordPress aggiungerà il testo personalizzato come voce di menu nella colonna di sinistra. Ora, fate clic per espanderla ed eliminate il segno #.
Non dimenticate di fare clic sul pulsante Salva menu e di visualizzare l’anteprima del sito. Noterete che il testo personalizzato appare nel menu di navigazione.
Si tratta sempre di un link, ma fare clic su di esso non comporta nulla per l’utente.
2. Aggiungere testo personalizzato a un menu di navigazione usando il codice
Per questo metodo, aggiungerete uno snippet di codice al vostro sito web. Per prima cosa, è necessario scoprire il nome della posizione del tema, come descritto sopra nella sezione link di accesso/logout.
Successivamente, è necessario aggiungere il seguente codice al file functions.php del tema o a un plugin specifico del sito.
add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
if ( $args->theme_location == 'primary') {
$items .= '<li><a title="">Custom Text</a></li>';
}
return $items;
}
È sufficiente sostituire il punto in cui è scritto “Testo personalizzato” con il proprio testo.
Ora è possibile salvare le modifiche e visitare il sito web per vedere il testo personalizzato aggiunto alla fine del menu di navigazione.
Questo metodo di codice può essere utile se si desidera aggiungere programmaticamente elementi dinamici a un menu specifico di WordPress.
5. Aggiungere la data corrente nel menu di WordPress
Volete visualizzare la data corrente all’interno di un menu di navigazione in WordPress? Questo trucco è utile se gestite un blog aggiornato frequentemente o un sito web di notizie.
È sufficiente aggiungere il seguente codice al file functions.php del vostro tema o a un plugin specifico del sito.
add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
if( $args->theme_location == 'primary') {
$todaysdate = date('l jS F Y');
$items .= '<li><a>' . $todaysdate . '</a></li>';
}
return $items;
}
Non dimenticate di sostituire “primario” con la posizione del vostro menu.
Ora è possibile visitare il proprio sito web per vedere la data corrente nel menu di WordPress.
È anche possibile modificare il formato della data a proprio piacimento. Consultate il nostro tutorial su come cambiare il formato della data e dell’ora in WordPress.
6. Visualizzazione del nome utente nel menu di WordPress
Volete aggiungere un po’ di personalizzazione al vostro menu di navigazione? Nel menu di navigazione è possibile salutare gli utenti connessi con il loro nome.
Per prima cosa, è necessario aggiungere il seguente codice al file functions.php del vostro tema o a un plugin specifico del sito.
add_filter( 'wp_nav_menu_objects', 'username_in_menu_items' );
function username_in_menu_items( $menu_items ) {
foreach ( $menu_items as $menu_item ) {
if ( strpos($menu_item->title, '#profile_name#') !== false) {
if ( is_user_logged_in() ) {
$current_user = wp_get_current_user();
$user_public_name = $current_user->display_name;
$menu_item->title = str_replace("#profile_name#", " Hey, ". $user_public_name, $menu_item->title . "!");
} else {
$menu_item->title = str_replace("#profile_name#", " Welcome!", $menu_item->title . "!");
}
}
}
return $menu_items;
}
Questo codice controlla innanzitutto se è stata aggiunta una voce di menu con #nome_profilo# come testo di collegamento. Successivamente, sostituisce la voce di menu con il nome dell’utente connesso o con un saluto generico per gli utenti non connessi.
Successivamente, è necessario andare alla pagina Aspetto ” Menu e aggiungere un nuovo link personalizzato con il #nome_profilo# come testo del link.
Non dimenticate di fare clic sul pulsante Salva menu per memorizzare le modifiche. Dopodiché, potete visitare il vostro sito web per vedere il nome dell’utente connesso nel menu di WordPress.
7. Visualizzare dinamicamente i menu condizionali in WordPress
Finora abbiamo mostrato come aggiungere diversi tipi di voci personalizzate a specifici menu di WordPress. Tuttavia, a volte potrebbe essere necessario mostrare dinamicamente agli utenti voci di menu diverse.
Ad esempio, si potrebbe voler mostrare un menu solo agli utenti che hanno effettuato l’accesso. Un altro scenario è quello in cui si desidera che il menu cambi in base alla pagina che l’utente sta visualizzando.
Questo metodo consente di creare diversi menu e di visualizzarli solo quando si verificano determinate condizioni.
Per prima cosa, è necessario installare e attivare il plugin Conditional Menus. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.
Dopo l’attivazione, è necessario visitare la pagina Aspetto ” Menu. Da qui è necessario creare un nuovo menu che si desidera visualizzare. Ad esempio, in questo esempio abbiamo creato un nuovo menu per i soli utenti connessi.
Dopo aver creato il menu, passare alla scheda Gestione posizioni.
Da qui, è necessario fare clic sul link Menu condizionali accanto alla posizione del menu.
Successivamente, è necessario selezionare il menu creato in precedenza dal menu a discesa.
Quindi, fare clic sul pulsante “+ Condizioni” per continuare.
Si aprirà una finestra a comparsa.
Da qui è possibile selezionare le condizioni che devono essere soddisfatte per visualizzare il menu.
Il plugin offre una serie di condizioni tra cui scegliere. Ad esempio, è possibile mostrare il menu in base a pagine specifiche, categorie, tipi di post, tassonomie e altro ancora.
È anche possibile mostrare menu diversi in base ai ruoli degli utenti e allo stato di accesso. Ad esempio, è possibile mostrare un menu diverso ai membri esistenti in un sito web di iscrizione.
Speriamo che questo articolo vi abbia aiutato a capire come aggiungere elementi personalizzati a specifici menu di WordPress. Potreste anche voler consultare la nostra guida su come scegliere il miglior software di web design o il nostro confronto tra esperti dei migliori software di live chat per le piccole imprese.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Jiří Vaněk
I like the implementation of the search, where instead of the classic empty field, there is a popup window. It looks like a nice solution. I was also interested in the date and personalization of the logged in user. Thanks for the inspiration.
reza
very helpful and simple
thanks thanks thanks
WPBeginner Support
Glad our guide was helpful
Admin
Denis
Hello,
thanks a lot for that code. Is there a way to reorder the MENU? For example I want to have the Log in Log out button at first in the MENU. Just for an example.
Cheers,
Denis
WPBeginner Support
For the moment with this code, we do not have a simple method for reordering where the additions are placed compared to the menu items at the moment.
Admin
Ben Short
I’m sure this is too late for Denis! But in case anyone else wants their menu item to come FIRST in the list of menu items, rather than LAST, here’s an example of code I’ve used for this purpose:
add_filter( ‘wp_nav_menu_items’, ‘your_custom_menu_item’, 10, 2 );
function your_custom_menu_item ( $items, $args ) {
if (is_single() && $args->theme_location == ‘primary’) {
$oldItems = $items;
$items = ‘Show whatever’;
$items .= $oldItems;
}
return $items;
}
Karen
Is there a way to have an entry on your menu bar set to appear at a certain time and another item set to expire?
WPBeginner Support
Unless I hear otherwise, we do not have a recommended time based conditional display that we would recommend.
Admin
Mary
How to add in my secondary menu footer class li items in functions.php…?
Saurabh Saneja
Hi,
How can I add a search form at the beginning of the menu items list?
Thanks,
Saurabh
PS: big fan of your tuts
Igor
This is great. But would it be possible to add a menu within a menu?
I want to append a language menu to my primary menu.
I get the language menu on the page but not in the desired place.
instead of
Annemarie
Thank you for this! Just what I needed in a project.
Tasneem
I used the code for teh search box it works perfect.
Anuj
Nice article, Help me alot.
Garratt
Does this code still work? Not seeing anything on my menu, even just using the basic function with text. Not using any special type of menu, just ‘X’ & child theme.
Garratt
never-mind, sorry just read this: “Obviously, you need to have custom menu enabled in your themes before you can proceed any further.”
Garratt
OK so I was still having the problem even though my menu was custom, and messed around until I removed the condition. (IF), once I did that it displayed on all pages including homepage.
`add_filter( ‘wp_nav_menu_items’, ‘your_custom_menu_item’, 10, 2 );
function your_custom_menu_item ( $items, $args ) {
$items .= ‘Show whatever’;
return $items;
}
sahar
It worked but it destroyed responsivity…I had to remove code
Gerson
How add this menu item in first position ?
Gwen
Awesome, Thanks you just saved me hours.
Dilip
What is use of 10,2 in the code
WPBeginner Support
10 specifies the order in which the functions associated with a particular action are executed. Lower numbers correspond with earlier execution, and functions with the same priority are executed in the order in which they were added to the action.
2 is for the number of arguments the function accepts.
Admin
Pat
This is so useful and just what I needed! Thank you very much for sharing.
Matt
The Log-in link won’t show up, just the log out link. What could cause this?
Ritchie Pettauer
This is an awesome, straight-to-the point tutorial. I want an item with today’s date (“headlines | DATE”) in one of my menus.
I didn’t expect the first posting I found to solve my problem
thx guys.
Bill Gram-Reefer
works but (lol) for my situation I want to add “Search” to the primary header as if it were just another item that got checked in
appearance/menus/add-to-menu
Everything I’ve seen creates a whole new…what is it a div…(?)
that adds a whole new row to the header instead of p[lacing the form in the same row as ABOUT, etc. items in the primary navigation edit window.
AND take the css assigned to the navigation bar.
Josalone Wordsworth
I really liked the post, so useful. However lets say I want to add a login and logout link in the footer with and if condition
Hugo Callens
Related question: how to add a menu item based on a specific user role?
Say I have a custom user role called “Student” and I would like to add an item to the menu only when the user has the role of “Student”?
Monilal
Its works but current menu item not select
james
is there a way to add it on certain submenu instead of top ul?
Jonathan
I’d like to know the same thing. Anyone have an answer on how to add it in a certain submenu?
Gerrit
Thank you for the How To!
To be honest I don’t understand how you call the function.
Especially I am missing a mention what arguments you call the functions with i.e. what wp variables to hand over as $items and $args.
Could you please detail for a wp-beginner?
Thank you,
Gerrit
samuel
hey how if i want to add it to sub menu ?
lokitoki
hm any ideas how i could add html tags to just one wordpress menu item.
from this:
Contact
to this:
Contact
it should be only for one menu item. not to all
amit
the option is available on wp admin panel
lokitoki
hm any ideas how i could edit the tag for one wordpress menu item.
from this:
Contact
to this:
Contact
it should be only for one menu item. not to all
gonzela2006
Hello,
How can I add the following classes active and current-menu-item and the id menu-item-id ?
Lại Đình Cường
How about add new custom menu to specific position?
Guillermo
I want put a little image beside left to the menu home, how can put it?
please help me
Pierre Laflamme
In your examples, you add items to the primary menu (theme_location == ‘primary’).
How would I add an item in a specific menu in widget area? Where do I get the theme_location?
WPBeginner Support
theme locations are usually defined by your theme, check your theme’s functions.php file or the template where a menu is displayed.
Admin
Brad Trivers
If you want to target a specific menu (not a theme location) then use $args->menu->slug == ‘the_menu_slug’ instead of $args->theme_location == ‘primary’.
Xúlio Zé
Really useful!
Thank you vary much Brad
^-^
Peter Lalor
Hi Brad,
Would you be able to tell me how I find out what the value of ‘the_menu_slug’ is?
Thanks,
Peter
razvan
Hi! I used your tutorial to put a picture as a logo overlapping the menu bar. All is fine but this specific menu has a hover option that makes the color white… So when i hover the mouse on the logo, it also hovers the link which kind of ruins the aspect of the page.
This is my code:
if( $args->theme_location == ‘primary’ )
return ““.$items;
How can I hide the a href on the page and just display the image with link?
Thanks in advance
Kathy
Hi, I think your code is close to what I’m looking for, but I’m trying to figure out how i can customize it to do what I’m trying to do!
What I am trying to do is create a menu item with dropdown list of authors? any idea how i can accomplish that?
Thanks so much!
Erik Mitjans
Hi Kathy!
I was working on this since days and I finally got it working.
Take a look at: http://wordpress.org/support/topic/creating-a-dropdown-in-menu-that-lists-authors/page/2?replies=45#post-5103035
Also, take into consideration I’m adding extra classes and attributes cause the theme is Bootstrap based. You might not need all that.
Cheers!
Eric
sachi
awesome i was searching these codes
Brad
Thanks this was very helpfull,
However, out of curiosity, I can’t find this valuable filter hook: “‘wp_nav_menu_items” , I mean where in WP core files is this being called ??
Thanks much !!
WPBeginner Support
It is located in wp-includes/nav-menu.php, however it is not recommended to modify core files. It is a filter and you can call it in your theme’s
functions.phpfile or a site specific plugin.Admin
Lavinia
This isn’t work for me
Andor Nagy
How can I place it in front of the first menu item? Otherwise great tutorial!
Regards,
Andor Nagy
Editorial Staff
Use the return example of the search bar and move the items towards the end?
Admin
Cameron Jones
add_filter( ‘wp_nav_menu_items’, ‘your_custom_menu_item’, 10, 2 );
function your_custom_menu_item ( $items, $args ) {
$custom = ‘Show whatever’;
$items = $custom.$items;
return $items;
}
Murugu
Pardon my ignorance but which php file would I be editing?
Editorial Staff
This would go in your functions.php file.
Admin
Murugu
I added the following to my theme’s functions.php but the search box doesn’t show up like I would expect. Any suggestions?
add_filter(‘wp_nav_menu_items’,’add_search_box_to_menu’, 10, 2);
function add_search_box_to_menu( $items, $args ) {
if( $args->theme_location == ‘header_extras_inner’ )
return $items.””;
return $items;
}
Elliott Wall
Sorry to be coming into this discussion so late
I’ve tried the search form part and it works great— thank you! I’m having problems styling it though, for some reason. No matter what I do the placeholder text in the field is gray. I’ve looked at the cascading of the styles and messed with so many things— I can change the background color for example, but no luck in making the text black, so the design continuity of the menu is somewhat compromised. My site is http://elliottwall.com if you care to have a look. Cheers
Editorial Staff
For placeholder text, you have to do something like this:
::-webkit-input-placeholder { color: red; } :-moz-placeholder { /* Firefox 18- */ color: red; } ::-moz-placeholder { /* Firefox 19+ */ color: red; } :-ms-input-placeholder { color: red; }1-click Use in WordPress
Admin
Elliott Wall
This worked perfectly— thank you again!
Sam
Can we add custom link before the first item instead of at the end?
xafar Ali
Yes , just concatenate first instead of last.
$items = “MENU ITEM ” . $items;
piomat
beer!
SAcha
Hi,
very interesting!
I added a custom link, but is it possible to add it in a certain position inside the menu? Like “after the first menu item”.
Thanks
Editorial Staff
Not sure if that is possible.
Admin