Comment ajouter des icônes pour les types de publication personnalisés dans WordPress

Vous souhaitez choisir de nouvelles icônes pour les types de publication personnalisés dans votre tableau de bord d’administration ?

Lorsque vous vous connectez à votre site WordPress, vous voyez des entrées pour les articles, les pages et tous les types de publications personnalisés dans la colonne latérale. Par défaut, les types d’articles personnalisés utilisent la même icône que les publications, ce qui peut être difficile à trier rapidement.

Dans cet article, nous allons vous afficher comment ajouter différentes icônes pour les types de publication personnalisés dans WordPress.

Pourquoi ajouter des icônes pour les types de publication personnalisés dans WordPress ?

La plupart du temps, vous utilisez une publication ou une page lorsque vous travaillez sur votre site WordPress. Cependant, vous pouvez utiliser des types de publication personnalisés créer d’autres types de contenu. Par exemple, WooCommerce utilise un type de publication personnalisé appelé « Produit » pour stocker votre boutique.

Lestypes de publication personnalisés sont listés dans la zone d’administration de WordPress à côté des publications et des pages dans le menu de gauche. Chaque élément de menu de WordPress est accompagné d’une icône provenant d’une police d’icônes appelée Dashicons.

Le problème est que tous les types de publications personnalisées utilisent la même icône que les publications. Ainsi, si vous avez plusieurs types de publication personnalisés, il vous sera plus facile de trouver le bon s’ils ont tous des icônes différentes.

Ceci étant dit, voyons comment ajouter des icônes pour les types de publication personnalisés dans WordPress. Voici ce que nous allons couvrir dans ce tutoriel :

• Ajout d’icônes pour les types de publication personnalisés à l’aide d’une extension
• Ajout manuel d’icônes pour les types de publication personnalisés

Ajout d’icônes pour les types de publication personnalisés à l’aide d’un plugin

Si vous êtes nouveau pour inscrire des types de publication personnalisés ou si vous n’êtes pas familier avec le code, alors nous vous recommandons d’utiliser le plugin Type de publication personnalisé UI pour créer des types de publication et des taxonomies.

Créer un type de publication personnalisé à l’aide d’une extension

Tout d’abord, vous devez créer un type de publication personnalisé. Si vous l’avez déjà fait, vous pouvez passer directement à la section ‘Ajouter une Icône à un type de publication personnalisé avec un plugin’ ci-dessous.

Une fois que vous avez installé et activé l’extension, vous devez vous rendre dans CPT UI  » Add/Edit Post Types pour créer un nouveau type de publication personnalisé. Confirmez que vous êtes sur l’onglet  » Ajouter un nouveau type de publication « .

Vous devez fournir un slug pour votre type de publication personnalisé, par exemple  » films « . En dessous, vous saisissez les noms au pluriel et au singulier, comme ‘books’ et ‘book’. »

Ensuite, cliquez sur le lien « Compléter les libellés en fonction des libellés choisis ». Cela remplira automatiquement les champs de libellés supplémentaires ci-dessous et vous permettra généralement d’enregistrer un gain de temps.

Vous pouvez également ajouter les libellés manuellement dans la section « Libellés supplémentaires ».

Ensuite, vous pouvez défiler vers le bas jusqu’à la section Réglages et configurer différents attributs pour votre type de publication. Chaque option est accompagnée d’une brève description expliquant ce qu’elle fait.

Par exemple, vous pouvez choisir de trier le type de publication et de le rendre hiérarchique ou non.

Sous les Réglages généraux, vous verrez l’option permettant de sélectionner les fonctionnalités de modification supportées par ce type de publication. Il vous suffit de cocher les options que vous souhaitez voir incluses.

Enfin, cliquez sur le bouton  » Ajouter un type de publication  » pour enregistrer et créer votre type de publication personnalisé.

Pour des instructions plus détaillées sur la création d’un type de publication personnalisé à l’aide de Type de publication personnalisé UI, consultez la première méthode de notre guide sur la façon de créer un type de publication personnalisé dans WordPress.

Ajout d’une Icône à un type de publication personnalisé avec un plugin

Une fois que vous avez créé votre type de publication personnalisé, vous pouvez choisir une icône. C’est simple car l’extension Type de publication personnalisé UI prend en charge les Dashicons par défaut.

Tout d’abord, allez dans CPT UI  » Add/Edit Post Types et cliquez sur l’onglet ‘Edit Post Types’ en haut de la page. Confirmez que le bon type de publication est sélectionné dans le menu déroulant.

Une fois que vous avez fait cela, défilez vers le bas de la même page jusqu’à la section Réglages, puis trouvez la section « Icône de menu ».

Vous devriez maintenant voir deux options pour ajouter une icône au type de publication personnalisé. Le bouton « Choisissez une icône » vous permet de choisir n’importe quelle icône, et « Choisissez une icône d’image » vous permet de téléverser ou de choisir une icône d’image dans votre médiathèque.

Pour ce tutoriel, nous cliquerons sur le bouton « Choisissez une icône de tableau de bord ».

Vous pouvez désormais parcourir des centaines d’icônes à l’aide des flèches situées en haut de la fenêtre surgissante.

Vous pouvez également rechercher une Dashicon. Pour ce tutoriel, nous rechercherons « livre ».

Quatre icônes correspondantes s’affichent, deux icônes « Facebook » et deux icônes « livre ». Il vous suffit de cliquer sur celle que vous souhaitez utiliser.

La classe CSS de l’icône sélectionnée sera automatiquement saisie/saisie dans le champ « Icône de menu ».

Confirmez votre choix en défilant vers le bas et en cliquant sur le bouton « Enregistrer le type de publication » pour stocker vos Réglages.

Maintenant, retournez dans votre tableau de bord d’administration et localisez le type de publication personnalisé dans la colonne latérale de gauche.

Vous devriez voir la nouvelle icône à côté des types de publication dans le menu.

Ajout manuel d’icônes pour les types de publication personnalisés

Si vous avez créé vos types de publication personnalisés manuellement avec du code, alors vous devrez également ajouter les icônes manuellement.

Tout d’abord, vous devez vous rendre sur le site Dashicons afin de trouver l’icône que vous souhaitez utiliser pour votre type de publication.

Pour ce tutoriel, défilez jusqu’à la section « Divers » et cliquez sur l’icône « livre ».

Vous accéderez à une page contenant davantage d’informations sur l’icône, telles que le nom de la catégorie et la classe CSS de l’icône. Par exemple, dans la capture d’écran suivante, la catégorie est « Divers » et la classe CSS est « dashicons-book ».

Vous devez copier la classe CSS dans le presse-papiers.

Maintenant, vous aurez besoin d’ajouter un peu de code au même endroit où vous avez créé le type de publication personnalisé. Il peut s’agir du fichier functions.php de votre thème, ou vous avez peut-être utilisé une extension d’extraits de code telle que WPCode.

Pour voir cela en action, l’extrait de code ci-dessous crée un type de publication personnalisé appelé « Livres » et ajoute également une icône de menu en ajoutant une classe CSS Dashicons à la ligne 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 );

Pour personnaliser l’icône lors de l’inscription d’un type de publication personnalisé à l’aide du code ci-dessus, il suffit d’ajouter l’un des extraits suivants à la ligne 45.

'menu_icon'           => 'dashicons-book',

Vous pouvez également ajouter une icône d’image à votre Bibliothèque multimédia et utiliser l’URL de l’icône au lieu de la classe CSS :

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

Les espaces supplémentaires dans ces extraits sont intentionnels et permettent de s’assurer que le code s’aligne correctement lorsque vous le collez dans le bloc de code plus grand ci-dessus.

N’oubliez pas que lorsque vous utilisez ce code, vous devez modifier votre propre classe CSS d’Icône de tableau de bord ou l’URL de l’icône de l’image.

Nous espérons que ce tutoriel vous a aidé à apprendre comment ajouter des icônes pour les types de publication personnalisés dans WordPress. Vous voudrez peut-être aussi apprendre comment assurer la sécurité de votre site, ou consulter notre liste d’erreurs WordPress courantes et comment les corriger.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.