Este documento fornece dicas para personalizar o painel administrativo do WordPress sem plugins, incluindo modificar a URL de login, adicionar logotipo, ícone e mensagens, e alterar estilos usando classes CSS.
1. Dicas simples de como
deixar o admin com a cara do
seu cliente
Sem utilizar plugin
2. Por que eu devo personalizar o admin ?
- Layouts únicos
- Menos dor de cabeça
- Tornar uma extensão da marca
3. Uma url para chamar de sua
Editaremos o arquivo .htaccess. Ele fica geralmente na pasta raíz do WP.
Dependendo das configurações do seu servidor ele pode estar oculto.
Para modificar a url do seu painel de administração basta inserir esta linha
no topo do seu arquivo (substituindo “seu-site” pela sua url):
RewriteRule ^login$ http://seu-site.com.br/wp-login.php [NC,L]
4. Inserindo seu logotipo
Crie um arquivo de imagem com o tamanho máximo de 323 pixels de
largura por 67 pixels de altura.
Cole o código abaixo nos functions.php
function my_login_logo() { ?>
body.login div#login h1 a {
background-image: url(/img/site-login-logo.png);
padding-bottom: 30px;
}
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );
6. Inserindo seu ícone na Dashboard
Para adicionar o seu próprio ícone basta criar uma imagem de 20px
quadrados. A imagem precisa ser transparente (formato gif ou png).
Cole o código abaixo no functions.php
add_action('admin_head', 'my_custom_logo');
function my_custom_logo() {
echo '
#wp-admin-bar-wp-logo .ab-icon {
background: url('.get_bloginfo('template_directory').'/img/admin_logo.png)
no-repeat center top !important;
}';
}
7. Modificando a mensagem de saudação
Para trocar o texto da saudação basta adicionar o seguinte snippet no
functions.php.
Ah, se o seu admin estiver em inglês substitua “Olá” por “Howdy”.
function replace_howdy( $wp_admin_bar ) {
$my_account=$wp_admin_bar->get_node('my-account');
$newtitle = str_replace( 'Olá', 'Bem vindo', $my_account->title );
$wp_admin_bar->add_node( array(
'id' => 'my-account',
'title' => $newtitle,
) );
}
add_filter( 'admin_bar_menu', 'replace_howdy',25 );
10. Principais classes do painel
#wphead
O cabeçalho do painél contendo o título principal, nome do blog e link para o site.
#adminmenu ul
A barra de navegação lateral com os links: Posts, Mídia, Ferramentas…
#adminmenu2 ul
A subnavegação da barra lateral. Por exemplo “dentro” de Posts teríamos Todos
os Posts, Adicionar Novo, Tags e Categorias.
.wrap
A div que funciona como um container principal do painel de administração.
#footer
O rodapé do site com logotipo do wordpress, versão e links.
.wrap h2
Títulos das seções principais como por exemplo Painel.