Blog / Personalizar login de WordPress

¿Estás cansado de la página de login de WordPress? ¿Tienes una web con área privada para usuarios, y quieres personalizar el login de WordPress? Con esta completa guía de personalización del login de WordPress podrás hacerlo en pocos minutos. ¡Vamos!

¿Por qué personalizar el login de WordPress?

WordPress es el gestor de contenidos o CMS más popular de la última década, y por ello estamos muy acostumbrados (y quizás en algún caso cansados) de ver las mismas páginas para realizar algunas acciones. Una de estas páginas que tanto vemos es la página de inicio de sesión de WordPress. Por ello hoy aprenderás como modificar y personalizar esta página y así hacer que no sea tan aburrida.

También puede ser que tengas un sitio web donde tus usuarios puedan acceder al backoffice para realizar acciones, y quieras personalizar la pantalla de acceso con el logo de tu empresa y una foto de fondo de la misma. Imagínate la buena impresión que se llevarán tus usuarios/clientes al ver una pantalla personalizada y con identidad propia.

¿Qué elementos se pueden personalizar de la pantalla de login de WordPress?

Para hacer una pantalla de acceso a WordPress personalizada y única podrás modificar algunos aspectos de la misma. Tan solo necesitas una guía como la que estás leyendo y quizás, un poco de paciencia 🙂

Los elementos que podrás personalizar de la página de inicio de WordPress son los siguientes:

• Cambiar logo de WordPress por el que tú elijas
• Cambiar la url del logotipo de WordPress
• Poner una imagen o color de fondo a la pantalla de acceso
• Modificar elementos como la tipografía, color del texto, etc.

Acceder a la página de login de WordPress

Lo primero que debemos hacer, es acceder a la página de inicio de sesión de WordPress. Ojo, no debes loguearte. Es decir, tan solo debes introducir la siguiente ruta en tu navegador preferido y listo.

www.tudominio.com/wp-admin

Nos quedaremos en esta pantalla de inicio de sesión de WordPress y la usaremos únicamente para ir viendo los cambios que realicemos a base de pulsar F5 en nuestro teclado.

Recuerda que la ruta que te hemos indicado es la «original» de WordPress. Es decir, si no has modificado esta ruta en ningún momento, a través de esa URL deberías poder acceder a la pantalla mencionada.

Creando un fichero de estilos para el login de WordPress

Lo primero que deberemos hacer es crear un fichero .css donde meteremos los estilos que queramos modificar o «pisar» de la página de acceso a WordPress. Antes de continuar, te recomiendo que si no lo tienes hecho ya, crees un tema hijo para WordPress antes de continuar con esta guía. En el enlace anterior verás los motivos por los que te recomiendo crear el tema hijo.

Bien, una vez hemos realizado el paso anterior, con nuestro gestor FTP favorito o bien accediendo al hosting a través del Cpanel de tu web, iremos a la raíz de nuestro WordPress y buscaremos el tema hijo que estemos utilizando, en la ruta siguiente:

/public/wp-content/themes/tu-tema-hijo/

Una vez en esa ruta debes crear un fichero .css con el editor de textos que suelas utilizar. Nosotros recomendamos Visual Studio Code de Microsoft, ya que tiene infinidad de complementos que ayudan y facilitan enormemente la programación.

Cuando tengas ya creado tu fichero «estilos.css» podremos pasar al siguiente punto.

Agregar el fichero de estilos nuevo a nuestro WordPress

Esta modificación es muy fácil de realizar. Tan solo debes introducir un fragmento de código al fichero functions.php de tu WordPress. Este fichero lo localizarás como en la ocasión anterior, dentro de tu tema hijo, en la siguiente ruta :

/public/wp-content/themes/tu-tema-hijo/functions.php

Dentro del fichero una vez lo abramos, debes ir al final del mismo y ahí introducir el siguiente fragmento de código:

function custom_login() {
  wp_enqueue_style( 'custom-login-css', get_stylesheet_directory_uri() . '/themes/tu-tema-hijo/estilos.css', array(), '1.0' );
}
add_action( 'login_head', 'custom_login' );

Tan solo deberás modificar la ruta o URL por la que corresponda en tu caso.

Con esto ya «llamaremos» o cargaremos nuestro nuevo fichero de estilos, donde modificaremos los aspectos de la página de inicio de WordPress que queramos personalizar.

Probando el fichero de estilos nuevo

Si queremos probar si WordPress está cargando el nuevo fichero de estilos que hemos definido en el functions.php, tan solo deberemos añadir por ejemplo un nuevo color de fondo a la pantalla de inicio. Con el siguiente código podremos hacer la prueba:

body {
  background: #555;
}

Si todo ha salido bien, verás que la página ahora tiene un color de fondo de color gris oscuro. Ahora ya puedes modificar usando reglas CSS cualquier aspecto de esta página de inicio. Si tus conocimientos sobre diseño web son limitados y quieres aprender más sobre ello, te recomendamos alguno de nuestros cursos de diseño web en Vitoria.

Personalizar el logo de la página de inicio de WordPress

Para modificar el logotipo que aparece en la página de login o inicio de WordPress, como hicimos en el caso anterior para cargar los estilos personalizados, tan solo deberemos añadir el siguiente fragmento de código a nuestro functions.php :

add_action( 'login_enqueue_scripts', 'bs_change_login_logo' );
function bs_change_login_logo() { ?> 

<style type="text/css"> 


#login h1 a {
background-image: url();
} 
				  

</style>
				  

<?php }

Con esto, modificado la ruta en » url() » podrás llamar (cargar) la imagen del logo que quieras incluir.

Modificar la URL del logotipo de la página de inicio de WordPress

Si te fijas, el logotipo de la página de login de WordPress tiene un enlace que te dirige directamente a la página web de WordPress. Este aspecto como los anteriores también es modificable. Para hacerlo debemos introducir como hicimos anteriormente el siguiente fragmento de código:

function custom_url_login() {
	return 'www.carontestudio.com'; 
}
add_filter( 'login_headerurl', 'custom_url_login' );

En el ejemplo nosotros hemos puesto la url de nuestra página web, pero tu puedes poner la url de la página que desees.

Personalizar login de WordPress con plugin

Si despues de seguir estos pasos ves que no funciona correctamente algo, o bien prefieres no complicarte editando código, también puedes modificar el login de WordPress a través de un plugin.

En mi experiencia, he probado con 3 o 4 plugin diferentes. De entre ellos, me quedo con Custom Login. El motivo principal es que ofrece bastantes opciones diferentes de personalización y además es bastante ligero en cuanto a la carga de la página. Podrás

Conclusión

Cómo has podido comprobar, en 4 o 5 pasos puedes modificar rápidamente el login de tu WordPress. En algún caso puedes llegar a necesitar algún conocimiento más especifico de desarrollo web, pero por lo general, casi cualquier usuario podrá realizar estas modificaciones.

¡Espero que hayas logrado personalizar tu WordPress! Si necesitas ayuda también puedes dejarme un comentario al final de estas lineas.

¡Hasta la próxima!