SlideShare uma empresa Scribd logo
1 de 11
Baixar para ler offline
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 (:

Mais conteúdo relacionado

Semelhante a Dicas para personalizar o admin do WP

Como criar um plugin para WordPress
Como criar um plugin para WordPressComo criar um plugin para WordPress
Como criar um plugin para WordPressLeandrinho Vieira
 
Mini curso de django
Mini curso de djangoMini curso de django
Mini curso de djangorosenclever
 
WordPress além dos blogs #fisl14
WordPress além dos blogs #fisl14WordPress além dos blogs #fisl14
WordPress além dos blogs #fisl14Tatiane Pires
 
Mini curso introdutório ao Django
Mini curso introdutório ao DjangoMini curso introdutório ao Django
Mini curso introdutório ao DjangoVinicius Mendes
 
Wordpress e suas funções
Wordpress e suas funçõesWordpress e suas funções
Wordpress e suas funçõesDaniel Marcos
 
Segurança e Performance WordPress
Segurança e Performance WordPressSegurança e Performance WordPress
Segurança e Performance WordPressHenrique Mouta
 
Curso de Ruby on Rails - Aula 04
Curso de Ruby on Rails - Aula 04Curso de Ruby on Rails - Aula 04
Curso de Ruby on Rails - Aula 04Maurício Linhares
 
Coisas que eu gostaria de saber antes de começar a desenvolver temas e plugin...
Coisas que eu gostaria de saber antes de começar a desenvolver temas e plugin...Coisas que eu gostaria de saber antes de começar a desenvolver temas e plugin...
Coisas que eu gostaria de saber antes de começar a desenvolver temas e plugin...Leo Baiano
 
Introducao cms-wordpress
Introducao cms-wordpressIntroducao cms-wordpress
Introducao cms-wordpressMateus Neves
 
Evento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de FrontEvento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de FrontMichel Ribeiro
 
Symfony - Framework PHP de alta produtividade
Symfony - Framework PHP de alta produtividadeSymfony - Framework PHP de alta produtividade
Symfony - Framework PHP de alta produtividadeHugo Magalhães
 
Wordpress além do blog
Wordpress além do blogWordpress além do blog
Wordpress além do blogMateus Neves
 
Aplicações rápidas para a Web com Django
Aplicações rápidas para a Web com DjangoAplicações rápidas para a Web com Django
Aplicações rápidas para a Web com DjangoFreedom DayMS
 
Performance e boas_praticas_de_web
Performance e boas_praticas_de_webPerformance e boas_praticas_de_web
Performance e boas_praticas_de_webThiago Verly
 
Introdução ao Symfony 2 - SfCon 2012
Introdução ao Symfony 2 - SfCon 2012Introdução ao Symfony 2 - SfCon 2012
Introdução ao Symfony 2 - SfCon 2012Hugo Magalhães
 

Semelhante a Dicas para personalizar o admin do WP (20)

Como criar um plugin para WordPress
Como criar um plugin para WordPressComo criar um plugin para WordPress
Como criar um plugin para WordPress
 
Mini curso de django
Mini curso de djangoMini curso de django
Mini curso de django
 
WordPress além dos blogs #fisl14
WordPress além dos blogs #fisl14WordPress além dos blogs #fisl14
WordPress além dos blogs #fisl14
 
Mini curso introdutório ao Django
Mini curso introdutório ao DjangoMini curso introdutório ao Django
Mini curso introdutório ao Django
 
Wordpress e suas funções
Wordpress e suas funçõesWordpress e suas funções
Wordpress e suas funções
 
Segurança e Performance WordPress
Segurança e Performance WordPressSegurança e Performance WordPress
Segurança e Performance WordPress
 
Curso de Ruby on Rails - Aula 04
Curso de Ruby on Rails - Aula 04Curso de Ruby on Rails - Aula 04
Curso de Ruby on Rails - Aula 04
 
Php 05 Mvc
Php 05 MvcPhp 05 Mvc
Php 05 Mvc
 
Coisas que eu gostaria de saber antes de começar a desenvolver temas e plugin...
Coisas que eu gostaria de saber antes de começar a desenvolver temas e plugin...Coisas que eu gostaria de saber antes de começar a desenvolver temas e plugin...
Coisas que eu gostaria de saber antes de começar a desenvolver temas e plugin...
 
Introducao cms-wordpress
Introducao cms-wordpressIntroducao cms-wordpress
Introducao cms-wordpress
 
Evento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de FrontEvento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de Front
 
Python 06
Python 06Python 06
Python 06
 
Componentes para a Web
Componentes para a WebComponentes para a Web
Componentes para a Web
 
Symfony - Framework PHP de alta produtividade
Symfony - Framework PHP de alta produtividadeSymfony - Framework PHP de alta produtividade
Symfony - Framework PHP de alta produtividade
 
Wordpress além do blog
Wordpress além do blogWordpress além do blog
Wordpress além do blog
 
Tutorial.yii
Tutorial.yiiTutorial.yii
Tutorial.yii
 
Aplicações rápidas para a Web com Django
Aplicações rápidas para a Web com DjangoAplicações rápidas para a Web com Django
Aplicações rápidas para a Web com Django
 
Performance e boas_praticas_de_web
Performance e boas_praticas_de_webPerformance e boas_praticas_de_web
Performance e boas_praticas_de_web
 
Prog web 08-php-mvc
Prog web 08-php-mvcProg web 08-php-mvc
Prog web 08-php-mvc
 
Introdução ao Symfony 2 - SfCon 2012
Introdução ao Symfony 2 - SfCon 2012Introdução ao Symfony 2 - SfCon 2012
Introdução ao Symfony 2 - SfCon 2012
 

Mais de InCuca

MeetUp WP Floripa - don't panic
MeetUp WP Floripa - don't panicMeetUp WP Floripa - don't panic
MeetUp WP Floripa - don't panicInCuca
 
MeetUp WP Floripa - buddypress
MeetUp WP Floripa - buddypressMeetUp WP Floripa - buddypress
MeetUp WP Floripa - buddypressInCuca
 
Suicidal tendencies
Suicidal tendenciesSuicidal tendencies
Suicidal tendenciesInCuca
 
Um overview sobre temas em wp
Um overview sobre temas em wpUm overview sobre temas em wp
Um overview sobre temas em wpInCuca
 
1º WordPress Meetup Florianópolis - Guia de Cores para Design em Websites
1º WordPress Meetup Florianópolis - Guia de Cores para Design em Websites1º WordPress Meetup Florianópolis - Guia de Cores para Design em Websites
1º WordPress Meetup Florianópolis - Guia de Cores para Design em WebsitesInCuca
 
InCuca - Coding dojo - AngularJS
InCuca - Coding dojo - AngularJSInCuca - Coding dojo - AngularJS
InCuca - Coding dojo - AngularJSInCuca
 

Mais de InCuca (6)

MeetUp WP Floripa - don't panic
MeetUp WP Floripa - don't panicMeetUp WP Floripa - don't panic
MeetUp WP Floripa - don't panic
 
MeetUp WP Floripa - buddypress
MeetUp WP Floripa - buddypressMeetUp WP Floripa - buddypress
MeetUp WP Floripa - buddypress
 
Suicidal tendencies
Suicidal tendenciesSuicidal tendencies
Suicidal tendencies
 
Um overview sobre temas em wp
Um overview sobre temas em wpUm overview sobre temas em wp
Um overview sobre temas em wp
 
1º WordPress Meetup Florianópolis - Guia de Cores para Design em Websites
1º WordPress Meetup Florianópolis - Guia de Cores para Design em Websites1º WordPress Meetup Florianópolis - Guia de Cores para Design em Websites
1º WordPress Meetup Florianópolis - Guia de Cores para Design em Websites
 
InCuca - Coding dojo - AngularJS
InCuca - Coding dojo - AngularJSInCuca - Coding dojo - AngularJS
InCuca - Coding dojo - AngularJS
 

Dicas para personalizar o admin do WP

  • 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 );
  • 8. 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.
  • 9. 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 {}
  • 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.