Comment ajouter des icônes pour les types de publication personnalisés dans WordPress
Souhaitez-vous choisir de nouvelles icônes pour les types de publications personnalisés dans votre tableau de bord d'administration ?
Lorsque vous vous connectez à votre site WordPress, vous voyez les entrées pour les publications, les pages et tous les types de publications personnalisés dans la barre latérale. Par défaut, les types de publication personnalisés utiliseront la même icône que les publications, ce qui peut être difficile à trier rapidement.
Dans cet article, nous allons vous montrer comment ajouter différentes icônes pour les types de publications 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 avec votre site Web WordPress. Cependant, vous pouvez utiliser des types de publication personnalisés pour créer d'autres types de contenu. Par exemple, WooCommerce utilise un type de publication personnalisé appelé « Produit » pour approvisionner votre boutique.
Les types de publications personnalisées sont répertorié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 dans WordPress est accompagné d'une icône et provient d'une police d'icônes appelée Dashicons.
Le problème est que tous les types de publications personnalisées utiliseront la même icône que les publications. Ainsi, si vous avez plusieurs types de publications personnalisés, il vous sera plus facile de trouver celui qui convient s'ils ont tous des icônes différentes.
Cela étant dit, voyons comment ajouter des icônes pour les types de publications personnalisés dans WordPress. Voici ce que nous allons aborder dans ce tutoriel :
Ajout d'icônes pour les types de publication personnalisés avec un plugin
Ajout manuel d'icônes pour les types de publication personnalisés
Ajout d'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 plug-in d'interface utilisateur de type de publication personnalisé pour créer des types de publication et des taxonomies.
Créer un type de publication personnalisé avec un plugin
Tout d’abord, vous devez créer un type de publication personnalisé. Si vous l'avez déjà fait, vous pouvez passer à la section « Ajout d'une icône à un type de publication personnalisé avec un plugin » ci-dessous.
Une fois que vous avez installé et activé le plug-in, vous devez accéder à CPT UI » Ajouter/Modifier des types de publication pour créer un nouveau type de publication personnalisé. Assurez-vous que vous êtes sur l'onglet « Ajouter un nouveau type de publication ».
Vous devez fournir un slug pour votre type de publication personnalisé, tel que « films ». En dessous, vous saisissez des noms au pluriel et au singulier, tels que « livres » et « livre ».
Après cela, cliquez sur le lien indiquant « Remplir des é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.
Vous pouvez également ajouter les étiquettes manuellement dans la section « Étiquettes supplémentaires ».
Ensuite, vous pouvez faire défiler jusqu'à la section Paramètres 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 comment trier le type de publication et si vous souhaitez le rendre hiérarchique.
Sous les paramètres généraux, vous verrez l'option permettant de 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 façon de créer un type de publication personnalisé à l’aide de l’interface utilisateur du type de publication personnalisé, 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 le plugin Custom Post Type UI prend en charge les Dashicons par défaut.
Tout d’abord, rendez-vous sur CPT UI » Ajouter/Modifier des types de publication et cliquez sur l’onglet « Modifier les types de publication » en haut de la page. Assurez-vous que le type de publication correct est sélectionné dans le menu déroulant.
Une fois que vous avez fait cela, faites simplement défiler jusqu'à Paramètres en bas de la même page, puis localisez la section « Icône de menu ».
Vous devriez maintenant voir deux options pour ajouter une icône au type de publication personnalisé. Le bouton « Choisir un dashicon » vous permet de choisir 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 bibliothèque multimédia.
Pour ce didacticiel, nous cliquerons sur le bouton « Choisir un dashicon ».
Vous pouvez désormais parcourir des centaines d'icônes à l'aide des flèches en haut de la fenêtre contextuelle.
Vous pouvez également rechercher un Dashicon. Pour ce didacticiel, nous rechercherons « livre ».
Quatre icônes correspondantes apparaissent, deux icônes « Facebook » et deux icônes « livre ». Cliquez simplement sur celui que vous souhaitez utiliser.
La classe CSS de l'icône sélectionnée sera automatiquement saisie dans le champ « Icône de menu ».
Assurez-vous de faire défiler vers le bas et de cliquer sur le bouton « Enregistrer le type de publication » pour stocker vos paramètres.
Maintenant, revenez à votre tableau de bord d'administration et localisez le type de publication personnalisé dans la barre latérale de gauche.
Vous devriez voir la nouvelle icône à côté du type de publication dans le menu.
Ajout manuel d'icônes pour les types de publication personnalisés
Si vous avez créé manuellement vos types de publication personnalisés avec du code, vous devrez également ajouter les icônes manuellement.
Tout d'abord, vous devez visiter le site Web Dashicons afin de trouver l'icône que vous souhaitez utiliser pour votre type de publication.
Pour ce didacticiel, faites défiler jusqu'à la section « Divers » et cliquez sur l'icône « livre ».
Vous serez redirigé vers une page contenant 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 ».
Vous devez copier la classe CSS dans le presse-papiers.
Vous devrez maintenant ajouter du 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é un plug-in d'extrait de code tel 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 sur 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 extraits suivants à la ligne 45.
'menu_icon' => 'dashicons-book',
Alternativement, vous pouvez ajouter une icône d'image à votre médiathèque 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 garantiront que le code s'aligne parfaitement 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 Dashicon ou l'URL de votre icône d'image.
Nous espérons que ce didacticiel vous a aidé à apprendre à ajouter des icônes pour les types de publications personnalisés dans WordPress. Vous voudrez peut-être également apprendre comment assurer la sécurité de votre site Web, ou consulter notre liste d’erreurs WordPress courantes et comment les corriger.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.