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

Vous êtes-vous déjà demandé comment ajouter des icônes personnalisées pour vos types d'articles dans WordPress? Si oui, alors vous êtes au bon endroit. Dans cet article, nous allons vous montrer comment ajouter des icônes pour les types de publication personnalisés dans WordPress..

WordPress a commencé à utiliser une police de caractères appelée Dashicons depuis WordPress 3.8. Ces icônes de polices ont fière allure sur tous les appareils et toutes les tailles d'écran. Eh bien, vous pouvez utiliser ces icônes pour attribuer des icônes personnalisées à vos types de publication..

Didacticiel vidéo

Si vous n'aimez pas la vidéo ou si vous avez besoin de plus d'instructions, continuez à lire..

Ajout d'icônes de type de post personnalisées à l'aide d'un plugin

La première chose à faire est d’installer et d’activer le plugin CPT Custom Icon. Lors de l'activation, allez simplement à Paramètres »Paramètres d'icône personnalisés CPT où vous verrez vos types de messages personnalisés répertoriés. Ensuite, cliquez sur le bouton "Choisir l'icône" en regard d'un type de message personnalisé, puis sélectionnez une police dans le menu..

Ajout d'icônes à l'aide du plug-in UI Custom Post Type

Si vous débutez dans l'enregistrement d'un type de publication personnalisé, nous vous recommandons d'utiliser un plug-in d'interface utilisateur de type de publication personnalisé pour créer et gérer des types de publication et des taxonomies personnalisés..

Ajouter une icône à un type de message personnalisé créé avec le plugin CPT UI est très simple. Il supporte les Dashicons par défaut, vous devez donc d’abord visiter le site Web de Dashicons et sélectionner l’icône que vous souhaitez utiliser pour votre type de message..

En cliquant sur une icône dans la liste, une version plus grande de l'icône apparaîtra en haut. À côté, vous verrez la classe CSS de l'icône. Ce sera quelque chose comme dashicons-groups, dashicons-calendar, dashicons-cart, etc. Vous devez copier la classe CSS et modifier le type de publication personnalisé que vous souhaitez modifier dans l'interface utilisateur CPT. Il suffit de cliquer sur le bouton Options avancées lien et faites défiler jusqu'à la section Icône de menu, puis collez la classe CSS et enregistrez vos modifications.

Vous pouvez également créer vous-même une icône d’image et la télécharger en cliquant sur Media »Ajouter un nouveau. Après le téléchargement, cliquez sur le lien Modifier et copiez l'URL du fichier image. Il suffit maintenant de coller cette URL dans le champ de l'icône de menu dans les paramètres de l'interface utilisateur du CPT..

Ajouter manuellement une icône à un type d'article personnalisé

Si vous avez créé un type d'article personnalisé en insérant un code dans le plug-in ou le fichier functions.php de votre site, vous pouvez ajouter les icônes de menu manuellement. Encore une fois, il suffit de visiter le site Web de Dashicons pour sélectionner une icône et copier la classe CSS. Après cela, ajoutez-le à votre code de type de message personnalisé comme ceci:

 'menu_icon' => 'dashicons-cart', 

Vous pouvez également ajouter l'URL complète d'un fichier image que vous souhaitez afficher sous forme d'icône, comme ceci:

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

Voici un extrait de code complet qui crée un type de message personnalisé appelé produits avec une icône de menu:

 // Enregistre le type de message personnalisé custom_post_type () $ labels = array ('name' => _x ('produits', 'Nom général de type de message', 'text_domain'), 'singular_name' => _x ('Produit', 'Nom singulier du type de message', 'text_domain'), 'menu_name' => __ ('Produits', 'text_domain'), 'parent_item_colon' => __ ('Elément parent:', 'text_domain'), 'all_items' = > __ ('All Items', 'text_domain'), 'view_item' => __ ('View Item', 'text_domain'), 'add_new_item' => __ ('Add New Item', 'text_domain'), 'add_new '=> __ (' Add New ',' text_domain '),' edit_item '=> __ (' Edit Item ',' text_domain '),' update_item '=> __ (' Update Item ',' text_domain '),' search_items '=> __ (' Elément de recherche ',' text_domain '),' not_found '=> __ (' Introuvable ',' text_domain '),' not_found_in_trash '=> __ (' introuvable dans la corbeille ',' text_domain ' ), $ args = array ('label' => __ ('Products', 'text_domain'), 'description' => __ ('Post Type Description', 'text_domain'), 'labels' => $ labels, 'prend en charge' => array (), 'taxonomies' => array ('category', 'post_tag'), '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-cart', 'can_export' => true, 'has_archive' => true, 'exclude_from_search' = > false, 'publiquement_queryable' => true, 'capacite_type' => 'page',); register_post_type ('Produits', $ args);  // Accrochez-vous à l'action 'init' add_action ('init', 'custom_post_type', 0); 

Nous espérons que cet article vous a aidé à ajouter des icônes pour vos types d'articles personnalisés dans WordPress. Vous voudrez peut-être aussi savoir comment utiliser les polices d'icônes dans WordPress post editor.

Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Google+.