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

17/05/2020 por Hugo

A seguir, veremos como criar um formulário personalizado de logon / logout.

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.