Nenhum produto encontrado nessa seleção.
Se você está procurando algum plugin para criar uma página de login personalizada no WordPress, pare imediatamente! Por que não utilizar os modelos de página e a função wp_login_form (mais um pouco de CSS) para isso?
Veja como é simples:
1 – Crie um arquivo dentro do seu tema chamado “page-login.php”;
2 – Adicione o seguinte nesse arquivo:
<?php
/*
Template Name: Página de login
*/
get_header();
// Dados do formulário de login
$argumentos_login = array(
'echo' => true,
'redirect' => get_home_url(),
'form_id' => 'tp-login-form',
'label_username' => __( 'Username' ),
'label_password' => __( 'Password' ),
'label_remember' => __( 'Remember Me' ),
'label_log_in' => __( 'Log In' ),
'id_username' => 'tp-user-login',
'id_password' => 'tp-user-pass',
'id_remember' => 'tp-remember-me',
'id_submit' => 'tp-submit-btn',
'remember' => true,
'value_username' => null,
'value_remember' => false,
);
?>
<div class="tp-login-container">
<?php if ( ! is_user_logged_in() ): ?>
<?php wp_login_form( $argumentos_login );?>
<?php
else:
// Usuário atual
$usuario_atual = wp_get_current_user();
// URL da página de login
$pagina_login = 'http://127.0.0.1/trabalhos/wordpress/login/';
// Mensagem para o usuário
echo '<p>Você já fez login <b>' . $usuario_atual->user_firstname . '</b>.';
echo ' Clique <a href="' . wp_logout_url( $pagina_login ) . '">aqui</a>';
echo ' para sair.';
echo '</p>';
endif; // is_user_logged_in
?>
</div> <!-- tp-login-container -->
<?php
get_footer();
?>Veja os comentários acima para entender melhor cada área, mas não tem segredo nenhum.
3 – Como isso é um modelo de página, acesse seu painel administrativo e crie uma página.
4 – Em “Atributos de página” » “Modelo”, escolha “Página de login”.
Página de login
Salve e acesse o link da sua nova página. Neste momento você vai ver um formulário bem feio, sem nenhum CSS, então vamos apimentar um pouco as coisas.
5 – Adicione o seguinte CSS no arquivo style.css:
/* Container */
.tp-login-container {
margin: 100px auto 50px auto;
background: #fff;
padding: 30px;
}
/* Os labels */
.tp-login-container label {
display: block;
}
/* Inputs de texto */
.tp-login-container input[type="text"],
.tp-login-container input[type="password"] {
width: 400px;
padding: 5px;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 24px;
}
.tp-login-container input[type="text"]:focus,
.tp-login-container input[type="password"]:focus {
border: 2px solid #19b5fe;
box-shadow: 0 0 5px #9fe0fe;
}
/* Botão de enviar */
.tp-login-container input[type="submit"] {
border: none;
background: #19b5fe;
color: #fff;
text-transform: uppercase;
box-shadow: 0 3px 0 #1c79a5;
padding: 10px 25px;
}
.tp-login-container input[type="submit"]:hover {
background: #1c79a5;
box-shadow: 0 3px 0 #12516f;
}
.tp-login-container input[type="submit"]:active {
position: relative;
top: 3px;
box-shadow: none;
}Agora seu formulário deverá estar mais ou menos assim:
Formulário de login
E quando o usuário faz login, o formulário ficará assim:
Usuários logados
Na verdade estamos enviando o usuário para o “home” do blog quando faz login, portanto, ele só verá o texto acima se tentar fazer login novamente.
Você pode adicionar o link da página de login onde preferir, como no menu, na barra lateral e coisas do tipo.
Em caso de dúvidas, basta perguntar aí nos comentários.
