Volete personalizzare la barra degli strumenti di amministrazione di WordPress?
La barra di amministrazione contiene comodi colleghi ad alcune delle pagine di amministrazione più utilizzate. Tuttavia, è possibile aggiungere scorciatoie personali alle pagine più utilizzate per l’elaborazione in corso del sito.
In questo articolo vi mostreremo come aggiungere collegamenti scorciati personalizzati alla barra degli strumenti dell’amministrazione di WordPress.
Perché aggiungere collegamenti personalizzati alla barra degli strumenti dell’amministrazione di WordPress?
Ogni volta che si accede al proprio sito web WordPress, si noterà una barra degli strumenti in alto sullo schermo. Si tratta della barra degli strumenti di amministrazione di WordPress o barra di amministrazione.
Ci sono alcuni modi per prendere il controllo della barra di amministrazione di WordPress, ad esempio disattivandola quando si visualizza il sito e disabilitandola per tutti gli utenti tranne gli amministratori.
Per impostazione predefinita, la barra degli strumenti visualizza una serie di colleghi a specifici schermi dell’area amministrativa che si trovano sulla barra laterale dell’amministratore. Questi colleghi consentono di eseguire rapidamente le operazioni di amministrazione più comuni.
Ma ognuno ha un proprio elenco di colleghi preferiti che visita spesso quando scrive articoli o elabora in corso d’opera il proprio sito. Può trattarsi di pagine dell’area di amministrazione o di colleghi a risorse, servizi o siti web esterni.
È possibile aggiungerli alla barra degli strumenti di WordPress come collegamenti scorciati personalizzati. In questo modo, voi e i vostri utenti potrete accedervi facilmente dal vostro sito web o dall’area di amministrazione. Questo è particolarmente utile se gestite un sito web molto frequentato con più autori.
Detto questo, vediamo come aggiungere collegamenti scorciati personalizzati alla barra degli strumenti dell’amministrazione di WordPress. Copriamo tre metodi:
Aggiunta di collegamenti scorciati personalizzati alla barra degli strumenti con un plugin
La prima cosa da fare è installare e attivare il plugin WP Custom Admin Interface. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.
Dopo l’attivazione, è necessario visitare la pagina Custom Admin Interface ” Admin Toolbar per configurare il plugin. Questa pagina visualizza tutto ciò che appare sulla barra degli strumenti e consente di aggiungere nuovi elementi.
Per aggiungere uno scorciatoio personalizzato alla barra degli strumenti dell’amministratore, è necessario fare clic sul pulsante “+ Aggiungi voce di menu”, in alto sullo schermo.
Un nuovo elemento viene aggiunto in alto all’elenco e contiene due campi.
Uno è per il titolo dell’elemento e l’altro per il collega.
Per aggiungere un titolo, è necessario fare clic sull’elemento del blocco note per mettere il campo del titolo in modalità di modifica. È quindi possibile digitare il titolo e fare clic sull’icona del segno di spunta per memorizzarlo.
Per questa esercitazione, digiteremo “Widget”.
Allo stesso modo, per aggiungere un link è necessario fare clic sull’icona del link e poi digitare il collega. Una volta terminato, si può fare clic sull’icona del segno di spunta per salvare il collega.
Per questa esercitazione, incolleremo il collega alla pagina dei widget. Dovrebbe avere l’aspetto di http://example.com/wp-admin/widgets.php.
Non dimenticate di sostituire “example.com” con il vostro dominio.
Assicuratevi di cambiare “example.com” con il vostro dominio e non dimenticate di fare clic sull’icona del segno di spunta per memorizzare il collega.
Poiché il nuovo elemento si trova in alto nell’elenco, verrà aggiunto al lato sinistro della barra degli strumenti dell’amministratore. Per spostarlo più a destra, è necessario spostare l’elemento più in basso nell’elenco, trascina e rilascia.
Si desidera aggiungere più di un collegamento scorciatoia personalizzato? In tal caso, è sufficiente ripetere gli stessi passaggi per creare un altro elemento.
Se si commette un errore durante la personalizzazione della barra di amministrazione, si può fare clic sul pulsante “Ripristina la barra degli strumenti di WordPress predefinita” in alto per rimuovere tutti i personalizzati, oppure sul pulsante “Ripristina l’ultimo salvataggio” per rimuovere tutte le modifiche apportate dall’ultimo salvataggio.
Infine, è necessario scorrere fino alla fine della pagina. Qui si può decidere quali ruoli utente possono vedere il nuovo elemento e salvare le impostazioni.
Se si desidera che tutti gli utenti connessi vedano il nuovo collegamento, è necessario selezionare “Tutti” dal menu a discesa, in modo che l’impostazione sia “Implementa questo per tutti tranne”. Se non si aggiungono eccezioni, tutti gli utenti potranno vedere l’elemento.
Tuttavia, se non si vuole che gli utenti con il ruolo di Sottoscrittore o di Collaboratore vedano l’elemento, è necessario selezionare questi ruoli come eccezioni.
Per prima cosa fate clic sul collega “+ Aggiungi un caso di eccezione”. Si visualizza un menu a discesa in cui è possibile selezionare “Ruolo: Abbonato”. Successivamente, fare clic sull’icona + e aggiungere il “Ruolo: abbonato”: Collaboratore”.
Un altro esempio è se si vuole che il collega sia visibile solo a se stessi o a un singolo utente.
In questo caso, scegliete le opzioni dai menu a discesa in modo che l’impostazione sia “Implement this for No-one except User: Person’s Name”.
Avete quasi finito. Se si preferisce non visualizzare il collegamento personalizzato quando si visualizza il sito web, assicurarsi di fare clic anche sull’etichetta “Disabilita la barra degli strumenti personalizzata sul frontend”.
Una volta terminata la configurazione della barra degli strumenti dell’amministratore, non dimenticate di fare clic sul pulsante “Salva tutte le impostazioni”.
Una volta ricaricata la pagina o fatto clic su un’altra pagina nella barra laterale dell’amministrazione, sarà possibile vedere il collegamento allo shortcode personalizzato.
Aggiunta di un singolo collegamento scorciatoia personalizzato alla barra degli strumenti con il codice
Ecco un altro modo per aggiungere un collega personalizzato alla barra degli strumenti di WordPress. Questo metodo è destinato a coloro che si trovano a proprio agio nel copiare gli snippet di codice in WordPress.
È necessario copiare e incollare il seguente codice nel file functions.php del tema, in un plugin specifico del sito o in un plugin di snippets di codice.
// add a link to the WP Toolbar
function custom_toolbar_link($wp_admin_bar) {
$args = array(
'id' => 'wpbeginner',
'title' => 'Search WPBeginner',
'href' => 'https://www.google.com:443/cse/publicurl?cx=014650714884974928014:oga60h37xim',
'meta' => array(
'class' => 'wpbeginner',
'title' => 'Search WPBeginner Tutorials'
)
);
$wp_admin_bar->add_node($args);
}
add_action('admin_bar_menu', 'custom_toolbar_link', 999);
Questo codice di esempio aggiunge un collega a un motore di ricerca personalizzato di Google che cercherà i tutorial di WordPress su WPBeginner. Utilizza la funzione add_node
con gli argomenti descritti nell’array.
È necessario sostituire gli elementi id, title, href e meta con i valori del proprio collegamento personalizzato.
Si consiglia di aggiungere questo codice in WordPress con WPCode. È il miglior plugin per gli snippet di codice che consente di aggiungere facilmente codice personalizzato senza modificare il file functions.php del tema. In questo modo, non dovrete preoccuparvi di rompere il vostro sito.
Per iniziare, è necessario installare e attivare il plugin gratuito WPCode. Per istruzioni dettagliate, consultare questa guida su come installare un plugin di WordPress.
Una volta attivato il plugin, nella dashboard di WordPress verrà aggiunta una nuova voce di menu con l’etichetta “Code Snippets”. Facendo clic su di essa, verrà visualizzato un elenco di tutti i frammenti di codice personalizzati salvati sul sito. Poiché il plugin è stato appena installato, l’elenco sarà vuoto.
Da qui, fare clic sul pulsante “Add New” per aggiungere il primo frammento di codice.
Quindi, navigare fino all’opzione “Add-on codice personalizzato (nuovo snippet)” e fare clic sul pulsante “Usa snippet” sotto di essa.
Nella pagina “Crea snippet personalizzato”, si può iniziare aggiungendo un titolo per il proprio snippet. Può essere qualsiasi cosa che aiuti a ricordare a cosa serve lo snippet.
Quindi, è sufficiente incollare il codice di cui sopra nella casella “Anteprima codice” e selezionare “PHP Snippet” come tipo di codice dal menu a discesa.
A questo punto, spostare l’interruttore da ‘Inattivo’ ad ‘Attivo’ e fare clic sul pulsante ‘Salva snippet’.
Aggiunta di un gruppo di collegamenti scorciati personalizzati alla barra degli strumenti con il codice
L’ultimo metodo ha mostrato come aggiungere un collegamento personalizzato alla barra degli strumenti usando il codice. Ma cosa succede se si vuole creare un menu personalizzato con una manciata di scorciatoie?
A tale scopo, è possibile raggruppare più scorciatoie sotto un unico elemento genitore. I nodi figli/bambino sotto il collegamento genitore appariranno quando l’utente passerà il mouse sul collegamento genitore.
Ecco un esempio di come aggiungere un gruppo di collegamenti personalizzati nella barra degli strumenti di WordPress. Come per il metodo precedente, dovete copiare e incollare questo frammento di codice nel file functions.php del vostro tema, in un plugin specifico per il sito o in un plugin di frammenti di codice come WPCode.
/*
* add a group of links under a parent link
*/
// Add a parent shortcut link
function custom_toolbar_link($wp_admin_bar) {
$args = array(
'id' => 'wpbeginner',
'title' => 'WPBeginner',
'href' => 'https://www.wpbeginner.com',
'meta' => array(
'class' => 'wpbeginner',
'title' => 'Visit WPBeginner'
)
);
$wp_admin_bar->add_node($args);
// Add the first child link
$args = array(
'id' => 'wpbeginner-guides',
'title' => 'WPBeginner Guides',
'href' => 'https://www.wpbeginner.com/category/beginners-guide/',
'parent' => 'wpbeginner',
'meta' => array(
'class' => 'wpbeginner-guides',
'title' => 'Visit WordPress Beginner Guides'
)
);
$wp_admin_bar->add_node($args);
// Add another child link
$args = array(
'id' => 'wpbeginner-tutorials',
'title' => 'WPBeginner Tutorials',
'href' => 'https://www.wpbeginner.com/category/wp-tutorials/',
'parent' => 'wpbeginner',
'meta' => array(
'class' => 'wpbeginner-tutorials',
'title' => 'Visit WPBeginner Tutorials'
)
);
$wp_admin_bar->add_node($args);
// Add a child link to the child link
$args = array(
'id' => 'wpbeginner-themes',
'title' => 'WPBeginner Themes',
'href' => 'https://www.wpbeginner.com/category/wp-themes/',
'parent' => 'wpbeginner-tutorials',
'meta' => array(
'class' => 'wpbeginner-themes',
'title' => 'Visit WordPress Themes Tutorials on WPBeginner'
)
);
$wp_admin_bar->add_node($args);
}
add_action('admin_bar_menu', 'custom_toolbar_link', 999);
In questo esempio di codice, abbiamo prima aggiunto un collega personalizzato di scorciatoia. Poi, abbiamo aggiunto un secondo collegamento personalizzato e lo abbiamo reso figlio/bambino del primo. Abbiamo aggiunto l’ID del collega aggiungendo l’argomento 'parent' => 'wpBeginner'
.
Abbiamo ripetuto questa operazione per aggiungere un altro collega sotto lo stesso genitore. Abbiamo anche usato un figlio/bambino come genitore per mostrare come aggiungere sottovoci a una sottovoce di menu personalizzato.
Speriamo che questo tutorial vi abbia aiutato a imparare come aggiungere collegamenti personalizzati alla barra degli strumenti dell’amministrazione di WordPress. Potreste anche voler imparare come creare flussi di lavoro automatizzati in WordPress, oppure selezionare il nostro elenco dei migliori plugin e strumenti SEO per far crescere il vostro sito.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Rick Rottman
Thanks for posting this!
I’ve always wanted a direct link in the admin bar to my Simple CSS screen. Thanks to this tutorial, I have one.
WPBeginner Support
Glad to hear our guide was helpful!
Admin
Edward Bonthrone
Hi all..
This is all working great for PC view – but the custom toolbar item icons/menus disappear when viewing on mobile with responsive theme.
I have seen this question asked many times but no examples of code I can insert as a test that works on both PC and mobile view?
Anyone give me a menu snippet that will stay visible on mobile phone?
Thanks
WPBeginner Support
Your CSS would be hiding it for your mobile view, if you would like this to appear on mobile you would need to add the following CSS for our examples.
#wpadminbar li#wp-admin-bar-wpbeginner {
display: block;
}
For your own shortcut links, you would change the -wpbeginner to the ID of your widget, as an example: -yourid
Admin
dan
Why this code is not work for mobile view?
WPBeginner Support
You may want to try disabling your other plugins to ensure there isn’t a plugin that is overriding the default bar on mobile.
Admin
Tayyab Roy
Thanks.
WPBeginner Support
You’re welcome
Admin
Mohammad Kashif
Hi
How can i add tool bar user menu in theme navigation?
And why i don’t receive email notification when i got reply? While i select (Replies to my comments).
Thanks
WPBeginner Support
Hi Kashif,
We are not sure which toolbar user menu you want to add. Please see our guide on how to add navigation menus in WordPress may be that would help.
Admin
Court
This works great, my question is, how do you add a second parent menu item to this code?
Small Details
I don’t know if this is recommended but I was looking for a ‘new window’ solution (see Yassin’s comment). It didn’t work by itself but works fine when combined with ‘meta’:
add_action( ‘admin_bar_menu’, ‘toolbar_link_to_mypage’, 999 );
function toolbar_link_to_mypage( $wp_admin_bar ) {
$args = array(
‘id’ => ‘my_page’,
‘title’ => ‘PRODUCT MANAGEMENT’,
‘href’ => ‘http://www.mexample.com’,
‘meta’ => array( ‘class’ => ‘my-toolbar-page’, ‘target’ => ‘_blank’ )
);
$wp_admin_bar->add_node( $args );
}
Mel
Thanks!! This helped me out a ton!
Frederic
Thanks! Very useful!
Yassin
Great tip
How can we make these custom links open in new tab ?
I try to add ‘target’ => ‘_blank’ but didn’t work
Henry E.
To add a ‘target’ => ‘_blank’ you have to add it to the ‘meta’ => array()
Gary Cook
This is awesome. Thanks. Although, I have added several custom menus and I want to center them all in a group using CSS, if possible? Please.
Marc
Is it possible to add a icon?
Rosendo Cuyasen
Cool! I think this is a cool feature for Wordpress if you’re going to use this toolbar above your web pages. Thanks for sharing.
adolf witzeling
I was looking for something like this. Thanks for sharing this awesome tip.