Como Adicionar um Logo Personalizado no Painel do WordPress

Na WPBeginner, recebemos muitas perguntas de usuários que desejam personalizar o WordPress. Um dos pedidos mais comuns? Substituir o logo padrão do WordPress por um logo personalizado no painel.

Substituir o logo do WordPress pelo seu próprio logo personalizado é uma ótima maneira de dar marca à sua área de administração e fazer com que seu site pareça verdadeiramente único.

Quer você esteja gerenciando o site sozinho ou tenha uma equipe de usuários, um logo personalizado no painel é um toque agradável que torna o site mais profissional.

Neste artigo, mostraremos como adicionar um logo personalizado no painel do WordPress para branding.

O Que É um Logo Personalizado no Painel e Por Que Adicionar Um? 

Um logo personalizado no painel aparece no painel de administração do WordPress com seu próprio logo ou marca personalizada.

Embora adicionar um possa parecer um detalhe menor, é uma parte vital da marca do seu site e importante por várias razões:

• Branding: Reforça a identidade da sua marca e faz com que a área de administração do WordPress pareça mais parte do seu negócio.
• Profissionalismo: Um logo personalizado no painel confere ao seu site WordPress um visual mais profissional e polido.
• White Labeling: Se você está criando sites para clientes ou executando uma rede multisite, você pode usar logotipos personalizados no painel para fazer o white-label da área administrativa do WordPress. Isso significa que você pode remover completamente a marca do WordPress e substituí-la pela sua, para criar uma experiência personalizada para seus clientes.

Se você possui uma loja online, um pequeno negócio ou um blog, um logotipo personalizado no painel é importante para ajudar a personalizar a experiência de backend e estabelecer uma forte identidade de marca interna.

Nas seções a seguir, mostraremos 2 métodos diferentes para adicionar um logotipo personalizado no painel do WordPress, bem como um método para simplesmente remover o logotipo do WordPress do painel.

• Método 1: Adicionando um Logotipo Personalizado no Painel do WordPress Usando um Plugin
• Método 2: Adicionando Manualmente um Logotipo Personalizado no Painel do WordPress
• Alternativa: Removendo o Logotipo do WordPress do Painel de Administração

Pronto? Vamos começar.

Método 1: Adicionando um Logotipo Personalizado no Painel do WordPress Usando um Plugin

Este método é super fácil e recomendado para a maioria dos iniciantes.

A primeira coisa que você precisa fazer é instalar e ativar o plugin White Label CMS. Se precisar de ajuda, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, você precisará visitar Configurações » White Label CMS no seu painel do WordPress. 

Em seguida, vamos garantir que você esteja na aba 'Branding'.

A partir daqui, você pode alternar o interruptor da esquerda para a direita para ‘Ocultar Logo e Links do WordPress’.

Em seguida, você desejará ir para a aba ‘Painel’.

Em ‘Ícone do Painel’, você fará o upload de um logo personalizado. Simplesmente clique no link ‘Upload’ para iniciar o processo.

Seu logo personalizado deve ter exatamente 40 x 40 pixels de dimensão. Caso contrário, ele ficará estranho – cortado ou esticado.

Não se esqueça de clicar no botão ‘Salvar’ no canto superior direito para salvar suas alterações.

Agora, vamos voltar para a área de administração do WordPress e abrir o painel ‘Painel’.

Neste painel, você deverá ver o novo logo personalizado. Veja como ele pode parecer:

Além do logo personalizado do painel, o plugin White Label CMS também oferece outros recursos para rebrandar sua instalação do WordPress.

Para mais informações, você pode consultar nosso guia sobre como branquear o painel de administração do WordPress.

Método 2: Adicionando Manualmente um Logotipo Personalizado no Painel do WordPress

Este método é para usuários que se sentem confortáveis em colar snippets de código no WordPress. A maneira mais fácil e segura de adicionar código personalizado ao seu WordPress é com um plugin como o WPCode.

A maioria dos tutoriais que ensinam como adicionar shortcodes ao seu site WordPress farão você adicionar o código ao arquivo functions.php do seu tema. Embora possa funcionar, há muitas coisas que podem dar errado.

Mesmo um pequeno erro no código ou na forma como você o adiciona pode quebrar seu site WordPress e torná-lo inacessível. Portanto, recomendamos isso apenas para usuários avançados.

Mesmo para usuários avançados, o WPCode é a maneira mais segura de fazer isso.

Então, para começar, você precisará instalar e ativar o plugin gratuito WPCode. Para instruções mais detalhadas, você vai querer seguir nosso guia sobre como instalar um plugin do WordPress.

Em seguida, vamos garantir que você salve seu logotipo personalizado como um arquivo custom-logo.png no seu computador. Ele precisa ter exatamente 40 x 40 px de dimensões.

Assim que seu logotipo personalizado estiver pronto, você o carregará na pasta /wp-content/themes/seu-tema/images usando FTP. Se o seu tema não tiver uma pasta de imagens, você precisará criá-la.

A partir daí, você pode ir para Snippets de Código » +Adicionar Snippet.

Em seguida, você acessará a biblioteca WPCode, onde há dezenas de snippets de código para escolher.

Aqui, você desejará selecionar 'Adicionar Seu Código Personalizado' e clicar no botão 'Usar snippet'.

No editor, você dará um título ao snippet, por exemplo, 'Logo personalizado no painel'.

Em seguida, você precisará definir o 'Tipo de Código' como 'Snippet PHP'.

Depois disso, basta adicionar este código na caixa 'Prévia do Código':

function wpb_custom_logo() {
echo '
<style type="text/css">
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
background-image: url(' . get_bloginfo('stylesheet_directory') . '/images/custom-logo.png) !important;
background-position: 0 0;
color:rgba(0, 0, 0, 0);
}
#wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
background-position: 0 0;
}
</style>
';
}

//hook into the administrative header output
add_action('wp_before_admin_bar_render', 'wpb_custom_logo');

Deve ficar parecido com isto:

Antes de prosseguir, vamos garantir que todo o texto e a formatação sejam exatamente os mesmos mostrados acima.

se tudo parecer bom, você pode rolar para baixo até 'Método de Inserção' e selecionar 'Inserção Automática'.

Para garantir que seu logotipo personalizado apareça no painel, você desejará expandir o menu suspenso 'Localização' e escolher 'Somente Admin'.

Por último, você pode alternar o interruptor de Inativo para Ativo e clicar no botão 'Salvar'.

Este código simplesmente adiciona o CSS necessário para exibir seu logotipo personalizado na barra de administração do WordPress.

Alternativa: Removendo o Logotipo do WordPress do Painel de Administração

Se você preferir remover completamente o logotipo do WordPress do painel de administração sem substituí-lo por um logotipo personalizado, este método é para você.

Como mencionamos anteriormente, WPCode é o melhor plugin de snippets de código, e ele facilita adicionar código personalizado ao WordPress.

Melhor ainda, ele vem com uma biblioteca de mais de 1.500 trechos de código prontos, incluindo um para remover o logotipo da barra de administração do WordPress, que você pode usar para personalizar rapidamente seu site, sem necessidade de experiência em codificação.

Para começar, você precisa instalar e ativar o plugin gratuito WPCode. Se precisar de ajuda, você pode seguir nosso tutorial sobre como instalar um plugin do WordPress.

Após a ativação, você desejará ir para Trechos de Código » Biblioteca no painel de administração do WordPress.

A partir daí, você pode procurar pelo snippet ‘Remover o Logo do WordPress da Barra de Administração’. Assim que encontrá-lo, basta passar o mouse sobre ele e clicar no botão ‘Usar snippet’.

O WPCode adicionará o código automaticamente para você.

Ele também selecionará o método de inserção correto e adicionará tags para ajudar você a acompanhar o código que está usando em seu site.

Agora, é hora de ativar o snippet de código.

Tudo o que você precisa fazer é alternar o interruptor na parte superior da página de ‘Inativo’ para ‘Ativo’ e clicar no botão ‘Atualizar’.

Pronto; você removeu o logo do WordPress do painel de administração.

Esperamos que este artigo tenha ajudado você a aprender como adicionar um logo personalizado ao painel do WordPress. Em seguida, você também pode querer ver nosso guia sobre como ocultar itens desnecessários do WordPress com Adminimize ou ler nossas melhores escolhas de plugins e dicas para melhorar a área de administração do WordPress.

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.