Come aggiungere icone per i tipi di post personalizzati in WordPress

Per impostazione predefinita, i post type personalizzati hanno tutti lo stesso aspetto, il che può creare confusione. Le icone uniche possono aiutare a identificare rapidamente i diversi tipi di contenuto.

Inoltre, avere le giuste icone per i post type personalizzati può fare un’enorme differenza nella navigazione della dashboard di amministrazione di WordPress. Quando vi accedete, vedrete le voci relative a post, pagine e tipi di contenuto personalizzati nella barra laterale.

In questo articolo vi spiegheremo come aggiungere diverse icone per i vostri post type personalizzati.

Perché aggiungere icone per i post type personalizzati in WordPress?

Di solito si usa una pagina o un post quando si elabora in corso d’opera con il sito web WordPress. Tuttavia, è possibile creare altri tipi di contenuto utilizzando post type / tipi di contenuto personalizzati.

Ad esempio, WooCommerce utilizza un post type personalizzato chiamato ‘Prodotto’ per rifornire il negozio.

Itipi di contenuto 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 contenuto personalizzati utilizzano la stessa icona dei post. Quindi, se si hanno diversi post type personalizzati, sarà più facile trovare quello giusto se tutti hanno icone diverse.

Per questo motivo, vi mostreremo come aggiungere icone per i post type / tipo di contenuto in WordPress. Ecco cosa copriremo in questo tutorial:

• Aggiunta di icone per i post type / tipo di contenuto con un plugin
• Aggiunta manuale delle icone per i post type / tipo di contenuto personalizzati

Pronti? Iniziamo.

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

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

Creare un tipo di post personalizzato con un plugin

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

Una volta installato e attivato il plugin, navigare in CPT UI ” Add/Edit Post Types per creare un nuovo post type personalizzato. Assicurarsi quindi di trovarsi sulla scheda “Add New Post Type”.

È quindi necessario fornire uno slug per il post type personalizzato, ad esempio “film”. Di seguito, si inseriscono i nomi plurali e singolari, come “libri” e “libro”.

Dopodiché, si dovrà fare clic sul link “Popola etichette aggiuntive in base alle etichette scelte”. Questo riempirà automaticamente i campi delle etichette aggiuntive sottostanti e di solito salva il tempo.

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

Scorriamo giù fino alla sezione “Impostazioni” e impostiamo diversi attributi per il post type. Ogni opzione ha una breve descrizione che ne spiega la funzione.

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

Sotto le impostazioni generali, sono presenti opzioni per selezionare le caratteristiche di modifica supportate da questo post type. È sufficiente selezionare le opzioni che si desidera includere.

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

Per istruzioni più dettagliate sulla creazione di un tipo di post personalizzato utilizzando la Custom Post Type UI, si consiglia di consultare 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 post type personalizzato, è il momento di scegliere un’icona. Questo passo è facile, perché il plugin Custom Post Type UI supporta le dashicon in modo predefinito.

Per prima cosa, occorre andare su CPT UI ” Aggiungi/Modifica post type e fare clic sulla scheda “Modifica post type” in alto nella pagina. Da qui, assicuratevi che il post type corretto sia selezionato dal menu a discesa.

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

Ora si dovrebbero vedere due opzioni per aggiungere un’icona al post type personalizzato.

Il pulsante “Scegli dashicon” consente di scegliere qualsiasi dashicon, mentre “Scegli icona” permette di caricare o scegliere un’icona dalla libreria dei media.

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

È ora possibile sfogliare centinaia di icone utilizzando le frecce in alto nel popup. Inoltre, è possibile cercare una Dashicon.

Per questa esercitazione, cercheremo “libro”.

Abbiamo poi trovato 4 icone di corrispondenza, 2 icone “Facebook” e 2 icone “Libro”. È sufficiente fare clic su quella che si desidera utilizzare.

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

Quindi, scorrere verso il basso e fare clic sul pulsante “Salva post type” per memorizzare le impostazioni.

Da qui, si può tornare alla propria dashboard di amministrazione e individuare il post type personalizzato nella barra laterale di sinistra.

Dovreste vedere la nuova icona accanto ai post type / tipo di contenuto nel menu.

Aggiungere manualmente le icone per i tipi di post personalizzati

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

Per prima cosa, visitiamo il sito web di Dashicons per trovare l’icona che vogliamo utilizzare per il nostro post type.

Per questa esercitazione, scorreremo giù fino alla sezione “Varie” e faremo clic sull’icona “libro”.

Si arriva quindi a una pagina con ulteriori informazioni sull’icona, come il nome della categoria e la classe CSS dell’icona.

Ad esempio, nello screenshot seguente, la categoria è “Varie” e la classe CSS è “dashicons-book”.

Copiamo la classe CSS negli appunti.

A questo punto, è necessario aggiungere del codice nel punto in cui è stato creato il post type personalizzato. Potrebbe essere il file functions.php del tema, oppure si potrebbe aver usato un plugin per gli snippet di codice, come WPCode.

Per vederlo in azione, lo snippet di codice qui sotto crea un post type personalizzato chiamato “Libri” e aggiunge anche un’icona al menu, aggiungendo una classe CSS Dashicons sulla 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 post type 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 alla propria ‘Libreria dei media’ 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 assicurano 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 cambiarlo con la propria classe CSS Dashicon o con l’URL dell’icona.

Ecco fatto!

Speriamo che questo tutorial vi abbia aiutato a imparare come aggiungere icone per i post type / tipi di contenuto personalizzati in WordPress. In seguito, potreste anche dare un’occhiata alle nostre guide su come includere i post type personalizzati nei risultati della ricerca di WordPress e su come cambiare/convertire i post type personalizzati in WordPress.

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