MeetUp WP Floripa - dicas simples de como deixar o admin com a cara do seu cliente

11

Click here to load reader

Transcript of MeetUp WP Floripa - dicas simples de como deixar o admin com a cara do seu cliente

Page 1: MeetUp WP Floripa - dicas simples de como deixar o admin com a cara do seu cliente

Dicas simples de como deixar o admin com a cara do

seu clienteSem utilizar plugin

Page 2: MeetUp WP Floripa - dicas simples de como deixar o admin com a cara do seu cliente

Por que eu devo personalizar o admin ?

- Layouts únicos- Menos dor de cabeça- Tornar uma extensão da marca

Page 3: MeetUp WP Floripa - dicas simples de como deixar o admin com a cara do seu cliente

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]

Page 4: MeetUp WP Floripa - dicas simples de como deixar o admin com a cara do seu cliente

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' );

Page 5: MeetUp WP Floripa - dicas simples de como deixar o admin com a cara do seu cliente

Inserindo seu logotipo

Page 6: MeetUp WP Floripa - dicas simples de como deixar o admin com a cara do seu cliente

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;

}';}

Page 7: MeetUp WP Floripa - dicas simples de como deixar o admin com a cara do seu cliente

Modificando a mensagem de saudaçãoPara 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 );

Page 8: MeetUp WP Floripa - dicas simples de como deixar o admin com a cara do seu cliente

Modificando o texto do footer

// Customizar o Footer do WordPressfunction 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.

Page 9: MeetUp WP Floripa - dicas simples de como deixar o admin com a cara do seu cliente

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 {}

Page 10: MeetUp WP Floripa - dicas simples de como deixar o admin com a cara do seu cliente

Principais classes do painel

#wpheadO cabeçalho do painél contendo o título principal, nome do blog e link para o site.#adminmenu ulA barra de navegação lateral com os links: Posts, Mídia, Ferramentas…#adminmenu2 ulA subnavegação da barra lateral. Por exemplo “dentro” de Posts teríamos Todos os Posts, Adicionar Novo, Tags e Categorias..wrapA div que funciona como um container principal do painel de administração.#footerO rodapé do site com logotipo do wordpress, versão e links..wrap h2Títulos das seções principais como por exemplo Painel.

Page 11: MeetUp WP Floripa - dicas simples de como deixar o admin com a cara do seu cliente

Obrigado (: