Registre CPTs usando o Dashicons para o ícone do menu admin no WP 3.8

14

O WordPress 3.8 introduziu no núcleo o plugin MP6 que, entre outras coisas, usa uma fonte icônica chamada Dashicons para exibir fontes no painel.

Agora, é bom saber que register_post_type tem um argumento 'menu_icon' que permite especificar um ícone personalizado para o CPT entrada do menu admin.

Nos meus plugins / temas eu costumo usar esse argumento com minhas imagens de ícone personalizadas que normalmente são escuras porque antes do menu de administração 3.8 tinha um fundo claro. Com o fundo do menu escuro padrão no WP 3.8, meus ícones ficam quase invisíveis.

Além disso, acho que usar os novos dashicons para meu CPT será legal.

Depois de algumas pesquisas, eu sei que posso usar o CSS de doshicons, algo como

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

No entanto, usar o argumento 'menu_icon' de register_post_type e css anterior irá imprimir ambos os ícones no WP 3.8 e um ícone + um caractere estranho no WP 3.8- e sem usar o argumento 'menu_icon' , em versões mais antigas, o ícone padrão é usado.

Eu sei que posso adicionar condicionalmente 'menu_icon' em register_post_type para as versões WP 3.8 e adicionar condicionalmente css anterior para WP 3.8+, mas:

  • que envolve adicionar algum código (2 declarações condicionais) para cada CPT registrado, portanto, atualizar plug-ins / temas é um trabalho bastante difícil
  • parece-me mais uma solução alternativa do que uma solução elegante

Então, as perguntas são:

É possível usar doshicons css para o WP 3.8+ e usar a configuração de imagem customizada via 'menu_icon' param para versões anteriores de uma maneira "mais simples" que não envolva adicionar 2 condicionais para cada CPT registrado?

E, se for assim, é possível fazer isso de alguma maneira automagic direto de register_post_type sem nenhum código adicional?

    
por gmazzap 13.12.2013 / 22:02

4 respostas

9

Depois de passar pelo buraco do coelho e voltar, a resposta é - sim , o núcleo permite usar facilmente doshicons ao registrar tipos de postagem e adicionar páginas de menu.

Para usar o dashicon você precisa passar sua classe CSS dashicons-[name] para menu_icon ou icon_url em lugares relevantes.

As turmas disponíveis podem ser pesquisadas em dashicons.css na origem ou no site da Dashicons (clique no ícone e veja o nome no topo).

Alerta! 3.8 parece ter sido lançado com dashicons-piechart como exemplo da classe em documentos in-line, o que está errado e não funciona. A classe real para esse ícone na versão é dashicons-chart-pie .

    
por Rarst 13.12.2013 / 23:54
4

Fácil: basta ler a parte relevante do register_post_type() phpDocBlock e usar o argumento correto para menu_icon : D

  • Use a classe doshicons . Por exemplo, %código%
  • Passe um SVG codificado em base64 usando um URI de dados, que será colorido para corresponder ao esquema de cores. Isso deve começar com dashicon-groups .
  • Passe data:image/svg+xml;base64, para deixar 'none' vazio, para que um ícone possa ser adicionado via CSS.
por kaiser 29.01.2014 / 23:37
3

Estou respondendo a mim mesmo porque hoje me fiz as 2 perguntas que publiquei e passei algum tempo para encontrar uma resposta. Uma vez que encontrei uma solução, quero compartilhá-la, mas qualquer outra solução é altamente apprecciated e estou pronto para aceitar qualquer solução que eu ache melhor que a minha. Edições e melhorias na minha solução são bem-vindas e também incentivadas.

Editar

Após a resposta Rarst , editei o código. Agora, use classes doshicons padrão, mas também permite especificar uma URL de imagem de estilo antigo no argumento menu_icon e uma nova classe doshicons no argumento menu_dashicon .

Fluxo de trabalho

Primeiro acho que pensei que register_post_type , aciona uma ação, registered_post_type , que passa para enganchar funções os argumentos passados para register_post_type , sem filtrá-los, portanto é possível criar argumentos customizados para essas funções. / p>

Então, decidi passar o argumento 'menu_dashicon' para passar um dashicon personalizado.

Depois disso, pensei em criar uma classe que escutasse esse argumento, salvando o ícone em uma variável de classe. A mesma classe pode ser responsável por

  1. verifique a versão atual do WP e, se for menor que 3.8, não faça nada
  2. se a versão for 3.8+, faça o loop da matriz $menu no gancho adequado e:
  3. remova, se presente, quaisquer imagens personalizadas adicionadas por meio de 'menu_icon' e
  4. adicione o estilo inline de acordo com o que é adicionado por meio do 'menu_dashicon' param

Eu crio o código em um único arquivo, desta forma ele pode ser facilmente incluído em qualquer tema / plugin ou até mesmo usado como MU plugin e depois disso, é possível usar o novo argumento 'menu_dashicon' em todos os temas e / ou plugins instalados.

Também adicionei um cabeçalho de plug-in mínimo que permite usá-lo como um plug-in autônomo, mas provavelmente essa é a maneira menos útil de usar.

Como usar

Dentro de register_post_type apenas passe o argumento 'menu_dashicon' com o valor da classe dashicon ( sem prefixo 'doshicons -'):

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

Isso é tudo. Obtenha o nome da classe de ícones da Dashicons em seu site .

Então, aqui o 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);

Ele também está disponível como Gist

DoisCPTs:"Ideias" e "Galeria" usando o Dashicons. Observe a mudança automática de cor com diferentes esquemas de cores de administração.

por gmazzap 13.12.2013 / 22:02
1

Eu simplesmente adicionei esta linha ao código que registra o tipo de postagem personalizado:

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

Este é o código completo

Não há necessidade de adicionar CSS.

    
por Brad Dalton 18.12.2013 / 03:13