Personalizar el login del panel de administración

Posted on by

Uno de los aspectos que puede diferenciar nuestro sitio web creado con wordpress y otros sitios es la personalización. Una de las acciones que podemos hacer es personalizar el login del panel de administración. Es decir, modificar la pagina desde la que hacemos login como editores o administradores y que está localizada en la URL https://MI_DOMINIO/wp-admin

Existen plugins para hacer estas modificaciones, pero cuantos mas plugins mas lentitud en el sitio (como norma general) por lo que lo que haremos será incluir fragmentos de código.

Podemos modificar el aspecto del acceso al panel de control y que deje de tener este aspecto:

wplogin

Para tener este otro mas personalizado:

wp-login_custom

Para cambiar el aspecto debemos modificar el fichero functions.php del tema que tienes activo en tu WordPress en este momento. Es decir, debes editar el fichero se en encuentra en la siguiente ruta de tu instalación de wordpress:  /wp-content/themes/TEMA_ACTUAL/functions.php 

Ya que vamos a modificar los ficheros de un tema este puede actualizarse borrar los cambios realizados. Es recomendable siempre que vayamos a realizar cambios en un tema para personalizarlo que creemos un tema hijo de nuestro tema actual. Como decía antes, es recomendable pero si no puedes o quieres crear un tema hijo, puedes trabajar sobre el tema actual pero teniendo en cuenta que al actualizar el tema probablemente tengas que introducir de nuevo los cambios.

Debes insertar los siguientes códigos al final del fichero indicado en la linea anterior. Los vamos a separar según su funcionamiento.

Contenido

Para modificar el logo que aparece en la pagina de login tenemos el siguiente bloque de codigo:

function my_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
    background-image: url(https://URL-DEL-LOGO/logo-150.png) !important;
    background-repeat: no-repeat;
    padding-bottom: 30px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

Si modificamos el código anterior podemos modificar el estilo de otras partes del formulario de login:

function custom_logo() { 
    ?> <style type="text/css"> 
        #login h1 a, .login h1 a { 
           background-image: url(https://URL-DEL-LOGO/logo-150.png) !important; 
           background-repeat: no-repeat; 
           padding-bottom: 30px; 
        }
        .wp-core-ui .button-secondary {
           color:#333333 !important;
        } 
        body.login div#login form#loginform .button-primary {
           background-color: #333333 !important;
           border-color: #333333 !important;
        }
        body.login div#login form#loginform .button-primary:hover {
           background-color: #333333 !important;
           border-color: #333333 !important;
        }
    </style> 
<?php } 
add_action( 'login_enqueue_scripts', 'custom_logo' );

En backgroud-image debemos poner la URL de una imagen que hayamos subido previamente. La URL también puede ser relativa al directorio actual y no ser una URL absoluta o bien puede ser una URL de una imagen alojada en otro sitio o en una CDN.

Modificar URL del enlace

La imagen del logo contiene un enlace a https://wordpress.org para modificarlo podemos utilizar el siguiente código que modificará la URL por la home de nuestro sitio web. También podrás modificar el título del enlace:

//Modificar URL del enlace
function custom_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'custom_logo_url' );

//modificar titulo del enlace
function custom_logo_url_title() {
    return 'Titulo de la pagina';
}
add_filter( 'login_headertitle', 'custom_logo_url_title' );

No olvides que si nuestro functions.php finaliza con ?> se debe incluir el código anterior antes de esta marca de cierre de código PHP.

A continuación incluimos el código completo:

    function custom_logo() { 
    ?> <style type="text/css">
        #login h1 a, .login h1 a { 
           background-image: url(https://URL-DEL-LOGO/logo-150.png) !important; 
           background-repeat: no-repeat; 
           padding-bottom: 30px; 
        }
        .wp-core-ui .button-secondary {
           color:#333333 !important;
        } 
        body.login div#login form#loginform .button-primary {
           background-color: #333333 !important;
           border-color: #333333 !important;
        }
        body.login div#login form#loginform .button-primary:hover {
           background-color: #333333 !important;
           border-color: #333333 !important;
        }
    </style> 
<?php } 
add_action( 'login_enqueue_scripts', 'custom_logo' );
//Modificar URL del enlace
function custom_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'custom_logo_url' );

//modificar titulo del enlace
function custom_logo_url_title() {
    return 'Titulo de la pagina';
}
add_filter( 'login_headertitle', 'custom_logo_url_title' );

Se pueden ver mas hooks mas formas de personalizar esta página, por ejemplo creando un formulario personalizado, para más información puede verlo en la documentación oficial pinchando aquí

Deja una respuesta