• iborra
    borde slide
    DESCUBRE A TRAVÉS DE
    borde slide
    NUESTRO BLOG
    Artículos de interés sobre diseño web

Cómo personalizar el panel del login de Wordpress

personalizar panel login 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 por defecto que nos muestra 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 tutorial aprenderemos a cambiar el logo de Wordpress por el nuestro, cambiar su enlace para que redirija por ejemplo a la página principal de nuestra página web y cómo introducir css o js 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, aconsejaremos 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.

Lo primero que haremos es crear, si no la tenemos ya, la carpeta images dentro de nuestro chid theme y poner dentro la imagen de nuestro logo. La carpeta se llamará igual a como esté en el tema padre y siguiendo la misma ruta. Si no sabes de lo que estamos hablando, mira el tutorial Cómo crear y modificar un child theme en Wordpress.

Luego abrimos el archivo functions.php de nuestro child theme y pegamos el siguiente código antes de la etiqueta de cierre de php.

// Poner logo en el login
function my_login_logo() { ?>
    <style type="text/css">
        .login h1 a {
            width: auto !important;
            background-image: url("<?php echo get_stylesheet_directory_uri();?>/images/logo-admin.png") !important;
            background-size: auto !important;
        }
		a:focus {
			box-shadow: 0 0 0 0px transparent !important;
		}
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

Usaremos el hook login_enqueue_scripts para insertar una etiqueta style que modifique la propiedad background-image. Wordpress recomienda que el tamaño de la imagen no exceda de 84 x 84 píxeles, pero con los estilos que hemos creado en el código anterior podremos añadir una imagen con dimensiones diferentes. Por ahora el resultado sería el siguiente.

Ahora lo que haremos es cambiar el enlace del logo para que no vaya a la web de Wordpress y nos envíe a la página de inicio de nuestra web. También cambiaremos el atributo title. Para ello pegamos el siguiente código a continuación del anterior en nuestro archivo functions.php.

// Cambiar enlace del logo y atributo title en el login
function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );
 
function my_login_logo_url_title() {
    return 'Ir a Pizarras Personalizadas';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

Con el return home_url haremos que vaya a nuestra web. Cambiar donde dice Ir a Pizarras Personalizadas por el título que queráis. Visualmente el panel seguirá viéndose sin grandes cambios por ahora.

Por último, vamos a personalizar el resto del panel y para ello vamos a añadir una hoja de estilos css. También podemos añadir algún archivo js pero eso ya es opcional. 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 y archivo JS para personalizar el panel del login
function my_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style-login.css' );
	wp_enqueue_script( 'custom-login', get_stylesheet_directory_uri() . '/style-login.js' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

Si no vamos a añadir ningún archivo js, se puede eliminar la línea wp_enqueue_script( 'custom-login', get_stylesheet_directory_uri() . '/style-login.js' );. Dentro del archivo style-login.css debéis poner los estilos que queráis para personalizar vuestro panel del login de Wordpress. Por poner un ejemplo, os mando una imagen de cómo he personalizado el siguiente panel.

El objetivo es darle al panel un estilo acuerdo a la temática de la página web. Si queréis podéis ir al panel de la web de Pizarras Personalizadas y utilizar las herramientas de desarrollo (F12) para ver cómo hemos puesto los estilos observando el archivo style-login.css. Podéis personalizar cualquier cosa, poner redes sociales, etc.

Con estos pasos lograremos dar un estilo más creativo al panel del login, 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.

Personalizar el panel del login de Wordpress con la ayuda de algún plugin

Otra opción para poder personalizar el panel del login es a través de algún plugin, aunque con ello vamos a cargar y ralentizar aun más nuestra página web. Os recomiendo los siguientes:

  1. Customize WordPress Login Page
  2. 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

  3. Erident Custom Login and Dashboard
  4. 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

  5. Admin Branding and Tweaks
  6. Este plugin permite controlar fácilmente algunos ajustes del panel de inicio de sesión y de la parte de administración de Wordpress.

    Ir al sitio oficial del plugin

  7. WordPress Custom Login Theme Page - $17
  8. 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, y tenéis todo bien optimizado, 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.

Espero que este tutorial os sea útil para lograr que vuestro panel del login de Wordpress quede más presentable, original y creativo.

Comenta y comparte este post!

¿Tienes alguna sugerencia, idea, consejo, duda, pregunta, agradecimiento, encuentras algún error o este post no está actualizado? Entonces esperamos tu comentario.

También puedes recomendar y compartir este post. Estamos muy agradecidos por tu apoyo!

Comentarios (4)

  • foto hombre
    Juan Manuel Responder

    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.

    24 de Enero 2017 a las 14:09h
    • foto blog
      Paco (Iborra Web Design) Responder

      Gracias Juan Manuel por el comentario!

      Saludos.

      24 de Enero 2017 a las 15:54h
  • foto hombre
    Javier Responder

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

    27 de Enero 2017 a las 20:37h
    • foto blog
      Paco (Iborra Web Design) Responder

      Hola Javier,

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

      Un saludo.

      30 de Enero 2017 a las 13:54h

Deja un comentario

Este blog se nutre de los comentarios de los visitantes! Así que vamos, únete a nosotros!

Por favor esperamos que entiendas que se eliminarán aquellos comentarios que no tengan nada que ver con el contenido de este post o siempre que se utilicen palabras ofensivas.

COMENTARIO PARA ESTE POST

Imagen mínimo: 300x300 - Formato: jpg o png - Tamaño máximo: 10Mb

CAPTCHA code