Dicas simples de como
deixar o admin com a cara do
seu cliente
Sem utilizar plugin
Por que eu devo personalizar o admin ?
- Layouts únicos
- Menos dor de cabeça
- Tornar uma extensão da marca
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]
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' );
Inserindo seu logotipo
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;
}';
}
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 );
Modificando o texto do footer
// Customizar o Footer do WordPress
function remove_footer_admin () {
echo '© Empresa - By <a href="http://seusite.com.br/">Voce</a>';
}
add_filter('admin_footer_text', 'remove_footer_admin');
Para trocar este texto novamente vamos utilizar o nosso grande amigo
functions.php. Adicione o seguinte código e mude o texto entre as aspas
depois do echo.
Principais classes da tela de login
body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}
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.
Obrigado (:

Dicas simples de como deixar o admin do wordpress com a cara do seu cliente

  • 1.
    Dicas simples decomo deixar o admin com a cara do seu cliente Sem utilizar plugin
  • 2.
    Por que eudevo personalizar o admin ? - Layouts únicos - Menos dor de cabeça - Tornar uma extensão da marca
  • 3.
    Uma url parachamar 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 Crieum 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' );
  • 5.
  • 6.
    Inserindo seu íconena 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 mensagemde 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 );
  • 8.
    Modificando o textodo footer // Customizar o Footer do WordPress function remove_footer_admin () { echo '© Empresa - By <a href="http://seusite.com.br/">Voce</a>'; } add_filter('admin_footer_text', 'remove_footer_admin'); Para trocar este texto novamente vamos utilizar o nosso grande amigo functions.php. Adicione o seguinte código e mude o texto entre as aspas depois do echo.
  • 9.
    Principais classes datela de login body.login {} body.login div#login {} body.login div#login h1 {} body.login div#login h1 a {} body.login div#login form#loginform {} body.login div#login form#loginform p {} body.login div#login form#loginform p label {} body.login div#login form#loginform input {} body.login div#login form#loginform input#user_login {} body.login div#login form#loginform input#user_pass {} body.login div#login form#loginform p.forgetmenot {} body.login div#login form#loginform p.forgetmenot input#rememberme {} body.login div#login form#loginform p.submit {} body.login div#login form#loginform p.submit input#wp-submit {} body.login div#login p#nav {} body.login div#login p#nav a {} body.login div#login p#backtoblog {} body.login div#login p#backtoblog a {}
  • 10.
    Principais classes dopainel #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.
  • 11.