Cómo personalizar la pantalla de acceso de WordPress sin plugins

Si quieres, otro día echamos un vistazo al montón de plugins que hay para personalizar la pantalla de acceso a WordPress, pero hoy vamos a ir a tope, a ofrecer una pantalla de login a nuestro WordPress totalmente a nuestro gusto, únicamente utilizando unos pocos códigos, cosa fina, de copiar y pegar 🙂

¿Por qué debería personalizar la pantalla de acceso de WordPress?

Hay varios motivos por los que deberías cambiar la pantalla de acceso a tu web WordPress, y los principales son estos:

• No tiene el logotipo de tu marca sino el de WordPress.
• El logotipo de WordPress enlaza a wordpress.org en vez de a tu web.
• Faltan enlaces útiles personalizables.
• No puedes elegir a qué página enviar a los usuarios tras acceder.
• Los colores son aburridos y no encajan con la imagen de tu web.
• Es muy sosa y triste

Pero vamos, el principal es que no está personalizado para que coincida con el aspecto y diseño de la web, y es un toque de distinción que siempre hay que ofrecer, especialmente en webs de clientes.

¿Dónde tengo que pegar los códigos para personalizar la pantalla de acceso de WordPress?

Cuando tenemos que copiar y pegar códigos WordPress para personalizar nuestra web casi siempre recomiendo usar el archivo functions.php del tema activo (que sea tema hijo, para no perder cambios al actualizar el tema) o en un plugin personalizado, dependiendo si la personalización depende o está relacionada con el tema (en el primer caso) o si la personalización es global de WordPress (en cuyo caso sería mejor con un mu-plugin).

Ahora bien, si tienes auténtica tirria a tocar códigos de tu tema o te da miedo lanzarte a hacer tu primer plugin, siempre puedes usar un plugin como Code Snippets, que ofrece una interfaz sencilla desde la que añadir fragmentos de código personalizados (snippets) y tenerlos controlados, ordenados, y poder activarlos o desactivarlos a golpe de clic.

Su uso es bien sencillo, como puedes ver en esta captura:

Luego puedes activar o desactivar fácilmente los fragmentos de código que hayas creado.

Personalizando la pantalla de acceso de WordPress

Vamos a ver cómo subsanar esas carencias de la pantalla de acceso de WordPress ayudándonos de unos pocos códigos, verás qué fácil es.

Personalizar el logo de acceso de WordPress

Lo primero de todo sería cambiar el logo de acceso, para que en vez del logotipo de WordPress se muestre el nuestro o el de nuestro cliente.

El código sería como este:

function ayudawp_mi_logo_login() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(https://aulawp.com/web/wp-content/uploads/2021/10/logo-google-ayudawp.png);
height:132px;
width:320px;
background-size: 320px 132px;
background-repeat: no-repeat;
padding-bottom: 10px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'ayudawp_mi_logo_login' );

No copies y pegues el código anterior tal cual, pues debes hacer algunos cambios para personalizarlo para tu web:

• Cambia la URL de background-image por la de tu logotipo, preferentemente en formato PNG de fondo transparente, para que se ajuste a cualquier fondo.
• Cambia los píxeles del parámetro height a la altura real de tu imagen.
• Cambia los píxeles del parámetro width al ancho de tu imagen.
• Cambia los píxeles del parámetro background-size a los tamaños definidos en height y width anteriores.
• Cambia el parámetro padding-bottom a los píxeles que quieras, simplemente añade un espacio entre el logotipo y la caja de relleno de datos.

Un par de consejos más:

• Por defecto el tamaño reservado para el logotipo de la pantalla de acceso es cuadrado, de 80×80 píxeles, así que si no especificas altura y ancho como te he indicado antes tu imagen se verá muy pequeña, adaptada al espacio disponible (background-size)
• Procura que la imagen no sea muy grande, de unos 300 píxeles de ancho como mucho, o el logotipo quedará demasiado grande en relación a la caja de introducción de datos, y quedará feo.

Por cierto, para saber la URL de tu logotipo, tras subirlo a la pantalla de medios de la administración de WordPress, haz clic en la imagen y ahí tendrás un campo con la URL, para que la copies y pegues en el fragmento de código que hemos visto arriba.

WordPress es tan majete que incluso te ofrece un botón para copiar la URL 🙂

Una vez guardados los cambios en nuestro fragmento de código tendremos una pantalla de acceso que, ahora sí, mostrará nuestra marca.

Mono ¿eh?

Personalizar la URL del logo de acceso de WordPress

Ahora que ya tenemos el logo a nuestro gusto vamos a cambiar la URL a la que enlaza, que como he dicho antes, por defecto te llevaría a WordPress.org, y normalmente lo lógico sería que llevase a la portada de nuestra web ¿no?

Pues apunta este código:

function ayudawp_mi_logo_login_url() {
return 'https://ayudawp.com/';
}
add_filter('login_headerurl', 'ayudawp_mi_logo_login_url');

Como ya habrás imaginado viendo el código, aquí solo hay un cambio que hacer. ¡Exacto! cambia la URL de ejemplo (https://ayudawp.com/) por la tuya.

Guarda y ya lo tienes…

¡A tope!

Personalizar el título de la URL del logo de acceso de WordPress

Como toque adicional de personalización al anterior también podemos añadir un texto emergente que se mostrará al pasar el cursor sobre nuestro nuevo y flamante logo, por ejemplo:

function ayudawp_mi_logo_login_url_texto() {
return 'Volver al curso de WordPress Online';
}
add_filter('login_headertitle', 'ayudawp_mi_logo_login_url_texto');

En este código solo tienes que cambiar el texto personalizado a continuación de return por el que tú quieras.

Añadir enlaces personalizados debajo del formulario de la pantalla de acceso de WordPress

Ya te habrás dado cuenta de que, por defecto, WordPress muestra varios enlaces bajo el formulario de la pantalla de acceso:

• ¿Has olvidado tu contraseña?
• Ir a ‘Nombre de tu web’
• Política de privacidad (si la has creado y configurado correctamente en los ajustes de WordPress)

Pero ¿y si quieres añadir tus propios enlaces personalizados en ese área?, pues para eso estamos.

function ayudawp_mi_login_enlaces() { ?>
<p style="text-align: center; margin-top: 1em;">
<a style="color: #4da28f; text-decoration: none;" href="https://ayudawp.com/">Si quieres aprender WordPress desde cero visita el blog &rarr;
</a>
</p>
<?php }
add_action('login_footer','ayudawp_mi_login_enlaces');

En este código estamos añadiendo, con algo de estilo por supuesto, un texto con enlace personalizado. Simplemente cambia el texto y el enlace, incluso los colores, por lo que tú quieras, o incluso añade otros párrafos con más enlaces, por ejemplo:

function ayudawp_mi_login_enlaces() { ?>
<p style="text-align: center; margin-top: 1em;">
<a style="color: #4da28f; text-decoration: none;" href="https://ayudawp.com/">Si quieres aprender WordPress desde cero visita el blog &rarr;
</a>
</p>
<p style="text-align: center; margin-top: 1em;">
<a style="color: #4da28f; text-decoration: none;" href="https://mantenimiento.ayudawp.com/">También ofrecemos servicios de mantenimiento WordPress &rarr;
</a>
</p>
<?php }
add_action('login_footer','ayudawp_mi_login_enlaces');

Lo que obtienes es esto:

Imagen personalizada de fondo en la pantalla de acceso de WordPress

Otra personalización muy chula que puedes hacer es añadir una imagen de fondo personalizada en la pantalla de login de WordPress.

El código a añadir sería así:

function ayudawp_mi_login_fondo() {
echo '<style type="text/css">
body.login{
background-image: url( "https://aulawp.com/web/wp-content/uploads/2021/02/section-bg-2.jpg" )!important;
}
</style>';
}
add_action('login_head', 'ayudawp_mi_login_fondo');

Solo tienes que cambiar la URL de la imagen de fondo del ejemplo por la que tú quieras poner.

Y obtendrías algo así de impactante…

Color de fondo y formulario personalizados en la pantalla de acceso de WordPress

Si prefieres algo menos radical que añadir una imagen de fondo, una opción muy buena sería personalizar los colores de fondo y del formulario de la pantalla de login de WordPress.

Se haría con un código como este:

function ayudawp_colores_fondo_login() {
echo '<style type="text/css">
body { background: #b6d5ed; }
.login form { background: #fcf499; }
</style>';
}
add_action('login_head','ayudawp_colores_fondo_login');

La pantalla de acceso quedaría tal que así…

Para el ejemplo he puesto unos colores quizás demasiado llamativos, pero esos ya los cambias tú (los códigos de colores a continuación de background:) en el código a tu gusto.

Redirección personalizada tras acceder a WordPress

Por defecto, cuando cualquier usuario accede desde la pantalla de login de WordPress es enviado a la zona de administración de la web, pero ¿y si quieres que eso no funcione así?

Podríamos, como en este ejemplo, hacer una redirección condicional, dependiendo del perfil del usuario que accede:

• Si el usuario tiene perfil de administrador (administrator) redirigirle a la administración de WordPress.
• Si el usuario tiene cualquier otro perfil que no sea el de administrador redirigirle a la portada de la web.

El código sería este:

function ayudawp_mi_login_redireccion( $redirect_to, $request, $user ) {
if ( isset( $user->roles ) && is_array( $user->roles ) ) {
if( in_array('administrator', $user->roles)) {
return admin_url();
} else {
return site_url();
}
} else {
return site_url();
}
}
add_filter('login_redirect', 'ayudawp_mi_login_redireccion', 10, 3);

Funciona tal cual, no tienes que modificar nada en este código, si acaso añadir algún perfil más (editor, author) al in_array, si quieres que también a estos perfiles se les redirija a la administración.

---

Bueno, pues espero que hayas aprendido a personalizar la pantalla de acceso de WordPress a tope y que tu login ya no vuelva a ser el de siempre. Ya me contarás qué tal te ha quedado 🙂

La entrada Cómo personalizar la pantalla de acceso de WordPress sin plugins la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.