Cómo crear una página de inicio de sesión en WordPress sin usar un complemento

Publicado: 2022-01-03

Cómo crear una página de inicio de sesión en WordPress sin complemento ¿Está buscando la mejor manera de crear una página de inicio de sesión en WordPress sin un complemento y sin personalizar la página de inicio de sesión predeterminada de WordPress? Si desea crear una página de inicio de sesión en WordPress sin usar los populares complementos de inicio de sesión de WordPress, puede hacerlo agregando el código de inicio de sesión en un código abreviado o en una plantilla de página personalizada.

En este tutorial, demostraré cómo puede crear una página de inicio de sesión en WordPress usando una función de código abreviado y también cómo puede crear una página de inicio de sesión en WordPress usando la función de inicio de sesión en una plantilla de página personalizada.

Cada una de estas formas debería funcionar a la perfección con cualquier tema de WordPress o cualquier entorno de alojamiento de WordPress.

Crear página de inicio de sesión en WordPress sin complemento

El objetivo de este tutorial es ayudarlo a crear una página de inicio de sesión como el inicio de sesión predeterminado de WordPress que le permite acceder al panel de control de WordPress después de iniciar sesión.

Idealmente, esta página de inicio de sesión personalizada debería ser una página de inicio de sesión frontal donde los usuarios de su sitio inicien sesión. Como mencioné en la introducción, hay dos formas que cubriremos en este tutorial;

  1. Código abreviado de la página de inicio de sesión
  2. Inicio de sesión de plantilla de página personalizada

Crear código abreviado de página de inicio de sesión

El primer paso cuando queremos crear una página de inicio de sesión en cualquier lugar de WordPress es usar un código abreviado. El shortcode se puede agregar a cualquier página o publicación o incluso a un widget y una plantilla de página personalizada también.

En este paso, crearemos un código abreviado para el formulario de inicio de sesión que se utilizará para publicar el formulario de inicio de sesión en cualquier página de WordPress o en una publicación. Este enfoque brinda al usuario la flexibilidad de crear una página de inicio de sesión en cualquier sección de su sitio.

Para crear el shortcode usaremos el siguiente código:

 // Crear código abreviado de formulario de inicio de sesión

función njengah_add_login_shortcode() {

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

}

Hemos agregado el shortcode en una función para que podamos inicializarlo más tarde. La función add_shortcode crea un shortcode en WordPress. La expresión general de la función add_shortcode() es la siguiente:

 add_shortcode(cadena $etiqueta, llamada $devolución de llamada)

Como puedes ver esta función tiene dos parámetros que son los siguientes:

Parámetro Descripción
$etiqueta Este es el texto que se usará en el editor de publicaciones o páginas para publicar el shortcode. Por ejemplo, en este caso, lo tenemos como 'njengah-login-form'. Cuando lo agreguemos en la página, lo tendremos entre corchetes: [njengah-login-form]
$devolución de llamada Esta es la función de devolución de llamada que representará las funciones del shortcode. Por ejemplo, en este caso, agregaremos el código para mostrar el formulario de inicio de sesión en esta función de devolución de llamada como se comparte en el código a continuación.

 //Paso 2: devolución de llamada de código abreviado
función njengah_login_form_shortcode() {
	
	si (es_usuario_logged_in())
		
	volver '<p>Bienvenido. ¡Has iniciado sesión!</p>'; ?> 
		
<div class ="njengah-login-tutorial" >  
		
	<?php devuelve wp_login_form( 
		formación( 
			'eco' => falso ,
			'label_username' => __( 'Su nombre de usuario'),
			'label_password' => __( 'Su contraseña' ),
			'label_remember' => __( 'Recordarme' )
			        )
	); ?> 
		
            </div>
  <?php 
   }

Si revisa el código detenidamente, notará que hemos utilizado la función para verificar si el usuario ha iniciado sesión como expliqué en la publicación sobre cómo verificar si el usuario ha iniciado sesión en WordPress .

Si el usuario no ha iniciado sesión, usamos la función wp_login_form() para mostrar el formulario de inicio de sesión. Si el usuario ha iniciado sesión, mostramos condicionalmente el mensaje de bienvenida en esa página en lugar de mostrar el formulario de inicio de sesión.

Función de WP wp_login_form()

wp_login_form() es una función de WordPress que proporciona a los desarrolladores de temas una forma de mostrar el formulario de WordPress en cualquier lugar. Esta función se puede expresar en general de la siguiente manera:

 wp_login_form( matriz $argumentos = matriz() )

Los $args pueden ser una matriz de opciones que controlan cómo se muestra el formulario.

Los siguientes son los argumentos que puede usar en la matriz para cambiar la forma en que se muestra el formulario.

Argumento $argumento Descripción
eco Si mostrar el formulario de inicio de sesión o devolver el código HTML del formulario. Verdadero predeterminado (eco).
redirigir URL para redirigir. Debe ser absoluto, como en “<a href=”https://example.com/mypage/”>https://example.com/mypage/</a>”. El valor predeterminado es redirigir de nuevo al URI de solicitud.
form_id El valor del atributo de ID para el formulario. 'formulario de inicio de sesión' predeterminado.
etiqueta_nombre de usuario Etiqueta para el campo de nombre de usuario o dirección de correo electrónico. 'Nombre de usuario o dirección de correo electrónico' predeterminados.
etiqueta_contraseña Etiqueta para el campo de contraseña. Contraseña predeterminada'.
etiqueta_recordar Etiqueta para el campo recordar. Predeterminado 'Recordarme'.
label_login Etiqueta para el botón enviar. 'Iniciar sesión' predeterminado.
id_usuario El valor del atributo ID para el campo de nombre de usuario. Predeterminado 'usuario_login'.
id_contraseña El valor del atributo ID para el campo de contraseña. Por defecto 'user_pass'.
id_recordar El valor del atributo de ID para el campo de recordar. Por defecto 'recuérdame'.
id_enviar El valor del atributo de ID para el botón de envío. Por defecto 'wp-submit'.
recordar Comprueba si mostrar la casilla de verificación "recordarme" en el formulario
valor_nombredeusuario El valor predeterminado para el campo de nombre de usuario.
valor_recordar Comprueba si la casilla de verificación "Recordarme" debe estar marcada de forma predeterminada. Falso predeterminado (sin marcar)

Por ejemplo, puede configurar la matriz de argumentos y pasarla a esta función de la siguiente manera:

 <?php 

wp_login_form( 

	 formación(
			'eco' => verdadero,
			// El valor predeterminado de 'redireccionamiento' lleva al usuario de regreso al URI de solicitud.
			'redirigir' => ( is_ssl() ? 'https://' : 'http://' ) . $_SERVIDOR['HTTP_HOST'] . $_SERVIDOR['SOLICITUD_URI'],
			'form_id' => 'formulario de inicio de sesión',
			'label_username' => __( 'Su nombre de usuario' ),
			'label_password' => __( 'Su contraseña' ),
			'label_remember' => __( 'Recordarme' ),
			'label_log_in' => __( 'Iniciar sesión' ),
			'id_username' => 'usuario_login',
			'id_contraseña' => 'contraseña_de_usuario',
			'id_remember' => 'recordarme',
			'id_submit' => 'wp-submit',
			'recordar' => verdadero,
			'valor_nombre de usuario' => '',
			// Establezca 'value_remember' en verdadero para que la casilla de verificación "Recordarme" esté marcada de manera predeterminada.
			'value_remember' => falso,
		);
		
); ?>

El formulario se mostrará con las nuevas etiquetas que agregó a la matriz en lugar de las etiquetas predeterminadas del formulario de inicio de sesión de WordPress. En el código anterior, cambié el nombre de usuario a Su nombre de usuario y la contraseña a Su contraseña.

Crear página de inicio de sesión en WordPress sin plantilla de página de inicio de sesión de complemento

Después de crear el código abreviado y la función de devolución de llamada, debemos inicializarlo para que ahora podamos usar el código abreviado en cualquier lugar de la publicación o página de WordPress para agregar el formulario de inicio de sesión personalizado.

El siguiente es el código que inicializará el código abreviado del formulario de inicio de sesión: 

 // Paso 3: Inicie la función de shortcode

add_action( 'init', 'njengah_add_login_shortcode' );

Fragmento de código completo para crear un código abreviado de formulario de inicio de sesión en WordPress

Ahora podemos juntar todos estos fragmentos de código en un fragmento de código y agregar el código a functions.php del tema activo de WordPress y luego mostrar el formulario de inicio de sesión de WordPress usando el código abreviado - [ njengah-login-form].

El siguiente es el fragmento de código completo que debe agregar al archivo functions.php para agregar el código abreviado del formulario de inicio de sesión de WordPress:

 /**
 * Cree un formulario de inicio de sesión de WordPress personalizado sin complemento [Código corto del formulario de inicio de sesión de WordPress] 
 * @autor Joe Njengah 
 * @ esencia - https://gist.github.com/Njengah/fa96025717308df1b979e77e5da3eef2
 */ 


// Paso 1: Crear código abreviado
función njengah_add_login_shortcode() {
	add_shortcode('jay-login-form', 'njengah_login_form_shortcode');
}

//Paso 2: devolución de llamada de código abreviado
función njengah_login_form_shortcode() {
	
	si (es_usuario_logged_in())
		
		volver '<p>Bienvenido. ¡Has iniciado sesión!</p>'; ?> 
		
		<div class ="njengah-login-tutorial" >  
		
			<?php devuelve wp_login_form( 
							formación( 
								'eco' => falso ,
								'label_username' => __( 'Su nombre de usuario'),
								'label_password' => __( 'Su contraseña' ),
								'label_remember' => __( 'Recordarme' )
			              )
			); ?> 
		
		</div>
  <?php 
   }

// Paso 3: Inicie la función de shortcode
add_action( 'init', 'njengah_add_login_shortcode' );

//Paso 4: use el código abreviado [njengah-login-form] para incrustar el formulario de inicio de sesión en una página o publicación

Cuando agrega este código a functions.php, debe crear una página de inicio de sesión y agregar el código abreviado [njengah-login-form] para publicar el formulario de inicio de sesión. El formulario de inicio de sesión debe aparecer como se muestra en la siguiente imagen:

Crear página de inicio de sesión en WordPress sin plantilla de página de inicio de sesión de complemento

Estilo de formulario de inicio de sesión de WordPress

He agregado los siguientes estilos para que el formulario de inicio de sesión sea atractivo y tome el diseño del tema que estoy usando:

 .njengah-login-tutorial {
    fondo: #6379a4;
    relleno: 20px;
    ancho máximo: 70%;
    margen: 0 automático;
    color: #fff;
}

.etiqueta de contraseña de inicio de sesión {
    margen derecho: 120px;
}

.login-usuario {
    acolchado superior: 30px;
}

Crear plantilla de página personalizada de formulario de inicio de sesión

Una forma alternativa de crear una página de inicio de sesión en WordPress sin complemento es crear una plantilla de página personalizada y usar la función wp_login_form() para publicar el formulario de inicio de sesión en esa página.

El siguiente es el código para crear la página de inicio de sesión personalizada que se encuentra en la plantilla de página personalizada:

 <?php
/**
 * Nombre de la plantilla: Página de inicio de sesión 
 */
 
 obtener_encabezado(); 
 
 
 si (is_user_logged_in()){
	 
	     echo '<p>Bienvenido. ¡Has iniciado sesión!</p>'; 
		 
 }demás{ 
	 
	 wp_login_form( 

		 formación(
				'eco' => verdadero,
				// El valor predeterminado de 'redireccionamiento' lleva al usuario de regreso al URI de solicitud.
				'redirigir' => ( is_ssl() ? 'https://' : 'http://' ) . $_SERVIDOR['HTTP_HOST'] . $_SERVIDOR['SOLICITUD_URI'],
				'form_id' => 'formulario de inicio de sesión',
				'label_username' => __( 'Su nombre de usuario' ),
				'label_password' => __( 'Su contraseña' ),
				'label_remember' => __( 'Recordarme' ),
				'label_log_in' => __( 'Iniciar sesión' ),
				'id_username' => 'usuario_login',
				'id_contraseña' => 'contraseña_de_usuario',
				'id_remember' => 'recordarme',
				'id_submit' => 'wp-submit',
				'recordar' => verdadero,
				'valor_nombre de usuario' => '',
				// Establezca 'value_remember' en verdadero para que la casilla de verificación "Recordarme" esté marcada de forma predeterminada.
				'value_remember' => falso,
			)
						
		);
    }			
	
get_footer();

Guarde este código en un archivo y asígnele el nombre login-page.php y asegúrese de que esté guardado en la carpeta raíz de su tema de WordPress.

Cree una nueva página y verá que la plantilla de inicio de sesión ahora está disponible en la opción de plantilla de atributos de página como se muestra a continuación:

Crear página de inicio de sesión en WordPress sin plantilla de página de inicio de sesión de complemento

Elija la plantilla y publique la página. Cuando revise la interfaz, debería ver que se muestra el formulario de inicio de sesión para los usuarios que no han iniciado sesión y se muestra el mensaje de bienvenida para los usuarios que han iniciado sesión.

cómo crear plantilla de página de inicio de sesión wordpress

Conclusión

En esta publicación, describí las dos formas en que puede agregar el formulario de inicio de sesión en la página de WordPress. Puede usar una función de código abreviado para crear un código abreviado de formulario de inicio de sesión de WordPress o puede usar una plantilla de página personalizada para crear una página de inicio de sesión en WordPress sin complemento. Espero que ahora pueda implementar uno de estos métodos para crear un formulario de inicio de sesión personalizado en su sitio de WordPress.

Artículos similares

  1. Cómo crear una paginación de WordPress para tipos de publicaciones personalizadas
  2. Los 30 mejores complementos de seguridad de WordPress para proteger su sitio
  3. Cómo crear una página en WordPress programáticamente
  4. Cómo acceder al panel de administración de WordPress o iniciar sesión en su panel de WordPress
  5. Cómo crear una página personalizada de pedidos recibidos WooCommerce
  6. Cómo conectar Printful a WooCommerce
  7. Cómo actualizar las extensiones de WooCommerce
  8. Cómo agregar un cuadro de búsqueda en la parte superior de la página Storefront Theme
  9. Más de 40 mejores complementos de formulario de contacto de WordPress para facilitar el contacto
  10. Cómo eliminar una categoría sin categorizar en WordPress WooCommerce
  11. Cómo quitar la barra lateral de la página de WordPress u ocultar la barra lateral de WordPress
  12. Cómo crear una paginación de consulta personalizada en WordPress con un ejemplo
  13. WooCommerce vs Magento: ¿Cuál es la mejor plataforma de comercio electrónico?
  14. Cómo hacer una copia de seguridad de la base de datos de WooCommerce
  15. Los 30 mejores complementos de formulario de WordPress » El mejor complemento de formulario de WordPress
  16. Cómo crear páginas separadas de inicio de sesión y registro en WooCommerce
  17. Más de 35 mejores complementos de forma libre para WordPress
  18. Cómo migrar de Shopify a WooCommerce