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 tu sitio es la misma que utilizan los administradores. Aunque esta página es funcional, su diseño es muy básico, con mucho espacio en blanco y el logotipo de WordPress en el centro. No contribuye demasiado a reforzar tu marca ni a ofrecer a los visitantes una experiencia sencilla.

Crear una página de inicio de sesión personalizada es una mejora relativamente sencilla que puedes aplicar a tu sitio de WordPress. Según el tipo de sitio que administres, es posible que muchos de tus visitantes interactúen con esta página en algún momento, por lo que una página de inicio de sesión personalizada de WordPress es una oportunidad para mejorar su experiencia.

En esta guía hablaremos de las ventajas de una página de inicio de sesión personalizada de WordPress, explicaremos varios métodos para crearla y veremos algunas prácticas recomendadas para mejorar la experiencia de usuario y la seguridad.

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

Personalizar tu página de inicio de sesión de WordPress no tiene por qué ser un proyecto complicado. Cambios tan sencillos como sustituir el logotipo de WordPress por el tuyo y cambiar el fondo pueden marcar una gran diferencia.

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

• Fáciles de usar
• Profesionales
• Atractivas visualmente
• Informativas
• Seguras

Además, aplicar estas mejoras es rápido y sencillo. Si dedicas un poco de tiempo ahora, puedes mejorar la página de inicio de sesión para todos los visitantes que la utilicen en el futuro.

Ventajas de personalizar tu página de inicio de sesión de WordPress

Ahora veremos con algo más de detalle algunas de las ventajas que hemos señalado antes, para que entiendas por qué merece la pena. La página de inicio de sesión predeterminada de WordPress es bastante básica:

Si eres la única persona que la ve, la página de inicio de sesión predeterminada cumple su función. Pero si tu audiencia la utiliza habitualmente para iniciar sesión, sin duda puedes introducir algunas mejoras rápidas.

Añadir elementos de marca a la página de inicio de sesión hará que parezca que pertenece a tu sitio y le dará un aspecto más profesional. Los visitantes deberían reconocerla como una parte natural y creada deliberadamente para tu sitio, no como algo añadido a última hora.

Esta página también puede ser una gran oportunidad para compartir noticias y otra información con tu audiencia. Por ejemplo, podrías incluir una sección donde publiques novedades para que los visitantes las lean rápidamente mientras inician sesión: noticias sobre tu organización, productos nuevos, testimonios o cualquier otra cosa que quieras compartir sobre tu empresa.

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

Aunque la página de inicio de sesión de un sitio web puede ser muy diferente de la de otro, todas suelen compartir algunas características. Evidentemente, todas las páginas de inicio de sesión necesitan una forma para que los visitantes inicien sesión, ya sea mediante la combinación tradicional de nombre de usuario y contraseña o mediante una autenticación de terceros.

También es habitual incluir un enlace para restablecer la contraseña o recuperar el nombre de usuario. Este enlace suele llevar a otra página, donde los usuarios pueden introducir su dirección de correo electrónico para recibir instrucciones sobre cómo recuperar o restablecer sus datos. El enlace ¿Has olvidado la contraseña? suele estar situado cerca de los campos de entrada de datos y el botón Iniciar sesión.

Para protegerte a ti y a tus visitantes, también es recomendable implementar algunas funciones de seguridad básicas. Por ejemplo, quizá quieras cambiar la forma en que los administradores inician sesión en tu sitio para evitar intentos no autorizados.

Si tu sitio recopila información personal de sus usuarios, deberás prestar especial atención a proteger y mantener seguro tu sitio de WordPress frente a bots y hackers. La tecnología CAPTCHA, la autenticación de dos factores (2FA) y los avisos contra el phishing son algunas medidas que puedes adoptar para proteger a tus usuarios. Más adelante analizaremos estas opciones con mayor detalle.

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

Por suerte, crear una página de inicio de sesión personalizada de WordPress es mucho más fácil de lo que probablemente imaginas. En cuestión de minutos, puedes añadir tu logotipo y realizar otros cambios sencillos. En cuestión de horas, puedes tener una página de inicio de sesión completamente personalizada que mejore la experiencia de tus visitantes.

Estos son tres métodos populares para crear una página de inicio de sesión personalizada de WordPress:

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

El plugin SeedProd es una forma intuitiva de personalizar tu página de inicio de sesión. También puedes crear una página 404 personalizada, una página de Modo de mantenimiento, una página «Próximamente» y otras páginas de destino.

Ten en cuenta que los módulos de página 404 y de inicio de sesión requieren un plan SeedProd Pro. Para crear tu página de inicio de sesión, solo tienes que seguir estos pasos:

Paso 1: instala y activa SeedProd Pro

Primero, ve a la página de Plugins en tu panel de administración y selecciona Añadir nuevo. Busca SeedProd e instálalo gratis. Cuando termine la instalación, haz clic en el botón Activar.

A continuación, tendrás que actualizar a un plan premium. Para ello, haz clic en Obtener Pro en la pestaña de SeedProd. Se te redirigirá a su sitio web, donde podrás comprar una clave de activación para la versión premium.

Paso 2: crea una página de destino usando la plantilla de página de inicio de sesión

Cuando hayas activado SeedProd Pro, pasa el cursor sobre la pestaña de SeedProd y selecciona Páginas de destino. En la pantalla siguiente se te mostrarán cuatro plantillas.

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

El editor de SeedProd funciona de forma muy parecida al editor de bloques de WordPress, lo que te permite añadir y modificar fácilmente distintos aspectos de la página. Como has seleccionado el módulo de página de inicio de sesión, ya tendrás integradas todas las funciones necesarias para una página de este tipo.

Incluyen los campos para introducir el nombre de usuario y la contraseña, la casilla Recuérdame, el enlace Restablecer contraseña, una imagen y un fondo.

Puedes usar el editor de bloques para añadir texto, imágenes, formularios y mucho más, igual que harías en una entrada normal. Personaliza la página a tu gusto y haz clic en el botón Guardar situado en la esquina superior derecha de la pantalla.

Paso 3: activa tu nueva página de inicio de sesión

Una vez guardado el diseño, sal de la pantalla de edición y vuelve a la pantalla de SeedProd Landing Pages del panel de administración. Activa el interruptor del módulo Login Page para cambiarlo a Active y sustituir la página de inicio de sesión predeterminada por la que acabas de diseñar.

Ahora, cierra la sesión y vuelve a entrar para ver cómo funciona. Prueba el enlace para restablecer la contraseña y las demás funciones antes de volver a iniciar sesión. Ponte en el lugar de una persona que visita el sitio por primera vez y piensa si puedes hacer algo más para mejorar la experiencia.

Otras consideraciones

SeedProd facilita mucho añadir imágenes y otros elementos, igual que con el Editor de bloques. Es importante tener en cuenta todas las opciones disponibles para comprobar si hay elementos que podrían funcionar bien en tu página de inicio de sesión.

Tu pantalla de inicio de sesión tampoco tiene por qué mantenerse igual con el tiempo. Puedes plantearte publicar periódicamente imágenes de ventas actualizadas o sugerencias de contenido destacado. Cuando las personas vuelvan a iniciar sesión, puedes aprovechar para sugerir contenido nuevo o popular.

Por supuesto, también querrás utilizar la paleta de colores y las fuentes de tu empresa para que todo sea coherente con el resto de tu sitio. Con SeedProd, puedes cambiar fácilmente el fondo de la página, así que no dudes en crear varios diseños y alternarlos según la estación o cuando te parezca oportuno para mantener la experiencia renovada.

2. Modifica tu página de inicio de sesión con LoginPress

Si buscas algo más económico y sencillo, LoginPress es un plugin gratuito muy práctico que puedes utilizar para personalizar tu página de inicio de sesión. No tiene algunas de las funciones y el acabado de SeedProd Pro, pero añade funcionalidades al Editor del sitio completo de WordPress que permiten personalizar fácilmente tu página de inicio de sesión. Solo tienes que seguir estos pasos para utilizarlo:

Paso 1: instala y activa el plugin LoginPress

Desde la página de Plugins del panel de administración, selecciona Añadir nuevo y busca «LoginPress». Instala y activa el plugin para empezar.

No es necesario actualizar LoginPress en esta fase, aunque más adelante puedes optar por algunas funciones premium. Para la mayoría de las páginas de inicio de sesión, la versión gratuita será suficiente.

Paso 2: modifica tu página de inicio de sesión con el Personalizador

Una vez instalado y activado LoginPress, verás una nueva pestaña en la parte izquierda del panel de administración de WordPress. Pasa el cursor sobre la pestaña LoginPress y selecciona Personalizador para modificar tu página de inicio de sesión.

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

• Cambiar el logotipo
• Personalizar el formulario (nombre de usuario y contraseña)
• Personalizar el botón (iniciar sesión)
• Personalizar la navegación (¿Has olvidado la contraseña?)
• Cambiar el pie de página
• Cambiar la plantilla
• Cambiar el fondo

Solo tienes que seleccionar el icono correspondiente del lápiz o del pincel para modificar ese elemento. Puedes cambiar fácilmente el logotipo, subir tu propio fondo o modificar el formulario y el botón de inicio de sesión con unos pocos clics.

No tendrás tanta libertad para editar esta página como con el Editor de bloques de SeedProd Pro, pero estas opciones de personalización deberían ser suficientes para la gran mayoría de las páginas de inicio de sesión. En el menú de la izquierda verás una nueva pestaña de LoginPress en el Editor del sitio completo, que añade aún más funciones.

Paso 3: descubre funciones adicionales y plantéate 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 pequeños y medianos, la versión gratuita es suficiente para crear una página de inicio de sesión personalizada.

Las funciones disponibles te permiten cambiar fácilmente muchos aspectos de tu página de inicio de sesión de forma rápida y sin escribir código. Siempre tendrás la opción de actualizar a la versión Pro en el futuro, así que puedes empezar con la versión gratuita y comprobar si se adapta a tus necesidades.

Cambios sugeridos

Si eliges este método para personalizar tu página de inicio de sesión, probablemente lo primero que querrás hacer será cambiar el logotipo. Solo tienes que hacer clic en el icono azul del lápiz situado junto al logotipo predeterminado para subir el tuyo.

A continuación, puedes probar algunas de las otras plantillas para comprobar si encajan con tu estilo. Si no es así, siempre puedes subir la tuya o simplemente crear un fondo con el color principal de tu marca.

Después, puedes plantearte cambiar las fuentes o el texto del propio formulario para que sean coherentes con el resto de tu sitio. También querrás asegurarte de que todos los enlaces funcionan.

3. Modifica tu página de inicio de sesión con código personalizado

Por último, si prefieres no utilizar un plugin, también puedes personalizar tu página de inicio de sesión con código. Esto requiere más conocimientos técnicos, pero ofrece la máxima flexibilidad.

La forma exacta de modificar tu página de inicio de sesión con código personalizado depende de ti. Veamos un ejemplo de un cambio sencillo que quizá quieras realizar.

Supongamos que quieres sustituir manualmente el logotipo de WordPress de la pantalla de inicio de sesión por tu propio gráfico. Puede parecer intimidante para principiantes, pero no es difícil para quien esté familiarizado con el acceso a los archivos de su sitio web y la manipulación básica de código. Solo tienes que seguir estos pasos:

Paso 1: haz una copia de seguridad de tu sitio

Cada vez que modifiques manualmente archivos o carpetas de tu sitio, es buena idea crear una copia de seguridad. Un simple toque accidental en una tecla podría estropear tu sitio.

Las copias de seguridad periódicas de todo el sitio son siempre una buena idea, aunque como mínimo deberías hacer copias de los archivos que tengas previsto modificar. En este caso, modificarás tu archivo functions.php.

Paso 2: crea y sube tu logotipo

Por supuesto, necesitarás una imagen de tu logotipo para sustituir el predeterminado. Sube la imagen que quieras utilizar a tu biblioteca de medios.

Aunque en teoría puedes hacer que la imagen tenga cualquier tamaño, unas dimensiones de aproximadamente 300 píxeles de ancho encajan bien sobre el formulario de inicio de sesión predeterminado. Utilizaremos como ejemplo una imagen cuadrada de 300 × 300 píxeles para usarla como marcador de posición.

Puedes cambiar el tamaño de la imagen fuera de WordPress o hacerlo dentro de tu biblioteca de medios. Para esto último, solo tienes que hacer clic en la imagen una vez subida y seleccionar Editar imagen a la derecha, cerca de la miniatura. Puedes seleccionar las dimensiones y hacer clic en Escala para cambiar su tamaño. Después, guarda la imagen y continúa.

Para el siguiente paso necesitarás la URL de la imagen, así que haz clic en Copiar URL al portapapeles o deja esta ventana abierta.

Paso 3: modifica el archivo functions.php

A continuación, tendrás que localizar tu archivo functions.php. Para ello, accede a la carpeta de tu tema mediante el protocolo de transferencia de archivos (FTP). Esta carpeta debería tener el mismo nombre que tu tema y estar ubicada en la carpeta wp-content de tu sitio.

Para cambiar el logotipo de WordPress en la pantalla de inicio de sesión, añade este código al archivo functions.php que hay dentro. Para evitar ponerlo en medio de otro script, puedes 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' );

Pega la URL que has copiado en el paso anterior en lugar del marcador de posición «YOUR IMAGE URL HERE». Esto sustituirá el logotipo de WordPress por tu imagen. No olvides guardar el archivo functions.php después de realizar estos cambios. 

Paso 4: visita tu página de inicio de sesión

Cierra la sesión para volver a tu página de inicio de sesión. Si ya estás en la pantalla de inicio de sesión, tendrás que volver a cargar la página para ver los cambios. 

Deberías ver tu logotipo en lugar del anterior. Si el tamaño no parece correcto, puedes ajustar fácilmente las dimensiones cambiando los valores de píxeles de altura, anchura y fondo en el fragmento de código.

Si algo parece ir mal, simplemente restaura tu copia de seguridad para deshacer los cambios. También puedes sobrescribir el archivo functions.php con la copia de seguridad que creaste anteriormente. 

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

Al implementar una página de inicio de sesión personalizada, hay varios aspectos que debes tener en cuenta para la seguridad y el buen funcionamiento de tu sitio web. La página de inicio de sesión es uno de los principales objetivos de hackers y bots, por lo que es fundamental protegerla bien. Estas son algunas formas de hacerlo:

Autenticación de dos factores (2FA)

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

Por ejemplo, si un hacker consigue las credenciales de inicio de sesión de uno de tus usuarios, podría entrar fácilmente en la cuenta y causar estragos. A veces, los hackers solo tienen que adivinar una contraseña basándose en el nombre de usuario. Si se implementa 2FA, también sería necesaria una segunda forma de verificación.

Normalmente, se trata de un correo electrónico o un mensaje de texto que se envía al titular de la cuenta para confirmar que está intentando iniciar sesión. Como es poco probable que el hacker también tenga acceso al correo electrónico o al dispositivo del usuario, esto garantiza casi por completo que el usuario es quien dice ser. 

2FA normalmente puede agilizarse permitiendo que los usuarios registren un dispositivo, de modo que los intentos de inicio de sesión desde ese dispositivo no tengan que verificarse cada vez. Hay varios plugins disponibles que te permiten configurar 2FA en tu sitio. Esto es especialmente importante si tu sitio gestiona algún tipo de información confidencial o financiera.

CAPTCHA y reCAPTCHA

Un método para adivinar las credenciales de inicio de sesión consiste en atacar tu sitio por fuerza bruta mediante bots. Es decir, los programas intentan automáticamente adivinar combinaciones habituales de nombres de usuario y contraseñas hasta acertar. Puede parecer una tarea difícil para las personas, pero los bots pueden hacerlo rápida y automáticamente, adivinando miles de contraseñas habituales sin intervención humana.

El objetivo de añadir CAPTCHA a WordPress es impedir que estos bots realicen intentos de inicio de sesión. Probablemente te hayas encontrado con estas pruebas. Antes consistían en palabras distorsionadas que tenías que descifrar y escribir en un cuadro. 

Los CAPTCHA más modernos consisten en seleccionar imágenes que incluyen un objeto específico, como coches o chimeneas. Estas pruebas son difíciles de resolver para los bots y, por tanto, resultan eficaces para disuadir los intentos de ataque por 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. LoginPress incluye la tecnología reCAPTCHA en su versión Pro, o puedes encontrar aplicaciones CAPTCHA incluidas en plugins específicos o en herramientas de seguridad más completas. 

Avisos contra el phishing

Una estrategia sencilla para robar credenciales de inicio de sesión consiste en hacerse pasar por una fuente autorizada y pedirlas directamente. Esto se conoce como phishing. 

Por ejemplo, alguien podría crear una dirección de correo electrónico utilizando tu nombre o el de tu empresa y enviar un mensaje solicitando las credenciales de inicio de sesión para solucionar un problema. Si el correo y la dirección resultan convincentes, algunas personas podrían caer en la trampa y responder, revelando la información de su cuenta. 

Una forma de evitarlo es publicar avisos contra el phishing en los que se indique que ni tú ni tu empresa van a solicitar nunca esa información. Cualquier correo electrónico o mensaje de este tipo debe considerarse spam e ignorarse. Un aviso sencillo en tu página de inicio de sesión puede marcar la diferencia entre unos intentos de phishing exitosos y unas cuentas seguras.

Para obtener más información sobre cómo proteger tu página de inicio de sesión, consulta nuestra guía de seguridad de inicio de sesión de WordPress.

Da una buena primera impresión

Aunque es fácil pasar por alto este aspecto y centrarse en otras partes de tu sitio web, personalizar la página de inicio de sesión es un proyecto que merece la pena. Una página de inicio de sesión personalizada puede mejorar la experiencia del usuario, dar a tu sitio un aspecto más profesional y servir para compartir información importante.

Puedes cambiar tu página de inicio de sesión de WordPress mediante los siguientes métodos:

1. Crea una página de inicio de sesión completamente nueva con un plugin como SeedProd.
2. Modifica tu página de inicio de sesión con una herramienta gratuita como LoginPress.
3. Utiliza código personalizado para realizar cambios manualmente, como sustituir el logotipo predeterminado.

¡Para sacar el máximo partido a tu pantalla de inicio de sesión, los plugins facilitan la personalización de la página exactamente como quieras! En algunos casos, será una de las primeras páginas que vean los visitantes, por lo que es importante que tenga el mejor aspecto posible!