Cómo personalizar el Login de WordPress sin plugins

Hoy hablaremos personalizar el Login de WordPress, y algunos ajustes extras que nos ayudar√°n a satisfacer m√°s a nuestros clientes.

Nosotros como desarrolladores, debemos siempre buscar la forma de ofrecer un producto de valor, que de alguna forma u otra marque la diferencia en el consumidor. Son cientos de p√°ginas web que podemos encontrar hoy en d√≠a, las cuales carecen de peque√Īos detalles, pero que a la vez marcan una gran diferencia en la conformidad del cliente.

El tema de Customize WordPress Login without Plugins traducido al espa√Īol como personalizar el Login de WordPress sin Plugins es uno de estos casos, hoy veremos como hacerlo incorporando CSS avanzado (Flex-Box CSS), este nos permitir√° lograr ajustes m√°s exactos, a diferencia del CSS tradicional que a veces nos complica lograr ciertos objetivos.

Por qué personalizar el Login de WordPress

Si una web est√° destinada a un √ļnico usuario no ser√≠a necesario personalizar el login de la misma, m√°s sin embargo, si se trata de una web la cual ser√° administrada por diferentes roles de usuarios, s√≠ es sumamente importante realizar la personalizaci√≥n.

como cambiar el dise√Īo del login de wordpress

La raz√≥n de ser es porque a trav√©s de la personalizaci√≥n podemos trabajar la identidad corporativa de la marca, lo cual es muy fruct√≠fero, y al mismo tiempo brindamos mayor seguridad debido a que ser√° m√°s dif√≠cil identificar el tipo de plataforma en la cual est√° desarrollada la web.  

Ventajas de personalizar el login de WordPress sin plugins

A pesar que los diferentes plugins wordpress para personalizar el login, generalmente no consumen recursos … es m√°s recomendable hacerlo sin ellos. ¬ŅPor qu√©?

  1. Evitas librerías externas.
  2. No te haces dependiente de nuevas actualizaciones.
  3. No te haces dependiente del plugin como tal.
  4. Evitas posibles vulnerabilidades a raíz de fallas del desarrollador del mismo.
  5. Código más limpio y solo las lineas necesarias.
  6. Menos consumo de peticiones al servidor

Son varias las razones que existen para evitar los plugins, y no solo en este caso del login, sino m√°s bien de los plugins en general.

A pesar que nos ayudan bastante, recuerda que siempre todo tiene sus beneficios y desventajas.

Cómo cambiar el logo del login de WordPress sin plugins

Para cambiar el logo por defecto de WordPress, solo debemos agregar el siguiente fragmento de código en el archivo function.php de nuestro theme wordpress

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
///////////////////////////////////////////////////////////////////////////////////////
//    WP LOGIN: AGREGAR NUEVO LOGO EN LUGAR DEL DE WORDPRESS
///////////////////////////////////////////////////////////////////////////////////////
function my_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
        background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/img/antonlogo.svg);
        height:65px;
        width:320px;
        background-size: 320px 65px;
        background-repeat: no-repeat;
            padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

El logo puede ser extra√≠do a trav√©s de una URL externa o de forma interna que es m√°s recomendable para evitar peticiones http, tambi√©n puedes cambiar los valores CSS del function.php seg√ļn tus necesidades.

Obtener el logo de un directorio del theme.

1
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/carpeta/archivo);

Obteniendo el logo de un directorio externo

En el caso que desees usar un logo externo, que esté alojado en otro servidor o algo por el estilo, solo debes indicar la url.

1
background-image: url(//Aquí colocas la ULR del logo);

Cómo cambiar la URL por defecto del logo de WordPress

Por defecto, el logo de wordpress en el login, viene acompa√Īado con la url de la p√°gina principal de este. Para removerla simplemente agregamos el siguiente fragmento a nuestro archivo function.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
///////////////////////////////////////////////////////////////////////////////////////
//    WP LOGIN: CAMBIAR LA URL POR DEFECTO DEL LOGO 
///////////////////////////////////////////////////////////////////////////////////////
 
function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );
 
function my_login_logo_url_title() {
    return 'Nombre del sitio web';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );
?>

Personalizar el login con Flex-Box CSS

Algunos consideran a Flex-Box como el conjunto de propiedad CSS más potentes, esto gracias a las facilidades que nos permite, cosas que nunca antes se habría poder visto en CSS 3.

Centrar un bloque en la pantalla perfectamente ya no será un dolor de cabeza. Si luego de estos conceptos básicos te motivas a conocer más sobre flex-box css, puedes visitar la documentación oficial de w3schools.

Hoy sacaremos partido al Login de WordPress con flex-box, cabe mencionar que tambi√©n puedes hacer todo esto con plugins como:

  1. Custom Login
  2. Custom Login Page Customizer
  3. Birds Custom Login

Agregar nueva hoja de estilos

Vamos a crear un nuevo archivo CSS llamado style-login.css y lo alojaremos en la carpeta /css dentro de nuestro theme. Una vez creado el archivo, debemos vincularlo a trav√©s del archivo function.php 

1
2
3
4
5
<?php
function my_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/css/style-login.css' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

Selectores por defecto de WordPress Login

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

Estas son las clases por defecto que nos proporciona wordpress para personalizar el login, en el dise√Īo que trataremos no las vamos a necesitar todas, pero s√≠ su gran mayor√≠a.

Los estilos que apliquemos a estas clases tendr√°n prevalencia ante los que trae el wordpress como predeterminados.

Agrega las clases al archivo style-login.css para empezar a darle propiedades.

Agregar imagen de fondo al login de WordPress

Agregar la imagen de fondo es bastante simple, luego de tener seleccionada nuestra imagen, procederemos a editar los selectores .body.login que es la clase del cuerpo del login.

1
2
3
4
5
6
7
8
body.login {
    background-image: url(Link con la dirección de tu imagen);
    background-size: cover;
    background-repeat: no-repeat;
     display: flex;
    align-items: center;
    justify-content: center;
}

Explicación:

  1. background-image: url (): Dentro de los corchetes solo debemos colocar la url de nuestra imagen, esta debe estar alojada en un servidor, puedes subirla a tu biblioteca de medios y luego copiar la url.
  2. display: flex: Para poder definir los valores que usaremos a continuación.
  3. align-items: center: Nos permite alinear al centro todo el contenido del contenedor verticalmente. (Requiere Display Flex)
  4. justify-content: center: Nos permite alinear el contenido en el centro del contenedor horizontalmente. (Requiere Display Flex)
  5. background-size: cover: Para hacer el background autoajustable.
  6. background-repeat: no-repeat: Para evitar que el fondo se repita.
wordpress login personalizado

Eliminar el volver atr√°s

Para eliminar el mensaje de “Volver atr√°s” s√≥lo debemos aplicar la propiedad display: none a la combinaci√≥n de selectores body.login div#login p#backtoblog

1
2
3
body.login div#login p#backtoblog {
	display: none;
}

Darle Profundidad al formulario de login

Vamos a definir un ancho para el formulario de 320px, el padding est√° en cero para eliminar los valores por defecto. el box-shadow (Sombra de caja) podemos modificarlo a nuestro antojo, el mismo tiene 4 valores que podemos graduar.

  1. Valor 1: Define la posición de la sombra en el eje Y
  2. Valor 2: Define la posición de la sombra en el eje X
  3. Valor 3: Define la cantidad de difuminado a aplicar
  4. Valor 4: Define el ancho de la sombra
1
2
3
4
5
6
7
body.login div#login {
    width: 320px;
    padding: 0;
    margin: auto;
    box-shadow: 0 0 35px 0px rgba(0, 0, 0, 0.070);
 
}

Ajustar “Has perdido tu contrase√Īa”

Este lo resolvemos reemplazando las propiedades predeterminadas, eliminando los espacios y alineando el contenido.

1
2
3
4
5
body.login div#login p#nav {
    margin: 0;
    padding: 10px;
    text-align: center;
}

Este es nuestro estatus actual, ya hemos agregado profundidad, centrado algunos elementos e incluso eliminado.

Personalizar WordPress Login

Ahora vamos a continuar dando forma al botón de acceder al admin de wordpress y los input del formulario.

Personalizar los input del Login

Los input del Login de WordPress los podemos personalizar selector por selector, pero esto ser√≠a mala practica si todos van a tener las mismas propiedades, en otras palabras… estar√≠amos escribiendo tres veces el mismo c√≥digo.

Como en los selectores por defecto no tenemos una agrupación que nos permita hacer esto, vamos hacerlo nosotros mismos agregando las siguientes líneas de código.

1
2
3
4
5
6
7
8
#user_login,
#user_pass,
#wp-submit{
    background: #f9fbfd;
    border: none;
    color: #333;
    box-shadow: none;
}

Estas l√≠neas est√°n vinculando los ID de usuario, contrase√Īa y acceder.

Eliminar “He olvidado mi contrase√Īa” (Opcional)

Si deseamos remover el “He olvidado mi contrase√Īa” lo cual es una opci√≥n para ti, solo debes agregar la siguiente l√≠nea.

1
2
3
body.login div#login form#loginform p.forgetmenot {
	display: none; 
}

Personalizar el botón de acceder

El botón clave del Login de WordPress, para este vamos agregar algunas propiedades y valores, también eliminaremos nuevamente algunos por defecto.

A este bot√≥n le hemos dicho que el texto sea siempre may√ļscula, esto lo hicimos con la propiedad text-transform y su valor uppercase 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body.login div#login form#loginform p.submit {
	display: flex;
    justify-content: center;
    align-items: center;
}
 
body.login div#login form#loginform p.submit input#wp-submit {
	width: 100%;
    text-shadow: none;
    color: #0065a1;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px;
    height: auto;
}

Ya solo nos hace falta ajustar el logo, este se muestra desbalanceado porque viene dentro de un h1, a este √ļltimo los navegadores le dan propiedades por defecto, tendremos que eliminarlas.

Estatus hasta el momento.

Login WordPress

Ajustar el logo de debidamente

Vamos a empezar eliminando los espacios alrededor del logo.

1
2
3
4
body.login div#login h1 a {
	padding-bottom: 0;
    margin-bottom: 0;
}

Luego centraremos todo el contenido, nuevamente con flex-box.

1
2
3
4
5
6
body.login div#login h1 {
    padding: 15px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

Finalmente daremos color al formulario y eliminaremos el borde, la sombra por defecto y el margin top.

1
2
3
4
5
6
body.login div#login form#loginform {
 background: #fff; 
 border: none;
 box-shadow: none;
 margin-top: 0;
}

¬°Finalmente nuestro adorable resultado!

como cambiar el dise√Īo del login de wordpress

¬°Recursos para descargar!

Aqu√≠ te dejo ambos archivos para que los descargues, lo analices, y claro… ¬°lo apliques!

No olvides dejarme un comentario, así paso por tu web y echo un ojo a ver qué tal vas.

Así que ánimos y a descargar los archivos.

Consideraciones finales y recomendaciones

Podemos finalizar esta guía teniendo por hecho, que el resultado final va a depender mucho de nuestra creatividad, tenemos que jugar con los colores, probar diferentes imágenes hasta lograr el resultado deseado. También te recomiendo que personalices la url del login por defecto, esto puede evitarte futuros ataques.

Aquí te dejo una lista de otros artículos que no puedes dejar de leer ya que estás optimizando wordpress:

  1. Aumentar velocidad de carga optimizando im√°genes
  2. Estructurar debidamente nuestro home page
  3. Copias de seguridad en tres pasos
5 (100%) 1 vote

Neudis López

Soy amante a la publicidad, el mercadeo y la creatividad. Busco ayudar a las personas a que logren sus metas, aportando un granito de arena con mis conocimientos.

Ver todos sus artículos

Guías Practicas

Desliza a la izquierda

Deja un comentario

You have to agree to the comment policy.

5 (100%) 1 vote