Cómo crear un inicio de sesión, registro y perfil de usuario de WordPress personalizado

Publicado: 2023-07-05

Si tiene un sitio de WordPress, puede estar pensando en crear páginas personalizadas de inicio de sesión y registro de usuario para recopilar más información. Por ejemplo, puede pedirles a los usuarios que especifiquen su ubicación o envíen una breve biografía . Sin embargo, probablemente se esté preguntando cómo hacer esto sin tocar una línea de código.

Afortunadamente, puede usar un complemento de registro de usuario de WordPress como Profile Builder Pro. Esto le permite personalizar fácilmente sus formularios de inicio de sesión y registro. También le da más control sobre el perfil de usuario.

En esta publicación, veremos más de cerca por qué es posible que desee personalizar sus formularios de inicio de sesión, registro y perfil de usuario de WordPress. Luego, le mostraremos cómo hacer esto paso a paso usando Profile Builder Pro. ¡Empecemos!

Por qué es posible que desee crear un inicio de sesión, registro y perfil de usuario personalizados

De forma predeterminada, los formularios de registro, inicio de sesión y perfil de usuario de WordPress son muy básicos. Lo mismo ocurre con los formularios de WooCommerce:

Formulario básico de inicio de sesión de WordPress WooCommerce

Estos formularios pueden ofrecer un buen punto de partida, pero como propietario de un negocio, es posible que le interese obtener más información sobre su audiencia. Por ejemplo, recopilar información como su ubicación e idioma podría ayudarlo a optimizar sus esfuerzos de marketing para dirigirse a ese grupo demográfico en particular.

Además, es posible que desee proteger sus formularios con autenticación de dos factores (2FA). Esto ayudará a evitar que los actores maliciosos se infiltren en su sitio.

Hay otras formas de personalizar la página de inicio de sesión o registro. Por ejemplo, puede redirigir a los usuarios a páginas particulares de su sitio después de que inicien sesión o se registren.

Puede llevarlos a sus últimas publicaciones o a su página de venta. De esta manera, puede usar su página de inicio de sesión para llamar la atención sobre productos, artículos u ofertas específicos y generar más conversiones.

Profile Builder Pro es el complemento ideal para crear formularios personalizados de perfil de usuario, inicio de sesión y registro de WordPress. Incluso te permite personalizar tus formularios con lógica condicional. Esto significa que los campos que ven los usuarios se basarán en sus preferencias y selecciones.

Exploraremos estas características con más detalle en la siguiente sección.

Cómo crear un inicio de sesión, registro y perfil de usuario de WordPress personalizado

Ahora, veamos cómo personalizar sus formularios de inicio de sesión, registro y perfil de usuario de WordPress.

Paso 1: Instale Profile Builder Pro

Primero, deberá comprar el complemento Profile Builder Pro. Luego, inicie sesión en su cuenta y vaya a Descargas . Aquí encontrará los archivos para el complemento que acaba de comprar:

Administrar activaciones de licencia

Descargue los complementos Main y Pro para guardar el archivo en su computadora. Luego, seleccione Administrar sitios e ingrese la URL del sitio en el que desea activar el complemento:

Administrar la licencia del complemento Profile Builder Pro

Ahora, inicie sesión en su sitio de WordPress y navegue hasta ComplementosAgregar nuevo . Luego, haga clic en el botón Cargar complemento y elija los archivos que acaba de descargar uno por uno:

Instalar complemento

Seleccione Instalar ahora , seguido de Activar . Ahora debería ver Profile Builder en el menú de su tablero. Haga clic en él y vaya a Registrar versión . Aquí, deberá ingresar la clave de licencia para su complemento:

Introduzca la clave de la licencia

Encontrará la clave de licencia en su cuenta de Profile Builder. Una vez que lo haya activado, puede comenzar a trabajar en sus páginas de inicio de sesión y registro.

Profile Builder Pro puede crear automáticamente las páginas de formulario para usted:

Códigos cortos de formulario de registro

Todo lo que tiene que hacer es hacer clic en Crear página de formulario y agregará los formularios de inicio de sesión, registro y perfil de usuario de WordPress a las páginas respectivas. A continuación, le mostraremos cómo configurar y personalizar estos formularios.

Paso 2: configure sus formularios de WordPress

Comencemos configurando algunos ajustes para sus formularios de WordPress. Vaya a Profile BuilderConfiguración y seleccione un diseño de formulario:

Seleccionar plantillas de formulario

Por ejemplo, puede elegir el Estilo 2 como su estilo de formulario y sus formularios de usuario front-end se verán así:

Vista previa del diseño del formulario de inicio de sesión de registro

Luego, puede configurar algunos ajustes para sus páginas de inicio de sesión y registro. Por ejemplo, puede iniciar sesión automáticamente en nuevos usuarios después del registro, activar la aprobación del administrador para nuevos registros y permitir que los usuarios inicien sesión solo con su nombre de usuario o correo electrónico:

Incluso puede hacer cumplir contraseñas seguras especificando una longitud mínima y un nivel de seguridad. Una vez que esté listo, haga clic en Guardar cambios .

Si desea que su sitio sea más seguro, puede navegar a la pestaña Autenticación de dos factores y habilitar esta función en su sitio. Es posible que incluso desee habilitarlo solo para usuarios específicos, como clientes y suscriptores:

Habilitar 2FA

Si navega a Configuración avanzada , puede habilitar aún más funciones para sus formularios. Por ejemplo, si selecciona la pestaña Campos , verá una opción para Generar contraseña automáticamente para los usuarios :

Configuraciones avanzadas para campos

También puede prohibir el uso de ciertas palabras en los campos, evitar que los usuarios usen nombres para mostrar que ya existen y más. Tómese su tiempo para explorar las configuraciones y opciones disponibles, pero recuerde guardar los cambios antes de pasar a otra pestaña.

Si desea dirigir a los usuarios a una página específica después de que se registren o inicien sesión, deberá activar el módulo correspondiente. Vaya a Profile BuilderComplementos y busque Redirecciones personalizadas *.* Seleccione la casilla junto a él y luego presione Activar :

Redireccionamientos personalizados después de iniciar sesión

Ahora, ve a Profile BuilderCustom Redirects . Como puede notar, puede configurar redireccionamientos para usuarios individuales o según la función del usuario:

Configurar redireccionamientos para usuarios individuales o roles de usuario

En nuestro caso, configuraremos redireccionamientos globales . Comience eligiendo un tipo de redireccionamiento (como Después de iniciar sesión o Después de registrarse ):

Redirecciones globales

Luego, ingrese la URL a la que desea redirigir a los usuarios y haga clic en Agregar entrada . Puede crear varios redireccionamientos.

Paso 3: personaliza los campos del formulario

Para personalizar los campos de su formulario de registro de usuario de WordPress, vaya a Generador de perfilesCampos de formulario . Aquí, verá una lista de los campos que su formulario muestra actualmente:

Administrar propiedades de campos de formulario

Puede hacer clic en Editar para personalizar un campo individual o Eliminar para eliminarlo del formulario. Para agregar un nuevo campo, use el menú desplegable para seleccionar una opción.

Por ejemplo, es posible que desee pedir a los usuarios que seleccionen su país. Profile Builder le pedirá que ingrese algunos detalles sobre este campo, como un título y un metanombre:

Seleccionar campos de formulario de administración de país

Incluso puede convertirlo en un campo obligatorio. Cuando esté listo, haga clic en Agregar campo . Esto ahora se agregará a su formulario de registro de usuario de WordPress.

Anteriormente, mencionamos la lógica condicional. Esto es cuando un campo se muestra a los usuarios en función de la información que ingresaron en campos anteriores.

Por ejemplo, es posible que solo desee preguntar a los usuarios por su sitio web si seleccionaron Estados Unidos como su país. Para hacer esto, haga clic en el botón Editar para el campo Sitio web . Luego, marque la casilla Habilitar lógica condicional :

Campos de formulario de lógica condicional

Mediante el menú desplegable, seleccione el campo del que dependerá esta entrada (en nuestro caso, Seleccionar país ) y luego especifique la entrada (p. ej., Estados Unidos ).

Así es como se verá el resultado:

resultado-lógico-condicional

Tenga en cuenta que también puede reorganizar el orden en que aparecen sus campos. Para hacer esto, simplemente coloque el cursor sobre el número de su campo y arrástrelo a la posición deseada:

Arrastre y suelte para reorganizar los campos del formulario

Si desea crear múltiples formularios de registro para diferentes tipos de usuarios, vaya a Profile BuilderAdd-Ons y haga clic para activar el módulo de Múltiples formularios de registro :

Activar complemento de formularios de registro múltiple

Esta característica es particularmente útil si atiende a diferentes tipos de usuarios o clientes. Por ejemplo, puede vender tanto a empresas como a particulares.

Una vez que active el módulo, vaya a Profile Builder → Formularios de registro y haga clic en Agregar nuevo :

Agregar nuevo formulario de registro

Luego, deberá ingresar un nombre para su formulario, configurar algunos ajustes y personalizar los campos (como se muestra anteriormente):

nuevo-registro-personalizar la página de inicio de sesión de WordPress

Cuando esté listo, haga clic en Publicar . A continuación, veremos cómo agregar estos formularios a su sitio web.

Paso 4: agregue los formularios a sus páginas

Como mencionamos anteriormente, Profile Builder Pro puede agregar automáticamente los códigos cortos de formulario a sus páginas de inicio de sesión, registro y perfil. Eso significa que, cada vez que modifique estos formularios, los cambios se reflejarán en la interfaz.

Sin embargo, también puede decidir agregar estos formularios a otras áreas de su sitio. Por ejemplo, es posible que desee personalizar la página de inicio de sesión de WooCommerce y el formulario de registro de WooCommerce.

Hay dos formas de hacer esto: usando un shortcode o un bloque dedicado.

Primero, abra la página donde le gustaría mostrar sus formularios. Si desea usarlos para su tienda en línea, deberá editar la página Mi cuenta que se creó cuando instaló WooCommerce. Alternativamente, puede decidir crear una nueva página.

Si está utilizando la página de WooCommerce existente, deberá eliminar los formularios de inicio de sesión y registro predeterminados. Simplemente seleccione el shortcode y elimínelo:

Eliminar código abreviado de woocommerce-my-account

Ahora, para agregar sus formularios personalizados, haga clic para agregar un nuevo bloque y busque Registrarse o Iniciar sesión :

Agregar nuevo bloque de Gutenberg

En este tutorial, agregaremos ambos formularios a esta página. También hemos agregado un encabezado para cada formulario:

inicio de sesión-registro-formulario

También obtendrá algunos ajustes de configuración para cada bloque. Por ejemplo, si selecciona el formulario de registro, puede habilitar el inicio de sesión automático después del registro, configurar una redirección y más:

Registrar la configuración del generador de formularios

Si ha creado varios formularios de registro, vaya a Configuración del formulario y use el menú desplegable para elegir el formulario que desea mostrar:

Formulario de registro al por mayor en tipos de formulario.

En ** Rol asignado , puede elegir el rol que se asignará a los usuarios que se registren a través de este formulario. Por ejemplo, si se trata de un formulario de registro mayorista, puede asignar la función de cliente mayorista a estos usuarios.

Cuando esté listo, haga clic en Actualizar (o Publicar si creó una nueva página). Luego, puede visitar la página en la parte delantera para ver cómo se ven sus formularios para sus clientes:

Nueva interfaz de formulario de inicio de sesión y registro

Tenga en cuenta que para este ejemplo hemos utilizado el estilo de formulario predeterminado, pero puede elegir cualquiera de las plantillas prediseñadas para sus formularios para que se destaquen y se vean profesionales.

También puede agregar sus formularios con un shortcode. Esto puede ser particularmente útil si ha creado sus páginas con un creador de páginas que no sea el Editor de bloques.

Puede ubicar estos códigos abreviados en Profile BuilderInformación básica . ¡Simplemente cópielos y luego péguelos en la página deseada!

Paso 5: personaliza los formularios de perfil

Finalmente, puede personalizar los formularios de perfil de usuario de WordPress para que los usuarios tengan más control sobre sus detalles. Para ello, deberá activar el módulo Formularios de edición múltiple de perfiles :

Múltiples formularios de perfil de edición

Luego, vaya a Profile BuilderEditar formularios de perfilAgregar nuevo :

Agregar nuevo formulario de inicio de sesión personalizado de WordPress

Luego, puede personalizar el formulario como se muestra anteriormente. Por ejemplo, puede agregar una redirección y crear nuevos campos, o editar los existentes. Cuando termines, presiona Publicar .

Conclusión

Los formularios predeterminados de WordPress son bastante básicos. Si desea recopilar más detalles sobre su audiencia o brindar una experiencia de usuario personalizada, deberá personalizar estos formularios. También puede aplicar contraseñas seguras y autenticación de dos factores en estos formularios para que su sitio sea más seguro.

En resumen, así es como puede crear formularios personalizados de WordPress para iniciar sesión y registrarse:

  1. Instale Profile Builder Pro.
  2. Configura tus formularios de WordPress.
  3. Personaliza los campos del formulario.
  4. Agregue los formularios a sus páginas.
  5. Personaliza el perfil de usuario.

¿Tiene alguna pregunta sobre cómo crear un inicio de sesión, registro o perfil de usuario de WordPress personalizado? ¡Háganos saber en la sección de comentarios!