Como criar um formulário de login personalizado no WordPress
Recentemente, me deparei com uma situação em que meu cliente queria que eu criasse um formulário de login personalizado no WordPress. O desenvolvedor de HTML criou um formulário de login atraente e passou para mim. Neste artigo, mostro como usei o design de formulário de login exato e criei um formulário de login personalizado no WordPress.
Por que precisa de um formulário de login personalizado no WordPress
O WordPress forneceu um formulário integrado para login no seu painel. Este formulário está disponível no back-end apenas com o design padrão. Não podemos mostrar este formulário padrão no front-end, pois este design não combina com o front-end.
Uso da função wp_login_form
O WordPress fornece um método wp_login_form() que pode ser usado para criar um formulário de login de front end. Precisamos apenas passar parâmetros para a função e ela exibirá o formulário HTML no site. Basta chamar esta função onde você quiser colocar um formulário de login.
<?php
if (! is_user_logged_in()) {
$args = array(
'echo' => true,
'remember' => true,
'redirect' => (is_ssl()? 'https://': 'http://' ). $_SERVER['HTTP_HOST']. $_SERVER['REQUEST_URI'],
'form_id' => 'loginform',
'id_username' => 'user_login',
'id_password' => 'user_pass',
'id_remember' => 'rememberme',
'id_submit' => 'wp-submit',
'label_username' => __( 'Username' ),
'label_password' => __( 'Password' ),
'label_remember' => __( 'Remember Me' ),
'label_log_in' => __( 'Log In' ),
'value_username' => '',
'value_remember' => false
);
wp_login_form( $args );
}
?>Usamos o método is_user_logged_in () para verificar se o usuário já está logado. Nosso formulário de login será exibido apenas para usuários não logados. Conforme mostrado no array $ args, ‘form_id’ => ‘loginform’ adicionará o atributo de id HTML ‘loginform’ a um formulário de login gerado. Da mesma forma, podemos passar id para nome de usuário e senha como ‘id_username’ => ‘user_login’ e ‘id_password’ => ‘user_pass’ respectivamente. Abaixo está a captura de tela de um formulário gerado.
Uma vez que seu formulário de login é gerado, você pode ajustar o CSS usando o id de um formulário, campos de nome de usuário, etc. Neste estágio, apliquei CSS a este formulário conforme fornecido pelo desenvolvedor HTML. Não vou mostrar um design de formulário final. O objetivo deste tutorial é apenas mostrar como se pode obter o mesmo resultado.
Espero que você entenda como criar um formulário de login personalizado no WordPress. Para qualquer dúvida ou sugestão, por favor, deixe um comentário abaixo.