Cómo crear una página de inicio de sesión de WordPress personalizada (Guía definitiva)

¿Desea crear una página de inicio de sesión de WordPress personalizada para su sitio web??


Si ejecuta un sitio de membresía de WordPress o una tienda en línea, muchos de sus usuarios a menudo verán la página de inicio de sesión. Personalizar la página de inicio de sesión predeterminada de WordPress le permite ofrecer una mejor experiencia de usuario.

En esta guía definitiva, le mostraremos diferentes formas de crear una página de inicio de sesión de WordPress personalizada. También puede usar este tutorial para crear una página de inicio de sesión personalizada de WooCommerce.

Cómo crear fácilmente una página de inicio de sesión de WordPress personalizada para su sitio

Esto es lo que aprenderá de esta guía..

    ¿Por qué crear una página de inicio de sesión personalizada de WordPress??

    WordPress viene con un potente sistema de gestión de usuarios. Esto permite a los usuarios crear cuentas en tiendas de comercio electrónico, sitios web de membresía o en un blog.

    Por defecto, la página de inicio de sesión muestra la marca y el logotipo de WordPress. Esto está bien si está ejecutando un pequeño blog, o si es la única persona con acceso de administrador.

    Pantalla de inicio de sesión predeterminada de WordPress

    Sin embargo, si su sitio web permite a los usuarios registrarse e iniciar sesión, una página de inicio de sesión personalizada ofrece una mejor experiencia de usuario.

    El uso de su propio logotipo y diseño hace que sus usuarios se sientan como en casa. Mientras que redirigirlos a la pantalla de inicio de sesión predeterminada de WordPress que no se parece en nada a su sitio web puede parecer sospechoso para sus usuarios.

    Por último, la pantalla de inicio de sesión predeterminada no contiene nada más que el formulario de inicio de sesión. Al crear una página de inicio de sesión personalizada, puede utilizarla para promocionar otras páginas o promociones especiales.

    Dicho esto, echemos un vistazo a algunos ejemplos de diseños personalizados de páginas de inicio de sesión de WordPress.

    Ejemplos de diseño de la página de inicio de sesión de WordPress

    Los propietarios de sitios web pueden personalizar la página de inicio de sesión de WordPress usando diferentes estilos y técnicas.

    Algunos crean una página de inicio de sesión personalizada que utiliza el tema y los colores de su sitio web. Otros, modifiquen la página de inicio de sesión predeterminada agregando un fondo personalizado, colores y su propio logotipo..

    1. WPForms

    WPForms

    WPForms es el mejor complemento de formulario de contacto de WordPress en el mercado. Casualmente, su complemento también incluye un complemento para crear hermosos formularios de inicio de sesión y registro de WordPress, que le mostraremos más adelante en este artículo.

    Su página de inicio de sesión personalizada utiliza un diseño de dos columnas. La columna izquierda contiene el formulario de inicio de sesión y la columna derecha se utiliza para resaltar promociones y otras llamadas a la acción. En el ejemplo anterior, están utilizando la página de inicio de sesión para compartir su informe anual. Utiliza marcas personalizadas, ilustración de fondo y colores de marca para crear una experiencia de inicio de sesión única.

    2. Rock My Wedding

    Rock My Wedding

    El sitio web de Rock My Wedding utiliza un modo emergente para mostrar el formulario de inicio de sesión y registro. La ventaja de usar una ventana emergente es que los usuarios pueden iniciar sesión sin salir de la página. Los salva de una nueva carga de página y ofrece una experiencia de usuario más rápida.

    3. Jacquelynne Steves

    Jacquelynne Steves

    Jacquelynne Steeves es un sitio web de arte y manualidades donde el autor publica contenido sobre la decoración del hogar, hacer colchas, patrones, bordados y más. Su página de inicio de sesión utiliza una imagen de fondo personalizada que coincide con el tema de su sitio web con el formulario de inicio de sesión a la derecha.

    4. Iglesia Motion Graphics

    Iglesia Motion Graphics

    La página de inicio de sesión de esta empresa de diseño de gráficos en movimiento utiliza un fondo colorido que refleja de qué se trata su negocio. Utiliza el mismo encabezado, pie de página y menús de navegación en la pantalla de inicio de sesión. El formulario de inicio de sesión en sí es bastante simple con un fondo oscuro.

    5. Revisión de gestión de préstamos MITS

    Revisión de gestión de préstamos MITS

    El sitio web MITSLoan Management Review utiliza la pantalla de inicio de sesión predeterminada de WordPress. Utiliza CSS personalizado con su propio logotipo para ocultar la marca de WordPress.

    Crear una página de inicio de sesión personalizada front-end en WordPress

    Hay varios complementos de WordPress que puede usar para crear una página de inicio de sesión personalizada en WordPress. Le mostraremos dos complementos diferentes, y puede elegir el que más le convenga.

    Crear una página de inicio de sesión de WordPress usando Theme My Login

    Lo primero que debe hacer es instalar y activar el complemento Theme My Login. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

    Tras la activación, Theme My Login crea automáticamente URL para su inicio de sesión personalizado, cierre de sesión, registro, contraseña olvidada y acciones de restablecimiento de contraseña.

    Puede personalizar estas URL de inicio de sesión de WordPress visitando Tema Mi inicio de sesión »General página. Desplácese hacia abajo a la sección “Babosas” para modificar estas URL utilizadas por el complemento para acciones de inicio de sesión.

    Tema Mis páginas de inicio de sesión

    Theme My Login también le permite usar códigos cortos para crear páginas de inicio de sesión y registro personalizadas. Simplemente puede crear una página para cada acción y luego agregar la ficha de página aquí, para que el complemento pueda encontrar y redirigir a los usuarios correctamente.

    Comencemos con la página de inicio de sesión.

    Dirigirse a Página »Agregar nuevo para crear una nueva página de WordPress. Debe asignar un título a su página y luego ingresar el siguiente código corto “[theme-my-login]” dentro del área de contenido.

    Agregar shortcode

    Ahora puede publicar su página y obtener una vista previa para ver su página de inicio de sesión personalizada en acción.

    Página de inicio de sesión personalizada de WordPress

    Repita el proceso para crear otras páginas utilizando los siguientes códigos cortos.

    [theme-my-login action = “register”] para el formulario de registro.

    [theme-my-login action = ”lostpassword”] ​​para la página de contraseña perdida.

    [theme-my-login action = ”resetpass”] utilícelo en la página de restablecimiento de contraseña.

    Crear una página de inicio de sesión de WordPress personalizada con WPForms

    WPForms es el mejor plugin de generador de formularios de WordPress en el mercado. Le permite crear fácilmente formularios personalizados de inicio de sesión y registro para su sitio web.

    WPForms es un complemento premium de WordPress, y necesitará al menos su plan profesional para acceder al complemento de registro de usuario. Los usuarios de WPBeginner pueden obtener un 50% de descuento utilizando nuestro código de cupón de WPForms: SAVE50

    Lo primero que debe hacer es instalar y activar el complemento WPForms. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

    Tras la activación, debe visitar WPForms »Configuración página para ingresar su clave de licencia. Puede encontrar esta información en su cuenta en el sitio web de WPForms.

    Licencia de WPForms

    Después de ingresar la clave de licencia, podrá instalar complementos. Anímate y visita WPForms »Complementos página y busque el complemento de registro de usuario.

    Instalar complemento de registro de usuario

    A continuación, haga clic en el botón Instalar complemento para descargar y activar el complemento. Ahora está listo para crear sus propios formularios de inicio de sesión personalizados.

    Dirigirse a WPForms »Agregar nuevo página y desplácese hacia abajo hasta la plantilla “Formulario de inicio de sesión de usuario”. Debe hacer clic en el botón “Crear un formulario de inicio de sesión de usuario” para continuar.

    Crear formulario de inicio de sesión

    WPForms cargará el formulario de inicio de sesión de usuario con los campos obligatorios. Puede hacer clic en los campos para agregar su propia descripción o texto a su alrededor..

    Creador de formularios WPForms

    También puede cambiar otras configuraciones. Por ejemplo, agrega automáticamente “Enviar” como título del botón. Puede hacer clic en él y luego cambiarlo a Iniciar sesión.

    Configuraciones de formulario

    También puede decidir qué sucede una vez que un usuario inicia sesión correctamente. Vaya a Configuración »Confirmación pestaña y seleccione una acción.

    Redireccionar usuarios registrados

    Puede redirigir al usuario a cualquier otra URL, redirigirlo a la página de inicio o simplemente mostrarle un mensaje de que ahora ha iniciado sesión.

    Una vez que esté satisfecho con la configuración del formulario, haga clic en el botón Guardar en la esquina superior derecha de la pantalla y cierre el generador de formularios.

    Agregar su formulario de inicio de sesión personalizado a una página de WordPress

    WPForms hace que sea muy fácil agregar su formulario de inicio de sesión personalizado en cualquier publicación o página de WordPress.

    Simplemente edite la página donde desea agregar el formulario de inicio de sesión o cree uno nuevo. En la pantalla de edición de página, agregue el bloque WPForms a su área de contenido.

    Agregar bloque WPForms a una publicación

    Luego, seleccione el formulario de inicio de sesión que creó anteriormente y el bloque WPForms lo cargará automáticamente dentro del área de contenido.

    Vista previa del formulario de inicio de sesión

    Ahora puede continuar editando la página del formulario de inicio de sesión, o guardar y publicar sus cambios.

    Personalizar su diseño de página de formulario de inicio de sesión de WordPress

    De forma predeterminada, su página de formulario de inicio de sesión de WordPress personalizada utilizará la plantilla y los estilos de página de su tema. Tendrá los menús de navegación, encabezado, pie de página y widgets de la barra lateral de su tema.

    Si desea hacerse cargo por completo de toda la página y diseñar algo desde cero, puede usar un complemento de generador de páginas de WordPress.

    Con un complemento de generador de páginas, puede crear un diseño de página personalizado y luego agregar un widget de formulario de inicio de sesión proporcionado por Theme My Login o WPForms.

    En la captura de pantalla a continuación, hemos utilizado el popular plugin Beaver Builder. Utilizamos una imagen de fondo en un diseño de pantalla completa y luego agregamos dos columnas. En una columna agregamos texto y un botón. En la otra columna, agregamos el widget WPForms.

    Crear una página de inicio de sesión personalizada con el complemento del generador de páginas

    El beneficio de Beaver Builder es que es una solución 100% de arrastrar y soltar.

    Nota: Como ya ha iniciado sesión, es posible que los complementos Theme My Login y WPForms no muestren una vista previa en vivo del formulario de inicio de sesión. El complemento WPForms tiene una opción donde puede desactivar esto en la configuración del formulario.

    Si los complementos del creador de páginas de WordPress no son lo tuyo, entonces puedes usar CSS personalizado para diseñar el formulario y la página de inicio de sesión. Alternativamente, también puede usar el complemento CSS Hero para agregar fácilmente estilos CSS personalizados.

    Cambiar el logotipo de inicio de sesión de WordPress y la URL

    No siempre necesita crear una página de inicio de sesión de WordPress completamente personalizada para su sitio web. De hecho, muchos sitios web simplemente reemplazan el logotipo de WordPress y la URL del logotipo mientras siguen usando la página de inicio de sesión predeterminada.

    Si desea reemplazar el logotipo de WordPress en la pantalla de inicio de sesión con su propio logotipo, puede hacerlo fácilmente utilizando un complemento de WordPress o agregando un código personalizado. Le mostraremos ambos métodos, puede usar el que más le convenga.

    Cambiar el logotipo de inicio de sesión de WordPress y la URL con un complemento

    Lo primero que debe hacer es instalar y activar Colorlib Login Customizer. enchufar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

    Tras la activación, el complemento agrega un nuevo elemento de menú etiquetado “Personalizador de inicio de sesión” a la barra lateral de administración de WordPress. Al hacer clic se abrirá el personalizador de inicio de sesión.

    Personalizador de inicio de sesión

    El personalizador de inicio de sesión cargará su pantalla de inicio de sesión predeterminada de WordPress con opciones de personalización a la izquierda y vista previa en vivo a la derecha.

    Para reemplazar el logotipo de WordPress por el suyo, haga clic en la pestaña “Opciones de logotipo” a la derecha. Desde aquí puede ocultar el logotipo de WordPress, cargar su propio logotipo personalizado, cambiar la URL y el texto del logotipo.

    Sube un logotipo personalizado a la página de inicio de sesión

    El complemento también le permite personalizar completamente la página de inicio de sesión predeterminada de WordPress. Puede agregar columnas, imagen de fondo, cambiar los colores del formulario de inicio de sesión y más.

    Básicamente, puede crear una página de inicio de sesión de WordPress personalizada sin cambiar la URL de inicio de sesión predeterminada de WordPress.

    Una vez que haya terminado, simplemente haga clic en el botón publicar para guardar sus cambios. Ahora puede visitar la página de inicio de sesión de WordPress para ver su formulario de inicio de sesión personalizado en acción.

    Página de inicio de sesión personalizada de WordPress con logotipo personalizado

    Cambiar el logotipo de inicio de sesión de WordPress y la URL sin complemento (código)

    Este método le permite reemplazar manualmente el logotipo de WordPress en la pantalla de inicio de sesión con su propio logotipo personalizado.

    Primero, debe cargar su logotipo personalizado en la biblioteca de medios. Ir Medios »Agregar nuevo página y suba su logotipo personalizado.

    Una vez que haya cargado la imagen, haga clic en el enlace “Editar” al lado. Esto abrirá la página de edición de medios donde necesita copiar la URL del archivo y pegarlo en un archivo de texto en blanco en su computadora.

    A continuación, debe agregar el siguiente código al archivo functions.php de su tema o un complemento específico del sitio.

    función wpb_login_logo () { ?>

    #login h1 a, .login h1 a {
    imagen de fondo: url (http: //path/to/your/custom-logo.png);
    altura: 100 px;
    ancho: 300 px;
    tamaño de fondo: 300 px 100 px;
    repetición de fondo: sin repetición;
    relleno inferior: 10px;
    }

    <?php}
    add_action (‘login_enqueue_scripts’, ‘wpb_login_logo’);

    No olvide reemplazar la URL de la imagen de fondo con la URL del archivo que copió anteriormente. También puede ajustar otras propiedades CSS para que coincidan con su imagen de logotipo personalizada.

    Ahora puede visitar la página de inicio de sesión de WordPress para ver su logotipo personalizado en acción.

    Página de inicio de sesión de WordPress con logotipo personalizado

    Este código solo reemplaza el logotipo de WordPress. No cambia el enlace del logotipo que apunta al sitio web de WordPress.org.

    Cambiemos esto.

    Simplemente agregue el siguiente código al archivo functions.php de su tema o un complemento específico del sitio. Puede agregar este código justo debajo del código que agregó anteriormente.

    función wpb_login_logo_url () {
    return home_url ();
    }
    add_filter (‘login_headerurl’, ‘wpb_login_logo_url’);

    función wpb_login_logo_url_title () {
    devuelva ‘Nombre e información de su sitio’;
    }
    add_filter (‘login_headertitle’, ‘wpb_login_logo_url_title’);

    No olvide reemplazar “Nombre e información de su sitio” con el nombre real de su sitio. El logotipo personalizado en su pantalla de inicio de sesión ahora apuntará a la página de inicio de su sitio.

    Eso es todo. Esperamos que este artículo te haya ayudado a aprender diferentes formas de crear una página de inicio de sesión de WordPress para tu sitio web. También puede consultar nuestra guía de seguridad definitiva de WordPress para obtener consejos sobre cómo mejorar la seguridad de inicio de sesión de WordPress.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me