';

Information

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus risus mauris, et commodo lectus hendrerit ac. Nam consectetur velit et erat fermentum aliquet. In laoreet, sem sit amet faucibus pulvinar, purus tellus tincidunt ex, vel blandit nibh dui sit amet justo.

Menú

Cómo personalizar el panel del login de WordPress

Antes de entrar en la administración de nuestro sitio de WordPress, nos aparece un panel donde tenemos que loguearnos para poder acceder. El panel del login por defecto de WordPress es bastante básico.

Quizás si es una web para nosotros nos de igual no personalizarla, pero si la hacemos para un cliente es un plus de creatividad que podemos ofrecerle y de seguro que le va a gustar.

En este artículo aprenderemos a cambiar el logo de WordPress por el nuestro e introducir CSS para personalizar el resto del panel. Y lo haremos de una forma que cuando tengamos que actualizar nuestro WordPress o tema no perdamos los cambios realizados. Para los que no quieran introducir código, aconsejaré algunos plugins tanto gratuitos como de pago.

Personalizar el panel del login de WordPress de forma manual

Como hemos dicho anteriormente, el panel por defecto de WordPress se nos muestra de la siguiente manera. Puede ser que se muestre el logo de vuestro theme comprado.

personalizar panel login wordpress img1 - iborra web design

Lo primero que haremos es subir nuestro logo en la sección de Medios de nuestra administración de WordPress o bien en una carpeta de imágenes que tengamos en el Child Theme.

Luego abrimos el archivo functions.php de nuestro Child Theme y pegamos el siguiente código.

// Poner logo en el login
function my_login_logo() { ?>
    <style type="text/css">
        .login-action-login.login h1 a {
            width: 160px !important;
			background-image: url('poner-url-de-nuestro-logo') !important;
			background-size: cover !important;
			height: auto !important;
			min-height: 170px !important;
        }
		a:focus {
			box-shadow: 0 0 0 0px transparent !important;
		}
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

En el propio código modificar la url, la anchura y la altura para que el logo quede a vuestro gusto. Si no se mostrara el logo modificar la clase CSS. Por ahora el resultado sería el siguiente.

personalizar panel login wordpress img2 - iborra web design

Ahora vamos a personalizar el resto del panel y para ello vamos a añadir una hoja de estilos CSS. Primero creamos un archivo llamado por ejemplo style-login.css dentro de nuestro Child Theme. Luego pegamos el siguiente código a continuación del anterior en nuestro archivo functions.php.

// Añadir hoja de estilo personalizar el panel del login
function my_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style-login.css' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

Cambiar la ruta en caso de que pongáis el archivo en un sitio distinto al del ejemplo. En esta nueva hoja de estilos empezaremos a personalizar el panel del login de forma más creativa, sin ayuda de plugins y sin perder los cambios cuando tengamos que actualizar tanto el tema de la plantilla como la versión de WordPress.

Ahora ya depende de vosotros el resultado final. Os paso dos ejemplos de como he personalizado mi propio panel de login. El primero que he realizado es solo para una resolución de pantalla de 1920px.

personalizar panel login wordpress img5 - iborra web design

Y el segundo es para el resto de resoluciones. Si vais a personalizarlo con la hoja de estilos, el primer código del logo no hace falta aplicarlo en el archivo functions.php, bastaría con poner el CSS en la nueva hoja de estilos.

personalizar panel login wordpress img7 - iborra web design

Espero que os sirva de inspiración para poder hacer los vuestros. Como veis, se puede lograr un resultado muy bonito, con un poco de imaginación conseguiremos que el panel del login de WordPress quede más presentable, original y creativo.

Personalizar el panel del login de WordPress con ayuda de plugins

Otra opción para poder personalizar el panel del login es a través de algún plugin, os recomiendo los siguientes:

  • Customize WordPress Login Page

personalizar panel login wordpress img8 - iborra web design

Un gran plugin que permite cambiar el color de fondo, la imagen de fondo, el formulario de acceso y su posición, el tamaño de la fuente, agregar iconos de redes sociales y muchas más características.

Ir al sitio oficial del plugin

  • Erident Custom Login and Dashboard

personalizar panel login wordpress img9 - iborra web design

Con este plugin podemos personalizar completamente y de forma fácil el panel de inicio de sesión de WordPress. Añadir el logo, cambiar el fondo con imágenes, colores, etc. Rápido y buen rendimiento.

Ir al sitio oficial del plugin

  • WordPress Custom Login Theme Page – $18

personalizar panel login wordpress img10 - iborra web design

Una maravilla de plugin de pago muy completo. Si no os importa gastar un poco, ya que os servirá para todas las páginas web que queráis, este es vuestro plugin sin duda.

Ir al sitio oficial del plugin

Hay muchos otros plugins gratuitos y de pago que también están muy bien, si os interesa alguno echar una ojeada antes tanto a estos como a otros que podáis encontrar.

!Si te gustó este artículo, no dejes de visitar el blog o suscribirte a la newsletter! | Iborra Web Design

Comentarios
Compartir
Paco (Iborra Web Design)

Artículos destacados

Hay 4 comentarios en este artículo
  1. Juan Manuel
    2 agosto 2020, 17:57

    Interesantísimo el artículo Paco, sobretodo la primera parte, en la que explicas como hacerlo por código en vez de con el uso de plugins. Añado el post a mis favoritos. Muchas gracias por compartirlo.

    Un saludo.

    • Paco (Iborra Web Design)
      3 agosto 2020, 19:10

      Gracias Juan Manuel por el comentario!

      Saludos.

  2. Javier
    31 julio 2020, 10:37

    Que bueno, realmente no sabía que se podía tunear el login de WordPress, me lo guardo.

    • Paco (Iborra Web Design)
      31 julio 2020, 15:03

      Hola Javier,

      Jeje si, se puede tunear bastante. Gracias por el comentario.

      Un saludo.

Deja un comentario

¿Necesitas ayuda? Escríbeme por Whatsapp