web-dev-qa-db-fra.com

Enregistrez les CPT à l’aide de Dashicons pour l’icône de menu dans WP 3.8

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

Sachez maintenant que register_post_type a un argument 'menu_icon' qui permet de spécifier une icône personnalisée pour l’entrée de menu de l’administrateur du CPT.

Dans mes plugins/thèmes, j'utilise souvent cet argument avec des images d'icône personnalisées qui sont normalement sombres car, avant le menu d'administration 3.8, son fond était clair. Avec le fond sombre du menu 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 utiliser le CSS de dashicons, quelque chose comme

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

Cependant, si vous utilisez les deux arguments 'menu_icon' de register_post_type et css précédent, les deux icônes de WP 3.8 et une icône + un caractère étrange de 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 conditionnellement ajouter 'menu_icon' dans register_post_type pour WP versions 3.8 - et ajouter conditionnellement les css précédentes pour WP 3.8+, mais:

  • cela implique d'ajouter du code (2 instructions conditionnelles) pour every / CPT enregistré, la mise à jour de plugins/themes est donc un travail 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 la configuration d'image personnalisée via 'menu_icon' param pour les versions précédentes d'une manière "plus simple", sans impliquer l'ajout de 2 conditions pour chaque CPT enregistré?

Et, si tel est le cas, est-il possible de le faire de manière automagique directement à partir de register_post_type sans code supplémentaire?

custom-post-typeswp-admin
14
gmazzap

Après avoir traversé le terrier du lapin, la réponse est - yes , core permet d’utiliser facilement les dashicons lors de l’enregistrement de types de posts et de l’ajout de pages de menus.

Pour utiliser dashicon, vous devez passer sa classe CSS dashicons-[name] à menu_icon ou icon_url aux endroits appropriés.

Les classes disponibles peuvent être recherchées dans dashicons.css dans le code source ou Site Dashicons (cliquez sur l’icône et regardez le nom en haut).

Alerte! 3.8 semble avoir publié avec dashicons-piechart comme exemple de la classe dans les documents en ligne, ce qui est faux et ne fonctionnera pas. La classe réelle pour cette icône dans l'édition est dashicons-chart-pie.

9
Rarst

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

  • Utilisez les dashicons class. Par exemple dashicon-groups
  • Passez un fichier SVG codé en base64 en utilisant un URI de données, qui sera coloré pour correspondre au jeu de couleurs. Cela devrait commencer par data:image/svg+xml;base64,.
  • Passez 'none' pour laisser div.wp-menu-image vide, afin de pouvoir ajouter une icône via CSS.
4
kaiser

Je me réponds car aujourd'hui je me suis posé les 2 questions que j'ai posées et j'ai passé du temps à trouver une réponse. Une fois que j'ai trouvé une solution, je veux la partager, mais toute autre solution est très 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 également appréciées et encouragées.

Modifier

Après Rarst answer, j'ai modifié le code. Maintenant, la fonction utilise des classes de dashicons standard, mais aussi permet de spécifier une url d’image de style ancien dans l’argument menu_icon et une nouvelle classe de dashicons dans l’argument menu_dashicon.

Flux de travail

Je pensais d’abord que register_post_type, déclenche une action, registered_post_type, qui transmet aux fonctions de raccordement les arguments passés à register_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 transmettre 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érifie la version actuelle de WP, et si elle est inférieure à 3.8 ne fait rien
  2. si la version est 3.8+, bouclez le tableau $menu avec le hook correct et:
  3. supprimer, le cas échéant, les images personnalisées ajoutées via 'menu_icon' et
  4. ajoute le style en ligne en fonction de ce qui est ajouté via le paramètre 'menu_dashicon'

Je crée le code dans un seul fichier, de cette manière, il peut être facilement inclus dans n'importe quel thème/plugin ou même utilisé comme MU plugin et ensuite, il est tout simplement possible d'utiliser le nouvel argument 'menu_dashicon' dans chaque thème et/ou plugin installé.

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

Comment utiliser

Dans register_post_type, passez simplement l'argument 'menu_dashicon' avec la valeur de la classe dashicon ( sans 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. Obtenir le nom de la classe d'icônes Dashicons à partir de son site .

Alors voici 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 sous la forme Gist

CPTs using dashicons

Deux CPT: "Ideas" et "Gallery" utilisant Dashicons. Notez le changement de couleur automatique avec différents schémas de couleurs admin.

3
gmazzap

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

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

Voici le code complet

enter image description here

Pas besoin d'ajouter de CSS.

0
Brad Dalton