Aggiungere stili CSS personalizzati nell’area admin di WordPress

css admin wordpress

Aggiungere i propri stili CSS all’interno di un tema oppure modificare quelli esistenti è una pratica abbastanza comune, ma fare la stessa cosa all’interno del pannello admin può risultare un po’ più artificioso se non si conosce la giusta procedura.

Ecco come fare seguendo due semplici passaggi.

1. Creare il proprio foglio di stile CSS

Per prima cosa dobbiamo creare il nostro foglio si stile in cui inserire tutte le regole CSS che vogliamo applicare all’area admin.

In teoria, potresti piazzare il file .css in qualsiasi punto del sito. Molti lo inseriscono all’interno di una delle cartelle del tema, ma io preferisco di gran lunga fare uso del Child Theme. Installando il file nella cartella del tema o in qualsiasi altro punto, infatti, rischi di perderlo e dover rifare tutto da capo dopo un aggiornamento dei plugin o del tema stesso.
Se non sai cosa sia un Child Theme o vuoi saperne comunque di più, scopri come ricevere gratuitamente un ebook in cui ti spiego come installarne uno e come utilizzarlo al meglio, contattandomi attraverso questo contact form.

Ipotizziamo quindi di aver chiamato il file “style-admin.css” e averlo installato all’interno della cartella:

/wp-content/themes/mio-tema-child/admin-css

Per prima cosa prepariamo le dichiarazioni degli stili all’interno del file. Ad esempio, supponiamo che tu debba eliminare una colonna dalla tabella con la lista degli articoli (una volta mi è stata fatta una richiesta molto simile da un cliente), per esempio la colonna “categorie” dalla pagina admin “Articoli / Tutti gli articoli”:

Il file CSS potrebbe avere un aspetto di questo tipo:

.wp-list-table.posts th.manage-column.column-categories,
.wp-list-table.posts td.categories.column-categories {
    display: none;
}

2. Caricare il file CSS all’interno di WordPress

A questo punto possiamo sfruttare l’hook “admin_enqueue_scripts” per integrare correttamente il file CSS all’interno dell’area admin.

Andiamo nel file functions.php del nostro Child Theme, e inseriamo il seguente codice:

function admin_css_load() {
  wp_enqueue_style('style-admin-css', get_stylesheet_directory_uri().'/admin-css/style-admin.css');
}
add_action('admin_enqueue_scripts', 'admin_css_load');

Dove “get_stylesheet_directory_uri()” è un template tag di WordPress che restituisce il percorso della cartella del vostro Child Theme e può essere eventualmente sostituito con altri template tags o altri percorsi a seconda di dove decidi di installare il tuo file CSS.

Come sempre, se ti è piaciuto questo articolo, ti invito a mettere un like sulla mia pagina facebook oppure condividerlo sui social. Se invece hai qualche problema con la procedura appena descritta, lascia un commento oppure contattami attraverso questo contact form.

1 commento
  1. Simone Longato
    Simone Longato dice:

    Ciao Grazie della guida Massimiliano De Stefano, è stata molto utile.
    Posso chiederti dove è possibile vedere gli altri template tag in modo da non inserire nella cartella del tema (get_stylesheet_directory_uri()) ?
    Grazie e buon lavoro

    Rispondi

Lascia un Commento

Vuoi partecipare alla discussione?
Sentitevi liberi di contribuire!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *