Cómo crear correctamente una página de autenticación personalizada en WordPress (paso a paso)



¿Alguna vez se ha preguntado si podría crear una página de autenticación personalizada en WordPress? La creación de una página de autenticación personalizada lo ayuda a mostrar una marca constante para sus usuarios, lo que le da a su sitio un aspecto más profesional. En este artículo, le mostraremos cómo crear una página de autenticación personalizada en WordPress. Creación de una página personalizada de autenticación de inicio de sesión de WordPress – Contenido
¿Por qué crear una página de autenticación personalizada?
Elegir el complemento correcto para crear una página de autenticación personalizada
Método 1: Use Seedprod para crear una página de autenticación
Método 2: use WPFFORMS para crear una página de autenticación
Método 3: Uso del tema que conecto para crear una página de inicio de sesión
Método 4: Personalice la página de inicio de sesión de WordPress existente sin complemento
Método 5: Muestre el formulario de inicio de sesión en cualquier lugar sin un complemento
¿Por qué crear una página de autenticación personalizada? Si ejecuta un sitio web basado en la comunidad, como un foro, un sitio de membresía, una red social de nicho o cualquier otro sitio web que les pida a los usuarios que registren una cuenta y se conecten, entonces deberá crear una autenticación personalizada de página.
La página de autenticación predeterminada de WordPress parece genérica y aburrida. Con una página de conexión personalizada, puede personalizar todos los elementos en la página alrededor del formulario. Si tiene una página de autenticación personalizada, puede ocultar la página de autenticación predeterminada si lo desea. Puede reducir su spam de inicio de sesión y mantener su sitio de WordPress seguro. Al elegir el complemento adecuado para crear una página de autenticación personalizada en el almacén oficial de complementos de WordPress, puede encontrar docenas de complementos diferentes que lo ayudan a crear fácilmente una página de conexión personalizada. En este artículo, analizaremos 3 complementos diferentes: SeedProd, WPFORMS y TEMA MI COMENTO. Elija SeedProd si necesita páginas de destino fáciles de usar para crear páginas de autenticación personalizadas, páginas de ventas, páginas optinas, páginas pronto, páginas de mantenimiento en mantenimiento modo y más. Aquí hay algunas características notables de SeedProd:
Enseña de la conexión de páginas concebidas profesionalmente para comenzar.
Personalice su página de conexión con elementos como perfiles sociales, videos, testimonios, evaluaciones de estrellas y más.
Agregue un formulario de conexión a cualquier página de destino que cree con SeedProd.
Elija WPFORMS si necesita un complemento completo de WordPress que le ayude a crear cualquier tipo de formularios en línea, incluidos los formularios de registro, formularios de pago, formularios de contacto, etc.
Algunos beneficios de WPForms son:
Personalice el formulario de autenticación como desee, sin restricciones.
Publique su formulario de conexión en cualquier publicación o página. Corporen su formulario de conexión en la barra lateral o incluso en el sótano del widget.
Elija mi tema para conectarse si desea crear fácilmente una página de inicio de sesión simple. A continuación se presentan algunas características del tema de inicio de sesión:
No se requiere configuración para crear una página de autenticación personalizada.
Oculta automáticamente la página de inicio de sesión predeterminada y redirige a la página de inicio de sesión recientemente creada.
Agregue un enlace de página de conexión a la barra lateral con un widget de conexión personalizado.
La desventaja es que, a diferencia de SeedProd y WPForms, el tema de mi inicio de sesión no le permite incorporar el formulario de conexión en cualquier lugar de su sitio y aparecerá exclusivamente en su página de inicio de sesión. Debido a que no es una forma completamente característica como las demás, la capacidad de personalizar su forma de conexión es limitada.
Método 1: Use Seedprod para crear una página de autenticación
Primero, veamos cómo crear una página de autenticación personalizada con SeedProd, paso a paso. Paso 1: Instale SeedProd en su sitio para el principio, debe descargar el complemento SeedProd. Luego cargue y active el complemento en su sitio web de WordPress. Para obtener instrucciones detalladas, siga este tutorial sobre cómo instalar un complemento de WordPress. Después de activar el complemento, verá una pantalla de bienvenida donde deberá ingresar la clave de licencia. Puede encontrar la clave de licencia de su cuenta en el sitio web de SeedProd.
Una vez que se verifique su clave de licencia, desplácese hacia abajo y haga clic en el botón Crear página.

Entonces serás conducido a la tabla de semillas. Aquí puede ver los diferentes tipos de páginas de destino que puede crear. Haga clic en Configuración de la página Configuración de autenticación para comenzar. PAS 2: Elija una plantilla de página de autenticación en este paso, se le pedirá que elija una plantilla de inicio de sesión. Seedprod ofrece muchas plantillas de diseño profesionalmente, desde las cuales puede elegir.

También hay una plantilla vacía que puede usar si desea comenzar el diseño desde cero.

Para elegir una plantilla de página de conexión, simplemente vaya con el mouse sobre él y haga clic en el icono de verificación.

Entonces es hora de personalizar la plantilla. Paso 3: Personalice su página de autenticación de mejor parte sobre SeedProd es que puede personalizar fácilmente la página de conexión utilizando el generador de arrastre y soltar visual. Primero, puede personalizar cualquier elemento existente en la plantilla haciendo clic en él. Por ejemplo, puede hacer clic en el título “Iniciar sesión” para cambiar el texto, el tamaño, la alineación, la impresión y más.

Para agregar un nuevo contenido a su página de inicio de sesión, puede usar los bloques de página de destino listos para SeedProd.
En el lado izquierdo del Visual Builder, hay bloques de páginas de destino, como imágenes, videos, botones, perfiles sociales, cronómetro inverso, barra de progreso y más.

Simplemente extraiga el bloque deseado y corríjelo en su página de autenticación. Nuevamente, puede hacer clic en el bloque para personalizar el estilo, el tamaño, la alineación, etc. Seedprod también ofrece secciones preconstruidas, como características, preguntas frecuentes, sótano y otros, que puede agregar a su página de conexión. Simplemente haga clic en una sección y SeedProd la agregará automáticamente a su página. Puede acceder a la configuración global de SeedProd en la esquina inferior para cambiar la imagen de fondo, la fuente y los colores de toda la página de autenticación, en lugar de cambiar cada elemento individual.

Por ejemplo, si desea cambiar el esquema de color de su página de inicio de sesión, SeedProd ofrece más de 20 paletas de colores que puede usar para crear un aspecto cohesivo.
Después de que esté satisfecho con el aspecto de su página de conexión, haga clic en Guardar en la esquina superior derecha.

Paso 4: Configure la configuración de la página de inicio de sesión Si agrega un formulario de registro de correo electrónico a su página de inicio de sesión, puede conectarlo a su servicio de marketing por correo electrónico.

Simplemente haga clic en su proveedor de marketing por correo electrónico favorito y siga las instrucciones para conectar su cuenta. Ahora, cada vez que alguien proporciona su dirección de correo electrónico a través del formulario OPINE, se agregará automáticamente a su lista de correo electrónico. También puede acceder a la pestaña Setti para configurar otras configuraciones.

La configuración en esta página incluye:

General: cambie el nombre de la página de conexión y URL, muestre un enlace de afiliado de SeedProd y más.

SEO – Establezca el título de SEO de la página, Meta Descripción, etc. Si usa un complemento de SEO All One, puede usarlo como un atajo en su configuración. Analice: observe el rendimiento de su inicio de sesión utilizando un complemento de análisis como MonsterInsights.

Escrituras: use scripts de seguimiento y reorientación, como Facebook Pixel o Pixels.

Recuerde hacer clic en el botón Guardar para guardar la configuración.
Paso 5: Publique su página de autenticación ahora es el momento de publicar su página de autenticación personalizada.
Luego verá un mensaje exitoso que anuncia que la página de inicio de sesión ahora está activa.
Haga clic en la página en vivo para ver su nueva página de autenticación personalizada.
El último paso es activar la página de conexión en el área de administración de WordPress. Puede parecer difícil, pero Seedprod lo hace muy fácil. Simplemente salga del generador de página de destino visual y vuelva al panel principal de SeedProd. En la sección de la página de autenticación, cambie el botón de inactivo a activo.
¡Eso es todo! Ahora su página de autenticación de WordPress tiene un diseño personalizado. Método 2: use WPFFORMS para crear una página de autenticación

Echemos un vistazo a cómo crear una página de inicio de sesión de WPFORMS. Paso 1: Instale WPForms en su sitio, lo primero que debe hacer es instalar y activar el complemento WPFFORMS. Asegúrese de verificar su clave de licencia navegando en la configuración de WPFFORMS ». Puede obtener la clave de licencia de su cuenta en el sitio web de WPFFORMS. Para crear una página de conexión personalizada con WPFFORMS, deberá instalar el registro del usuario accediendo a los complementos WPFFORMS. Haga clic en Instalar complemento cerca de User Registry Addon y luego haga clic en Activación. Una vez que se activa el ADD, puede ir más allá y crear un formulario de conexión de usuario con WPFFORMS. Paso 2: Cree un formulario de autenticación personalizado con el potente constructor de colocación WPFFORMS, puede crear un formulario de conexión en solo unos minutos, no horas, sin escribir una sola línea de código. Para crear un formulario de inicio de sesión, visite WPFFORMS »Agregue un nuevo. En la página de configuración del formulario, deberá elegir el formulario de conexión de usuario para crear un formulario de conexión. Ahora verá el constructor de formularios en el que puede agregar, personalizar y eliminar los campos de conexión. De manera predeterminada, la conexión del formulario de conexión agrega los siguientes campos de formulario: nombre de usuario y contraseña.

Puede personalizar cualquier campo haciendo clic en el generador de páginas. Luego puede hacer las personalizaciones deseadas en el panel izquierdo. Paso 3: Configuración del formulario Para configurar la configuración general, puede acceder a la configuración general. En esta página, puede personalizar el nombre del formulario, la descripción, enviar el texto del botón, etc., no tiene que hacer nada en las notificaciones para su formulario de conexión personalizado. De manera predeterminada, las notificaciones están deshabilitadas, por lo que no recibirá un correo electrónico cada vez que alguien se conecta a su sitio cuando un usuario se conecta a través de su formulario de autenticación personalizado, aterrizará en la página principal de su web. Puede cambiar la URL de redirección, si lo desea, en la URL de redirigir la confirmación.

Paso 4: Publique su formulario de WordPress Una de las principales ventajas de usar WPFORMS para crear un formulario de conexión es permitirle incorporar su formulario en cualquier lugar de su sitio, incluidas publicaciones, páginas, colinas o áreas de sótano widgetizado. Echemos un vistazo a cómo publicar su formulario en publicaciones o páginas. Cree una nueva publicación o página en WordPress y luego haga clic en el editor de bloques + Gutenberg. Puede buscar el bloque WPFFORMS y hacer clic en él.

Luego seleccione el formulario de inicio de sesión en el bloque WPForms y se cargará automáticamente en su publicación / página.

Después de agregar el formulario, puede publicar su publicación / página. También puede agregar el formulario de conexión al widget de barra lateral de la siguiente manera. Acceda a los widgets de Look »y agregue el widget WPForms a la barra lateral.

Seleccione el formulario de inicio de sesión personalizado en la configuración del widget y haga clic en el botón Guardar para guardar los cambios. Método 3: Usando el tema que conecto para crear una página de la página de plantado de temas de inicio de sesión hace que sea muy fácil publicar un formulario de conexión personalizado en su sitio web de WordPress. Para crear una página de inicio de sesión simple, todo lo que tiene que hacer es instalar y activar el tema mi complemento de inicio de sesión. El complemento funciona fuera de la caja sin ninguna otra configuración. Sin embargo, si tiene que personalizar la configuración del complemento, puede hacer clic en el menú mi conexión desde el tablero de WordPress.

Luego puede cambiar los tipos de autenticación y registro. También puede ajustar a los servidores de URL para las páginas de autenticación, desconexión, registro, contraseña perdida y restablecimiento de contraseña. Método 4: Personalice la página de autenticación de WordPress existente sin complementos si prefiere hacer cambios o agregar un estilo personalizado en su página de autenticación existente que para crear una nueva, así es como hacerlo. Simplemente agregue este código al archivo Functions.php de su base o en un complemento específico para el Sitio:

Si esta es la primera vez que agrega fragmentos de código a WordPress, consulte nuestra guía sobre cómo agregar correctamente los fragmentos de código a WordPress para que no rompa accidentalmente su sitio.

// página de inicio de sesión personalizada

Function CLP_LOGIN_HEAD () {

echo ”; // Comenzar estilos personalizados

echo ‘.login #nav a, .login #backtoBlog a {color: #! } ‘; // Color de enlace de página de inicio de sesión

echo ‘.login h1 a {fondo: url (“‘. get_bloginfo (‘stylelheet_directory’). ‘/imágenes/imágenes va aquí”); Ancho: PX; Altura: PX; } ‘; // Página de inicio de sesión LogOECHO ‘.login .Button-Primary {Background:#; Color del borde:#; } ‘; // Color del botón de página de inicio de sesión

echo ”; // Finalizar estilos personalizados

}
add_action (‘login_head’, ‘clp_login_head’);
Puede cambiar la imagen CSS y URL en el código anterior para agregar el estilo personalizado para la página de autenticación de WordPress. Método 5: Muestre el formulario de autenticación de WordPress en cualquier lugar sin un complemento Si desea mostrar el formulario de inicio de sesión de WordPress en cualquier página, barra lateral o área del sótano, entonces puede agregar este código a la plantilla de plantilla:
Lo mismo que el método anterior, si agrega fragmentos de código a WordPress por primera vez, consulte nuestra guía sobre cómo agregar correctamente los fragmentos de código a WordPress para que no rompa accidentalmente su sitio.

El código anterior mostrará la página general de autenticación de WordPress solo en la ubicación donde agregó el código. Si desea agregar un formulario de WordPress personalizado con campos y opciones adicionales, puede usar este código:
verdadero,
‘Redirect’ => ‘http://wpsnipp.com’,
‘form_id’ => ‘loginform’,
‘Label_username’ => __ (‘UserName’),
‘Label_password’ => __ (‘contraseña’),
‘Label_remember’ => __ (‘Recuérdame’),
‘Label_log_in’ => __ (‘iniciar sesión’),
‘id_username’ => ‘user_login’,
‘id_password’ => ‘user_pass’,
‘Id_remember’ => ‘RememberMe’,
‘id_submit’ => ‘wp-submit’,
‘Recuerda’ => Verdadero,
‘Value_username’ => null,
‘value_remember’ => false); wp_login_form ($ args);
?>
Algunos fragmentos de código que encontrará útiles:
Cambie la URL de conexión a través del archivo .htaccess
Cambie la URL para conectarse a través de funciones.php
Elimine el efecto de sacudir de WordPress cuando ocurre un error
¡Eso es todo!Esperamos que esta guía le haya ayudado a crear una página de guía personalizada en WordPress.Si le gustó este artículo, le recomendamos que lea nuestro artículo sobre los mejores complementos para el formulario de contacto de WordPress.

Copyright statement: Unless otherwise noted, this article is Collected from the Internet, please keep the source of the article when reprinting.

Check Also

gkOVSBm5B8SgiXmo

Shopify vs WooCommerce – ¿Cuál es la mejor plataforma?(Comparación)

Shopify vs WooCommerce

Leave a Reply

Your email address will not be published. Required fields are marked *