Registre los CPT usando Dashicons para el ícono del menú de administración en WP 3.8

14

WordPress 3.8 introdujo en el núcleo el plugin MP6 que, entre otras cosas, utiliza una fuente icónica llamada Dashicons para mostrar las fuentes en el panel.

Ahora, es bien sabido que register_post_type tiene un argumento 'menu_icon' que permite especificar un icono personalizado para el CPT entrada del menú de administración.

En mis complementos / temas a menudo uso ese argumento con mis imágenes de íconos personalizados que normalmente están oscuras porque antes del menú de administración 3.8 tenía un fondo claro. Con el fondo de menú oscuro predeterminado en WP 3.8, mis iconos se vuelven casi invisibles.

Aparte de eso, creo que usar los nuevos dashicons para mi CPT será genial.

Después de algunas investigaciones, sé que solo puedo usar el CSS de los dashicons, algo como

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

Sin embargo, al usar tanto el argumento 'menu_icon' de register_post_type como el css anterior imprimirá ambos íconos en WP 3.8 y un ícono + un carácter extraño en WP 3.8, y sin usar el argumento 'menu_icon' , en versiones anteriores se usa el ícono predeterminado.

Sé que puedo agregar condicionalmente 'menu_icon' en register_post_type para las versiones WP 3.8 y agregar condicionalmente el css anterior para WP 3.8+, pero:

  • que implica agregar algo de código (2 declaraciones condicionales) para cada CPT registrado, por lo que la actualización de complementos / temas es un trabajo difícil
  • me parece más una solución que una solución elegante

Entonces, las preguntas son:

¿Es posible usar dashicons css para WP 3.8+ y usar una configuración de imagen personalizada a través de 'menu_icon' param para versiones anteriores de una manera "más simple" que no implica agregar 2 condicionales por cada CPT registrado?

Y, si es así, ¿es posible hacerlo de alguna manera automágica directamente desde register_post_type sin ningún código adicional?

    
pregunta gmazzap 13.12.2013 - 22:02

4 respuestas

9

Después de pasar por el agujero del conejo y volver, la respuesta es: sí , el núcleo permite usar fácilmente los dashicons al registrar tipos de publicaciones y agregar páginas de menú.

Para usar dashicon, debes pasar su clase CSS dashicons-[name] a menu_icon o icon_url en lugares relevantes.

Las clases disponibles se pueden consultar en dashicons.css in source o Dashicons site (haga clic en el icono y busque el nombre en la parte superior).

¡Alerta! 3.8 parece haberse lanzado con dashicons-piechart como ejemplo de la clase en documentos en línea, lo cual es incorrecto y no funcionará. La clase real para ese ícono en la versión es dashicons-chart-pie .

    
respondido por el Rarst 13.12.2013 - 23:54
4

Fácil: solo lea la parte relevante de register_post_type() phpDocBlock y luego use el argumento correcto para menu_icon : D

  • Use la clase dashicons . Por ejemplo %código%
  • Pase un SVG codificado en base64 utilizando un URI de datos, que se coloreará para coincidir con el esquema de color. Esto debería comenzar con dashicon-groups .
  • Pase data:image/svg+xml;base64, para dejar 'none' vacío, por lo que se puede agregar un icono a través de CSS.
respondido por el kaiser 29.01.2014 - 23:37
3

Me estoy respondiendo porque hoy me hice las 2 preguntas que publiqué y dediqué un tiempo a encontrar una respuesta. Una vez que encontré una solución, quiero compartirla, pero cualquier otra solución es altamente apropiada y estoy lista para aceptar cualquier solución que encontré mejor que la mía. Las ediciones y las mejoras a mi solución también se aprecian y no se recomiendan.

Editar

Después de Rarst , he editado el código. Ahora la función usa clases de dashicons estándar, pero también permite especificar una url de imagen de estilo antiguo en el argumento menu_icon y una clase de dashicons completamente nueva en el argumento menu_dashicon .

Flujo de trabajo

Primero pensé que pensé que register_post_type , activa una acción, registered_post_type , que pasa a las funciones de enganche los argumentos pasados a register_post_type , sin filtrarlos, por lo que es posible crear argumentos personalizados para esas funciones.

Así que decidí pasar el argumento 'menu_dashicon' para pasar un dashicon personalizado.

Después de eso, pensé en crear una clase que escuchara ese argumento, guardando el icono en una variable de clase. La misma clase puede ser responsable de

  1. verifique la versión actual de WP, y si es menos de 3.8, no haga nada
  2. si la versión es 3.8+, repite la matriz $menu en el gancho adecuado y:
  3. elimine, si está presente, cualquier imagen personalizada agregada a través de 'menu_icon' y
  4. agregue el estilo en línea de acuerdo con lo que se agrega a través de 'menu_dashicon' param

Creo el código en un solo archivo, de esta manera se puede incluir fácilmente en cualquier tema / complemento o incluso se puede usar como complemento MU y después de eso, solo puedes usar el nuevo argumento 'menu_dashicon' en cada tema y / o complemento instalado.

También he agregado un encabezado de complemento mínimo que permite usarlo como un complemento independiente, pero probablemente esa sea la forma menos útil de usar.

Cómo utilizar

Dentro de register_post_type solo pasa el argumento 'menu_dashicon' con el valor de la clase dashicon ( sin prefijo '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);

Eso es todo. Obtenga el nombre de la clase del icono de Dashicons en su sitio .

Así que aquí el código:

<?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);

También está disponible como Gist

DosCPT:"Ideas" y "Galería" usando Dashicons. Observe el cambio de color automático con diferentes esquemas de color de administrador.

respondido por el gmazzap 13.12.2013 - 22:02
1

Simplemente agregué esta línea al código que registra el tipo de publicación personalizada:

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

Aquí está el código completo

No es necesario agregar ningún CSS.

    
respondido por el Brad Dalton 18.12.2013 - 03:13

Lea otras preguntas en las etiquetas