Como criar uma página de login no WordPress sem usar o plug-in

Você está procurando a melhor maneira de criar uma página de login no WordPress sem um plugin e sem personalizar a página de login padrão do WordPress? Se você deseja criar uma página de login no WordPress sem usar os plugins de login populares do WordPress, pode fazê-lo adicionando o código de login em um shortcode ou em um modelo de página personalizado.

Neste tutorial, demonstrarei como você pode criar uma página de login no WordPress usando uma função de código de acesso e também como criar uma página de login no WordPress usando a função de login em um modelo de página personalizado.

Cada uma dessas maneiras deve funcionar perfeitamente com qualquer tema WordPress ou qualquer ambiente de hospedagem WordPress.

Criar página de login no WordPress sem plug-in

O objetivo deste tutorial é ajudá-lo a criar uma página de login como o login padrão do WordPress que permite acessar o painel do WordPress após o login.

Idealmente, essa página de login personalizada deve ser uma página de login de frontend onde os usuários do site fazem login. Como mencionei na introdução, há duas maneiras que abordaremos neste tutorial;

1. Shortcode da página de login
2. Login de modelo de página personalizada

Criar código de acesso da página de login

O primeiro passo quando queremos criar uma página de login em qualquer lugar no WordPress é usar um shortcode. O shortcode pode ser adicionado a qualquer página ou post ou até mesmo um widget e um modelo de página personalizado também.

Nesta etapa, criaremos um código de acesso para o formulário de login que será usado para publicar o formulário de login em qualquer página do WordPress ou em um post. Essa abordagem oferece ao usuário a flexibilidade de criar uma página de login em qualquer seção do site.

Para criar o shortcode, usaremos o seguinte código:

 // Cria o shortcode do formulário de login

function njengah_add_login_shortcode() {

                add_shortcode('njengah-login-form', 'njengah_login_form_shortcode');

}

Adicionamos o shortcode em uma função para que possamos inicializá-lo mais tarde. A função add_shortcode cria um shortcode no WordPress. A expressão geral da função add_shortcode() é a seguinte:

 add_shortcode( string $ tag, callable $ callback )

Como você pode ver esta função tem dois parâmetros que são os seguintes:

 //Passo 2: retorno de chamada de código de acesso
function njengah_login_form_shortcode() {
	
	if (is_user_logged_in())
		
	return '<p>Bem-vindo. Você está logado!</p>'; ?> 
		
<div class="njengah-login-tutorial" >  
		
	<?php return wp_login_form( 
		variedade( 
			'eco' => falso,
			'label_username' => __( 'Seu nome de usuário ' ),
			'label_password' => __( 'Sua senha' ),
			'label_remember' => __( 'Lembrar de mim')
			        )
	); ?> 
		
            </div>
  <?php 
   }

Se você verificar o código com atenção, perceberá que usamos a função para verificar se o usuário está logado como expliquei no post sobre como verificar se o usuário está logado no WordPress .

Se o usuário não estiver logado, usamos a função wp_login_form() para exibir o formulário de login. Se o usuário estiver logado, mostraremos condicionalmente a mensagem de boas-vindas nessa página, em vez de mostrar o formulário de login.

Função WP wp_login_form()

O wp_login_form() é uma função do WordPress que fornece aos desenvolvedores de temas uma maneira de mostrar o formulário do WordPress em qualquer lugar. Esta função pode ser geralmente expressa da seguinte forma:

 wp_login_form( array $args = array() )

O $args pode ser uma matriz de opções que controlam como o formulário é exibido.

A seguir estão os argumentos que você pode usar na matriz para alterar a forma como o formulário é exibido.

Por exemplo, você pode definir a matriz de argumentos e passá-la para esta função da seguinte maneira:

 <?php 

wp_login_form( 

	 variedade(
			'eco' => verdadeiro,
			// O valor padrão de 'redirecionamento' leva o usuário de volta ao URI de solicitação.
			'redirect' => (is_ssl() ? 'https://': 'http://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
			'form_id' => 'loginform',
			'label_username' => __( 'Seu nome de usuário' ),
			'label_password' => __( 'Sua senha' ),
			'label_remember' => __( 'Lembrar de mim' ),
			'label_log_in' => __( 'Login' ),
			'id_username' => 'user_login',
			'id_password' => 'user_pass',
			'id_remember' => 'lembrar-me',
			'id_submit' => 'wp-submit',
			'lembrar' => verdadeiro,
			'value_username' => '',
			// Defina 'value_remember' como true para definir a caixa de seleção "Lembrar-me" como padrão.
			'valor_lembrar' => falso,
		);
		
); ?>

O formulário será exibido com os novos rótulos que você adicionou à matriz, em oposição aos rótulos padrão do formulário de login do WordPress. No código acima, alterei o nome de usuário para Seu nome de usuário e a senha para Sua senha.

Depois de criar o código de acesso e a função de retorno de chamada, precisamos inicializá-lo para que agora possamos usar o código de acesso em qualquer lugar na postagem ou página do WordPress para adicionar o formulário de login personalizado.

A seguir está o código que irá inicializar o shortcode do formulário de login:

 // Passo 3: Inicialize a função shortcode

add_action( 'init', 'njengah_add_login_shortcode' );

Trecho de código completo para criar shortcode de formulário de login no WordPress

Agora podemos juntar todos esses trechos de código em um trecho de código e adicionar o código ao functions.php do tema WordPress ativo e exibir o formulário de login do WordPress usando o shortcode – [njengah-login-form].

A seguir está o trecho de código completo que você deve adicionar ao arquivo functions.php para adicionar o shortcode do formulário de login do WordPress:

 /**
 * Crie um formulário de login personalizado do WordPress sem plug-in [Shortcode do formulário de login do WordPress] 
 * @autor Joe Njengah 
 * @ essência - https://gist.github.com/Njengah/fa96025717308df1b979e77e5da3eef2
 */ 


// Passo 1: Criar shortcode
function njengah_add_login_shortcode() {
	add_shortcode('jay-login-form', 'njengah_login_form_shortcode');
}

//Passo 2: retorno de chamada de código de acesso
function njengah_login_form_shortcode() {
	
	if (is_user_logged_in())
		
		return '<p>Bem-vindo. Você está logado!</p>'; ?> 
		
		<div class="njengah-login-tutorial" >  
		
			<?php return wp_login_form( 
							variedade( 
								'eco' => falso,
								'label_username' => __( 'Seu nome de usuário ' ),
								'label_password' => __( 'Sua senha' ),
								'label_remember' => __( 'Lembrar de mim')
			              )
			); ?> 
		
		</div>
  <?php 
   }

// Passo 3: Inicialize a função shortcode
add_action( 'init', 'njengah_add_login_shortcode' );

//Passo 4: Use o shortcode [njengah-login-form] para incorporar o formulário de login em uma página ou post 

Quando você adiciona este código ao functions.php você deve criar uma página de login e adicionar o shortcode [njengah-login-form] para publicar o formulário de login. O formulário de login deve aparecer conforme a imagem abaixo:

Estilização do formulário de login do WordPress

Eu adicionei os seguintes estilos para tornar o formulário de login atraente e pegar o design do tema que estou usando:

 .njengah-login-tutorial {
    fundo: #6379a4;
    preenchimento: 20px;
    largura máxima: 70%;
    margem: 0 automático;
    cor: #ff;
}

.login-senha etiqueta {
    margem direita: 120px;
}

.Nome de usuário de login {
    preenchimento superior: 30px;
}

Criar modelo de página personalizada de formulário de login

Uma maneira alternativa de criar uma página de login no WordPress sem plugin é criar um modelo de página personalizado e usar a função wp_login_form() para publicar o formulário de login nessa página.

Veja a seguir o código para criar a página de login personalizada localizada no modelo de página personalizada:

 <?php
/**
 * Nome do modelo: Página de login 
 */
 
 get_header(); 
 
 
 if (is_user_logged_in()){
	 
	     echo '<p>Bem-vindo. Você está logado!</p>'; 
		 
 }senão{ 
	 
	 wp_login_form( 

		 variedade(
				'eco' => verdadeiro,
				// O valor padrão de 'redirecionamento' leva o usuário de volta ao URI de solicitação.
				'redirect' => (is_ssl() ? 'https://': 'http://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
				'form_id' => 'loginform',
				'label_username' => __( 'Seu nome de usuário' ),
				'label_password' => __( 'Sua senha' ),
				'label_remember' => __( 'Lembrar de mim' ),
				'label_log_in' => __( 'Login' ),
				'id_username' => 'user_login',
				'id_password' => 'user_pass',
				'id_remember' => 'lembrar-me',
				'id_submit' => 'wp-submit',
				'lembrar' => verdadeiro,
				'value_username' => '',
				// Defina 'value_remember' como true para definir a caixa de seleção "Lembrar-me" como padrão.
				'valor_lembrar' => falso,
			)
						
		);
    }			
	
get_footer();		
				

Salve este código em um arquivo e nomeie-o como login-page.php e certifique-se de que ele esteja salvo na pasta raiz do seu tema WordPress.

Crie uma nova página e você verá que o modelo de login agora está disponível na opção de modelo de atributos de página, conforme mostrado abaixo:

Escolha o modelo e publique a página. Ao verificar o frontend, você verá que o formulário de login é exibido para os usuários que não estão logados e a mensagem de boas-vindas é exibida para os usuários que estão logados.

Conclusão

Neste post, descrevi as duas maneiras de adicionar o formulário de login na página do WordPress. Você pode usar uma função de código de acesso para criar um código de acesso de formulário de login do WordPress ou pode usar um modelo de página personalizado para criar uma página de login no WordPress sem plug-in. Espero que agora você possa implementar um desses métodos para criar um formulário de login de front-end personalizado em seu site WordPress.

Artigos semelhantes

1. Como criar paginação do WordPress para tipos de postagem personalizados
2. 30 melhores plugins de segurança do WordPress para proteger seu site
3. Como criar uma página no WordPress programaticamente
4. Como acessar o painel de administração do WordPress ou fazer login no seu painel do WordPress
5. Como criar uma página personalizada de pedidos recebidos WooCommerce
6. Como conectar Printful ao WooCommerce
7. Como atualizar as extensões do WooCommerce
8. Como adicionar uma caixa de pesquisa no topo da página Storefront Theme
9. 40+ melhores plugins de formulário de contato do WordPress para fácil contato
10. Como remover categoria sem categoria no WordPress WooCommerce
11. Como remover a barra lateral da página do WordPress ou ocultar a barra lateral do WordPress
12. Como criar paginação de consulta personalizada no WordPress com um exemplo
13. WooCommerce vs Magento: Qual é a melhor plataforma de comércio eletrônico?
14. Como fazer backup do banco de dados WooCommerce
15. Os 30 melhores plug-ins de formulário do WordPress » Melhor plug-in de formulário do WordPress
16. Como criar páginas separadas de login e registro no WooCommerce
17. 35+ Melhor plugin de formulário gratuito WordPress
18. Como migrar do Shopify para o WooCommerce