En este tutorial aprenderemos a enlazar un css al login de wordpress pudiendo configurar así el aspecto de nuestro login personalizando también el de registrarse y el de recuperar contraseña.

Añadir un css para personalizar el login de wordpress.

Para enlazar un css (hoja de estilos en cascada) a nuestro login de wordpress tendremos que ir al archivo functions.php dentro del tema activo e introducir la siguiente función:

function my_login_stylesheet() {wp_enqueue_style( ‘custom-login’, get_stylesheet_directory_uri() . ‘/css/myStylesheet.css’ );}add_action( ‘login_enqueue_scripts’, ‘my_login_stylesheet’ );

Esta función crea una función donde introduce en la cola de scripts de wordpress un script que llamará al css en cuestión para utilizar las personalizaciones de este. Esta función se introduce mediante otra llamada add_action(‘cola_de_scripts’,’función_de_nuestro_css’).

También podemos hacer cambios sin necesidad de introducir una hoja de estilos en cascada como personalizar solo la imagen del logo o bien la url a la que envía este. Aún así siempre es recomendable y más limpio hacerlo todo desde una hoja de estilos asociada.

Para poder conocer las clases, etiquetas

Personalizar solo url del logo del login de nuestro wordpress.

Crearemos una función que devuelva una url concreta.

function mi_logo_personalizado_url() {return ‘http://www.google.es';}add_filter( ‘login_headerurl’, ‘mi_logo_personalizado_url’ );

Si lo que queremos hacer es que vaya a alguna parte de nuestra web podemos hacer uso de la función get_bloginfo(‘url’) que devolverá una url relacionada con nuestro sitio. Por ejemplo si introducimos la siguiente función devolverá la página principal de nuestro wordpress.

function mi_logo_personalizado_url() {return get_bloginfo( ‘url’ );}add_filter( ‘login_headerurl’, ‘mi_logo_personalizado_url’ );

 

Introducir código en funciones

Incluso podemos introducir código css/html/js en estas funciones para que hagan algo concreto como por ejemplo cambiar la imagen y/o crear un alert().

function my_login_logo() { ?><script type=”text/javascript”>alert(“Hello world”);</script><style type=”text/css”>#login h1 a, .login h1 a { background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/munartis.png); padding-bottom: 30px; } </style> <?php } add_action( ‘login_enqueue_scripts’, ‘my_login_logo’ );

Cambiar texto que sale al tener el mouse quieto encima del logo

Creamos una función que devuelve el texto que queremos que salga al mantener el mouse encima del logo.

function mi_logo_personalizado_url_titulo() {return ‘Enterprise Consulting & Training';}add_filter( ‘login_headertitle’, ‘mi_logo_personalizado_url_titulo’ );

Y de esta forma se pueden configurar muchas partes del login que también se pueden configurar desde el css. Solo que aquí se introducen desde una cola de scripts que se ejecutan al abrir la página en cuestión.

El personalizar el login también personaliza el registro y el recuperar contraseña ya que forman parte del mismo grupo.