• Ir a navegación principal
  • Ir al contenido principal

CarlosMR

Desarrollo web WordPress

  • Sobre mí
  • Servicios
  • Recursos
  • Contactar

Como crear un login personalizado en WordPress

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://carlosmr.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://carlosmr.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://carlosmr.com/wp-content/mu-plugins/images/logocarlosmr.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://carlosmr.com/wp-content/mu-plugins/images/logocarlosmr.png');

Y modificar “logocarlosmr.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:

Login de WordPress personalizado con logo y enlace propios
Login de WordPress personalizado

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.

LinkedIn0Tweet0Facebook0Email0

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Listo para dar el paso?

Contacta conmigo sin compromiso, hablemos de tu proyecto

CONTACTAR

Carlos MR © 2019-2021 · Aviso legal · Hecho con por Carlos MR

Utilizamos cookies para ofrecerte la mejor experiencia en nuestra web.

Puedes aprender más sobre qué cookies utilizamos o desactivarlas en los ajustes.

Share this ArticleLike this article? Email it to a friend!

Email sent!
CarlosMR
Powered by  GDPR Cookie Compliance
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.