Registrare i CPT usando Dashicons per l'icona del menu admin in WP 3.8


15

WordPress 3.8 ha introdotto nel core il plug-in MP6 che, tra le altre cose, utilizza un carattere iconico chiamato Dashicons per visualizzare i caratteri nella dashboard.

Ora, è noto che register_post_type ha un argomento 'menu_icon'che consente di specificare un'icona personalizzata per la voce del menu di amministrazione CPT.

Nei miei plugin / temi utilizzo spesso quell'argomento con le mie immagini di icone personalizzate che normalmente sono scure perché prima del menu di amministrazione 3.8 aveva uno sfondo chiaro. Con lo sfondo del menu scuro predefinito in WP 3.8 le mie icone diventano quasi invisibili.

A parte questo, penso che usare i nuovi trattini per il mio CPT sia bello.

Dopo alcune ricerche, so che posso semplicemente usare il CSS dai trattini, qualcosa del genere

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

Tuttavia utilizzando sia 'menu_icon'argomento register_post_type e css precedente stamperà entrambe le icone in WP 3.8 e un'icona + uno strano char in WP 3.8-, e senza uso 'menu_icon'argomento, su versioni precedenti l'icona predefinita viene utilizzato.

So che posso aggiungere condizionalmente 'menu_icon'in register_post_typeper WP 3.8- versioni e condizionatamente aggiungere css precedente per WP 3.8+, ma:

  • che comporta l'aggiunta di un po 'di codice (2 istruzioni condizionali) per ogni CPT registrato, quindi aggiornare plug-in / temi è piuttosto un duro lavoro
  • mi sembra più una soluzione alternativa che una soluzione elegante

Quindi, le domande sono:

È possibile utilizzare dashicons css per WP 3.8+ e utilizzare la configurazione personalizzata dell'immagine tramite 'menu_icon'param per le versioni precedenti in un modo "più semplice" che non comporta l'aggiunta di 2 condizionale per ogni CPT registrato?

E, in tal caso, è possibile farlo in qualche modo automagico direttamente register_post_typesenza alcun codice aggiuntivo?

Risposte:


9

Dopo aver attraversato la tana del coniglio e viceversa , la risposta è: , core consente di utilizzare facilmente i trattini quando si registrano i tipi di post e si aggiungono pagine di menu.

Per usare dashicon devi passare la sua classe CSS dashicons-[name]a menu_icono icon_urlin luoghi pertinenti.

Le classi disponibili possono essere consultate nel sito di dashicons.cssorigine o Dashicons (fare clic sull'icona e cercare il nome in alto).

Mettere in guardia! 3.8 sembra essere stato rilasciato dashicons-piechartcome esempio della classe in documenti inline, il che è sbagliato e non funzionerà. La classe effettiva per quell'icona nella versione è dashicons-chart-pie.


L'ho accettato perché è il modo giusto di fare la cosa. Il mio plug-in è il vantaggio di essere meglio compatibile con le versioni precedenti (e posso sistemare l'uso dei nomi delle classi anziché dei caratteri) perché se inserisci la classe trattini menu_iconnon puoi usare l'URL dell'immagine per le versioni precedenti ... ma chi se ne frega del passato? :)
gmazzap

4

Semplice: basta leggere la parte rilevante di register_post_type()phpDocBlock e quindi usare l'argomento giusto per menu_icon: D

  • Usa la classe trattini . Per esdashicon-groups
  • Passa un file SVG con codifica base64 utilizzando un URI di dati, che verrà colorato in modo da corrispondere alla combinazione di colori. Questo dovrebbe iniziare con data:image/svg+xml;base64,.
  • Passa 'none'per lasciare div.wp-menu-imagevuoto, quindi un'icona può essere aggiunta tramite CSS.

1
* La lezione di Dashicons è ciò che dice @Rarst nella sua risposta. * L'uso della codifica base64 può essere utile, ma non molto semplice, inoltre svg-painer.js, la libreria js core utilizzata per gestire il cambio di colore, può richiedere molto tempo se l'icona è più "complessa" dei trattini standard. * La terza opzione (icona vuota) è valida non solo per WP 3.8+, ma da molto tempo ... e usare css è qualcosa che voglio evitare (come da domanda). Quindi +1 per mettere insieme tutte le opzioni, ma penso che la risposta accettata risponda già alla mia domanda. PS felice di vedere quel diamante vicino al tuo nome :)
gmazzap

@GM Informazioni interessanti sul svg-painter.jsfile. Non lo sapevo perché non ho ancora provato.
Kaiser

1
Una volta ho provato a usarlo in un'immagine svg un po 'complessa (era una semplice pianta da costruzione) per creare un effetto di cambio colore al passaggio del mouse. Ho rinunciato e usato un altro approccio a causa della latenza troppo elevata.
gmazzap

2
@GM Grazie per quello. Dovresti scrivere un post sul blog :) Stavo cercando e l'unico utile che ho trovato era quello di Sven .
Kaiser

3

Sto rispondendo a me stesso perché oggi mi sono posto le 2 domande che ho postato e ho trascorso un po 'di tempo a trovare una risposta. Una volta trovata una soluzione, voglio condividerla, ma qualsiasi altra soluzione è fortemente adattata e sono pronta ad accettare qualsiasi soluzione che ho trovato migliore della mia. Modifiche e miglioramenti alla mia soluzione sono apprezzati e non incoraggiati.


modificare

Dopo la prima risposta ho modificato il codice. Ora la funzione usa le classi di trattini standard, ma consente anche di specificare un URL di immagine vecchio stile menu_iconnell'argomento e una nuova classe di trattini menu_dashiconnell'argomento.


Flusso di lavoro

La prima cosa che ho pensato è che register_post_type, innesca un'azione, registered_post_typeche passa alle funzioni di aggancio a cui sono passati gli argomenti register_post_type, senza filtrarli, quindi è possibile creare argomenti personalizzati per tali funzioni.

Così ho deciso di passare l'argomento 'menu_dashicon'per passare un cruscotto personalizzato.

Successivamente ho pensato di creare una classe che ascolta quell'argomento, salvando l'icona in una variabile di classe. La stessa classe può essere responsabile

  1. controlla la versione corrente di WP, e se è inferiore a 3.8 non fare nulla
  2. se la versione è la 3.8+ esegui il loop $menudell'array sull'hook corretto e:
  3. rimuovere, se presenti, eventuali immagini personalizzate aggiunte tramite 'menu_icon'e
  4. aggiungere lo stile in linea in base a ciò che viene aggiunto tramite il 'menu_dashicon'parametro

Creo il codice in un singolo file, in questo modo può essere facilmente incluso in qualsiasi tema / plug-in o persino usato come plug-in MU e successivamente si può semplicemente usare il nuovissimo 'menu_dashicon'argomento in ogni tema e / o plug-in installato.

Ho anche aggiunto un'intestazione minima del plug-in che consente di utilizzarlo come plug-in autonomo, ma probabilmente è il modo meno utile di utilizzarlo.

Come usare

All'interno register_post_typebasta passare l' 'menu_dashicon'argomento con il valore della classe dashicon ( senza prefisso '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);

È tutto. Ottieni il nome della classe dell'icona di Dashicons dal suo sito .

Quindi qui il codice:

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

È disponibile anche come Gist


CPT utilizzando i trattini

Due CPT: "Idee" e "Galleria" usando Dashicons. Nota cambio automatico del colore con diverse combinazioni di colori dell'amministratore.



0

Ho semplicemente aggiunto questa riga al codice che registra il tipo di post personalizzato:

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

Ecco il codice completo

inserisci qui la descrizione dell'immagine

Non è necessario aggiungere alcun CSS.


Questa è la cosa esatta che @Rarst dice nella sua risposta ...
gmazzap

Rarst non fornisce la riga di codice che deve essere aggiunta al codice che crea il CPT o lo snippet completo a cui ho collegato. Inoltre non è necessario il CSS, quindi la mia soluzione è più efficiente.
Brad Dalton,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.