La personalizzazione della Bacheca di WordPress può migliorare l’esperienza dell’utente. Un modo semplice per farlo è aggiungere o modificare le icone dell’amministratore.
Le icone personalizzate possono migliorare il flusso di lavoro e facilitare la navigazione dei nuovi utenti nell’area di amministrazione del sito. Inoltre, una Bacheca personalizzata è più piacevole da usare.
In questo articolo vi mostreremo come aggiungere o modificare le icone di amministrazione di WordPress. Vi guideremo passo dopo passo attraverso il processo. Alla fine, la vostra Bacheca di WordPress avrà un aspetto fresco e unico.
Cosa sono le icone dell’amministrazione in WordPress?
Le icone dell’amministrazione sono le piccole immagini che si vedono nel pannello di navigazione dell’area di amministrazione di WordPress. Appaiono accanto a ogni voce di menu.
Queste immagini utilizzano Dashicons, un font di icone creato per WordPress. È stato introdotto per la prima volta nel 2013 e da allora non è stato modificato.
Potreste voler dare all’area di amministrazione di WordPress un leggero rinnovamento modificando queste icone. Potete sostituire le icone esistenti con altre di vostro gradimento o addirittura con icone personalizzate.
Se state realizzando un sito web per clienti che non hanno familiarità con WordPress, l’uso di icone personalizzate può aiutarli a navigare più facilmente nella Bacheca.
Vediamo ora come modificare facilmente le icone degli amministratori. Vi mostreremo due modi per farlo e potrete scegliere quello più adatto a voi:
Metodo 1: Modificare le icone dell’amministrazione di WordPress utilizzando un plugin
Per questo metodo, utilizzeremo il plugin Admin Menu Editor. Come suggerisce il nome, consente di personalizzare facilmente i menu di amministrazione di WordPress.
Per prima cosa, è necessario installare e attivare il plugin Admin Menu Editor. Per maggiori dettagli, consultate il nostro tutorial su come installare un plugin di WordPress.
Dopo aver attivato il plugin, andare alla pagina Impostazioni ” Menu Editor. Qui, vedrete il vostro menu di amministrazione di WordPress all’interno di un’ordinata interfaccia utente (UI) che potrete personalizzare.
L’interfaccia utente ha una barra degli strumenti in alto, che permette di aggiungere o eliminare voci di menu, aggiungere separatori, copiare e incollare elementi e altro ancora.
In basso, è possibile fare clic su una voce di menu per espanderla e visualizzarne le impostazioni. In questo caso, abbiamo espanso la voce di menu Pubblica.
Quando si espande una voce di menu, vengono visualizzate altre opzioni. Se si tratta di un menu genitore, si vedranno anche le voci di menu figlio/bambino nella colonna di destra.
Per add-on, sostituire o eliminare un’icona di menu, cliccate sul link “Mostra opzioni avanzate” in basso.
A questo punto, fare clic sul pulsante accanto al campo “URL icona”.
Verrà visualizzata una finestra a comparsa con tutte le Dashicon disponibili. In alternativa, è possibile cliccare sul pulsante “Libreria dei media” per caricare la propria icona.
Se si desidera caricare una propria icona, si consiglia di utilizzare un’immagine 32×32, preferibilmente in formato PNG trasparente.
Dopo aver scelto l’icona, cliccare sul pulsante “Salva modifiche” per memorizzare le impostazioni.
Ora si vedrà l’icona del menu personalizzato utilizzata nel menu di amministrazione.
Metodo 2: modificare manualmente le icone del menu Admin con uno snippet di codice
Il metodo successivo richiede l’aggiunta di codice personalizzato per modificare le icone.
Se non l’avete mai fatto prima, vi consigliamo di dare una rapida occhiata al nostro tutorial sull’aggiunta di codice personalizzato in WordPress.
Il modo più semplice e sicuro per aggiungere codice personalizzato in WordPress è utilizzare WPCode. È il miglior plugin per gli snippet di codice di WordPress. Permette di aggiungere in modo sicuro codice personalizzato, CSS e HTML al vostro sito WordPress senza rompere accidentalmente nulla.
Nota: il plugin dispone anche di una versione gratuita, chiamata WPCode Lite, che consente di svolgere il lavoro. Tuttavia, la versione pro offre caratteristiche aggiuntive che potrebbero essere utili.
Esempio 1. Sostituzione di un’icona utilizzando le Dashicon predefinite
In questo esempio, utilizzeremo le Dashicons predefinite per sostituire un’icona dell’impostazione esistente.
Importa notare che WordPress carica già le Dashicon, che sono altamente ottimizzate per le prestazioni. Pertanto, il loro utilizzo non influisce sulla velocità di caricamento della pagina.
Detto questo, prima di eseguire il codice, è necessario notare quanto segue:
- L’URL della voce di menu che si vuole modificare
- Il nome dell’icona che si desidera utilizzare
Innanzitutto, è necessario trovare l’URL della pagina relativa alla voce di menu che si desidera personalizzare. Per esempio, supponiamo di voler cambiare l’icona del menu “Pubblica”.
Spostate il mouse sul menu Pubblica e vedrete l’URL a cui si collega nella barra di stato del browser in fondo alla pagina. È sufficiente la parte finale dell’URL, che in questo caso è edit.php.
Quindi, accedere al sito web di Dashicons e fare clic sull’icona che si desidera utilizzare.
Facendo clic su un’icona, il nome e lo slug vengono visualizzati in alto. A questo punto, è necessario copiare lo slug, che servirà nella fase successiva.
Una volta fatto questo, andare alla pagina Code Snippets ” + Add Snippet e passare il mouse al passaggio del mouse sulla casella “Add Your Custom Code (New Snippet)”.
Quindi, è sufficiente cliccare sul pulsante “+ Add-on Personalizza” che appare.
Nella schermata successiva, indicare un titolo per lo snippet e selezionare PHP Snippet nell’opzione Tipo di codice.
A questo punto, è possibile copiare e incollare il seguente codice nell’editor del codice:
function change_post_menu_icon() {
global $menu;
// Loop through the menu items
foreach ($menu as $key => $menu_item) {
// Find the "Posts" menu item (default URL is 'edit.php')
if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {
// Change the icon to a different Dashicon class
$menu[$key][6] = 'dashicons-format-aside'; // Change this to your preferred Dashicon slug
}
}
}
add_action('admin_menu', 'change_post_menu_icon');
Non dimenticate di cambiare dashicons-format-aside con lo slug copiato in precedenza.
Il codice apparirà così nell’editor del codice:
Successivamente, è necessario indicare a WordPress dove eseguire il codice.
Le icone del menu amministratore appaiono nell’area di amministrazione di WordPress. Nella stessa pagina, scorrere fino alla sezione Inserimento e selezionare “Solo amministratori” sotto l’opzione Posizione.
Infine, passare lo snippet ad Attivo e fare clic sul pulsante ‘Salva snippet’ per salvare le modifiche.
WordPress inizierà a utilizzare l’icona selezionata per la pagina Pubblica.
Esempio 2. Utilizzo dell’icona Font Awesome per una voce di menu nell’area amministrativa di WordPress
La libreria predefinita di Dashicon ha un insieme limitato di icone. La buona notizia è che si può usare una libreria di font e icone come Font Awesome, che ha un set di icone molto più ampio.
Tuttavia, questo significa che dovrete caricare Font Awesome, il che potrebbe rallentare leggermente l’area di amministrazione di WordPress (solo pochi millisecondi).
Prima di aggiungere qualsiasi codice, è necessario trovare l’icona che si desidera utilizzare. Andate sul sito web di Font Awesome e passate alla Libreria gratuita.
Vedrete tutte le icone disponibili gratuitamente.
Facendo clic sull’icona che si desidera utilizzare, questa si aprirà in un popup. Da qui, è necessario copiare il valore Unicode dell’icona.
Dopodiché, andare alla pagina Code Snippets ” + Add Snippet nella vostra dashboard di WordPress.
Fare clic sul pulsante “+ Aggiungi snippet personalizzato” nel riquadro “Aggiungi il tuo codice personalizzato (nuovo snippet)”.
Nella schermata successiva, indicare un titolo per lo snippet e selezionare PHP Snippet come opzione Tipo di codice.
A questo punto, è possibile copiare e incollare il seguente codice nell’editor del codice:
// Enqueue Font Awesome in the admin area
function enqueue_font_awesome() {
wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
}
add_action('admin_enqueue_scripts', 'enqueue_font_awesome');
// Add custom class to the Posts menu item
function add_custom_post_menu_class() {
global $menu;
foreach ($menu as $key => $menu_item) {
if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {
$menu[$key][4] .= ' custom-post-menu-class';
}
}
}
add_action('admin_menu', 'add_custom_post_menu_class');
// Add custom CSS to change the icon to a Font Awesome icon
function custom_admin_menu_icon() {
echo '<style>
.custom-post-menu-class .wp-menu-image:before {
font-family: "Font Awesome 5 Free" !important;
content: "\f015"; /* Unicode for the Font Awesome icon */
font-weight: 900; /* Needed for solid icons */
}
</style>';
}
add_action('admin_head', 'custom_admin_menu_icon');
Non dimenticate di sostituire \f015 con il valore Unicode copiato in precedenza.
Il codice apparirà così nell’editor del codice:
Successivamente, è necessario indicare a WordPress dove eseguire il codice.
Le icone del menu Admin appaiono all’interno dell’area di amministrazione di WordPress, quindi è possibile scorrere fino alla sezione Inserimento e selezionare “Solo per amministratori” come opzione di localizzazione.
Infine, passare lo snippet ad Attivo e fare clic sul pulsante ‘Salva snippet’ per salvare le modifiche.
WordPress inizierà a utilizzare l’icona selezionata per la pagina Pubblica.
Bonus: aggiungere icone per i post type personalizzati in WordPress
I post type / tipi di contenuto personalizzati consentono di creare contenuti unici per il vostro sito web WordPress. Non si tratta di post o pagine predefinite, ma di qualcosa di totalmente originale per il vostro sito.
Se state utilizzando un post type personalizzato sul vostro sito web WordPress, potreste voler cambiare la sua icona in modo da poterla identificare facilmente.
In questo caso, date un’occhiata al nostro tutorial dettagliato sull’argomento, che mostra diversi modi per modificare o aggiungere icone per i vostri post type personalizzati.
Speriamo che questo articolo vi abbia aiutato a modificare o aggiungere le icone di amministrazione in WordPress. Potreste anche voler selezionare come etichettare la dashboard di amministrazione di WordPress o visualizzare questi consigli degli esperti sulla personalizzazione dell’area di amministrazione di WordPress per migliorare i flussi di lavoro.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Avete una domanda o un suggerimento? Lasciate un commento per avviare la discussione.