Quando criamos sites WordPress para clientes, frequentemente adicionamos widgets personalizados ao painel. É uma maneira simples de exibir notas úteis, links ou instruções logo onde o usuário faz login.
O painel padrão nem sempre exibe as informações que as pessoas realmente precisam. É por isso que gostamos de personalizá-lo — para tornar a área de administração mais útil e pessoal.
Você pode querer exibir uma mensagem de boas-vindas, informações de contato de suporte ou incluir um tutorial rápido. Seja qual for o motivo, é fácil de fazer assim que você souber como.
Neste guia, mostraremos como adicionar um widget de painel personalizado no WordPress — usando código ou um plugin, o que você preferir.
O Que São Widgets de Painel de Administração do WordPress?
Widgets de painel são as pequenas caixas que você vê ao fazer login no seu site WordPress. Eles exibem informações rápidas, links úteis e atualizações sobre o seu site.
Por padrão, o WordPress oferece widgets como “Resumo”, “Atividade”, “Saúde do Site” e “Rascunho Rápido”. Mas você pode adicionar seus próprios widgets com conteúdo personalizado que se ajuste às suas necessidades.
Dica Rápida: Cada usuário do seu site pode escolher quais widgets deseja ver. Eles podem exibir, ocultar ou reorganizar para corresponder ao seu fluxo de trabalho.
Por Que os Widgets de Painel São Úteis:
- Eles exibem dados úteis no momento em que você faz login.
- Você pode acessar rapidamente ferramentas ou conteúdo sem ter que procurar em menus.
- Widgets personalizados permitem que você personalize o painel para suas necessidades específicas.
Onde Encontrá-los:
Estes widgets aparecem na tela principal do painel dentro da área de administração do WordPress. Você pode movê-los arrastando e soltando, ou escondê-los usando a aba Opções de Tela no topo.
Por que e Como Usamos Widgets Personalizados de Administração no WordPress
Widgets de painel personalizados são uma ótima maneira de personalizar a experiência de administração do WordPress. Nós os usamos em muitos sites de clientes para exibir informações úteis, vincular a ferramentas importantes ou simplificar o processo de integração.
Quer você esteja gerenciando seu próprio site ou vários para clientes, widgets personalizados podem economizar tempo e tornar a área de administração mais útil.
Casos de Uso Reais:
- Personalização: Adicione uma mensagem de boas-vindas, exiba estatísticas importantes ou vincule a páginas que sua equipe usa com frequência.
- Uso do Desenvolvedor: Desenvolvedores frequentemente criam widgets que guiam os clientes com atalhos para tarefas comuns como atualizações ou backups.
Como Nós os Usamos em Nossos Sites:
Nós confiamos em um conjunto de plugins essenciais do WordPress, e muitos deles incluem widgets de painel integrados.
Um que usamos com frequência é o widget de Visão Geral do All in One SEO. Ele mostra as pontuações TruSEO para nosso conteúdo e fornece links diretos para melhorá-las.
Também usamos o widget do MonsterInsights. Ele nos dá uma visão rápida do nosso tráfego do site e desempenho diretamente do painel.
Também é flexível — podemos escolher quais dados mostrar dependendo de quem o está usando.
Como cada membro da equipe tem necessidades diferentes, eles podem mostrar ou ocultar widgets e reorganizar o painel como quiserem. É um pequeno recurso que faz uma grande diferença na produtividade.
Como Criar Widgets Personalizados no Painel do WordPress
Existem duas maneiras principais de criar widgets personalizados no painel do WordPress. Você pode usar os links rápidos abaixo para ir para o método que deseja usar:
- Método 1: Criar Widgets de Painel Usando Código Personalizado (Mais Personalizável)
- Method 2: Create Custom Dashboard Widget Using Plugin (Easier)
Método 1: Criar Widgets de Painel Usando Código Personalizado (Mais Personalizável)
Para este método, você precisará adicionar código personalizado ao seu site WordPress para criar um widget de painel. Isso requer um conhecimento básico de programação do WordPress. Portanto, se você não quiser escrever código, pode pular para o próximo método.
Estamos mostrando este método primeiro porque ele é mais flexível e deixa espaço para você adicionar qualquer código que desejar executar dentro do seu widget personalizado.
Mostraremos o código que você precisa, e então você poderá personalizá-lo para adicionar seu código usando PHP, HTML ou JS.
Quando se trata de adicionar código personalizado ao seu site WordPress, muitos usuários pensam no arquivo functions.php do tema. Embora este método funcione, acreditamos que há uma maneira melhor e mais segura de lidar com trechos de código personalizados - usando WPCode.
Editar o arquivo functions.php às vezes pode fazer com que seu site trave se houver um erro no código. Além disso, você perderá seu código personalizado se trocar ou atualizar o tema sem fazer backup de suas alterações.
O WPCode, por outro lado, permite que você adicione código personalizado com segurança sem travar seu site. Ele também facilita o gerenciamento de trechos de código e a ativação ou desativação deles conforme necessário.
Observação: Uma versão gratuita chamada WPCode Lite também está disponível, que você pode usar para este tutorial. No entanto, recomendamos a atualização para um plano pago para desbloquear mais recursos.
Primeiro, você precisa instalar e ativar o plugin WPCode. Para mais detalhes, consulte nosso artigo sobre como instalar um plugin do WordPress.
Após a ativação, você precisa ir para a página Code Snippets » +Add Snippet e selecionar ‘Add Your Custom Code (New Snippet)’ para criar um novo snippet.
Na próxima tela, você precisa inserir um nome para seu código personalizado e escolher ‘PHP Snippet’ como o ‘Code Type.’
Depois disso, adicione o seguinte código na caixa Code Preview:
//hooks up your code to dashboard setup
add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');
function my_custom_dashboard_widgets() {
global $wp_meta_boxes;
// Register your custom WordPress admin dashboard widget
wp_add_dashboard_widget('custom_help_widget', 'Theme Support', 'custom_dashboard_help');
}
function custom_dashboard_help() {
// Replace this with any code you want to show in your custom admin widget
echo '<p>Welcome to Custom Blog Theme! Need help? Contact the developer <a href="mailto:yourusername@gmail.com">here</a>. For WordPress Tutorials visit: <a href="https://www.wpbeginner.com" target="_blank">WPBeginner</a></p>';
}
Veja como deve ficar na sua interface do WPCode:
Aqui está uma pequena explicação do código:
A função my_custom_dashboard_widgets() registra o widget personalizado usando a função wpb_add_dashboard_widget(). Ela recebe três argumentos. O primeiro é o ID do widget personalizado, o segundo é o título do widget e o terceiro argumento é a função de callback.
A função custom_dashboard_help() é nossa função de callback, e dentro dela, adicionamos o código HTML que queremos mostrar quando o widget for exibido.
Conectamos nossa função my_custom_dashboard_widgets ao hook wp_dashboard_setup usando add_action. Este hook basicamente configura a página do painel para exibição.
Após adicionar o código personalizado, você precisa rolar para baixo até a seção ‘Insertion’ e selecionar ‘Admin Only’ no menu suspenso Location.
Por fim, clique no botão ‘Salvar Snippet’ e alterne a opção de status para ‘Ativo’.
Isso é tudo. Agora você pode visitar a página do Painel para ver seu widget personalizado do painel de administração do WordPress em ação.
Método 2: Criar Widget Personalizado de Painel Usando Plugin (Mais Fácil)
Este método é mais fácil, mas o colocamos como o segundo método porque é um pouco menos flexível do que adicionar código personalizado.
Para este método, usaremos o plugin Ultimate Dashboard. Ele é um dos melhores plugins de painel de administração do WordPress e ajuda você a criar facilmente widgets de administração personalizados.
Para mais detalhes, veja nossa análise completa do Ultimate Dashboard.
Primeiro, você precisa instalar e ativar o plugin Ultimate Dashboard. Para mais detalhes, veja nosso artigo sobre como instalar um plugin do WordPress.
Após a ativação, você deve visitar a página Ultimate Dash…» Add New. Primeiro, você precisa fornecer um título para o seu widget e, em seguida, selecionar um Tipo de Widget.
Existem três tipos de widgets que você pode criar:
- Widget de Ícone – Exibe um ícone grande e o aponta para qualquer página do seu site.
- Widget de Texto – Usa um editor visual onde você pode adicionar qualquer texto que desejar com algumas opções básicas de formatação.
- Widget HTML – Adiciona código HTML ao seu widget personalizado.
Vamos analisar cada um deles.
1. Criar Widget de Ícone Personalizado
Selecione ‘Icon Widget’ como ‘Widget Type’ e, em seguida, escolha o ícone que deseja exibir. Por padrão, ele vem com um número limitado de ícones para escolher.
Abaixo, você pode adicionar um texto em ‘Tool Tip’ para explicar aos usuários o que acontece quando eles clicam no ícone. Por exemplo: ‘Leva você para a página de configurações do WordPress.’
Depois disso, adicione o link para onde você deseja enviar os usuários quando eles clicarem no ícone.
Finalmente, clique em ‘Publish’ para salvar suas alterações e visite o Dashboard para ver o widget em ação.
É assim que ficaria.
2. Criar um Widget de Texto Personalizado
Se você ainda não estiver lá, vá para a página Ultimate Dash…» Add New. Selecione ‘Text Widget’ como seu Tipo de Widget.
O plugin mostrará um editor de texto visual (o mesmo do antigo editor clássico) onde você pode adicionar qualquer texto que desejar exibir com formatação HTML básica.
Quando terminar, clique em ‘Publish’ para salvar suas alterações.
Agora você pode visitar seu painel de administração para ver este widget de administração personalizado em ação.
3. Crie um Widget HTML Personalizado
Se você ainda não está lá, precisa ir para a página Ultimate Dash…» Adicionar Novo. Selecione ‘Widget HTML’ como seu Tipo de Widget.
O plugin mostrará um editor HTML onde você pode adicionar qualquer código HTML com CSS inline.
Quando terminar, clique em ‘Publish’ para salvar suas alterações.
Agora você pode visitar seu painel de administração para ver este widget de administração personalizado em ação.
Usando o Ultimate Dashboard, você pode criar quantos widgets personalizados quiser e misturar e combinar diferentes tipos de widgets para criar uma experiência de painel de administração útil.
Levando Seu Painel de Administração do WordPress Para o Próximo Nível
A área de administração do WordPress é onde a maioria dos proprietários de sites passa muito tempo escrevendo conteúdo, criando páginas, gerenciando pedidos e muito mais.
Aqui estão alguns recursos adicionais para otimizar o painel de administração do WordPress:
- Como personalizar o painel de administração do WordPress
- Como Fazer White Label no Painel de Administração do WordPress
- Como Criar Fluxos de Trabalho Automatizados no WordPress
- Plugins e Dicas para Melhorar a Área de Administração do WordPress
Esperamos que este artigo tenha ajudado você a adicionar widgets personalizados ao painel na área de administração do WordPress. Você também pode querer ver nosso guia de segurança do WordPress ou dar uma olhada neste tutorial sobre como ocultar itens desnecessários da área de administração.
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.
Brandon
Muito útil. Obrigado.
WPBeginner Support
Que bom que foi útil!
Admin
Jef Vermeire
Você pode adicionar vários widgets do mesmo tipo no painel do WordPress. Por exemplo: posso adicionar o 'custom_help_widget' personalizado duas vezes no meu painel?
WPBeginner Support
You could if you wanted to, you would want to add an additional line of the wp_add_dashboard_widget if you wanted it twice
Admin
Xavier Barbot
Very useful, thank you, I’ve tried all the plugins but none achieved adding a simple widget for my clients, very slick and easy to replicate by cresting a custom plugin, I give you 5 stars!
WPBeginner Support
Glad our recommendation was helpful
Admin
Syed Ali Ahmed
Obrigado por compartilhar isso, isso é incrível, eu amo isso.
WPBeginner Support
Glad you found our guide helpful
Admin
Mike
É possível estilizar o widget com atributos personalizados via HTML ou CSS?
WPBeginner Support
Você poderia, mas isso vai além do que cobrimos em nossos artigos.
Admin
daan van middendorp
Como posso usar isso com uma função personalizada?
WPBeginner Support
Se sua função personalizada puder ver widgets do painel, ela deverá ser capaz de ver o widget personalizado.
Admin
haqem
como colocar este widget personalizado na área "Adicionar Novo Post" para escrever
Ron Sierra
Isso foi perguntado uma vez, mas não consegui encontrar a resposta. Como crio vários widgets de painel?
Bjornen
Como adiciono a função wp_mail a este widget?
Significado; como forneço ao cliente um formulário de contato neste widget?
Vishah
Como posso adicionar um botão?
Wade
Usei seu código e obtive a tela branca da morte. WP 4.7.2
Alguma ideia?
WPBeginner Support
Olá Wade,
Você pode remover o código usando FTP. Por favor, veja também nosso guia sobre como corrigir a tela branca da morte no WordPress
Admin
gobinda das
posso mudar o título do tema Flowtown para outra coisa
Javier
Olá, estou tentando criar widgets personalizados por usuário. Cada usuário precisa ter um widget com um texto diferente.
Existe alguma maneira de conseguir isso?
David Guerreiro
Isso é muito fácil! Com PHP, obtenha o usuário atual na função que você está usando para exibir o conteúdo da metabox e altere o HTML dependendo do usuário recuperado. Dê uma olhada nisso:
Lại Đình Cường
Olá Syed Balkhi, como posso adicionar um novo widget de administrador com ordem?
shakun
Como adicionar múltiplos widgets no painel
Nishant
Tentei inserir um do_shortcode() com um shortcode para um formulário de contato para dar ao usuário acesso rápido para relatar qualquer bug ou fornecer feedback, mas não funcionou... alguma ideia de como fazer o CF 7 funcionar com isso?
Obrigado
Dustin
Seria ótimo saber. Também estou tentando usar um shortcode em um widget do painel.
Mike
Isso não está funcionando para mim na versão 3.5. Existem atualizações para fazer isso funcionar? Obrigado!
smayzes
É possível fazer isso usando OOP?
por exemplo:
dentro de uma classe:
wp_add_dashboard_widget(‘custom_help_widget’, ‘Ajuda e Suporte’, array($this, ‘customDashboardHelp’));
function customDashboardHelp() {
echo ‘<p>Bem-vindo ao seu CMS personalizado!’;
}
Nick Powers
Sei que sua mensagem é bem antiga, mas para o bem de outros que vierem aqui e tiverem a mesma pergunta. Sim, funciona com POO, assim como você indicou.
luxsub
É possível colocar um widget com adsense no seu painel para um site multiusuário?
y3kgeek
Ótima ideia. E se eu quiser criar um widget de painel personalizado que apenas pessoas com uma determinada função de usuário, digamos, Escritor Colaborador, possam ver?
Equipe Editorial
Você pode fazer isso usando a instrução condicional if user_can ou até mesmo user roles.
Admin
DramaKing
Sei que já se passaram três anos, mas se outros acontecerem de passar por aqui procurando uma resposta (como eu), é assim que eu fiz. Não sei muito sobre codificação, então provavelmente não está limpo, mas é assim que consegui fazer funcionar:
add_action(‘wp_dashboard_setup’, ‘dashboard_widget_mail’);
function dashboard_widget_mail() { global $wp_meta_boxes;
if ( current_user_can( ‘delete_users’ ) ) {
wp_add_dashboard_widget(‘custom_mail_widget’, ‘Nome do widget a ser exibido no painel’, ‘custom_dashboard_mail’); } return true; }
function custom_dashboard_mail() {
echo ‘Seu texto personalizado aqui.’; }
—
Você pode substituir ‘delete_users’ por qualquer capacidade que desejar, é claro.
Martin
Obrigado por isso! Funciona muito bem.
Só uma pergunta rápida: Se eu quiser adicionar 2 ou mais widgets personalizados no functions.php, preciso mudar o nome da “action” e da “function”?
Equipe Editorial
Sim, você teria que adicionar duas funções e ações separadas...
Admin
ACS04
Parece bom, mas seria melhor criar um plugin simples para fazer isso, de forma que este widget fique independente dos temas… Você não acha?
Equipe Editorial
Bem, você pode, mas no nosso caso contém informações de suporte que queremos que nossos clientes saibam. Isso é principalmente para designs de temas personalizados, então só é bom ter quando nosso tema está ativado.
Admin
Frankie Jarrett
Thanks a lot for the easy example. I was able to get something up and running in just a few seconds
Stéphane
Uau! Nunca ouvi falar desse truque antes… Muito bom, obrigado!
Daniel
Worked like a charm. Using this as a workaround for one of my membership site that locked all dashboard menus; this will point members to the appropriate edit posts links again.
richard
ao criar dois widgets, como você os coloca lado a lado em vez de um em cima e outro embaixo?
Equipe Editorial
Olá Richard, você pode fazer seu widget ser exibido no topo usando o código na API de Widgets do Painel do WordPress. Não sabemos como colocá-los lado a lado sem ir manualmente e salvá-lo para o cliente. Talvez enviar um e-mail para Jake e perguntar a ele seria uma boa ideia.
Embora lembre-se, as configurações que você define em functions.php não substituem as configurações normais se o usuário já alterou as configurações anteriormente. Isso só funciona se o usuário nunca organizou seu painel antes.
Admin
Ash Blue
Use display block no elemento mais externo e float left, certifique-se de definir uma largura, mas isso pode quebrá-lo. Isso é muito semelhante a um layout de galeria. Isso não é sugerido e não é necessariamente como o WordPress projetou os widgets para serem usados (use por sua conta e risco).
david
wpmu. Encontrei /wp-includes/functions.php, mas onde devo inserir o código? Obrigado pela ajuda
Equipe Editorial
Na verdade, você inclui isso no arquivo functions.php do seu tema, não no arquivo principal.
Admin
cho
o que você quer dizer com functions.php dos temas?
não consigo encontrar tal arquivo
Equipe Editorial
Existe um arquivo functions.php localizado na pasta do seu tema.
Ash Blue
Interessante, fiz tudo isso com a linha abaixo. Um é melhor, ou ambos são igualmente bons?
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name'=>'Contato',
));
}
Equipe Editorial
Seu código é para registrar Widgets de Barra Lateral. O código que estamos compartilhando neste artigo é para adicionar um widget de painel personalizado. Quando alguém faz login em seu wp-admin, eles veem estatísticas de postagem e outras informações. Esta caixa será adicionada lá.
Dois tópicos completamente diferentes.
Admin
Vivek @ InfoEduTech
obrigado pelo tutorial.
por favor, não leve a mal, sempre que for postar algum artigo, poste-o com a captura de tela apropriada para que seja fácil para os novatos.
Jim
Isso é incrível, obrigado por compartilhar.