Enregistrer les CPT à l'aide de Dashicons pour l'icône du menu d'administration dans WP 3.8


15

WordPress 3.8 a introduit dans le noyau le plugin MP6 qui utilise entre autres une police iconique appelée Dashicons pour afficher les polices dans le tableau de bord.

Maintenant, il est bien connu que register_post_type a un argument 'menu_icon'qui permet de spécifier une icône personnalisée pour l'entrée du menu d'administration CPT.

Dans mes plugins / thèmes, j'utilise souvent cet argument avec mes images d'icônes personnalisées qui sont normalement sombres car avant le menu d'administration de la version 3.8 avait un fond clair. Avec l'arrière-plan du menu sombre par défaut dans WP 3.8, mes icônes deviennent presque invisibles.

Cela mis à part, je pense que l'utilisation des nouveaux dashicons pour mon CPT sera cool.

Après quelques recherches, je sais que je peux simplement utiliser le CSS des dashicons, quelque chose comme

#menu-posts-mycpt div.wp-menu-image:before { content: "\f226"; }

Cependant, l'utilisation à la fois de l' 'menu_icon'argument de register_post_type et du CSS précédent affichera les deux icônes dans WP 3.8 et une icône + un caractère étrange dans WP 3.8-, et sans utilisation'menu_icon' argument , sur les anciennes versions, l'icône par défaut est utilisée.

Je sais que je peux ajouter conditionnellement 'menu_icon'dans register_post_typepour WP 3.8- versions et ajouter conditionnellement précédente pour WP css supérieure à 3,8, mais:

  • cela implique d'ajouter du code (2 instructions conditionnelles) pour chaque CPT enregistré, donc la mise à jour des plugins / thèmes est un travail assez difficile
  • il me semble plus une solution de contournement qu'une solution élégante

Donc, les questions sont:

Est-il possible d'utiliser dashicons css pour WP 3.8+ et d'utiliser une configuration d'image personnalisée via 'menu_icon' param pour les versions précédentes d'une manière "plus simple" qui n'implique pas d'ajouter 2 conditionnelles pour chaque CPT enregistré?

Et, si c'est le cas, est-il possible de le faire de manière automagique directement register_post_typesans aucun code supplémentaire?

Réponses:


9

Après avoir traversé le trou du lapin et revenir, la réponse est - oui , le noyau permet d'utiliser facilement des tirets lors de l'enregistrement des types de messages et de l'ajout de pages de menu.

Pour utiliser dashicon, vous devez passer sa classe CSS dashicons-[name]à menu_iconou icon_urlaux endroits appropriés.

Les classes disponibles peuvent être recherchées dashicons.cssdans la source ou le site Dashicons (cliquez sur l'icône et regardez le nom en haut).

Alerte! 3.8 semble avoir sorti avec dashicons-piechartcomme exemple de la classe dans les documents en ligne, ce qui est faux et ne fonctionnera pas. La classe réelle de cette icône dans la version est dashicons-chart-pie.


J'ai accepté cela parce que c'est la bonne façon de faire les choses. Mon plugin a l'avantage d'être mieux rétrocompatible (et je peux corriger pour utiliser des noms de classe au lieu de char) parce que si vous mettez la classe dashicons dedans, menu_iconvous ne pouvez pas utiliser l'URL de l'image pour les versions précédentes ... mais qui se soucie du passé? :)
gmazzap

4

Facile: il suffit de lire la partie pertinente du register_post_type()phpDocBlock puis d'utiliser le bon argument pour menu_icon: D

  • Utilisez la classe dashicons . Par exempledashicon-groups
  • Passez un SVG encodé en base64 en utilisant un URI de données, qui sera coloré pour correspondre au schéma de couleurs. Cela devrait commencer pardata:image/svg+xml;base64, .
  • Passez 'none'pour laisser div.wp-menu-imagevide, donc une icône peut être ajoutée via CSS.

1
* La classe Dashicons est ce que dit @Rarst dans sa réponse. * L'utilisation de l'encodage base64 peut être utile, mais à mon humble avis pas vraiment simple, en outre svg-painer.js, la bibliothèque js de base utilisée pour gérer le changement de couleur, peut prendre beaucoup de temps si l'icône est plus "complexe" que les tirets standard. * La troisième option (icône vide) est valable non seulement pour WP 3.8+, mais depuis longtemps ... et l'utilisation de css est quelque chose que je veux éviter (selon la question). Donc +1 pour avoir rassemblé toutes les options, mais je pense que la réponse acceptée répond déjà à ma question. PS heureux de voir ce diamant près de votre nom :)
gmazzap

@GM Informations intéressantes sur le svg-painter.jsfichier. Je ne le savais pas car je n'ai pas encore essayé.
kaiser

1
Une fois, j'ai essayé de l'utiliser dans une image svg un peu complexe (c'était une simple usine de construction) pour créer un effet de changement de couleur sur le survol de la souris. J'ai abandonné et utilisé une autre approche en raison de la latence trop.
gmazzap

2
@GM Merci pour celui-là. Vous devriez écrire un blog à ce sujet :) Je cherchais et le seul utile que j'ai pu trouver était celui de Sven .
kaiser

3

Je me réponds parce qu'aujourd'hui je me suis posé les 2 questions que j'ai postées, et j'ai passé un peu de temps à trouver une réponse. Une fois que j'ai trouvé une solution, je veux la partager, mais toute autre solution est extrêmement appréciée et je suis prêt à accepter toute solution que j'ai trouvée meilleure que la mienne. Les modifications et améliorations apportées à ma solution sont appréciées, voire encouragées.


Éditer

Après la réponse de Rarst, j'ai édité le code. Maintenant, la fonction utilise des classes dashicons standard, mais permet également de spécifier une URL d'image de style ancien dans l' menu_iconargument et une toute nouvelle classe dashicons dans l' menu_dashiconargument.


Workflow

Tout d'abord, je pensais que c'était register_post_type, déclenche une action registered_post_type, qui passent aux fonctions de hookingregister_post_type , sans les filtrer, il est donc possible de créer des arguments personnalisés pour ces fonctions.

J'ai donc décidé de passer l'argument 'menu_dashicon'pour passer un dashicon personnalisé.

Après cela, j'ai pensé à créer une classe qui écoute cet argument, en enregistrant l'icône dans une variable de classe. La même classe peut être responsable de

  1. vérifier la version actuelle de WP, et si elle est inférieure à 3.8, ne rien faire
  2. si la version est 3.8+ boucle le $menutableau sur le crochet approprié et:
  3. supprimer, le cas échéant, toutes les images personnalisées ajoutées via 'menu_icon'et
  4. ajouter le style en ligne en fonction de ce qui est ajouté via le 'menu_dashicon'param

Je crée le code dans un seul fichier, de cette façon, il peut être facilement inclus dans n'importe quel thème / plugin ou même utilisé comme plugin MU et après cela, on peut simplement utiliser le tout nouveau'menu_dashicon' argument dans chaque thème et / ou plugin installé.

J'ai également ajouté un en-tête de plugin minimal qui permet de l'utiliser en tant que plugin autonome, mais c'est probablement la façon la moins utile d'utiliser.

Comment utiliser

À l'intérieur, register_post_typepassez simplement l' 'menu_dashicon'argument avec la valeur de la classe dashicon ( sans le préfixe 'dashicons-'):

$args = array(
  ...
  'menu_dashicon' => 'chart-pie', // dashicons will be used in WP 3.8+
  'menu_icon' => $url_of_the_icon // icon images will be used in WP 3.7.1 & previous
);

register_post_type('my_cpt', $args);

C'est tout. Obtenez le nom de la classe d'icônes Dashicons sur son site .

Voici donc le code:

<?php
/**
* Plugin Name: GM CPT Icon
*/
namespace GM;

class CptIcon {

  public static $cpt;

  public $css;

  static function registerIcon( $cpt, $icon ) {
    self::$cpt[$cpt] = $icon;
  }

  function init() {
    if ( $this->mp6() ) {
      \add_action('admin_menu', array($this, 'parseMenu') );
    }
  }

  function mp6() {
    return \version_compare( $GLOBALS['wp_version'],  '3.8', '>=' );
  }      

  function parseMenu() {
    if ( $this->mp6() && ! empty( self::$cpt ) )  {
      foreach ( $GLOBALS['menu'] as $i => $item ) {
        if  $item[1] === 'edit_posts' && (strpos($item[2], 'edit.php?post_type=') === 0)) {
          $this->menuItemClass($i, str_replace('edit.php?post_type=', '', $item[2]));
        }
      }
    }
  }

  function menuItemClass( $i, $type ) {
    if ( \in_array($type, \array_keys(self::$cpt), TRUE ) ) {
      $GLOBALS['menu'][$i][4] = str_replace('menu-icon-post', '', $GLOBALS['menu'][$i][4]);
      $GLOBALS['menu'][$i][6] = 'dashicons-' . self::$cpt[$type];
    }
  }

}

\add_action('plugins_loaded', function() {
  if ( \is_admin() && !( \defined('DOING_AJAX') && \DOING_AJAX  ) ) {
    $cpticon = new CptIcon;
    $cpticon->init();
  }
});

\add_action('registered_post_type', function( $post_type, $args ) {
  if ( isset($args->menu_dashicon) && ! empty($args->menu_dashicon) ) {
    CptIcon::registerIcon($post_type, $args->menu_dashicon);
  }
}, 10, 2);

Il est également disponible en Gist


CPT utilisant des tirets

Deux CPT: "Idées" et "Galerie" utilisant Dashicons. Notez le changement de couleur automatique avec différents schémas de couleurs d'administration.



0

J'ai simplement ajouté cette ligne au code qui enregistre le type de message personnalisé:

'menu_icon'    => 'dashicons-admin-users',

Voici le code complet

entrez la description de l'image ici

Pas besoin d'ajouter de CSS.


C'est exactement ce que @Rarst dit dans sa réponse ...
gmazzap

Rarst ne fournit pas la ligne de code qui doit être ajoutée au code qui crée le CPT ou l'extrait complet auquel j'ai lié. De plus, il n'y a pas besoin de CSS, donc ma solution est plus efficace.
Brad Dalton
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.