¿Cómo personalizar el login de WordPress?

Si quieres saber como personalizar el login de WordPress, puedes hacerlo fácilmente creando tu propio plugin de funciones en el que añadir las modificaciones que prefieras. Aprende como hacerlo fácilmente con este completo videotutorial.

A continuación repasamos todos los pasos que hemos visto en el videotutorial de hoy:

Si quieres personalizar la página de login de tu instalación de WordPress, solo tienes que seguir los siguientes pasos:

Accede a través de tu cliente de FTP a tu instalación de WordPress, y dirígete a la carpeta wp-content.
Busca la carpeta mu-plugins, y en caso de no encontrarla, créala tú directamente.
Dentro de la carpeta mu-plugins, crea un archivo custom.php que contendrá tu plugin de funciones.
Edita el archivo custom.php que acabas de crear con tu editor de código, por ejemplo Coda.
Una vez en él, inserta el siguiente código para darle formato a tu plugin de funciones:

 <?php 
 /* 
 Plugin Name: Personalización de tudominio.com 
 Plugin URI: https://tudominio.com 
 Description: Plugin con las funciones personalizadas para la web de tudominio.com 
 Version: 1.0.0 
 Author: Tu nombre 
 Author URI: https://tudominio.com 
 License: GPL 2+ 
 License URI: https://tudominio.com 
 */

A continuación, inserta el siguiente código para personalizar la página de login de tu instalación de WordPress:

<?php

//Añade capa de personalización al login de WordPress

function martin_login_logo() { 
?>
 <style type="text/css">
 #login h1 a, .login h1 a {
 background-image: url('https://martin.click/files/angel-martin-login-logo.svg');
 margin-bottom: 0;
 background-size: 300px;
 width: 300px;
 margin-left: auto;
 margin-right: auto;
 }
 .login form {
	 border-radius: 20px;
 }
 .wp-core-ui .button-primary {
	 background: #f16558 !important;
	 border-color: #f16558 !important;
	 box-shadow: 0 1px 0 #f16558 !important;
	 text-shadow: 0 -1px 1px #f16558, 1px 0 1px #f16558, 0 1px 1px #f16558, -1px 0 1px #f16558 !important;
 }
 body.login {background-color: #f16558;} .login #backtoblog a, .login #nav a {color: #fff !important}
 </style>
<?php }
add_action( 'login_enqueue_scripts', 'martin_login_logo' );


function martin_login_logo_url_title() {
    return 'Pon aquí el texto que quieras';
}
add_filter( 'login_headertitle', 'martin_login_logo_url_title' );


function martin_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'martin_login_logo_url' );


function martin_no_wordpress_errors(){
  return 'Ups! Algo has puesto mal...';
}
add_filter( 'login_errors', 'martin_no_wordpress_errors' );


function martin_eliminar_vibracion_login() {
	remove_action('login_head', 'wp_shake_js', 12);
}
add_action('login_head', 'martin_eliminar_vibracion_login');

Cuándo hayas añadido tu personalización, guarda los cambios.

¡Así de simple y así de fácil! Una vez hayas completado todos estos pasos, tendrás tu página de login de WordPress completamente personalizada. Y además, habrás aprendido a crear tu plugin de funciones. ¿No es genial?

Una vez hayas aplicado los cambios, tu página de login puede tener un aspecto similar a éste.

Resumiendo…

Como ves, realizar cambios en tu instalación de WordPress no tiene porqué ser algo complicado. Al utilizar tu propio plugin de funciones, estás superponiendo tus funciones sin alterar una sola línea de código del core de WordPress.

Espero que te haya resultado útil este tutorial. Y si tienes alguna pregunta sobre como personalizar tu WordPress o como puedes crear tu propio plugin de funciones de WordPress, no dudes en contactar conmigo. Nos vemos la próxima semana, con un nuevo videotutorial. Hasta entonces… ¡feliz semana! 😉

¿Cómo personalizar el login de WordPress?

Resumiendo…

Ángel Martín