Como alterar a página de login do WordPress

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

Página de login alterada

(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.