En este tutorial aprenderás a crear un login personalizado en WordPress mediante un plugin personalizado. Esto te permitirá personalizar un poco más tu web y darle un toque más profesional.
Para comprender el proceso correctamente recomiendo echarle un vistazo a este otro artículo sobre Como crear un plugin en WordPress ya que está muy relacionado con el tema.
Para poder hacerlo solo necesitamos seguir los siguientes pasos:
Localizamos o creamos la carpeta «mu-plugins»
Para crear el plugin tendremos que acceder a la web por medio de un gestor FTP o similar. Una vez en nuestra instalación de WordPress buscaremos la carpeta «wp-content», dentro buscaremos la carpeta «mu-plugins» (que en caso de no existir deberá crearse) y por último dentro de esta última crearemos los archivos correspondientes, como se comenta en el artículo Como crear un plugin en WordPress.
Creamos nuestro propio plugin personalizado
Para que el plugin tenemos que crear lo siguiente.
- Un archivo «login-personalizado.php».
- Una carpeta «images» que contenga la imagen que queremos utilizar.
Puedes descargar aquí los archivos que he utilizado o crear los tuyos propios como a continuación:
Contenido del archivo «login-personalizado.php»
<?php
/**
* Plugin Name: Login Personalizado
* Plugin URI: https://https://carlosmr.com/wp-content/uploads/2021/04/pedro-lastra-Nyvq2juw4_o-unsplash.jpg.com
* Description: Personaliza el login por defecto de WordPress modificando la imagen y URL.
* Version: 1.0
* Author: Carlos Martínez Romero
* Author URI: https://https://carlosmr.com/wp-content/uploads/2021/04/pedro-lastra-Nyvq2juw4_o-unsplash.jpg.com
* License: GPL+2
*/
// Modificar el logo del login
add_action('login_enqueue_scripts','cmr_login_logo');
function cmr_login_logo() {
?>
<style type="text/css" media="screen">
body.login div#login h1 a {
background-image: url('https://https://carlosmr.com/wp-content/uploads/2021/04/pedro-lastra-Nyvq2juw4_o-unsplash.jpg.com/wp-content/mu-plugins/images/logohttps://carlosmr.com/wp-content/uploads/2021/04/pedro-lastra-Nyvq2juw4_o-unsplash.jpg.png');
height: 100px;
width: 100%;
background-size: 100%;
}
</style>
<?php
}
// Modificar la url del logo
add_filter ('login_headerurl','cmr_login_logo_link');
function cmr_login_logo_link($url) {
return home_url();
}
// Modificar el título del logo
add_filter('login_headertitle','cmr_login_logo_title');
function cmr_login_logo_title($message) {
$message = get_bloginfo('name');
return $message;
}
?>De este archivo tienes que buscar el siguente enlace:
background-image: url('https://https://carlosmr.com/wp-content/uploads/2021/04/pedro-lastra-Nyvq2juw4_o-unsplash.jpg.com/wp-content/mu-plugins/images/logohttps://carlosmr.com/wp-content/uploads/2021/04/pedro-lastra-Nyvq2juw4_o-unsplash.jpg.png');Y modificar «logohttps://carlosmr.com/wp-content/uploads/2021/04/pedro-lastra-Nyvq2juw4_o-unsplash.jpg.png» para que se corresponda con el nombre de tu imagen.
Una vez se han creado los archivos en la web no hace falta hacer nada más ya que los cambios se aplicarán directamente, accede al login y verifica que todo es correcto.
El resultado será algo similar a esto:
Espero haberte sido de ayuda y si te ha servido estaría genial que compartieras este tutorial con alguien a quien le pueda interesar. Muchas gracias y hasta la próxima.
