VISENER | Engenharia e Consultoria, Lda

  • Início
  • Empresa
  • Serviços
  • Blog
  • Mapa do Site
  • Contactos

Blog

Esteja a par das nossas novidades.

Início » Blog » WordPress » Como alterar a página de login do WordPress

Como alterar a pagina de login de WordPress

Como alterar a página de login do WordPress

Actualizado em 18 de Abril de 2013 por VISENER

WordPress / 0 Comentários


Neste tutorial vamos explicar como alterar e personalizar a página de login do WordPress. Já deve ter reparado, que a página tem estilos (Stylesheets) e um logótipo que vem por defeito quando se faz a instalação do WordPress.

Já imaginou poder mudar a página, dando-lhe um toque mais personalizado e ao mesmo tempo dar-lhe uma imagem que tenha haver com o cliente ou até mesmo em relação à sua empresa e/ou negocio.

Depois de seguir todos os passos que vamos descrever, irá ter uma página com uma imagem de fundo personalizada, bem como o seu formulário e até mesmo os seus links entre outros aspectos.

Para ter uma ideia do que vamos fazer, veja a diferença da página de login por defeito e da página com que vamos ficar no final deste tutorial.

Página de login por defeito
Como alterar a página de login do WordPress
Página de login alterada
Como alterar a página de login do WordPress
(Imagem de fundo por: Ennor)

Como alterar a página de login do WordPress

As alterações podem ser executadas de duas maneiras, através de um plugin ou através do ficheiro “functions.php” do WordPress. Visto que vamos usar a segunda opção,  só temos de acrescentar algumas funções (hooks) que nos vão permitir alterar por completo a página de login do WordPress.

Possivelmente, neste momento está-se a perguntar a si próprio se usando um plugin não seria mais fácil. Sim seria, só tinha de instalar, activar e configurar. Mas imagine que o plugin tem uma opção implementada que você não gosta, ou não está do seu agrado e o resultado final que apresenta não é o desejado. Visto que vamos ser nós a implementar as alterações que desejamos, temos o controlo total do que se quer alterar, como alterar e como apresentar, para alem de ficarmos a saber como se faz.

Passos a seguir

Antes de começarmos, precisamos de ter alguns ficheiros que vão ser necessários para completarmos este processo.

  • Imagem de fundo
    Escolha uma imagem para o fundo da página e copie a mesma para a directoria de imagens do seu theme (ex. “\…\wp-content\themes\<o seu theme>\images\”). Tenha em atenção que esta imagem deve ter uma resolução grande para que não perca muita qualidade (ex. 2213×1561).
  • Logótipo
    Agora que já temos a imagem de fundo, vamos fazer  o mesmo processo para o logótipo que vamos usar na página, ou seja copie o ficheiro que vai usar como logótipo para a directoria de imagens do seu theme.
  • Stylesheet
    Crie um novo ficheiro com o nome “custom-login-page.css” que vai conter o código que permite alterar o aspecto e personalizar a página. O ficheiro deve ser guardado na directoria de estilos do seu theme, ou seja normalmente costuma ser em “\…\wp-content\themes\<o seu theme>\css\”, caso contrário pode criar na mesma directoria do ficheiro “style.css” ou seja em “\…\wp-content\themes\<o seu theme>\”.

Agora que já temos todos os ficheiros que precisamos, o WordPress tem de saber que queremos usar um novo ficheiro de estilos, neste caso o “custom-login-page.css” . Para isso, no ficheiro “functions.php” vamos escrever:

function my_custom_login_css() {
    echo '<link id="custom-login-page" rel="stylesheet" href="'. get_bloginfo( 'template_url' ) .'/css/custom-login-page.css" type="text/css" media="all" />';
}
add_action( 'login_head', 'my_custom_login_css' );

Ao chegarmos a este ponto, temos tudo pronto para começarmos a executar as alterações pretendidas.

1. Alteração do titulo do logótipo

Com esta alteração, vai ser possível definirmos qual o texto que deve aparecer quando passamos com o cursor do rato por cima do logótipo. (Nota: esta alteração deve ser feita no ficheiro “functions.php”)

function my_custom_login_header_title() {
    return 'Este é o nome da minha empresa';
}
add_filter( 'login_headertitle', 'my_custom_login_header_title' );

2. Alteração do endereço do logótipo

Com esta alteração, vai ser possível definirmos qual o endereço que vai ficar associado à imagem do logótipo, como por exemplo o endereço do seu site. (Nota: esta alteração deve ser feita no ficheiro “functions.php”)

function my_custom_header_url() {
    return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_custom_header_url' );

3. Alteração da imagem do logótipo

Com esta alteração, vai ser possível mudar a imagem do logótipo. (Nota: esta alteração deve ser feita no ficheiro “custom-login-page.css”)

body.login div#login h1 a {
    background-image: url('../images/login-page-logotipo.png');
    padding-bottom: 10px;
}

4. Alteração fundo da página

Com esta alteração, vai ser possível definir uma imagem de fundo. (Nota: esta alteração deve ser feita no ficheiro “custom-login-page.css”)

body.login {
    background: rgba(255, 255, 255, 0.1) url('../images/login-page-bg.jpg') no-repeat fixed center;
}

5. Alteração da aparência do formulário

Com esta alteração, vai ser possível mudar todas as propriedades do formulário  podendo assim mudar por completo a sua aparência  (Nota: esta alteração deve ser feita no ficheiro “custom-login-page.css”)

body.login form {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: 0;
    -webkit-border-radius: 0;
}

body.login label {
    color: #363636;
}

body.login form .input,
body.login input[type="text"],
body.login input[type="password"] {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: 0;
    -webkit-border-radius: 0;
}

body.login form .button-primary {
    border-radius: 0;
    -webkit-border-radius: 0;
}

6. Alteração da aparência dos links e caixas de informação

Com esta alteração, vai ser possível mudar todas as propriedades dos links e caixas de informação, podendo assim mudar por completo a sua aparência  (Nota: esta alteração deve ser feita no ficheiro “custom-login-page.css”)

body.login #nav,
body.login #backtoblog {
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #e5e5e5;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #e5e5e5;
    background: rgba(255, 255, 255, 0.8);
}

body.login #nav {
    margin: 15px 0 0 8px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #e5e5e5;
}

body.login #backtoblog {
    margin: 0 0 0 8px;
    padding-bottom: 20px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #e5e5e5;
}

body.login #nav a,
body.login #backtoblog a {
    text-shadow: none;
}

body.login #login_error,
body.login .message {
    border-radius: 0;
    -webkit-border-radius: 0;
}

Se tudo correu como planeado, neste momento tem a página de login completamente alterada e personalizada. Experimente fazer mais alterações, como por exemplo mudar as animações em Javascript, colocar botões diferentes ou até mesmo mudar a posição do formulário.



Artigos Relacionados

Como melhorar a pagina de pesquisa do WordPress
Como melhorar a página de pesquisa do WordPress
Templates grátis para WordPress
15 Templates Grátis para WordPress, Abril de 2013
Como aceder alojamento WordPress via FTP
Como aceder ao alojamento do WordPress via FTP
Wordpress brute force attacks
Ataques brute force no WordPress, saiba como se proteger

Deixe o seu comentário Cancelar

O seu email não será publicado. Os campos marcados com * são obrigatórios.

Contactos
Morada:

VISENER - Engenharia e Consultoria, Lda
Rua Moita Dianteira, Lote 7 - Letra A
3505-404, Viseu

Telefone:

232 186 291
(Chamada para a rede fixa nacional)

Email:
geral@visener.pt
Sobre nós

Somos uma empresa jovem e dinâmica, composta por colaboradores especializados, que apostam nas novas tecnologias, levando muito a sério o trabalho desenvolvido no dia a dia. Veja onde estamos.

Siga-nos
Facebook
Artigos Recentes
  • Como melhorar a página de pesquisa do WordPress
  • 15 Templates Grátis para WordPress, Abril de 2013
  • Como alterar a página de login do WordPress
  • Como aceder ao alojamento do WordPress via FTP
  • Ataques brute force no WordPress, saiba como se proteger
Opções
  • Início
  • Empresa
  • Serviços
  • Blog
  • Mapa do Site
  • Livro de Reclamações
  • Termos e Condições
  • Contactos

© 2012 - 2025 VISENER, Lda (Alvará nº 71846)

Topo