Cómo crear una página de inicio de sesión personalizada en WordPress (3 métodos)

De forma predeterminada, la página de inicio de sesión que ven los visitantes de su sitio es la misma que usan los administradores. Si bien esta página es funcional, su diseño es muy básico, con muchos espacios en blanco y el logotipo de WordPress al frente y al centro. No hace mucho para respaldar su marca u ofrecer a los visitantes una experiencia fácil de usar.

Crear una página de inicio de sesión personalizada es una mejora relativamente fácil que puede realizar en su sitio de WordPress. Dependiendo del tipo de sitio que ejecute, muchos de sus visitantes pueden interactuar con esta página en algún momento, por lo que una página de inicio de sesión personalizada de WordPress presenta una oportunidad para mejorar su experiencia.

En este artículo, hablaremos sobre las ventajas de una página de inicio de sesión personalizada de WordPress, cubriremos varios métodos para crear una y exploraremos algunas de las mejores prácticas para la seguridad y la experiencia del usuario.

Por qué podría necesitar una página de inicio de sesión de WordPress personalizada

Personalizar su página de inicio de sesión de WordPress no tiene por qué ser un proyecto complicado. Los ajustes tan simples como cambiar el logotipo de WordPress por el tuyo y cambiar el fondo pueden ser de gran ayuda.

Las páginas de inicio de sesión personalizadas pueden ser más:

• Fácil de usar
• Profesional
• Visualmente atractivo
• Informativo
• Seguro

Además, realizar estas mejoras es rápido y sencillo. Al dedicar un poco de tiempo a esto ahora, puede mejorar su página de inicio de sesión para cada visitante que la use en el futuro.

Los beneficios de personalizar su página de inicio de sesión de WordPress

Ahora, echemos un vistazo más de cerca a algunas de las ventajas que hemos descrito anteriormente, para que pueda ver por qué vale la pena. La página de inicio de sesión predeterminada de WordPress es bastante básica:

Si eres el único que lo ve, entonces la página de inicio de sesión predeterminada es la solución. Pero si su audiencia lo usa regularmente para iniciar sesión, definitivamente hay algunas actualizaciones rápidas que podría hacer.

Agregar una marca a la página de inicio de sesión hará que se sienta como si perteneciera a su sitio y brindará una apariencia más profesional. Los visitantes deben reconocerlo como una parte natural e intencional de su sitio, no como una ocurrencia tardía.

Esta página también puede ser una gran oportunidad para compartir noticias y otra información con su audiencia. Por ejemplo, puede incluir una sección en la que publique actualizaciones para que los visitantes las lean mientras inician sesión: noticias sobre su organización, nuevos productos, testimonios o cualquier otra cosa que desee compartir sobre su empresa.

Las características importantes de una buena página de inicio de sesión

Si bien la página de inicio de sesión de un sitio web puede verse muy diferente a la de otro, todos tienden a compartir algunas características comunes. Obviamente, todas las páginas de inicio de sesión requieren una forma para que los visitantes inicien sesión, ya sea a través de una combinación tradicional de nombre de usuario y contraseña o autenticación de terceros.

Tener un enlace para restablecer una contraseña o buscar un nombre de usuario también es una práctica estándar. Este enlace generalmente lleva a las personas a una página diferente, donde pueden ingresar su dirección de correo electrónico para recibir instrucciones para recuperar o restablecer su información. ¿Olvidó su contraseña? El enlace generalmente se encuentra cerca de los campos de entrada de datos y el botón Iniciar sesión .

Para protegerlo a usted y a sus visitantes, también es inteligente implementar algunas funciones básicas de seguridad. Por ejemplo, es posible que desee cambiar la forma en que los administradores inician sesión en su sitio para evitar intentos no autorizados.

Si su sitio recopila información personal de sus usuarios, querrá prestar especial atención a la protección de esas cuentas contra bots y piratas informáticos. La tecnología CAPTCHA, la autenticación de dos factores (2FA) y los avisos antiphishing son algunas de las cosas que puede hacer para proteger a sus usuarios. Discutiremos estas opciones con más detalle más adelante.

Cómo crear una página de inicio de sesión de WordPress personalizada (3 métodos)

Afortunadamente, crear una página de inicio de sesión personalizada de WordPress es mucho más fácil de lo que probablemente imagina. En cuestión de minutos, puede agregar su logotipo y realizar otros cambios simples. En cuestión de horas, puede tener una página de inicio de sesión totalmente personalizada que mejorará la experiencia de sus visitantes.

Aquí hay tres métodos populares para crear una página de inicio de sesión de WordPress personalizada:

1. Cree una página de inicio de sesión personalizada de WordPress con SeedProd

El complemento SeedProd es una forma intuitiva de personalizar su página de inicio de sesión. También puede crear una página 404 personalizada, una página de modo de mantenimiento, una página "Próximamente" y otras páginas de destino.

Tenga en cuenta que los módulos de la página 404 y la página de inicio de sesión requieren un plan SeedProd Pro. Para crear su página de inicio de sesión, simplemente siga estos pasos:

Paso 1: Instalar y activar SeedProd Pro

Primero, vaya a la página Complementos en su tablero y seleccione Agregar nuevo . Busque SeedProd e instálelo gratis. Una vez finalizada la instalación, haga clic en el botón Activar .

A continuación, deberá actualizar a un plan premium. Para hacer esto, haga clic en Get Pro en la pestaña SeedProd . Esto lo redirigirá a su sitio web, donde puede comprar una clave de activación para la versión premium.

Paso 2: Cree una página de destino utilizando la plantilla de la página de inicio de sesión

Una vez que haya activado SeedProd Pro, desplace el cursor sobre la pestaña SeedProd y seleccione Páginas de destino. En la siguiente pantalla se le presentarán cuatro plantillas.

Elija Configurar una página de inicio de sesión para personalizar su nueva página de inicio de sesión utilizando una plantilla prediseñada. A continuación, accederá al editor, donde podrá diseñar su nueva página de inicio de sesión.

El editor de SeedProd se comporta de manera muy similar al editor de bloques de WordPress, lo que le permite agregar y modificar fácilmente aspectos de la página. Como seleccionó el módulo de la página de inicio de sesión, ya tendrá incorporadas todas las características necesarias de una página de inicio de sesión.

Estos incluyen los cuadros de entrada de nombre de usuario y contraseña, la casilla de verificación Recordarme , el enlace Restablecer contraseña , una imagen y un fondo.

Puede usar el Editor de bloques para agregar texto adicional, imágenes, formularios y más, tal como lo haría con una publicación normal. Simplemente personalice esta página a su gusto y luego haga clic en el botón Guardar en la esquina superior derecha de la pantalla.

Paso 3: active su nueva página de inicio de sesión

Una vez que haya guardado su diseño, salga de la pantalla de edición y regrese a la pantalla de páginas de destino de SeedProd en el tablero. Mueva el interruptor en el módulo Página de inicio de sesión a Activo para reemplazar la página de inicio de sesión predeterminada con la nueva.

¡Ahora, cierre sesión y regrese para verlo en acción! Pruebe el enlace de restablecimiento de contraseña y otras funciones antes de volver a iniciar sesión. Imagine que es un visitante nuevo y considere si hay algo que pueda hacer para mejorar aún más la experiencia.

Otras Consideraciones

SeedProd hace que sea muy fácil agregar imágenes y otros elementos, al igual que con el Editor de bloques. Es importante considerar todas las opciones disponibles, para ver si hay elementos que serían efectivos en su página de inicio de sesión.

Su pantalla de inicio de sesión tampoco tiene que permanecer igual con el tiempo. Puede considerar publicar imágenes de ventas actualizadas o sugerencias de contenido destacado con regularidad. A medida que las personas vuelven a iniciar sesión, puede aprovechar la oportunidad para sugerir contenido nuevo o popular.

Por supuesto, también querrá usar la paleta de colores y las fuentes de su empresa para mantener todo en consonancia con el resto de su sitio. Con SeedProd, puede intercambiar fácilmente el fondo de la página, así que siéntase libre de crear algunos diseños y rotarlos según la temporada o como mejor le parezca para mantener la experiencia fresca.

2. Modifique su página de inicio de sesión usando LoginPress

Si está buscando algo más económico y sencillo, LoginPress es un práctico complemento gratuito que puede usar para personalizar su página de inicio de sesión. Carece de algunas de las características y el pulido de SeedPod Pro, pero agrega funcionalidad al Editor de sitio completo de WordPress que permite una fácil personalización de su página de inicio de sesión. Simplemente sigue estos pasos para usarlo:

Paso 1: Instale y active el complemento LoginPress

Desde la página Complementos en su tablero, seleccione Agregar nuevo y busque "LoginPress". Instale y active el complemento para comenzar.

No es necesario actualizar LoginPress en esta etapa, aunque hay algunas funciones premium que puede habilitar más adelante. Para la mayoría de las páginas de inicio de sesión, la versión gratuita será suficiente.

Paso 2: Modifique su página de inicio de sesión usando el Personalizador

Una vez que haya instalado y activado LoginPress, verá una nueva pestaña en el lado izquierdo de su panel de WordPress. Pase el cursor sobre la pestaña LoginPress y seleccione Personalizador para modificar su página de inicio de sesión.

Accederá directamente a la página de inicio de sesión dentro del Editor de sitio completo. Verá iconos para las siguientes funciones:

• Cambiar logotipo
• Personalizar formulario (Usuario y Contraseña)
• Botón Personalizar (Iniciar sesión)
• Personaliza la navegación (¿Perdiste tu contraseña?)
• Cambiar pie de página
• Cambiar plantilla
• Cambiar el fondo

Simplemente seleccione el icono de lápiz o pincel correspondiente para modificar ese elemento. Puede cambiar fácilmente el logotipo, cargar su propio fondo o cambiar el formulario y el botón de inicio de sesión con solo unos pocos clics.

No tendrá total libertad para editar esta página como lo hace con el Editor de bloques en SeedProd Pro, pero esto debería ser suficiente personalización para la gran mayoría de las páginas de inicio de sesión. En el menú de la izquierda, notará una nueva pestaña LoginPress en el Editor completo del sitio que agrega aún más funciones.

Paso 3: explore funciones adicionales y considere actualizar

Algunas funciones solo están disponibles con los planes premium de LoginPress, como el módulo reCAPTCHA. Para la mayoría de los sitios de WordPress de tamaño pequeño a mediano, la versión gratuita es suficiente para crear una página de inicio de sesión personalizada.

Las funciones proporcionadas le permiten cambiar fácilmente muchas de las facetas de su página de inicio de sesión rápidamente y sin ningún tipo de codificación. Siempre tendrás la opción de actualizar a la versión Pro en el futuro, así que no dudes en comenzar con la versión gratuita y ver si se adapta a tus necesidades.

Ediciones sugeridas

Si opta por este método de personalizar su página de inicio de sesión, probablemente lo primero que querrá hacer sea cambiar el logotipo. Simplemente haga clic en el ícono del lápiz azul junto al logotipo predeterminado para cargar el suyo propio.

A continuación, puede probar algunas de las otras plantillas para ver si alguna se ajusta a su estilo. De lo contrario, siempre puede cargar uno propio o simplemente crear un fondo con el color principal de su marca.

Luego, podría considerar cambiar las fuentes o el texto dentro del formulario real para que sea consistente con el resto de su sitio. También querrá asegurarse de que todos los enlaces funcionen.

3. Modifique su página de inicio de sesión usando un código personalizado

Finalmente, si prefiere no usar un complemento, también puede personalizar su página de inicio de sesión usando código. Esto requiere más conocimientos técnicos, pero ofrece la mayor flexibilidad.

Depende de usted exactamente cómo modificar su página de inicio de sesión con un código personalizado. Veamos un ejemplo de un cambio simple que quizás desee realizar.

Supongamos que desea reemplazar manualmente el logotipo de WordPress en la pantalla de inicio de sesión con su propio gráfico. Esto puede parecer intimidante para los principiantes, pero no es difícil para cualquiera que esté familiarizado con el acceso a los archivos de su sitio web y la manipulación básica del código. Solo sigue estos pasos:

Paso 1: Haz una copia de seguridad de tu sitio

Siempre que modifique manualmente archivos o carpetas en su sitio, es una buena idea crear una copia de seguridad. Una pulsación de tecla accidental podría romper su sitio.

Las copias de seguridad periódicas de todo el sitio siempre son una buena idea, aunque al menos debería hacer copias de cualquier archivo que planee modificar. En este caso, realizará cambios en su archivo functions.php .

Paso 2: Crea y sube tu logo

Por supuesto, necesitará una imagen de su logotipo para reemplazar la predeterminada. Cargue la imagen que desea usar en su biblioteca de medios.

Si bien, teóricamente, puede hacer que la imagen tenga cualquier tamaño, las dimensiones de aproximadamente 300 píxeles de ancho encajan muy bien en la parte superior del formulario de inicio de sesión predeterminado. Usaremos un ejemplo de 300 × 300 píxeles para una imagen de marcador de posición cuadrada.

Puede cambiar el tamaño de su imagen fuera de WordPress, o hacerlo dentro de su Biblioteca multimedia. Para hacer esto último, simplemente haga clic en la imagen una vez cargada y seleccione Editar imagen a la derecha, cerca de la miniatura. Puede seleccionar sus dimensiones y hacer clic en Escala para cambiar su tamaño. Luego guarde la imagen y continúe.

Necesitará la URL de la imagen para el siguiente paso, así que haga clic en el botón Copiar URL al portapapeles o deje esta ventana abierta.

Paso 3: Modificar el archivo functions.php

A continuación, deberá ubicar su archivo functions.php . Para hacer esto, acceda a la carpeta de su tema a través del Protocolo de transferencia de archivos (FTP). Esta carpeta debe tener el mismo nombre que su tema y estar alojada en la carpeta wp-content de su sitio.

Para intercambiar el logotipo de WordPress en la pantalla de inicio de sesión, agregue este código al archivo functions.php que se encuentra dentro. Para evitar ponerlo en medio de otro script, simplemente puede insertar este fragmento al final del archivo debajo del resto del código:

 function wpb_login_logo() { ?> <style type="text/css"> #login h1 a, .login h1 a { background-image: url(YOUR IMAGE URL HERE); height:300px; width:300px; background-size: 300px 300px; background-repeat: no-repeat; padding-bottom: 10px; } </style> <?php } add_action( 'login_enqueue_scripts', 'wpb_login_logo' );

Pegue la URL que copió del último paso en lugar del marcador de posición "URL DE SU IMAGEN AQUÍ". Esto reemplazará el logotipo de WordPress con su imagen. Asegúrese de guardar el archivo functions.php después de realizar estos cambios.

Paso 4: Visite su página de inicio de sesión

Salga para volver a su página de inicio de sesión. Si ya está en su pantalla de inicio de sesión, deberá volver a cargar la página para ver los cambios.

Debería ver su logotipo en lugar del anterior. Si el tamaño se ve mal, puede modificar fácilmente las dimensiones del tamaño cambiando los valores de altura, ancho y px de fondo en el fragmento de código.

Si algo parece estar mal, simplemente restaure su copia de seguridad para revertir los cambios. También puede sobrescribir su archivo functions.php con la copia de seguridad que creó anteriormente.

Cómo proteger su página de inicio de sesión de WordPress

Al implementar una página de inicio de sesión personalizada, hay algunas cosas que debe tener en cuenta para la seguridad y el estado de su sitio web. La página de inicio de sesión es un objetivo principal para los piratas informáticos y los bots, por lo que es vital bloquearla herméticamente. Aquí hay algunas maneras de hacerlo:

Autenticación de dos factores (2FA)

La autenticación de dos factores (también conocida como 2FA) reduce en gran medida la posibilidad de que se pirateen las cuentas. Con 2FA, además de necesitar un nombre de usuario y contraseña, se requiere una segunda forma de autenticación cuando los visitantes intentan iniciar sesión desde un dispositivo nuevo o no registrado.

Por ejemplo, si un pirata informático puede obtener las credenciales de inicio de sesión de uno de sus usuarios, simplemente podría iniciar sesión en la cuenta y causar estragos. A veces, los piratas informáticos simplemente pueden adivinar una contraseña basándose en un nombre de usuario. Con 2FA implementado, también se necesitaría una segunda forma de verificación.

Por lo general, esto es en forma de correo electrónico o mensaje de texto que se envía al titular de la cuenta para confirmar que está intentando iniciar sesión. Dado que es poco probable que el hacker también tenga acceso al correo electrónico o al dispositivo del usuario, esto casi asegura que el usuario es genuino.

Por lo general, 2FA se puede acelerar al permitir que los usuarios registren un dispositivo para que los intentos de inicio de sesión desde esa fuente no necesiten verificación cada vez. Hay una serie de complementos disponibles que le permiten configurar 2FA en su sitio. Esto es especialmente importante si su sitio maneja cualquier tipo de información confidencial o financiera.

CAPTCHA y reCAPTCHA

Un método para adivinar las credenciales de inicio de sesión es atacar su sitio por fuerza bruta con bots. En otras palabras, los programas intentarán adivinar automáticamente las combinaciones comunes de nombre de usuario y contraseña hasta que lo consigan. Esto puede parecer una tarea difícil para los humanos, pero los bots pueden hacerlo de forma rápida y automática, adivinando miles de contraseñas comunes sin intervención humana.

El propósito de un CAPTCHA es evitar que estos bots intenten iniciar sesión. Probablemente te hayas encontrado con estas pruebas. Solían venir en forma de palabras distorsionadas que tendrías que descifrar y escribir en un cuadro.

Los CAPTCHA más modernos implican la selección de imágenes que incluyen un objeto específico, como automóviles o chimeneas. Estas pruebas son difíciles de resolver para los bots y, por lo tanto, son efectivas para disuadir los intentos de piratería de fuerza bruta.

reCAPTCHA es una forma avanzada de esta tecnología que puede disuadir a los bots con poca o ninguna intervención de los usuarios humanos. LoginPress incluye tecnología reCAPTCHA en su versión Pro, o puedes encontrar aplicaciones CAPTCHA incluidas en plugins específicos o herramientas de seguridad más completas.

Avisos antiphishing

Una estrategia de baja tecnología para robar credenciales de inicio de sesión es imitar una fuente autorizada y simplemente pedirlas. Esto se conoce como phishing.

Por ejemplo, alguien podría crear una dirección de correo electrónico con su nombre o el de su empresa y enviar un correo electrónico solicitando las credenciales de inicio de sesión para solucionar un problema. Si el correo electrónico y la dirección son convincentes, algunas personas pueden morder el anzuelo y responder, revelando la información de su cuenta.

Una forma de evitar esto es publicar avisos antiphishing que anuncien que usted y su empresa nunca solicitarán dicha información. Cualquier correo electrónico o mensaje de este tipo debe considerarse spam e ignorarse. Un simple aviso en su página de inicio de sesión podría significar la diferencia entre intentos exitosos de phishing y cuentas seguras.

Poniendo tu mejor pie adelante

Si bien es fácil pasarlo por alto y concentrarse en otros aspectos de su sitio web, personalizar su página de inicio de sesión es un proyecto que vale la pena. Una página de inicio de sesión personalizada puede mejorar la experiencia del usuario, darle a su sitio una sensación más profesional y usarse para compartir información vital.

Puede cambiar su página de inicio de sesión de WordPress usando los siguientes métodos:

1. Cree una nueva página de inicio de sesión con un complemento como SeedProd.
2. Modifique su página de inicio de sesión con una herramienta gratuita como LoginPress.
3. Utilice el código para realizar cambios manuales, como cambiar el logotipo predeterminado.

Para aprovechar al máximo su pantalla de inicio de sesión, los complementos facilitan la personalización de la página exactamente como lo desea. En algunos casos, esta es una de las primeras páginas que verán los visitantes, por lo que es importante que se vea lo mejor posible.