Cómo personalizar el Login de WordPress sin plugins [Flex-Box CSS]

/ 2 enero, 2018

Cómo personalizar el Login de WordPress sin plugins

Hoy hablaremos del famoso Login de WordPress, su personalización 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.

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.  como cambiar el diseño del login de wordpress

Ventajas de personalizar 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é?

  • Evitas librerías externas.
  • No te haces dependiente de nuevas actualizaciones.
  • No te haces dependiente del plugin como tal.
  • Evitas posibles vulnerabilidades a raíz de fallas del desarrollador del mismo.
  • Código más limpio y solo las lineas necesarias.

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

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.

///////////////////////////////////////////////////////////////////////////////////////
//    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.

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

Obteniendo el logo de un directorio externo

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

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

///////////////////////////////////////////////////////////////////////////////////////
//    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:

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 

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

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

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.

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:

  • 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.
  • display: flex; Para poder definir los valores que usaremos a continuación.
  • align-items: center; Nos permite alinear al centro todo el contenido del contenedor verticalmente. (Requiere Display Flex)
  • justify-content: center; Nos permite alinear el contenido en el centro del contenedor horizontalmente. (Requiere Display Flex)
  • background-size: cover; Para hacer el background autoajustable.
  • 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

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.

  • Valor 1: Define la posición de la sombra en el eje Y
  • Valor 2: Define la posición de la sombra en el eje X
  • Valor 3: Define la cantidad de difuminado a aplicar
  • Valor 4: Define el ancho de la sombra
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.

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.

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

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.

#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.

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 

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 debidamente

Vamos a empezar eliminando los espacios alrededor del logo.

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

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

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.

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:

Cómo personalizar el Login de WordPress sin plugins [Flex-Box CSS]
¿Te ha sido útil? ¡Valoralo!

¡No olvides dejar tu comentario, valorar y compartir!

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