Quizás si es una web para nosotros nos de igual no personalizarla, pero si la hacemos para un cliente es un plus de creatividad que podemos ofrecerle y de seguro que le va a gustar.
En este artículo aprenderemos a cambiar el logo de WordPress por el nuestro e introducir CSS para personalizar el resto del panel. Y lo haremos de una forma que cuando tengamos que actualizar nuestro WordPress o tema no perdamos los cambios realizados. Para los que no quieran introducir código, aconsejaré algunos plugins tanto gratuitos como de pago.
Personalizar el panel del login de WordPress de forma manual
Como hemos dicho anteriormente, el panel por defecto de WordPress se nos muestra de la siguiente manera. Puede ser que se muestre el logo de vuestro theme comprado.
Lo primero que haremos es subir nuestro logo en la sección de Medios de nuestra administración de WordPress o bien en una carpeta de imágenes que tengamos en el Child Theme.
Luego abrimos el archivo functions.php de nuestro Child Theme y pegamos el siguiente código.
// Poner logo en el login
function my_login_logo() { ?>
<style type=»text/css»>
.login-action-login.login h1 a {
width: 160px !important;
background-image: url(‘poner-url-de-nuestro-logo’) !important;
background-size: cover !important;
height: auto !important;
min-height: 170px !important;
}
a:focus {
box-shadow: 0 0 0 0px transparent !important;
}
</style>
<?php }
add_action( ‘login_enqueue_scripts’, ‘my_login_logo’ );
En el propio código modificar la url, la anchura y la altura para que el logo quede a vuestro gusto. Si no se mostrara el logo modificar la clase CSS. Por ahora el resultado sería el siguiente.
Ahora vamos a personalizar el resto del panel y para ello vamos a añadir una hoja de estilos CSS. Primero creamos un archivo llamado por ejemplo style-login.css dentro de nuestro Child Theme.
Luego pegamos el siguiente código a continuación del anterior en nuestro archivo functions.php.
// Añadir hoja de estilo personalizar el panel del login
function my_login_stylesheet() {
wp_enqueue_style( ‘custom-login’, get_stylesheet_directory_uri() . ‘/style-login.css’ );
}
add_action( ‘login_enqueue_scripts’, ‘my_login_stylesheet’ );
Cambiar la ruta en caso de que pongáis el archivo en un sitio distinto al del ejemplo. En esta nueva hoja de estilos empezaremos a personalizar el panel del login de forma más creativa, sin ayuda de plugins y sin perder los cambios cuando tengamos que actualizar tanto el tema de la plantilla como la versión de WordPress.
Ahora ya depende de vosotros el resultado final. Con un poco de imaginación conseguiremos que el panel del login de WordPress quede más presentable, original y creativo.
Personalizar el panel del login de WordPress con ayuda de plugins
Otra opción para poder personalizar el panel del login es a través de algún plugin, os recomiendo los siguientes:
• Customize WordPress Login Page
Un gran plugin que permite cambiar el color de fondo, la imagen de fondo, el formulario de acceso y su posición, el tamaño de la fuente, agregar iconos de redes sociales y muchas más características.
• Erident Custom Login and Dashboard
Con este plugin podemos personalizar completamente y de forma fácil el panel de inicio de sesión de WordPress. Añadir el logo, cambiar el fondo con imágenes, colores, etc. Rápido y buen rendimiento.
• WordPress Custom Login Theme Page – $18
Una maravilla de plugin de pago muy completo. Si no os importa gastar un poco, ya que os servirá para todas las páginas web que queráis, este es vuestro plugin sin duda.
Hay muchos otros plugins gratuitos y de pago que también están muy bien, si os interesa alguno echar una ojeada antes tanto a estos como a otros que podáis encontrar.