Cómo personalizar el login de WordPress

Ricardo Trigueros
Ricardo Trigueros
GD especializado en diseño web e identidades corporativas.
Tabla de contenidos
Cómo personalizar el login de Wordpress

En este artículo te damos las herramientas para que sepas cómo personalizar el login de WordPress. Muchas veces cuando diseñamos una página web queremos darle un aspecto mucho más personalizado a lo que es el login de WordPress y la verdad es que es algo muy sencillo de hacer y que te puede dar unos resultados muy chulos de cara a tus clientes o para tus propios proyectos pero, ¿Por qué personalizar la página de login de WordPress? Pues a priori, yo creo que hay cinco ventajas que te cito a continuación y que deberías tener en cuenta:

    • Profesionalismo: Personalizar el login con tu logotipo y colores corporativos brinda una apariencia más profesional y coherente a tu sitio web.
    • Branding: Refuerza la identidad de tu marca al mostrar tu logotipo en el inicio de sesión, lo que puede ayudar a los usuarios a identificar fácilmente tu sitio web.
    • Confianza del usuario: Una página de inicio de sesión personalizada puede generar más confianza en los usuarios, ya que saben que están accediendo a un sitio web auténtico y de confianza.
    • Mejor experiencia del usuario: Personalizar el login puede hacer que la experiencia del usuario sea más agradable y amigable, lo que puede aumentar la retención de usuarios. 
    • Aumento de la lealtad de marca: Cuando los usuarios experimentan una marca coherente en todas las interacciones con tu sitio web, es más probable que se conviertan en seguidores leales.

Ahora bien, ¿Cómo personalizar el login de WordPress ? Pues hay dos maneras de hacerlo, la primera es tocando código y la segunda es mediante plugins. Os voy a explicar ambas maneras a continuación:

Cómo Personalizar el login de WordPress mediante código

Si te sientes cómodo trabajando con código, esta opción te va a dar mucho más control sobre la personalización del login y te vas a ahorrar la instalación de un plugin y estar pendiente de tus actualizaciones. Sigue estos pasos:

  1. Preparación: Antes de realizar cambios en el código de tu sitio web, asegúrate de hacer una copia de seguridad de tu sitio para evitar problemas.
  2. Accede a tu sitio FTP: Utiliza un cliente FTP como FileZilla para acceder a los archivos de tu sitio web.
  3. Editar el archivo functions.php: Dentro de tu directorio de temas activo, busca el archivo functions.php y ábrelo con un editor de texto.
  4. Agrega el código personalizado: Para cambiar el logotipo y los colores corporativos, puedes usar el siguiente código de ejemplo:
function custom_login_logo() {
echo '<style type="text/css">
body.login {
background-color: #f2f2f2; /* Cambia el fondo */
}
.login h1 a {
background-image: url(' . get_bloginfo('template_directory') . '/ruta-de-tu-imagen/logo.png); /* Cambia la URL de tu logotipo */
background-size: 300px 100px; /* Cambia las dimensiones de tu logotipo */
width: 300px; /* Cambia el ancho de tu logotipo */
height: 100px; /* Cambia la altura de tu logotipo */
}
.login form {
background-color: #ffffff; /* Cambia el color de fondo del formulario */
}
.login label {
color: #ff6600; /* Cambia el color de las etiquetas de usuario y contraseña */
}
</style>';
}
add_action('login_enqueue_scripts', 'custom_login_logo');
  1. Guarda los cambios: Guarda el archivo functions.php y sube los cambios a tu sitio web a través de FTP.
  2. Comprueba el resultado: Ahora, cuando vayas a la página de inicio de sesión de WordPress, verás tu logotipo personalizado y los colores que has elegido.

Cómo personalizar el login de WordPress usando un plugin

Si prefieres una solución más sencilla y no quieres pelearte con código, puedes utilizar un plugin. Nosotros recomendamos dos.
como usar white label cms

White Label CMS

Nos gusta este plugin porque es bastante sencillo de utilizar y aparte de darnos la posibilidad de poder cambiar el diseño e imagen del login de WordPress nos brinda la posibilidad de adaptar el resto del panel de WordPress, personalizándolo de forma íntegra.

Para ello, lo único que tenemos que hacer es:

  1. Instala el plugin: Ve a tu panel de administración de WordPress, haz clic en «Plugins» y luego en «Añadir nuevo». Busca «White Label CMS» e instálalo.
  2. Activa el plugin: Después de la instalación, actívalo.
  3. Configura la personalización: Ve a «Ajustes» > «White Label CMS» en tu panel de administración. Te cargará una sección dónde en la parte superior tienes MARCA, ACCESO, ESCRITORIO, MENUS y AJUSTES. Nosotros nos iremos a la segunda pestaña, ACCESO.
  4. Sube tu logotipo: dale tamaño si quieres e indica los colores tanto del fondo como de la caja como de las letras.
  5. Edita otras opciones: Aquí también tendremos opciones por si quieres ocultar el enlace de registro / contraseña perdida.
  6. Guarda los cambios: Una vez que hayas realizado tus ajustes, asegúrate de guardar los cambios.

Cómo personalizar el login de WordPress
como usar custom login page customizer

Custom Login Page Customizer

Esta es otra opción si quieres usar un plugin para personalizar el login de una página web realizada en WordPress. Sigue estos pasos:

  1. Instala el plugin: Ve a tu panel de administración de WordPress, haz clic en «Plugins» y luego en «Añadir nuevo». Busca «Custom Login Page Customizer» e instálalo.
  2. Activa el plugin: Después de la instalación, actívalo.
  3. Configura la personalización: Ve a «Apariencia» > «Personalizar» en tu panel de administración. Deberías ver una opción para personalizar la página de inicio de sesión. Desde aquí, puedes cambiar el logotipo, los colores y más de manera intuitiva.
  4. Guarda los cambios: Una vez que hayas realizado tus ajustes, asegúrate de guardar los cambios.

login de WordPress con plugin

Si no te ha quedado claro cómo personalizar el login de WordPress o si necesitas ayuda con tu página web en WordPress, te invitamos a contactar con nosotros. Te ofrecemos planes de mantenimiento WordPress para solucionar todo tipo de dudas y consultas que puedas tener ya sea con la instalación de plugins o la implementación de otras mejoras.

Recibe los artículos en tu cuenta de correo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  He leído y acepto la política de privacidad

Artículos relacionados
¡Escríbenos!