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

14

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

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

Dans mes plugins / thèmes, j'utilise souvent cet argument avec mes icônes personnalisées, qui sont normalement sombres, car auparavant, le menu d'administration de la version 3.8 avait un fond clair. Avec le fond de 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 utiliser le CSS de dashicons, quelque chose comme

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

Cependant, si vous utilisez les arguments 'menu_icon' de register_post_type et précédents, les deux icônes seront imprimées dans le WP 3.8 et une icône + un caractère étrange dans le WP 3.8 - et sans utiliser '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' à register_post_type pour les versions de WP 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 chaque 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

Les questions sont donc les suivantes:

Est-il possible d'utiliser dashicons css pour WP 3.8+ et d'utiliser une configuration d'image personnalisée via les versions précédentes de 'menu_icon' param d'une manière "plus simple", sans impliquer l'ajout de 2 conditions pour chaque CPT enregistré?

Et si oui, est-il possible de le faire d'une certaine manière automagique directement à partir de register_post_type sans code supplémentaire?

    
posée gmazzap 13.12.2013 - 22:02

4 réponses

9

Après avoir traversé le terrier du lapin, la réponse est: oui , Core permet d'utiliser facilement les dashicons lors de l'enregistrement de types d'articles 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 au dessus).

Alert! 3.8 semble avoir publié avec dashicons-piechart un exemple de classe dans la documentation intégrée, ce qui est faux et ne fonctionnera pas. La classe réelle de cette icône dans la version est dashicons-chart-pie .

    
réponse donnée Rarst 13.12.2013 - 23:54
4

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

  • Utilisez la classe dashicons . Par exemple dashicon-groups
  • Passez un fichier SVG codé en base64 à l’aide d’un URI de données, qui sera coloré pour correspondre au schéma 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.
réponse donnée kaiser 29.01.2014 - 23:37
3

Je me réponds car aujourd’hui je me suis posé les 2 questions que j’avais 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.

Modifier

Après la réponse Rarst , j'ai modifié le code. Maintenant, function utilise les classes standard de dashicons, mais aussi permettent 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

Tout d'abord, je pensais 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érifiez la version actuelle de WP et, si elle est inférieure à 3.8, ne faites rien
  2. si la version est 3.8+, bouclez le tableau $menu sur le hook correct et:
  3. supprimez, le cas échéant, les images personnalisées ajoutées via 'menu_icon' et
  4. ajoutez 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 / plug-in ou même utilisé comme plug-in MU et après cela, vous pouvez simplement 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. Obtenez le nom de la classe d'icônes Dashicons à partir de 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

.

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

réponse donnée gmazzap 13.12.2013 - 22:02
1

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

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

Voici le code complet

Pas besoin d'ajouter de CSS.

    
réponse donnée Brad Dalton 18.12.2013 - 03:13

Lire d'autres questions sur les étiquettes