Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Cómo Crear Formularios de Inicio de Sesión y Registro Personalizados en WordPress

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Violeta Casco (you can also view the original English article)

La página de inicio de sesión es lo primero que los usuarios verán cuando necesiten acceder a su sitio, por lo que necesita ser hermoso y fácil de usar. Una página de inicio de sesión aburrida puede hacer que los usuarios tengan una mala impresión de tu sitio! La personalización del inicio de sesión para que coincida con tu marca dará lugar a una mejor experiencia para los usuarios.

En este post, vamos a ver cómo se puede construir páginas de inicio de sesión y registro personalizados utilizando el plugin Userpro de CodeCanyon.

Ventajas del Inicio de Sesión y Registro Personalizados

Mejorar la Experiencia del Usuario

La personalización permite una funcionalidad mejorada para los usuarios. Es probable que los usuarios se sientan cómodos con una página de inicio de sesión personalizada que se ajuste al tema de su sitio web en lugar de la página de inicio de sesión de WordPress predeterminada.

Gestión de Usuarios

La personalización te permite gestionar todos los aspectos de los usuarios recién creados. Puede asignar roles y aprobar o bloquear usuarios a voluntad.

Marca

La marca es un aspecto crítico de cualquier negocio. Tu negocio debe mostrar tu marca en cada parte del sitio web. Personalizar la página de inicio de sesión y registro permite que tu marca se destaque del resto. La personalización también crea una presencia única que los usuarios probablemente recordarán.

Seguridad

El inicio de sesión y el registro personalizados te permiten añadir medidas que eliminan a los spammers y hackers.

Características del UserPro Plugin

Inicio de Sesión Social

La mayoría de las personas tienen cuentas en al menos una de las principales redes sociales. Proporcionar una conexión social en tu sitio web provee una manera fácil de registrarse ya que los usuarios sólo necesitan conceder acceso a su información de perfil en una de esas redes y nunca tienen que preocuparse de llegar o recordar una nueva contraseña. Otra ventaja es la reducción de spam, ya que las redes sociales requieren que los usuarios se autentiquen de múltiples maneras.

Con UserPro, puedes permitir el inicio de sesión social a través de Facebook, Linkedin, Instagram, Twitter y Google.

Publicación Front-End y Contenido Generado por el Usuario

Las publicaciones front-end ofrece una manera en la que conectarte con tus usuarios, manteniendo tu sitio más activo. Si desea que los usuarios añadan, editen o eliminen contenido, puede hacerlo con UserPro.

Características de Miembros

UserPro te permite mostrar hermosos perfiles de miembros y características de miembros, como mejorados directorio de miembros, insignias y logros. También puede buscar miembros dentro de la lista de miembros en los que se pueden realizar búsquedas

Formularios de Registros Múltiples

Formularios de Registro Multiples te permiten crear formularios de registro independientes. Por ejemplo, una bolsa de trabajo podría necesitar una función de este tipo para los solicitantes de empleo y los empleadores.

Empezar

Comienza descargando el plugin desde CodeCanyon. Si no tienes una cuenta, dirígete a la página de registro y crea una. Una vez que hayas iniciado sesión, puedes comprar el plugin desde su página de producto.

Vas a obtener un enlace a los archivos, o puedes ir a la sección de descargas de tu cuenta y descargar los archivos comprimidos.

Ahora inicia sesión en tu cuenta de WordPress. Ve a Plugins > Añadir Nuevo y cargue los archivos zip. A continuación, haga clic en Instalar Ahora y, después de que termine de instalar, haga clic en Activar ahora. Ahora estás listo para empezar a usar el plugin.

Configuración

Una vez instalado, puedes configurar los siguientes atributos en la página de configuración

UserPro plugin configuration

Crea una Página de Registro

UserPro viene con páginas predeterminadas para el registro, inicio de sesión, perfil, directorio de miembros, etc. Elije qué páginas se utilizarán en La configuración General.

Choosing a registration page

Una vez que hayas elegido sus páginas, puede agregar o eliminar cualquier campo de acuerdo con sus requisitos. También puede cambiar otros atributos, como la apariencia, la validación y la configuración del perfil.

Ajustes de Membresía

Changing membership options

Esta opción le permite deshabilitar o habilitar el registro en tu sitio web desde el front-end.

Permitir que cualquier persona se registre hace que tu sitio web sea fácilmente accesible y más fácil de usar. También permite a los administradores asignar roles a los usuarios.

Configuración de Aprobación de Usuario

User approval settings

La mayoría de los sitios web dependen de más de un tipo de autenticación para los nuevos usuarios; esto garantiza que elimina cualquier persona maliciosa de acceder a los sitios. Tener un sistema de aprobación de usuario:

  • te permite denegar o aceptar registros de usuarios
  • autentica a los nuevos usuarios requiriendo que activen los correos electrónicos
  • mantiene alejados a los spammers

Puedes crear formularios de registro de usuario e inicio de sesión simplemente arrastrando y soltando los campos en las secciones proveidas como se muestra a continuación.

Createing custom user registration fields

Apariencia y Aspecto

UserPro te permite añadir hermosos formularios de registro con sólo un clic de un botón. UserPro también te da la flexibilidad de agregar más campos si lo deseas. Por lo tanto, puede obtener la información correcta para su negocio del usuario.

También te proporciona la capacidad de alinear el formulario de registro con tu marca cambiando atributos como fuente, tamaño, aspecto, diseños de campo e iconos.

UserPro proporciona 19 campos para usuarios como país, roles, imagen, género y sitio web. También puede crear una pregunta de seguridad similar a CAPTCHA que comprueba si hay usuarios reales y hace que sea más difícil para los bots.

Después de un poco de personalización, la página de registro ahora debería tener este aspecto:

A completed custom registration form

Configuración de Registro

Otros ajustes de registro incluyen:

  • permitiendo o bloquear ciertos dominios de correo electrónico para el registro
  • permitiendo ciertos roles durante el registro
  • estableciendo el estado después del registro
  • validación de formularios y seguridad

Crear una Página de Inicio de Sesión Personalizada

UserPro proporciona una página de inicio de sesión predeterminada con los campos obligatorios: nombre de usuario y contraseña. Al igual que en la página de registro, puedes hacer clic en cualquier campo y cambiar atributos como el marcador de posición de etiqueta y el texto de ayuda. También puedes arrastrar campos o secciones a la página

Los pasos para crear la página de inicio de sesión son similares a la página de registro. Siga los siguientes pasos

  • vaya a General y seleccione la página de inicio de sesión predeterminada proporcionada
  • cambia su aspecto y apariencia para que sea más fácil de usar o se ajuste a tu marca
  • cambiar la configuración de inicio de sesión de acuerdo con tus requisitos
Editing the username field for a custom login page

La configuración de apariencia y aspecto aplicada a un campo se aplicará automáticamente a todos los otros campos.

Integración Social

Vaya a Configuración donde encontrará una lista de redes sociales con las que puede integrarse. Elija el medio que desea poner a disposición de los usuarios y permita la conexión social. Cada red requerirá información ligeramente diferente para habilitar el inicio de sesión social. Por ejemplo, Facebook requiere un ID de la aplicación de Facebook que se puede obtener en el sitio del desarrollador de Facebook.

Setting up social login with Facebook

El resto de las redes sociales requieren pasos similares.

Páginas de WordPress Personalizadas

WordPress proporciona dos URL de inicio de sesión predeterminadas: /wp-admin/ y wp-login.php, por lo que cualquier persona familiarizada con WordPress pueda encontrar la URL de inicio de sesión o registro. UserPro también te permite crear enlaces URL personalizados para todas las páginas relacionadas con el usuario.

Vaya a la pestaña Páginas de Configuración y actualice los enlaces permanentes según sea necesario.

Custom URLs for login and registration pages

Personalizar Notificaciones por Correo Electrónico

Haga clic en la pestaña Notificaciones por Email para ver una lista de todos los posibles mensajes de correo electrónico que se pueden personalizar.

Customize the email notification settings

Esta sección te permite personalizar las notificaciones por correo electrónico. Sólo tiene que elegir un tipo de mensaje y puede personalizar el correo electrónico que se envía para acciones como:

  • nuevo registro de usuarios
  • nueva validación de usuario
  • correo electrónico de bienvenida
  • restablecer la contraseña
  • cambio de contraseña
  • cambio de estado de la cuenta
  • y más

Conclusión

Personalizar tus páginas de inicio de sesión y registro es muy simple y una inversión esencial que puede conducir a grandes recompensas para su negocio. También le permitirá obtener la información necesaria del cliente necesaria para llevar su negocio al siguiente nivel.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.