Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come aggiungere collegamenti scorciati personalizzati alla barra degli strumenti di WordPress

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.

How to Add Custom Shortcut Links to WordPress Admin Toolbar

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:

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.

Visit Custom Admin Interface » Admin Toolbar to Configure the Plugin

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.

A New Item Is Added to the Top of the List

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”.

Add a Title to the New Custom Menu Item

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.

Add a Link to the New Custom Menu Item

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.

Drag and Drop the New Item to the Desired Location

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.

Implement the Menu Item for Everyone

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”.

Implement the New Menu Item for Everyone Except Subscribers and Contributors

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”.

Implement the New Menu Item Just for Yourself

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.

Preview of Custom Shortcut Link Added By Plugin

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.

Preview of a Single Custom Shortcut Link Added With Code

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.

Click 'Add New Snippet' in WPCode

Quindi, navigare fino all’opzione “Add-on codice personalizzato (nuovo snippet)” e fare clic sul pulsante “Usa snippet” sotto di essa.

Add custom code in WPCode with new snippet

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.

Paste code snippet into WPCode plugin

A questo punto, spostare l’interruttore da ‘Inattivo’ ad ‘Attivo’ e fare clic sul pulsante ‘Salva snippet’.

Activate and save code snippet WPCode

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.

Preview of a Group of Custom Shortcut Links Added With Code

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.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

20 commentiLascia una risposta

  1. 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

  2. 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

  3. 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

    • WPBeginner Support

      You’re welcome :)

      Admin

  4. 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

  5. Court

    This works great, my question is, how do you add a second parent menu item to this code?

  6. 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 );
    }

  7. Mel

    Thanks!! This helped me out a ton!

  8. Frederic

    Thanks! Very useful!

  9. 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()

  10. 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.

  11. 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.

  12. adolf witzeling

    I was looking for something like this. Thanks for sharing this awesome tip.

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.