És importante al entregar un sitio web realizado en WordPress, cuidar los pequeños detalles como personalizar el espacio de adminstración para hacerlo más amigable para el cliente. Sobretodo si el cliente debe gestionar el contenido por el mismo.

Este es el primero de una serie de entradas en las que veremos como personalizar algunos aspectos importantes del panel de administración de WordPress.

Añadiendo CSS

Para personalizar la pantalla de login tenemos que añadir un simple código php en el functions.php de nuestra theme:

function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/custom-admin/custom-login.css" />';
}
add_action('login_head', 'custom_login');

Este código incluye un archivo css, situado en una carpeta custom-admin.

Dándole estilos

Ahora veamos un ejemplo de css para modificar el aspecto de nuestro login

html {
	background-color: #FFF !important;
}

body {
	background-color: #FFF;
	color:#333;
}

h1 a {
	background:url('../images/logo.png') 0 0 no-repeat !important;
	width:250px !important;
	height:90px !important;
	margin:0 auto !important;
}
input.button-primary, button.button-primary, a.button-primary {
	background:#A6272A;
	border: 1px solid #A6272A;
}

.login #nav a, .login #backtoblog a {
    color: #A6272A !important;
    text-decoration: none;
      font-weight: bold;
}

Es importante la utilización del !important en algunos estilos para asegurarnos que sobrescribimos los estilos por defecto de WordPress
Con estos sencillos pasos podemos adaptar el login al estilo de nuestra pagina y incluir, el logo de nuestro cliente, por ejemplo.

Ya, par acabar…

Para acabar, aunque el <h1> de nuestro login ya muestre un logo personalizado, aún hace enlace a WordPress.org esto lo podemos solucionar añadiendo estas últimas lineas:

function h1_custom_url(){
	return (bloginfo( 'wpurl' ));
}
add_filter('login_headerurl', 'h1_custom_url');

Con esto definimos que nuestro logo enlace a la pagina inicial de nuestra página.

Algunos ejemplos de Custom admin: