{"id":15227,"date":"2018-03-07T10:00:00","date_gmt":"2018-03-07T13:00:00","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=15227"},"modified":"2019-03-16T03:01:22","modified_gmt":"2019-03-16T06:01:22","slug":"como-personalizar-pagina-de-login-wordpress","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/como-personalizar-pagina-de-login-wordpress\/","title":{"rendered":"Como personalizar p\u00e1gina de login WordPress"},"content":{"rendered":"

A p\u00e1gina de login do WordPress \u00e9 f\u00e1cil de usar e tem um design bacana. Cumpre sua \u00fanica fun\u00e7\u00e3o de permitir que um usu\u00e1rio acesse ao painel atrav\u00e9s de login e senha independente do n\u00edvel de conhecimento da plataforma. Por\u00e9m, n\u00e3o seria ainda mais bacana se essa p\u00e1gina tivesse a cara da sua empresa<\/strong>?<\/p>\n

Pensando nisso, hoje veremos 3 formas muito simples de como personalizar a tela de login do WordPress<\/strong>, bem como outros detalhes do ambiente do painel admin da plataforma.<\/p>\n

Personalizando p\u00e1gina de login WordPress com pequenos trechos de c\u00f3digos<\/h2>\n

Na Ag\u00eancia Xadrez, desenvolvemos muitos projetos com WordPress todos os meses. E para agilizar o processo de desenvolvimento, n\u00f3s criamos um tema-master, com os principais c\u00f3digos que usamos em quase todo site que desenvolvemos com o CMS. \u00c9 quase um framework pr\u00f3prio<\/strong>. Separamos os trechos de c\u00f3digo que vamos utilizar e realizamos uma instala\u00e7\u00e3o com esse pacote.<\/p>\n

Os trechos de c\u00f3digo a seguir foram retirados diretamente dos arquivos functions.php<\/em> e style.css<\/em> de nosso tema-master. Basicamente, voc\u00ea s\u00f3 vai precisar desses dois arquivos para personalizar o ambiente de administra\u00e7\u00e3o do WordPress<\/strong> nesse tutorial. Se quiser, fa\u00e7a o download dos arquivos neste link<\/a>.<\/p>\n

Vamos l\u00e1?<\/p>\n

Personalizando logotipo e background<\/h3>\n

Com os c\u00f3digos a seguir, voc\u00ea sobrescreve as regras de estilo aplicadas ao background da p\u00e1gina de login e tamb\u00e9m no logotipo WordPress acima do formul\u00e1rio de login. Adicione-os em functions.php<\/em>.<\/p>\n

add_action('login_head', 'xadrez_custom_login_logo');\r\n\r\nfunction xadrez_custom_login_logo() {\r\n  \r\n}<\/pre>\n
 <\/p>\n
No trecho acima, voc\u00ea adiciona a action que estamos criando.<\/p>\n
Agora, vamos adicionar css em linha, dentro da fun\u00e7\u00e3o que criamos, para modificar a imagem do logotipo:<\/p>\n
echo '<style type=\"text\/css\">\r\nh1 a { background-image:url('.get_stylesheet_directory_uri().'\/img\/caminho-do-logotipo.jpg) !important; background-size:contain !important; height:72px !important; width:320px !important; margin-bottom:0 !important; padding-bottom:0 !important; }\r\n.login form { margin-top: 10px !important; }\r\n<\/style>';\r\n<\/pre>\n
Explicando: h1 a<\/em> representa o logotipo WordPress<\/strong>. Para substitu\u00ed-lo, voc\u00ea vai aplicar uma imagem de background para este elemento. Crie uma imagem, adicione ao seu tema, acerte altura e largura do elemento para o mesmo tamanho da imagem criada e corrija o caminho da imagem.<\/p>\n
No c\u00f3digo abaixo, voc\u00ea vai incluir o carregamento do arquivo style.css<\/em> \u00e0 p\u00e1gina de login. A ideia \u00e9 adicionar os estilos de background dessa p\u00e1gina no css do tema.<\/p>\n
function custom_login_css() {\r\n        echo '<link rel=\"stylesheet\" type=\"text\/css\" href=\"'.get_stylesheet_directory_uri().'\/style.css\"\/>';\r\n}\r\n\r\nadd_action('login_head', 'custom_login_css');<\/pre>\n
 <\/p>\n
A seguir, 3 linhas de css que voc\u00ea deve adicionar ao style.css do tema.<\/p>\n
body.login{background:url(img\/caminho-do-bg.jpg) center top repeat;}\r\nbody.login form{background:#efefef;}\r\nbody.login label{color:#aaa}<\/pre>\n
A primeira linha adiciona uma imagem para o background (n\u00e3o se esque\u00e7a de subir a imagem para o tema e apontar a URL correta<\/strong>). Em seguida, um trecho para personalizar o formul\u00e1rio. Por \u00faltimo, uma linha de css para personalizar as labels do formul\u00e1rio de login.<\/p>\n
A seguir, voc\u00ea faz o functions.php aplicar as altera\u00e7\u00f5es.<\/p>\n
function xadrez_url_login_logo(){\r\n     return get_bloginfo( 'wpurl' );\r\n}\r\n\r\nadd_filter('login_headerurl', 'xadrez_url_login_logo');<\/pre>\n
 <\/p>\n
S\u00f3 com esses 2 recursos voc\u00ea j\u00e1 ter\u00e1 um visual bem bacana na p\u00e1gina de login. Veja como ficou a p\u00e1gina da Ag\u00eancia Xadrez.<\/p>\n
\"P\u00e1gina<\/p>\n
E aqui, dois cases de aplica\u00e7\u00e3o desse recurso em nossos clientes.<\/p>\n
\"P\u00e1gina\"P\u00e1gina<\/p>\n
Alterando t\u00edtulo e link do logotipo<\/h3>\n
Voc\u00ea pode refinar um pouco mais alterando 2 pequenos detalhes nessa p\u00e1gina: o texto exibido ao passar o mouse pelo logotipo e o link ao clicar no mesmo.<\/p>\n
Aqui voc\u00ea altera o t\u00edtulo do logotipo.<\/p>\n
function xadrez_login_logo_url_title() {\r\n           return 'Desenvolvido pela Ag\u00eancia Xadrez.';\r\n}\r\nadd_filter( 'login_headertitle', 'xadrez_login_logo_url_title' );<\/pre>\n
 <\/p>\n
E agora, voc\u00ea modifica o link do logotipo.<\/p>\n
add_filter( 'login_headerurl', 'custom_login_header_url' );\r\n\r\nfunction custom_login_header_url($url) {\r\n         return 'http:\/\/www.agenciaxadrez.com.br\/';\r\n}<\/pre>\n
 <\/p>\n
Muito f\u00e1cil, n\u00e9? \ud83d\ude42<\/p>\n
B\u00f4nus: adicione um box de informa\u00e7\u00f5es no painel WP<\/h3>\n
At\u00e9 aqui, voc\u00ea deixou a p\u00e1gina de login do seu projeto – ou do seu cliente – muito mais bacana. Agora, pra agregar mais valor ao seu trabalho, que tal adicionar um box com suas informa\u00e7\u00f5es de contato? Dica: seu cliente vai perceber o valor do dinheiro investido.<\/p>\n
Basta adicionar esse trecho de c\u00f3digo em functions.php<\/em>:<\/p>\n
 <\/p>\n
function xadrez_add_dashboard_widgets() {\r\n        wp_add_dashboard_widget('wp_dashboard_widget', 'Sobre o site', 'xadrez_theme_info');\r\n}<\/pre>\n
 <\/p>\n
Primeiro, adicionamos a action que acrescenta o box. Observe que demos ao box, o t\u00edtulo “Sobre o site<\/strong>“.<\/p>\n
Em seguida, informamos o que o box vai informar. Nesse caso, inserimos os dados em uma tabela.<\/p>\n
add_action('wp_dashboard_setup', 'xadrez_add_dashboard_widgets' );\r\n\r\nfunction xadrez_theme_info() {\r\n\r\n  echo \"<ul>\r\n       <li><strong>Site desenvolvido por:<\/strong> Ag\u00eancia Xadrez.<\/li>\r\n       <li><strong>Precisa de ajuda?<\/strong> V\u00e1 \u00e0 se\u00e7\u00e3o <a href='\".home_url().\"\/ajuda' target='_blank'><i>#comofaz<\/i><\/a><\/li>\r\n       <li><strong>Website:<\/strong> <a href='http:\/\/www.agenciaxadrez.com.br'>www.agenciaxadrez.com.br<\/a><\/li>\r\n       <li><strong>Contato:<\/strong> <a href='mailto:ola@agenciaxadrez.com.br'>ola@agenciaxadrez.com.br<\/a><\/li>\r\n     <\/ul>\";\r\n}<\/pre>\n
 <\/p>\n
Nos projetos que desenvolvemos, al\u00e9m das informa\u00e7\u00f5es de contato (nosso site e email), adicionamos a URL da p\u00e1gina de ajuda que criamos para cada site. Voc\u00ea pode informar o que achar conveniente, como por exemplo: hor\u00e1rio de atendimento, telefone de contato, etc.<\/p>\n
B\u00f4nus: modifique a mensagem de rodap\u00e9 do painel admin<\/h3>\n
Outra detalhe sutil: Voc\u00ea pode personalizar a mensagem no rodap\u00e9 do painel de administra\u00e7\u00e3o do WordPress com esse c\u00f3digo simples.<\/p>\n
function change_footer_admin () {\r\n        echo 'Website criado pela Ag\u00eancia Xadrez utilizando WordPress. Se precisar de ajuda, entre em <a href=\"http:\/\/www.agenciaxadrez.com.br\" target=\"_blank\" title=\"Link para o site da Xadrez.\">contato<\/a>. Estamos \u00e0 disposi\u00e7\u00e3o ;-)';\r\n}\r\n\r\nadd_filter('admin_footer_text', 'change_footer_admin');<\/pre>\n
 <\/p>\n
O resultado…<\/p>\n
\"Painel<\/a><\/p>\n
Concluindo<\/h2>\n
Com pequenos trechos de c\u00f3digo, voc\u00ea viu que \u00e9 poss\u00edvel personalizar a p\u00e1gina de login WordPress e deix\u00e1-la com visual bem legal. Esse procedimento f\u00e1cil de fazer vai criar um grande diferencial no projeto e aumentar o valor percebido pelo cliente.<\/p>\n
Fa\u00e7a um teste. Passe a apresentar esse resultado a seus clientes e conte pra gente como est\u00e1 sendo a recep\u00e7\u00e3o.<\/p>\n","protected":false},"excerpt":{"rendered":"
A p\u00e1gina de login do WordPress \u00e9 f\u00e1cil de usar e tem um design bacana. Cumpre sua \u00fanica fun\u00e7\u00e3o de permitir que um usu\u00e1rio acesse ao painel atrav\u00e9s de login e senha independente do n\u00edvel de conhecimento da plataforma. Por\u00e9m, n\u00e3o seria ainda mais bacana se essa p\u00e1gina tivesse a cara da sua empresa? Pensando […]<\/p>\n","protected":false},"author":83,"featured_media":15356,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[291],"tags":[],"class_list":["post-15227","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/15227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/83"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=15227"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/15227\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/15356"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=15227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=15227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=15227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}