Login personalizado para WordPress

Los que trabajamos programando Themes para WordPress intentamos personalizar al máximo nuestros Themes para que los clientes tengan una experiencia de usuario completa y satisfactoria, por tanto no dejamos ningún detalle sin personalizar, una de las cosas que no pueden faltar es una pantalla de login personalizada para nuestro Theme de WordPress, y eso es lo que veremos hoy.

Crear una pantalla de login personalizada para un Theme de WordPress es relativamente sencillo, solo necesitamos de un par de funciones y una hoja de estilos nueva que defina los estilos de la pagina de login, hoy os mostraremos como llegar a crear la pagina de login que utilizamos en este blog, pero lógicamente os daremos las llaves para que vosotros podáis llegar a personalizar al máximo las vuestras, el resultado final será el siguiente.

Bien, una vez visto el resultado de nuestro ejercicio de hoy pasemos a realizarlo, en primer lugar y como siempre, localizamos nuestro archivo funtions.php en la raíz de nuestro Theme y lo abrimos con nuestro ID de programación favorito, o si ya usamos un Plugin de funciones pues lo abrimos y copiamos y pegamos el siguiente código al final del todo.




<?php
//pagina de login personalizada para el Theme
function tm_login_css() {
      
wp_enqueue_style'tm_login_css'get_template_directory_uri() . '/css/login.css'false );
}
//enlace del logo hacia home del site
function tm_login_url() {  
    return 
home_url();
}
//nombre del site en el ALT del logo
function tm_login_title() {
    return 
get_option'blogname' );
}
add_action'login_enqueue_scripts''tm_login_css'10 );//cambio css
add_filter'login_headerurl''tm_login_url' );//cambio enlace
add_filter'login_headertitle''tm_login_title' );//cambio ALT
?>

Como podemos ver en primer lugar creamos la función tm_login_css, esta función lo que hace es llamar a la nueva hoja de estilos para la pagina de login que nosotros más adelante veremos, luego creamos la función tm_login_url que cambia la url de la imagen por la del site en sí, por último creamos la función tm_login_title que cambia el alt de la imagen por el nombre del site que tengamos puesto en el admin, y para finalizar añadimos los filtros que completan las funciones.

Y ahora pasamos al CSS para nuestra pantalla de login personalizado para WordPress, lo primero que tenemos que hacer es ir a la raíz de nuestro Theme, si no la tenemos creada deberemos crear una carpeta llamada CSS, ahora con nuestro ID de programación favorito creamos un archivo CSS vacío y le damos el nombre de login.css, lo guardaremos en la carpeta que acabamos de crear y dentro de el copiamos y pegamos el siguiente código.




<style>
/* Estilos para personalizar la pantalla de login de WordPress*/
* {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
html,body {
    height:100%;
}
body.login {
    background:#000;
    height:100%;
}
.wp-core-ui .button-primary {
    -webkit-box-shadow:0 5px 50px #2c78af;
    -moz-box-shadow:0 5px 50px #2c78af;
    box-shadow:0 5px 50px #2c78af;
}
.login input {
    -webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}
.login input [type=text ]:focus,.login input [type=password ]:focus {
    border-color:#f1399b !important;
}
.login input.button-primary {
    text-transform:uppercase;
    font-weight:900;
    padding:5em;
    border-radius:0;
}
.login h1 a {
    background:transparent url( "../images/login.png") left top no-repeat !important;
    width:260px;
    height:69px;
    border-radius:5px;
    overflow:hidden;
    display:block;
}
.login h1 a:hover {
    -webkit-box-shadow:0 5px 50px #2c78af;
    -moz-box-shadow:0 5px 50px #2c78af;
    box-shadow:0 5px 50px #2c78af;
}
.login form {
    -webkit-box-shadow:0 5px 50px #2c78af;
    -moz-box-shadow:0 5px 50px #2c78af;
    box-shadow:0 5px 50px #2c78af;
    background:#111;
    background: -moz-linear-gradient(top, #404040, #000000);
    background: -webkit-linear-gradient(top, #404040, #000000);
    background: -o-linear-background(top, #404040, #000000);
    background: linear-background(top, #404040, #000000);
}
.login .message {
    border:0;
    background-color:#222d39;
    color:#fff;
    -webkit-box-shadow:0 5px 50px #2c78af;
    -moz-box-shadow:0 5px 50px #2c78af;
    box-shadow:0 5px 50px #2c78af;
}
#login #backtoblog,#login #nav {
    text-align:center;
}
#login #backtoblog,#login #backtoblog a,#login #nav,#login #nav a {
    color:#fff;
}
#login #backtoblog a:hover,#login #nav a:hover {
    color:#222d39;
}
#login #nav a:first-child {
    font-weight:bold;
}
#login #backtoblog {
    font-weight:bold;
}
</style>

Como podéis ver es un CSS bastante simple por lo que no ahondaremos en su explicación, lo único que si veremos es la importancia de crear una imagen con un tamaño no superior a 260*69 pixeles y que la tendremos que guardas en la carpeta images de nuestro Theme con el nombre login.png, esto lógicamente lo podéis cambiar si queréis claro, y bueno, a partir de este CSS ya podéis ir jugando para adaptar vuestra pagina de login personalizado a vuestro gusto.

27 abril, 2020 por ricard

ricard
Soy Ricard FS, me dedico a la programación desde el año 2000, me dediqué en pleno a WordPress desde el año 2015, ahora creo Plugins y Theme para WordPress desde código cero, y me gusta la divulgación de código, por ello la creación de este blog.

Deja tu comentario

Deja una respuesta

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

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: