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


15

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, é sabido que register_post_type possui um argumento 'menu_icon'que permite especificar um ícone personalizado para a entrada do menu de administração do CPT.

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

Além disso, acho que usar as novas dashicons para o meu CPT será legal.

Após algumas pesquisas, sei que posso usar o CSS das dashicons, algo como

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

No entanto, o uso do 'menu_icon'argumento register_post_type e do css anterior imprimirá os dois ícones no WP 3.8 e um ícone + um caractere estranho no WP 3.8-, e sem o 'menu_icon'argumento use , nas versões anteriores o ícone padrão é usado.

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

  • que envolve adicionar algum código (2 instruções condicionais) para cada CPT registrado, portanto, atualizar plugins / 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 o dashicons css para WP 3.8+ e usar a configuração de imagem personalizada 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 assim for, é possível fazer isso de alguma maneira automagica diretamente, register_post_typesem nenhum código adicional?

Respostas:


9

Depois de passar pela toca do coelho e voltar, a resposta é - sim , o núcleo permite usar facilmente dashicons 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_iconou icon_urlem locais relevantes.

As aulas disponíveis podem ser consultadas no site de dashicons.cssorigem ou no Dashicons (clique no ícone e veja o nome no topo).

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


Eu aceitei isso porque é o caminho certo para fazer a coisa. Meu plugin é o benefício de ser melhor compatível com versões anteriores (e posso corrigir o uso de nomes de classe em vez de char) porque, se você colocar a classe dashicons, menu_iconnão poderá usar o URL da imagem para versões anteriores ... mas quem se importa com o passado? :)
gmazzap

4

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

  • Use a classe dashicons . Por exemplodashicon-groups
  • 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 data:image/svg+xml;base64,.
  • Passe 'none'para deixar em div.wp-menu-imagebranco, para que um ícone possa ser adicionado via CSS.

1
* A classe Dashicons é o que @Rarst diz em sua resposta. * O uso da codificação base64 pode ser útil, mas, embora não seja realmente simples, além disso svg-painer.js, a biblioteca js principal usada para lidar com a mudança de cor pode consumir muito tempo se o ícone for mais "complexo" do que o padrão dashicons. * A terceira opção (ícone vazio) é válida não apenas para o WP 3.8+, mas há muito tempo ... e usar css é algo que eu quero evitar (conforme a pergunta). Então, marque +1 para reunir todas as opções, mas acho que a resposta aceita já responde à minha pergunta. PS feliz em ver que o diamante perto do seu nome :)
gmazzap

@GM Informações interessantes sobre o svg-painter.jsarquivo. Não sabia, pois ainda não tentei.
Kaiser

1
Uma vez eu tentei usá-lo em uma imagem svg um pouco complexa (era uma planta simples de construção) para criar um efeito de mudança de cor ao passar o mouse. Desisti e usei outra abordagem por causa da latência demais.
gmazzap

2
@ GM Obrigado por esse. Você deveria escrever um post sobre o assunto :) Eu estava pesquisando e o único útil que encontrei foi o de Sven .
kaiser

3

Estou me respondendo porque hoje me perguntei as 2 perguntas que publiquei e passei algum tempo para encontrar uma resposta. Depois de encontrar uma solução, quero compartilhá-la, mas qualquer outra solução é muito apreciada e estou pronta para aceitar qualquer solução que tenha encontrado melhor que a minha. Edições e melhorias na minha solução são apreciadas e não incentivadas.


Editar

Após a resposta Rarst, editei o código. Agora, a função use classes padrão dashicons, mas também permite especificar um URL de imagem no estilo antigo no menu_iconargumento e uma nova classe dashicons no menu_dashiconargumento.


Workflow

Primeiro, acho que pensei que register_post_type, dispara uma ação, registered_post_typeque passa para as funções de ligação dos argumentos transmitidos register_post_type, sem filtrá-las, para que seja possível criar argumentos personalizados para essas funções.

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

Depois disso, pensei em criar uma classe que ouvisse 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 um loop na $menumatriz no gancho adequado e:
  3. remova, se houver, quaisquer imagens personalizadas adicionadas por 'menu_icon'e
  4. adicione o estilo embutido de acordo com o que é adicionado através do 'menu_dashicon'parâmetro

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

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

Como usar

Por dentro, register_post_typebasta passar o 'menu_dashicon'argumento com o valor da classe dashicon ( sem o prefixo '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);

Isso é tudo. Obtenha o nome da classe de ícone dos 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);

Também está disponível como Gist


CPTs usando dashicons

Dois CPTs: "Ideias" e "Galeria" usando Dashicons. Observe a mudança automática de cores com diferentes esquemas de cores de administrador.



0

Simplesmente adicionei esta linha ao código que registra o tipo de postagem personalizada:

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

Aqui está o código completo

insira a descrição da imagem aqui

Não é necessário adicionar nenhum CSS.


É exatamente isso que o @Rarst diz em sua resposta ...
gmazzap

Rarst não fornece a linha de código que precisa ser adicionada ao código que cria o CPT ou o snippet completo ao qual vinculei. Também não há necessidade de CSS, então minha solução é mais eficiente.
Brad Dalton
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.