Cómo personalizo la página de inicio de sesión de WordPress (sin código) 

Gestionas un sitio de membresía o un sitio de un cliente, y la gente inicia sesión a través de una pantalla que no se parece en nada a tu marca. La página de inicio de sesión estándar de WordPress, con su pequeño logo de WordPress, se siente como un desvío de tu sitio.

Personalizo la página de inicio de sesión de WordPress en mis propios sitios, y te mostraré cinco formas de hacerlo, desde un complemento sin código hasta unas pocas líneas de CSS. Elige la que se ajuste a la cantidad de control que deseas.

¿Beneficios de personalizar tu página de inicio de sesión de WordPress?

La página de inicio de sesión predeterminada de WordPress muestra el logo de WordPress y dos campos de formulario, y nada más. Eso está bien si eres la única persona que inicia sesión en el backend.

Pero una vez que los visitantes se registran e inician sesión, una pantalla estándar que no se parece en nada a tu sitio puede resultar sospechosa. Una página de inicio de sesión personalizada con tu marca indica a los usuarios que están en el lugar correcto.

Ejemplos de diseño de páginas de inicio de sesión personalizadas de WordPress

Entonces, ¿cómo es realmente una página de inicio de sesión con marca en la práctica? Puedes añadir tus propias imágenes, enlazar a tu página de inicio, incluir una llamada a la acción o añadir iconos sociales.

Aquí tienes algunos ejemplos reales para mostrar lo que es posible.

Personalización de la página de inicio de sesión de WordPress de MonsterInsights

MonsterInsights utiliza un diseño de dos columnas. El formulario de inicio de sesión se encuentra a la izquierda y una llamada a la acción para su producto hermano se encuentra a la derecha.

La imagen de fondo le da a la página una sensación distintiva y de marca que la pantalla predeterminada no puede igualar.

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

TED utiliza otro diseño de dos columnas. Una imagen y un titular se encuentran a la izquierda, con varias formas de iniciar sesión a la derecha.

Los usuarios también pueden registrarse para obtener una cuenta TED introduciendo su dirección de correo electrónico allí mismo.

Página de inicio de sesión personalizada de Church Motion Graphics

Esta página de inicio de sesión llama la atención con un fondo colorido que refleja lo que hace el negocio. La cabecera, el pie de página y la navegación se mantienen coherentes con el resto del sitio.

El formulario de inicio de sesión en sí se mantiene minimalista, con un fondo claro que contrasta con la brillante imaginería. Puedes ver más ejemplos de páginas de inicio de sesión para inspirarte.

¿Qué método deberías usar?

Cinco métodos es mucho, así que aquí te explicamos cómo elegir uno para tu situación antes de empezar. La elección correcta depende de cuánto quieras cambiar y de si te sientes cómodo con el código.

• Rediseño completo, sin código: Usa SeedProd para reconstruir toda la página de inicio de sesión con un constructor de arrastrar y soltar.
• Solo el logo: Usa un plugin gratuito de personalización de inicio de sesión como Colorlib para cambiar el logo y el enlace.
• Eres un desarrollador: Añade CSS a functions.php para un control total y sin plugins.
• Un formulario de inicio de sesión, no una página: Usa WPForms para crear un formulario de inicio de sesión de marca que puedes incrustar en cualquier lugar.
• Inicio de sesión social: Permite a la gente iniciar sesión con Google o Facebook usando un plugin dedicado de inicio de sesión social.

Cómo personalizar la página de inicio de sesión de WordPress con SeedProd

SeedProd es un constructor de sitios web de WordPress de arrastrar y soltar con un modo de página de inicio de sesión incorporado. Te permite rediseñar la pantalla de inicio de sesión visualmente, sin código, y funciona con cualquier tema de WordPress.

Uso el modo de página de inicio de sesión de SeedProd en mi propio sitio, y la parte que más valoro es la velocidad. Reestilizar la pantalla de inicio de sesión con CSS a mano me lleva una tarde de prueba y error, mientras que el flujo sin código me da una página terminada en minutos.

También es un constructor de páginas de destino de WordPress, por lo que el mismo editor maneja las páginas de "próximamente", páginas de ventas y páginas de inicio de sesión personalizadas desde un solo lugar.

Nota: Hay una versión gratuita de SeedProd en WordPress.org, pero solo cubre el modo "próximamente" y mantenimiento. El personalizador de la página de inicio de sesión es una función de pago disponible en todos los planes de pago, a partir del Básico, por lo que no necesitas el nivel superior para ello.

Sigue los pasos a continuación para estilizar tu página de inicio de sesión de WordPress con SeedProd.

Paso 1: Instalar y Activar SeedProd

Primero, descarga el plugin SeedProd e instálalo en tu sitio web de WordPress.

Si eres nuevo en esto, sigue esta guía paso a paso para instalar un plugin de WordPress.

Después de activar el plugin, verás la página de bienvenida de SeedProd en tu panel. Introduce tu clave de licencia y luego haz clic en el botón "Crear tu primera página".

Paso 2: Editar tu página de inicio de sesión de WordPress

Verás los diferentes modos de página que SeedProd puede habilitar. Para este tutorial, quieres el modo "Página de inicio de sesión".

Haz clic en "Editar página" debajo del encabezado "Página de inicio de sesión" para empezar.

Paso 3: Elegir una plantilla de página de inicio de sesión personalizada de WordPress

En la siguiente pantalla, verás la biblioteca de plantillas de página de inicio de sesión de SeedProd. Cada plantilla es editable en el constructor visual.

Haz clic en el filtro "Inicio de sesión" para mostrar todas las plantillas de página de inicio de sesión. Pasa el ratón sobre la que te guste y haz clic en el icono de la marca de verificación. Para esta guía, elegiré la "Página de inicio de sesión 8".

Aparece una ventana emergente preguntándote el nombre de la página y su URL. Haz clic en "Guardar y empezar a editar la página" para abrirla en el editor de arrastrar y soltar.

Paso 4: Personaliza tu p uevo00e1gina de inicio de sesi uevo00f3n de WordPress

El editor tiene dos partes. Los bloques y las secciones están a la izquierda, y una vista previa en vivo de tu página de inicio de sesión está a la derecha.

Para añadir contenido, arrastra un bloque desde la izquierda y suéltalo en la página. Puedes añadir un logo en la parte superior de la página con unos pocos clics.

Haz clic en cualquier bloque para editarlo. Al hacer clic en el formulario de inicio de sesión, se abren los ajustes del bloque de inicio de sesión de SeedProd a la izquierda.

Allí puedes editar las etiquetas del formulario, mostrar u ocultar los campos de nombre de usuario y contraseña, y cambiar el texto del botón.

Haz clic en la pestaña "Plantillas" para elegir entre varios estilos de formulario. Elige uno y se aplicará a tu formulario al instante, sin necesidad de código.

Puedes añadir botones, columnas e imágenes para redondear el diseño. Si quieres que la gente inicie sesión más rápido, aquí también puedes añadir un botón de inicio de sesión social para que los usuarios inicien sesión con Google o Facebook.

SeedProd también tiene Secciones preconstruidas, por lo que no tienes que construir áreas como una cabecera o un pie de página bloque a bloque. Haz clic en la pestaña Secciones para verlas.

Para configurar fuentes, colores y el fondo una vez para toda la página, haz clic en el icono del engranaje en la esquina inferior derecha para abrir la Configuración Global.

En la pestaña Fuentes, cambia las fuentes y pesos de tus encabezados y cuerpo desde los menús desplegables.

Haz clic en el botón Temas de Fuentes para ver combinaciones que combinan bien, luego añádelas con un solo clic.

Establece colores para enlaces, encabezados, texto, botones y fondos con el selector de color.

O haz clic en el botón Paletas de Colores para elegir entre más de 20 esquemas listos para usar.

La sección Fondo se encarga del fondo de tu página. Establece un color sólido, un degradado o una imagen de ancho completo.

Haz clic en el icono de la papelera para eliminar la imagen existente, luego haz clic en Usar Tu Propia Imagen para elegir una nueva de tu ordenador o biblioteca de medios.

Recuerda hacer clic en Guardar para almacenar tus cambios.

Paso 5: Configura los ajustes de tu página de inicio de sesión de WordPress

Con el diseño en su lugar, configura algunas opciones. Si has añadido un formulario de suscripción para recopilar direcciones de correo electrónico, conecta primero tu servicio de marketing por correo electrónico.

Haz clic en la pestaña Conectar en la parte superior, elige tu servicio de correo electrónico y sigue los pasos para vincular tu cuenta.

SeedProd se integra con populares servicios de boletines de correo electrónico, incluyendo Constant Contact, ConvertKit, AWeber y Mailchimp.

¿Aún no tienes proveedor de correo electrónico? La función de gestión de suscriptores de SeedProd almacena los registros en tu sitio. Vélos en SeedProd » Suscriptores.

A continuación, haz clic en la pestaña Configuración de la Página. Desde allí puedes ajustar:

• General: Cambia el nombre y la URL de la página, y establécela como borrador o publicada.
• SEO: Edita el título de la página y la meta descripción a través de un plugin de SEO como All in One SEO.
• Analíticas: Rastrea el rendimiento con un plugin como MonsterInsights.
• Scripts: Añade scripts de seguimiento o retargeting como el píxel de Facebook.

Haz clic en Guardar antes de continuar.

Paso 6: Comprueba que tu página de inicio de sesión sea compatible con dispositivos móviles

Cada página que publicas debe ser adaptable a dispositivos móviles, o será más difícil para los usuarios de teléfonos iniciar sesión. Las plantillas de SeedProd son adaptables y una herramienta de vista previa te permite comprobarlo.

Haz clic en el icono de vista previa móvil en la parte inferior de la pantalla para ver tu página como la verían los usuarios de teléfonos.

Puedes seguir editando en cualquiera de las vistas, y SeedProd guarda los cambios en ambas.

Paso 7: Publica tu página de inicio de sesión personalizada de WordPress

Una vez que estés satisfecho con la página, haz clic en la flecha hacia abajo junto al botón verde Guardar y selecciona Publicar.

Una ventana emergente confirma que la página está en vivo. Haz clic en Ver Página en Vivo para verla.

El último paso es activar el modo Página de Inicio de Sesión. Sal del constructor, luego, en el encabezado Página de Inicio de Sesión, cambia el interruptor a Activo.

Ahora cualquiera que visite tu página de inicio de sesión de WordPress verá tu diseño personalizado.

Personalizar la página de inicio de sesión de WordPress con WPForms

El segundo método utiliza WPForms, el mejor creador de formularios de arrastrar y soltar para WordPress. Lo que quizás no sepas es que su complemento User Registration Form puede crear un formulario de inicio de sesión para tu sitio.

Con millones de sitios que utilizan WPForms para crear formularios más inteligentes, estás en buenas manos. WPForms forma parte de la familia de productos de Awesome Motive, al igual que SeedProd.

Si deseas un formulario de inicio de sesión en lugar de una página completa, sigue esta guía sobre cómo crear un formulario de inicio de sesión personalizado de WordPress con WPForms. También cubre cómo añadir un enlace de "contraseña olvidada" y mostrar el formulario con un shortcode.

Cómo personalizar la página de inicio de sesión de WordPress manualmente

¿Puedes personalizar la página de inicio de sesión de WordPress sin un plugin? Sí. Puedes añadir código al archivo functions.php de tu tema o a un plugin específico del sitio, aunque requiere cierta familiaridad con el código y te da menos control que un constructor visual.

Si eres nuevo en esto, lee esta guía sobre cómo añadir fragmentos de código en WordPress para no dañar tu sitio por accidente.

El fragmento de código a continuación rediseña la pantalla de inicio de sesión y cambia el logotipo. Edita los valores de color y la ruta del logotipo para que coincidan con tu marca, y luego añádelo a functions.php:

// Custom WordPress login page styles
function clp_login_head() { ?>
    <style>
        /* Replace the default logo */
        .login h1 a {
            background-image: url('https://example.com/wp-content/uploads/your-logo.png');
            background-size: contain;
            width: 320px;
            height: 80px;
        }
        /* Link colors */
        .login #nav a,
        .login #backtoblog a { color: #0073aa !important; }
        /* Submit button */
        .login .button-primary {
            background: #0073aa;
            border-color: #0073aa;
        }
    </style>
<?php }
add_action( 'login_head', 'clp_login_head' );

// Point the logo link to your home page instead of wordpress.org
function clp_login_url() { return home_url(); }
add_filter( 'login_headerurl', 'clp_login_url' );

// Change the logo hover/title text
function clp_login_title() { return get_bloginfo( 'name' ); }
add_filter( 'login_headertext', 'clp_login_title' );

Eso cambia el logotipo, el enlace al que apunta y los colores del formulario en tu página de inicio de sesión existente. Si prefieres evitar el código por completo, el método SeedProd anterior hace el mismo trabajo en el editor visual.

Muestre su formulario de inicio de sesión de WordPress en cualquier lugar sin un plugin

Para mostrar el formulario de inicio de sesión de WordPress en cualquier página o plantilla, sin un plugin o widget, añade esto a tu archivo de plantilla de tema:

<?php wp_login_form(); ?>

Eso genera el formulario de inicio de sesión estándar donde coloques el código. Para personalizar las etiquetas, la redirección y las opciones de los campos, pasa argumentos en su lugar:

<?php
$args = array(
    'echo'           => true,
    'redirect'       => home_url(), // where to send users after login
    'form_id'        => 'loginform',
    'label_username' => __( 'Username' ),
    'label_password' => __( 'Password' ),
    'label_remember' => __( 'Remember Me' ),
    'label_log_in'   => __( 'Log In' ),
    'remember'       => true,
);
wp_login_form( $args );
?>

Puedes cambiar el CSS alrededor de este formulario para que coincida con el resto de tu sitio.

¿Cómo se cambia el logo de inicio de sesión de WordPress?

No siempre necesitas una página personalizada completa. A veces, cambiar el logotipo y el enlace detrás de él es suficiente, y un plugin gratuito lo maneja sin código.

Instala y activa el plugin Colorlib Login Customizer. Luego ve a Apariencia » Personalizar y haz clic en el nuevo elemento Colorlib Login Customizer.

El personalizador carga tu pantalla de inicio de sesión con la configuración a la izquierda y una vista previa en vivo a la derecha. Haz clic en la pestaña Opciones del logotipo.

Desde allí puedes ocultar el logotipo de WordPress, subir el tuyo propio y cambiar su URL y texto. También puedes ajustar el tamaño, ancho y alto del logotipo.

Puedes ir más allá con columnas, imágenes de fondo y colores personalizados. Publica los cambios una vez que estés satisfecho con el nuevo logotipo.

¿Cómo se asegura tu página de inicio de sesión personalizada?

Una página de inicio de sesión con marca también es un objetivo más visible, por lo que vale la pena protegerla una vez que tenga el aspecto adecuado. Unos pocos pasos reducen los intentos de fuerza bruta y los bots.

• Cambia la URL de inicio de sesión: Mueve el inicio de sesión de la obvia wp-login.php. Aquí te explicamos cómo cambiar la URL de inicio de sesión de administrador de WordPress.
• Limita los intentos de inicio de sesión: Limita cuántas veces alguien puede intentar una contraseña antes de ser bloqueado, lo que bloquea la mayoría de los ataques de fuerza bruta.
• Usa mensajes de error genéricos: "Nombre de usuario no válido" le dice a un atacante qué parte acertó. Un mensaje más vago revela menos.
• Añadir autenticación de dos factores: Un segundo código además de la contraseña evita que una contraseña robada sea suficiente por sí sola.

En mis propios sitios, cambiar la URL de inicio de sesión es lo primero que hago, ya que detiene la mayoría de los ataques automatizados antes de que lleguen al formulario.

¿Cómo se prueba tu página de inicio de sesión personalizada?

Antes de darlo por terminado, haz una prueba rápida para que un error tipográfico no bloquee a tus usuarios. Siempre cierro sesión y pruebo la página de nuevo, como lo haría un visitante real.

• Carga de página: Comprueba que la página se carga limpiamente sin elementos rotos.
• Logotipo y diseño: Confirma que el nuevo logotipo y el estilo aparecen como se esperaba.
• Prueba de inicio de sesión: Inicia sesión con tu nombre de usuario y contraseña y asegúrate de que funciona.
• Mensajes de error: Introduce credenciales incorrectas y comprueba que el error se muestra correctamente.
• Contraseña olvidada: Inicia un restablecimiento y confirma que el correo electrónico llega con un enlace funcional.
• URL personalizada: Si has establecido una URL personalizada, confirma que apunta a la nueva página de inicio de sesión. ¿No estás seguro de dónde está la tuya? Aquí te explicamos cómo encontrar tu URL de inicio de sesión de WordPress.
• Adaptabilidad: Abre la página en móvil, tableta y escritorio para comprobar que se ve bien en todas partes.

Preguntas frecuentes sobre la personalización de la página de inicio de sesión de WordPress

¿Se puede personalizar la página de inicio de sesión de WordPress sin un plugin?

Sí. Puedes retocar la pantalla de inicio de sesión existente añadiendo CSS y algunos 'hooks' al archivo functions.php de tu tema o a un plugin específico del sitio. Cambia el logotipo, el enlace que hay detrás y los colores del formulario sin instalar un constructor de páginas.

La contrapartida es que requiere cierta familiaridad con el código y te da menos control de diseño que una herramienta visual. Para un rediseño completo sin código, un constructor como SeedProd es más fácil.

¿Cómo cambio el logotipo de inicio de sesión de WordPress sin código?

Instala un plugin gratuito de personalización de inicio de sesión como Colorlib Login Customizer, luego ve a Apariencia » Personalizar y abre su configuración. Desde la pestaña de opciones de Logotipo puedes ocultar el logotipo de WordPress, subir el tuyo y establecer el enlace y el tamaño.

Todo se actualiza en una vista previa en vivo, por lo que ves el nuevo logotipo antes de publicarlo. El modo Página de inicio de sesión de SeedProd también te permite insertar un bloque de logotipo si quieres rediseñar toda la página.

¿Es seguro personalizar la página de inicio de sesión de WordPress?

Sí, personalizar la página de inicio de sesión es seguro cuando utilizas un plugin de confianza o código cuidadoso. Cambia el aspecto de la página, no cómo WordPress autentica a los usuarios, por lo que tu seguridad no se debilita por el diseño en sí.

Una página personalizada es un buen momento para añadir también protección real. Cambiar la URL de inicio de sesión, limitar los intentos de inicio de sesión y activar la autenticación de dos factores reduce el riesgo de ataques de fuerza bruta.

¿Cómo añado el inicio de sesión social a la página de inicio de sesión de WordPress?

El inicio de sesión social permite a las personas iniciar sesión con una cuenta existente de Google o Facebook en lugar de una contraseña separada de WordPress. Lo añades con un plugin dedicado de inicio de sesión social que se conecta a esos servicios.

Reduce la fricción al registrarse porque los usuarios omiten la creación y el recuerdo de otra contraseña. Una vez configurado el plugin, puedes colocar los botones de inicio de sesión social en tu página de inicio de sesión personalizada junto al formulario estándar.

Comienza a personalizar tu página de inicio de sesión de WordPress

Esa pantalla de inicio de sesión predeterminada ya no tiene por qué dar la bienvenida a tus miembros. Con SeedProd puedes cambiar los colores, las fuentes, el logotipo y el diseño sin escribir código, y tener una página de inicio de sesión de marca en funcionamiento en cuestión de minutos.

Empieza con SeedProd y renombra tu página de inicio de sesión.

¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.