Come aggiungere icone per i tipi di post personalizzati in WordPress

Volete scegliere nuove icone per i tipi di post personalizzati nella vostra dashboard di amministrazione?

Quando si accede al sito WordPress, nella barra laterale vengono visualizzate le voci relative ai post, alle pagine e a tutti i tipi di post personalizzati. Per impostazione predefinita, i tipi di post personalizzati utilizzano la stessa icona dei post e questo può essere difficile da classificare rapidamente.

In questo articolo vi mostreremo come aggiungere diverse icone per i tipi di post personalizzati in WordPress.

Perché aggiungere icone per i tipi di post personalizzati in WordPress?

Nella maggior parte dei casi, quando si lavora con il proprio sito WordPress si utilizza un post o una pagina. Tuttavia, è possibile utilizzare tipi di post personalizzati per creare altri tipi di contenuti. Ad esempio, WooCommerce utilizza un tipo di post personalizzato chiamato “Prodotto” per rifornire il vostro negozio.

Itipi di post personalizzati sono elencati nell’area di amministrazione di WordPress accanto ai post e alle pagine nel menu di sinistra. Ogni voce di menu in WordPress ha un’icona accanto, che proviene da un font di icone chiamato Dashicons.

Il problema è che tutti i tipi di post personalizzati utilizzano la stessa icona dei post. Quindi, se si hanno diversi tipi di post personalizzati, sarà più facile trovare quello giusto se tutti hanno icone diverse.

Detto questo, vediamo come aggiungere icone per i tipi di post personalizzati in WordPress. Ecco cosa tratteremo in questo tutorial:

• Aggiunta di icone per tipi di post personalizzati con un plugin
• Aggiungere manualmente le icone per i tipi di post personalizzati

Aggiunta di icone per i tipi di post personalizzati con un plugin

Se siete alle prime armi con la registrazione di tipi di post personalizzati o non avete familiarità con il codice, vi consigliamo di utilizzare il plugin Custom Post Type UI per creare tipi di post e tassonomie.

Creare un tipo di post personalizzato con un plugin

Per prima cosa, è necessario creare un tipo di post personalizzato. Se lo avete già fatto, potete passare alla sezione “Aggiungere un’icona a un tipo di post personalizzato con un plugin”.

Una volta installato e attivato il plugin, è necessario andare su CPT UI ” Add/Edit Post Types per creare un nuovo tipo di post personalizzato. Assicurarsi di essere nella scheda “Aggiungi un nuovo tipo di post”.

È necessario fornire uno slug per il tipo di post personalizzato, ad esempio “film”. Sotto di esso, si inseriscono i nomi plurali e singolari, come “libri” e “libro”.

Quindi, fare clic sul link “Popola etichette aggiuntive in base alle etichette scelte”. Questo riempirà automaticamente i campi delle etichette aggiuntive in basso e di solito vi farà risparmiare tempo.

In alternativa, è possibile aggiungere manualmente le etichette nella sezione “Etichette aggiuntive”.

Successivamente, è possibile scorrere la sezione Impostazioni e impostare diversi attributi per il tipo di post. Ogni opzione è accompagnata da una breve descrizione che ne spiega l’utilità.

Ad esempio, si può scegliere come ordinare il tipo di post e se renderlo gerarchico.

Sotto le impostazioni generali, si trova l’opzione per selezionare le funzioni di modifica supportate da questo tipo di post. È sufficiente selezionare le opzioni che si desidera includere.

Infine, fare clic sul pulsante “Aggiungi tipo di post” per salvare e creare il tipo di post personalizzato.

Per istruzioni più dettagliate su come creare un tipo di post personalizzato utilizzando la Custom Post Type UI, consultate il primo metodo della nostra guida su come creare un tipo di post personalizzato in WordPress.

Aggiunta di un’icona a un tipo di post personalizzato con un plugin

Una volta creato il tipo di post personalizzato, è possibile scegliere un’icona. Questo è semplice perché il plugin Custom Post Type UI supporta le dashicon per impostazione predefinita.

Per prima cosa, andare su CPT UI ” Aggiungi/Modifica tipi di post e fare clic sulla scheda “Modifica tipi di post” nella parte superiore della pagina. Assicurarsi che il tipo di post corretto sia selezionato dal menu a discesa.

Una volta fatto ciò, è sufficiente scorrere verso il basso fino a Impostazioni, vicino alla parte inferiore della stessa pagina, e individuare la sezione “Icona menu”.

Ora si dovrebbero vedere due opzioni per aggiungere un’icona al tipo di post personalizzato. Il pulsante “Scegli dashicon” consente di scegliere una qualsiasi dashicon, mentre “Scegli icona immagine” consente di caricare o scegliere un’icona dalla libreria multimediale.

Per questa esercitazione, faremo clic sul pulsante “Scegli dashicon”.

È ora possibile sfogliare centinaia di icone utilizzando le frecce nella parte superiore del popup.

È anche possibile cercare una Dashicon. Per questa esercitazione, cercheremo “libro”.

Vengono visualizzate quattro icone corrispondenti, due icone “Facebook” e due icone “Libro”. È sufficiente fare clic su quella che si desidera utilizzare.

La classe CSS dell’icona selezionata verrà inserita automaticamente nel campo “Icona menu”.

Assicuratevi di scorrere verso il basso e di fare clic sul pulsante “Salva tipo di post” per memorizzare le impostazioni.

Ora, tornate alla vostra dashboard di amministrazione e individuate il tipo di post personalizzato nella barra laterale sinistra.

Dovreste vedere la nuova icona accanto ai tipi di post nel menu.

Aggiungere manualmente le icone per i tipi di post personalizzati

Se avete creato i vostri tipi di post personalizzati manualmente con il codice, dovrete aggiungere le icone anche manualmente.

Innanzitutto, è necessario visitare il sito web di Dashicons per trovare l’icona che si desidera utilizzare per il tipo di post.

Per questa esercitazione, scorrere fino alla sezione “Varie” e fare clic sull’icona “libro”.

Verrà visualizzata una pagina con ulteriori informazioni sull’icona, come il nome della categoria e la classe CSS dell’icona. Ad esempio, nella schermata seguente, la categoria è “Varie” e la classe CSS è “dashicons-book”.

È necessario copiare la classe CSS negli appunti.

Ora è necessario aggiungere del codice nello stesso punto in cui è stato creato il tipo di post personalizzato. Potrebbe essere il file functions.php del vostro tema, oppure potreste aver usato un plugin di snippet di codice come WPCode.

Per vederlo in azione, lo snippet di codice qui sotto crea un tipo di post personalizzato chiamato “Libri” e aggiunge anche un’icona di menu aggiungendo una classe CSS Dashicons alla riga 45.

/*
* Creating a function to create our CPT
*/
  
function custom_post_type() {
  
// Set UI labels for Custom Post Type
    $labels = array(
        'name'                => _x( 'Books', 'Post Type General Name', 'twentytwentyone' ),
        'singular_name'       => _x( 'Book', 'Post Type Singular Name', 'twentytwentyone' ),
        'menu_name'           => __( 'Books', 'twentytwentyone' ),
        'parent_item_colon'   => __( 'Parent Book', 'twentytwentyone' ),
        'all_items'           => __( 'All Books', 'twentytwentyone' ),
        'view_item'           => __( 'View Book', 'twentytwentyone' ),
        'add_new_item'        => __( 'Add New Book', 'twentytwentyone' ),
        'add_new'             => __( 'Add New', 'twentytwentyone' ),
        'edit_item'           => __( 'Edit Book', 'twentytwentyone' ),
        'update_item'         => __( 'Update Book', 'twentytwentyone' ),
        'search_items'        => __( 'Search Book', 'twentytwentyone' ),
        'not_found'           => __( 'Not Found', 'twentytwentyone' ),
        'not_found_in_trash'  => __( 'Not found in Trash', 'twentytwentyone' ),
    );
      
// Set other options for Custom Post Type
      
    $args = array(
        'label'               => __( 'books', 'twentytwentyone' ),
        'description'         => __( 'Book reviews', 'twentytwentyone' ),
        'labels'              => $labels,
        // Features this CPT supports in Post Editor
        'supports'            => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'comments', 'revisions', 'custom-fields', ),
        // You can associate this CPT with a taxonomy or custom taxonomy. 
        'taxonomies'          => array( 'genres' ),
        /* A hierarchical CPT is like Pages and can have
        * Parent and child items. A non-hierarchical CPT
        * is like Posts.
        */
        'hierarchical'        => false,
        'public'              => true,
        'show_ui'             => true,
        'show_in_menu'        => true,
        'show_in_nav_menus'   => true,
        'show_in_admin_bar'   => true,
        'menu_position'       => 5,
        'menu_icon'           => 'dashicons-book',
        'can_export'          => true,
        'has_archive'         => true,
        'exclude_from_search' => false,
        'publicly_queryable'  => true,
        'capability_type'     => 'post',
        'show_in_rest' => true,
  
    );
      
    // Registering your Custom Post Type
    register_post_type( 'books', $args );
  
}
  
/* Hook into the 'init' action so that the function
* Containing our post type registration is not 
* unnecessarily executed. 
*/
  
add_action( 'init', 'custom_post_type', 0 );

Per personalizzare l’icona durante la registrazione di un tipo di post personalizzato utilizzando il codice sopra riportato, è sufficiente aggiungere uno dei seguenti snippet alla riga 45.

'menu_icon'           => 'dashicons-book',

In alternativa, è possibile aggiungere un’icona immagine alla Libreria multimediale e utilizzare l’URL dell’icona invece della classe CSS:

'menu_icon'           => 'http://www.example.com/wp-content/uploads/2022/08/your-cpt-icon.png',

Gli spazi in più in questi snippet sono intenzionali e faranno in modo che il codice si allinei perfettamente quando lo si incolla nel blocco di codice più grande sopra.

Ricordare che quando si utilizza questo codice, è necessario cambiare la classe CSS o l’URL dell’icona della dashicon.

Speriamo che questo tutorial vi abbia aiutato a capire come aggiungere icone per i tipi di post personalizzati in WordPress. Potreste anche voler imparare come mantenere il vostro sito web sicuro, oppure consultare il nostro elenco di errori comuni di WordPress e come risolverli.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.