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

Par défaut, tous les types de publication personnalisés se ressemblent, ce qui peut prêter à confusion. Des icônes uniques peuvent vous aider à identifier rapidement différents types de contenu.

De plus, obtenir les bonnes icônes pour vos types de publication personnalisés peut faire une énorme différence dans la navigation de votre tableau de bord d'administration WordPress. Lorsque vous vous connectez, vous verrez des entrées pour les articles, les pages et les types de publication personnalisés dans la barre latérale.

Dans cet article, nous vous expliquerons comment ajouter différentes icônes pour vos types de publication personnalisés.

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

Vous utilisez généralement un article ou une page lorsque vous travaillez avec votre site Web WordPress. Cependant, vous pouvez créer d'autres types de contenu à l'aide de types de publication personnalisés.

Par exemple, WooCommerce utilise un type de publication personnalisé appelé « Produit » pour gérer votre boutique.

Les types de publication personnalisés sont répertoriés dans la zone d'administration de WordPress aux côtés des articles et des pages dans le menu de gauche. Chaque élément de menu dans WordPress a une icône à côté, qui provient d'une police d'icônes appelée Dashicons.

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

Dans cet esprit, nous vous montrerons comment ajouter des icônes pour les types de publication personnalisés dans WordPress. Voici ce que nous allons couvrir dans ce tutoriel :

• Ajouter des icônes pour les types de publication personnalisés avec un plugin
• Ajouter des icônes pour les types de publication personnalisés manuellement

Prêt ? Commençons.

Ajouter des icônes pour les types de publication personnalisés avec un plugin

Si vous débutez dans l'enregistrement de types de publication personnalisés ou si vous n'êtes pas familier avec le code, nous vous recommandons d'utiliser le plugin Custom Post Type UI pour créer des types de publication et des taxonomies.

Créer un type de publication personnalisé avec un plugin

Tout d'abord, vous devrez créer un type de publication personnalisé. Si vous l'avez déjà fait, vous pouvez passer à la section « Ajouter une icône à un type de publication personnalisé avec un plugin » ci-dessous.

Une fois que vous avez installé et activé le plugin, accédez à CPT UI » Ajouter/Modifier les types de publication pour créer un nouveau type de publication personnalisé. Ensuite, assurez-vous d'être dans l'onglet « Ajouter un nouveau type de publication ».

Vous devrez ensuite fournir un slug pour votre type de publication personnalisé, tel que « films ». En dessous, vous entrez les noms au pluriel et au singulier, tels que « livres » et « livre ».

Après cela, vous voudrez cliquer sur le lien qui dit « Remplir les étiquettes supplémentaires en fonction des étiquettes choisies ». Cela remplira automatiquement les champs d'étiquettes supplémentaires ci-dessous et vous fera généralement gagner du temps.

Alternativement, vous pouvez ajouter manuellement les étiquettes à la section « Étiquettes supplémentaires ».

Ensuite, faisons défiler jusqu'à la section « Paramètres » et configurons différents attributs pour votre type de publication. Chaque option a une brève description expliquant sa fonction.

Par exemple, vous pouvez choisir comment trier le type de publication et s'il doit être hiérarchique.

Sous les paramètres généraux, vous verrez des options pour sélectionner les fonctionnalités d'édition que ce type de publication prendrait en charge. Cochez simplement les options que vous souhaitez inclure.

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 Custom Post Type UI, vous pourriez vouloir consulter la première méthode de notre guide sur comment créer un type de publication personnalisé dans WordPress.

Ajouter une icône à un type de publication personnalisé avec un plugin

Une fois que vous avez créé votre type de publication personnalisé, il est temps de choisir une icône. Cette étape est facile car le plugin Custom Post Type UI prend en charge les Dashicons par défaut.

Tout d'abord, vous devrez vous rendre sur CPT UI » Ajouter/Modifier les types de publication et cliquer sur l'onglet 'Modifier les types de publication' en haut de la page. À partir de là, assurez-vous que le bon type de publication est sélectionné dans le menu déroulant.

Une fois que vous avez fait cela, faites simplement défiler jusqu'aux Paramètres près du bas de la même page, puis localisez la section 'Icône du menu'.

Vous devriez maintenant voir deux options pour ajouter une icône au type de publication personnalisé.

Le bouton « Choisir Dashicon » vous permet de sélectionner n'importe quel Dashicon, et « Choisir une icône d'image » vous permet de télécharger ou de choisir une icône d'image dans votre médiathèque.

Pour ce tutoriel, nous allons cliquer sur le bouton « Choisir Dashicon ».

Vous pouvez maintenant parcourir des centaines d'icônes en utilisant les flèches en haut de la fenêtre contextuelle. De plus, vous pouvez rechercher un Dashicon.

Pour ce tutoriel, nous allons rechercher « book ».

Ensuite, nous avons trouvé 4 icônes correspondantes, 2 icônes « Facebook » et 2 icônes « book ». Vous pouvez simplement cliquer sur celle que vous souhaitez utiliser.

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

Ensuite, assurons-nous que vous faites défiler vers le bas et que vous cliquez sur le bouton « Enregistrer le type de publication » pour enregistrer vos paramètres.

À partir d'ici, vous pouvez retourner à votre tableau de bord d'administration et localiser le type de publication personnalisé dans la barre latérale gauche.

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

Ajouter des icônes pour les types de publication personnalisés manuellement

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

Tout d'abord, visitons le site web Dashicons pour trouver l'icône que vous souhaitez utiliser pour votre type de publication.

Pour ce tutoriel, nous allons faire défiler jusqu'à la section « Divers » et cliquer sur l'icône « book ».

Vous arriverez alors sur une page avec plus 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 ».

Copions la classe CSS dans le presse-papiers.

Maintenant, vous devrez ajouter du code à l'endroit où vous avez créé le type de publication personnalisé. Il peut s'agir du fichier functions.php de votre thème, ou vous pourriez avoir utilisé un plugin de morceaux de code comme WPCode.

Pour voir cela en action, le fragment 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'enregistrement d'un type de publication personnalisé à l'aide du code ci-dessus, ajoutez simplement l'un des fragments suivants à la ligne 45.

'menu_icon'           => 'dashicons-book',

Alternativement, vous pouvez ajouter une icône d'image à votre « Bibliothèque de médias » 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 fragments sont intentionnels et garantiront que le code s'aligne proprement lorsque vous le collerez dans le bloc de code plus grand ci-dessus.

N'oubliez pas que lorsque vous utilisez ce code, vous devez le modifier pour y inclure votre propre classe CSS Dashicon ou l'URL de votre icône d'image.

Et voilà !

Nous espérons que ce tutoriel vous a aidé à apprendre comment ajouter des icônes pour les types de publications personnalisés dans WordPress. Ensuite, vous voudrez peut-être également consulter nos guides sur comment inclure les types de publications personnalisés dans les résultats de recherche WordPress et comment changer/convertir les types de publications personnalisés dans WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.