Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
WordPress

Cómo personalizar el logo y el enlace del login de WordPress

Éste es el aspecto que presenta la pantalla de login para acceder al back-end de nuestro WordPress:

login WordPress

Es muy común que algún cliente nos pida personalizar esta pantalla con su logo y en esta entrada vamos a ver cómo modificar tanto el logo como el enlace de la pantalla de login de WordPress.

Hay muchos plugins para realizar ésta tarea pero si no quieres sobrecargar la web con otro plugin más, vamos a ver cómo realizar esta función añadiendo unas pocas líneas al functions.php o plugin de utilidades:

 

Cómo cambiar el logo de la página de login de WordPress

El logo de WordPress está como imagen de fondo de una etiqueta «a» que está dentro de un «<h1>» que a su vez está dentro de un «div» con la clase «login», en la hoja de estilos wp-admin/css/login.

Lo que vamos a hacer es insertar nuestro propio estilo en esta página, para que sobreescriba la hoja de estilos mencionada anteriormente. Usaremos el hook login_enqueue_scripts para insertar una etiqueta style que machaque la propiedad background-image de la etiqueta <a> que está dentro del <h1>, que a su vez está dentro del <div> con clase login.

function my_login_logo() { ?> <style type="text/css">         .login h1 a {             width: auto !important;             background-image: url("<?php echo get_stylesheet_directory_uri();?>/img/my-custom-logo.png") !important;             background-size: auto !important;         }     </style> <?php } add_action( 'login_enqueue_scripts', 'my_login_logo' );

WordPress recomienda que el tamaño del logo no exceda los 80 x 80 pixels, pero si añadimos un width: auto, así como el background-size: auto, podremos meter una imagen de unas dimensiones diferentes para adaptarlo a nuestras necesidades. Es importante poner !important para que prevalezca nuestro estilo sobre el que está definido por defecto.

 

Cómo cambiar el enlace del logo de la página de login de WordPress

También podemos cambiar el enlace del logo así como su atributo title. De esta manera podemos enviarle a la página de inicio de nuestro site en lugar de a la página oficial de WordPress. Para ello añadimos las siguientes líneas:

function my_login_logo_url() {     return home_url(); } add_filter( 'login_headerurl', 'my_login_logo_url' ); function my_login_logo_url_title() {     return 'Título del enlace'; } add_filter( 'login_headertitle', 'my_login_logo_url_title' );

 

Cómo personalizar el resto de la página del login

Podemos ir más allá y sobreescribir cualquier estilo de cualquier elemento HTML con nuestro propio CSS. Para esto usaremos el mismo hook que antes, login_enqueue_scripts, donde encolaremos nuestra propia hoja de estilos para personalizar la pantalla de login. También podremos encolar archivos JS de este modo:

function my_login_stylesheet() {     wp_enqueue_style( 'custom-login', get_template_directory_uri() . '/style-login.css' );     wp_enqueue_script( 'custom-login', get_template_directory_uri() . '/style-login.js' ); } add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

Así, con unas pocas líneas de código podemos personalizar esta pantalla de acceso al panel de administración de la web y dotarle de un aspecto acorde con la línea corporativa de nuestro cliente sin la necesidad de instalar plugins adicionales.

login personalizado

 

Puede que también te interese

Site Icon, mucho más que un favicon
Site Icon, mucho más que un favicon
En la versión 4.3 de WordPress se introdujo una nueva característica: el Site Icon. Antes de esta versión teníamos que introducir el favicon manualmente, o…
Mejora la puntuación de Google PageSpeed Insights: Reducir el tiempo de respuesta del servidor
Mejora la puntuación de Google PageSpeed Insights: Reducir el tiempo de respuesta del servidor
1. Optimizar imágenes 2. Minificar CSS y JS 3. Especificar caché de navegador 4. Habilita la compresión 5. Reducir el tiempo de respuesta del servidor…
Seguridad WordPress: proteger el acceso a wp-admin
Seguridad WordPress: proteger el acceso a wp-admin
Uno de los objetivos más importantes para cualquier atacante es el acceso al panel de administración o back-end de nuestro WordPress. Debemos aumentar la seguridad…
AJAX en WordPress, la manera tradicional
AJAX en WordPress, la manera tradicional
Comienzo una serie de entradas donde veremos cómo hacer AJAX en WordPress. SPOILER ALERT: En este primer post, con un simple ejemplo, veremos cómo hacer…