Como criar um formulário de login / logout personalizado no WordPress

Como criar um formulário personalizado de login / logout com o WordPress

Aprenda criar um formulário de login e logout personalizado no wordpress.

Para isso, usaremos a função wp_login_form() do WordPress. Essa função cria um formulário em nosso modelo, que podemos personalizar com uma série de argumentos que passaremos. No nosso exemplo, veremos como verificar se você já está logado. Nesse caso, exibiremos uma mensagem de boas-vindas junto com um botão de logout; caso contrário, mostraremos o formulário para que você possa fazer login.

A primeira coisa é saber se você tem uma sessão para mostrar uma coisa ou outra, para isso usaremos a função is_user_logged_in() que retorna TRUE no caso de encontrar uma sessão iniciada. Nesse caso, teremos acesso às informações do usuário e poderemos exibir uma mensagem personalizada. Além disso, criaremos um botão de logout com a função wp_logout_url(), que retorna uma URL com os parâmetros necessários para efetuar logout. Esta função aceita como parâmetro um URL para redirecionar após o logout.

Caso a função is_user_logged_in() retorne FALSE, chamaremos a função que cria o formulário:

<?php
if ( is_user_logged_in() ) {
  $current_user = wp_get_current_user();
  echo 'Bem-vindo(a) ' . $current_user->user_firstname . '!';?>
 
  <a href="<?php echo wp_logout_url(home_url()); ?>">Logout</a>
<?php
} else {
  wp_login_form( $args );
}
?>

Vejamos os argumentos que podemos passar para a função wp_login_form ():

<?php
$args = array(
  'echo' => true,
  'redirect' => ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
  'form_id' => 'loginform',
  'label_username' => __( 'Username' ),
  'label_password' => __( 'Password' ),
  'label_remember' => __( 'Remember Me' ),
  'label_log_in' => __( 'Log In' ),
  'id_username' => 'user_login',
  'id_password' => 'user_pass',
  'id_remember' => 'rememberme',
  'id_submit' => 'wp-submit',
  'remember' => true,
  'value_username' => '',
  'value_remember' => false
);
?>

E o html será o seguinte:

<form name="loginform" id="loginform" action="http://www.mydomain.com/wp-login.php" method="post">
  <p class="login-username">
    <label for="user_login">Username</label>
    <input type="text" name="log" id="user_login" class="input" value="" size="20" />
  </p>
  <p class="login-password">
    <label for="user_pass">Password</label>
    <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" />
  </p>
  <p class="login-remember">
    <label><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Remember Me</label>
  </p>
  <p class="login-submit">
    <input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In" />
    <input type="hidden" name="redirect_to" value="http://www.mydomain.com/" />
  </p>
</form>

Como você pode ver, quase todos os elementos têm classes CSS; portanto, você pode personalizar os estilos de todos os elementos do formulário e adaptá-lo ao design e aparência do seu site.

Sobre Hugo Calixto

Hugo CalixtoOlá! Sou Hugo Calixto, Programador WEB e Profissional de SEO desde 2017.

Sou natural do Rio de Janeiro e vivo em São Paulo e Madrid.

O que faço: Desenvolvo Sites Personalizados (com ou sem Wordpress), Administro Servidores e sou Especialista em SEO (otimização de sites para mecanismos de busca).

E o que mais gosto no meu trabalho é : "Ajudar as pessoas" e "Experimentar de tudo" e "usar o que aprendo para poder fazer coisas novas".

Ah! Se precisar de ajuda, não excite, chama o Hugo Calixto.