Há algo estranhamente satisfatório em fazer a área de administração do WordPress parecer mais sua. Quando estamos trabalhando em sites de clientes ou projetos de longo prazo, até mesmo pequenas alterações como ícones personalizados podem fazer o painel parecer mais polido e pessoal.
Os ícones padrão do WordPress cumprem sua função, mas são genéricos. Se você adicionou tipos de postagem personalizados ou construiu uma experiência de administração sob medida, esses mesmos ícones provavelmente não refletem a marca ou o propósito do seu site.
Usamos diferentes métodos ao longo dos anos para alterar os ícones de administração — alguns simples, outros um pouco mais avançados. Se você deseja uma solução rápida com plugin ou uma maneira de trocar ícones com um pouco de código, mostraremos ambas as opções passo a passo.
Este tutorial é perfeito para proprietários de sites, desenvolvedores e freelancers que desejam que o painel do WordPress pareça tão personalizado quanto a parte frontal do site.
O Que São Ícones de Administração no WordPress?
Ícones de administração são as pequenas imagens que aparecem ao lado de cada item no menu do painel do WordPress. Eles ajudam você a reconhecer rapidamente diferentes áreas do seu site, como Posts, Páginas, Plugins e Configurações.
Por padrão, o WordPress usa uma fonte de ícones chamada Dashicons. Ela existe desde 2013 e não teve muitas atualizações desde então. Embora funcione bem, pode parecer um pouco desatualizada ou genérica, especialmente se você estiver construindo um site personalizado.
Personalizar esses ícones dá um visual renovado à área de administração. Você pode alterá-los para combinar com sua marca, simplificar o menu para clientes ou apenas adicionar um toque de personalidade ao seu site.
Se você está construindo um site para alguém que é novo no WordPress, alterar os ícones pode até ajudá-lo a encontrar as coisas mais rapidamente. É um pequeno ajuste que faz uma grande diferença na forma como o painel se sente.
Agora, vamos ver duas maneiras fáceis de alterar ícones de administrador — uma com um plugin e outra com um pouco de código.
- Método 1: Alterar Ícones de Administrador no Admin do WordPress Usando um Plugin
- Método 2: Alterar Manualmente Ícones do Menu de Administrador Usando um Trecho de Código
- Bônus: Adicionar Ícones para Tipos de Postagem Personalizados no WordPress
- Mais Maneiras de Personalizar Sua Área de Administrador do WordPress 🎁
Método 1: Alterar Ícones de Administrador no Admin do WordPress Usando um Plugin
Para este método, usaremos o plugin Admin Menu Editor. Como o nome sugere, ele permite que você personalize menus de administrador do WordPress facilmente.
Primeiro, você precisa instalar e ativar o plugin Admin Menu Editor. Para mais detalhes, veja nosso tutorial sobre como instalar um plugin do WordPress.
Após ativar o plugin, vá para a página Configurações » Editor de Menu. Aqui, você verá seu menu de administrador do WordPress em uma interface de usuário (UI) organizada onde você pode personalizá-lo.
A UI tem uma barra de ferramentas na parte superior, que permite adicionar ou excluir itens de menu, adicionar separadores, copiar e colar itens, e mais.
Abaixo disso, você pode clicar em um item de menu para expandir e ver suas configurações. Aqui, expandimos o item de menu Posts.
Ao expandir qualquer item de menu, você verá mais opções. Se for um menu pai, você também verá quaisquer itens de menu filhos na coluna da direita.
Para adicionar, substituir ou excluir um ícone de menu, clique no link ‘Mostrar opções avançadas’ na parte inferior.
Agora, clique no botão ao lado do campo ‘URL do Ícone’.
Isso revelará um pop-up onde você pode ver todos os Dashicons disponíveis. Alternativamente, você pode clicar no botão ‘Biblioteca de Mídia’ para fazer upload do seu próprio ícone de imagem.
Se você deseja fazer upload do seu próprio ícone de imagem, recomendamos usar uma imagem de 32×32, de preferência no formato PNG transparente.
Após escolher seu ícone, clique no botão ‘Salvar Alterações’ para armazenar suas configurações.
Agora você verá seu ícone de menu personalizado usado no menu de administração.
Método 2: Alterar Manualmente Ícones do Menu de Administrador Usando um Trecho de Código
Este próximo método exige que você adicione algum código personalizado para alterar os ícones.
Se você ainda não fez isso antes, recomendamos dar uma olhada rápida em nosso tutorial sobre como adicionar código personalizado no WordPress.
A maneira mais fácil e segura de adicionar código personalizado no WordPress é usando WPCode. É o melhor plugin de snippets de código para WordPress. Ele permite que você adicione com segurança código personalizado, CSS e HTML ao seu site WordPress sem quebrar acidentalmente nada.
Observação: O plugin também tem uma versão gratuita chamada WPCode Lite, que fará o trabalho. No entanto, a versão pro oferece recursos extras que podem ser úteis.
Exemplo 1. Substituindo um Ícone Usando os Dashicons Padrão
Para este exemplo, usaremos os Dashicons padrão para substituir um ícone do conjunto de ícones existente.
É importante notar que o WordPress já carrega os Dashicons, que são altamente otimizados para desempenho. Portanto, usá-los não afetará a velocidade de carregamento da página.
Dito isso, antes de executar o código, você precisa anotar o seguinte:
- O URL do item de menu que você deseja alterar
- O nome do ícone que você deseja usar
Primeiro, você precisa encontrar o URL da página para o item de menu que deseja personalizar. Por exemplo, digamos que você queira alterar o ícone do menu 'Posts'.
Mova o mouse sobre o menu Posts e você verá o URL para o qual ele se vincula na barra de status do seu navegador na parte inferior da página. Você só precisa da última parte do URL, que neste caso seria edit.php.
Em seguida, vá para o site Dashicons e clique no ícone que você deseja usar.
Clicar em qualquer ícone mostrará seu nome e slug no topo. Neste ponto, você precisa copiar o slug porque precisará dele na próxima etapa.
Depois de fazer isso, vá para a página Snippets de Código » + Adicionar Snippet e passe o mouse sobre a caixa 'Adicionar Seu Código Personalizado (Novo Snippet)'.
Em seguida, basta clicar no botão '+ Adicionar Snippet Personalizado' que aparece.
Na próxima tela, forneça um título para o seu snippet e selecione Snippet PHP na opção Tipo de Código.
Depois disso, você pode copiar e colar o seguinte código na caixa do editor de código:
function change_post_menu_icon() {
global $menu;
// Loop through the menu items
foreach ($menu as $key => $menu_item) {
// Find the "Posts" menu item (default URL is 'edit.php')
if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {
// Change the icon to a different Dashicon class
$menu[$key][6] = 'dashicons-format-aside'; // Change this to your preferred Dashicon slug
}
}
}
add_action('admin_menu', 'change_post_menu_icon');
Não se esqueça de alterar o dashicons-format-aside para o slug que você copiou anteriormente.
Seu código aparecerá assim no editor:
Em seguida, você precisa dizer ao WordPress onde executar este código.
Ícones do menu de administração aparecem na área de administração do WordPress. Na mesma página, role até a seção Inserção e selecione ‘Somente Admin’ na opção Localização.
Por último, mude seu snippet para Ativo e clique no botão ‘Salvar Snippet’ para salvar suas alterações.
O WordPress agora começará a usar o ícone que você selecionou para a página de Posts.
Exemplo 2. Use o Ícone Font Awesome para um Item de Menu na Área de Administração do WordPress
A biblioteca padrão Dashicon tem um conjunto limitado de ícones. A boa notícia é que você pode usar uma biblioteca de fontes e ícones como a Font Awesome, que tem um conjunto muito maior de ícones.
No entanto, isso significa que você terá que carregar o Font Awesome, o que pode desacelerar um pouco sua área de administração do WordPress (apenas alguns milissegundos).
Antes de adicionar qualquer código, primeiro você precisa encontrar o ícone que deseja usar. Vá para o site do Font Awesome e mude para a Biblioteca Gratuita.
Você verá todos os ícones disponíveis gratuitamente.
Clique no ícone que você deseja usar e ele será aberto em um pop-up. A partir daqui, você precisa copiar o valor Unicode do ícone.
Depois disso, vá para a página Code Snippets » + Add Snippet no seu painel do WordPress.
Vá em frente e clique no botão ‘+ Add Custom Snippet’ dentro da caixa ‘Add Your Custom Code (New Snippet)’.
Na próxima tela, forneça um título para seu snippet e selecione PHP Snippet como a opção Tipo de Código.
Depois disso, você pode copiar e colar o seguinte código na caixa do editor de código:
// Enqueue Font Awesome in the admin area
function enqueue_font_awesome() {
wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
}
add_action('admin_enqueue_scripts', 'enqueue_font_awesome');
// Add custom class to the Posts menu item
function add_custom_post_menu_class() {
global $menu;
foreach ($menu as $key => $menu_item) {
if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {
$menu[$key][4] .= ' custom-post-menu-class';
}
}
}
add_action('admin_menu', 'add_custom_post_menu_class');
// Add custom CSS to change the icon to a Font Awesome icon
function custom_admin_menu_icon() {
echo '<style>
.custom-post-menu-class .wp-menu-image:before {
font-family: "Font Awesome 5 Free" !important;
content: "\f015"; /* Unicode for the Font Awesome icon */
font-weight: 900; /* Needed for solid icons */
}
</style>';
}
add_action('admin_head', 'custom_admin_menu_icon');
Não se esqueça de substituir \f015 pelo valor Unicode que você copiou anteriormente.
Seu código aparecerá assim no editor:
Em seguida, você precisa dizer ao WordPress onde executar este código.
Os ícones do menu de administração aparecem dentro da área de administração do WordPress, então você pode rolar até a seção Inserção e selecionar 'Somente Admin' como a opção de Localização.
Por último, mude seu snippet para Ativo e clique no botão 'Salvar Snippet' para salvar suas alterações.
O WordPress agora começará a usar o ícone que você selecionou para a página de Posts.
Bônus: Adicionar Ícones para Tipos de Postagem Personalizados no WordPress
Tipos de postagem personalizados permitem que você crie tipos únicos de conteúdo para o seu site WordPress. Estes não são posts ou páginas padrão, mas algo totalmente original para o seu site.
Se você está usando um tipo de postagem personalizado no seu site WordPress, você pode querer mudar o seu ícone para que você possa identificá-lo facilmente.
Nesse caso, confira nosso tutorial detalhado sobre o assunto, que mostra várias maneiras de alterar ou adicionar ícones para seus tipos de postagem personalizados.
Mais Maneiras de Personalizar Sua Área de Administrador do WordPress 🎁
Alterar ícones de administração é apenas uma maneira de fazer o painel do WordPress parecer mais adaptado ao seu site ou clientes. Se você está procurando ir ainda mais longe, aqui estão alguns outros tutoriais que podem ajudá-lo a personalizar e melhorar a experiência de administração:
- Como Adicionar e Personalizar Colunas de Administrador no WordPress
- Como Personalizar o Painel de Administração do WordPress (Dicas)
- Melhores Plugins para o Painel de Administração do WordPress (Comparados)
- Plugins e Dicas para Melhorar a Área de Administração do WordPress
- Como Alterar o Rodapé no Painel de Administração do Seu WordPress
Esperamos que este artigo tenha ajudado você a alterar ou adicionar ícones de administração no WordPress. Você também pode querer conferir como branquear o painel de administração do WordPress ou ver estas dicas de especialistas para personalizar a área de administração do WordPress para melhores fluxos de trabalho.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Tem alguma pergunta ou sugestão? Por favor, deixe um comentário para iniciar a discussão.