Este artículo es continuación del anteriormente publicado en ZeppelinX, Personalizar la página de inicio de sesión de WordPress.
Aspecto final de la página de inicio de sesión de WordPress
Código PHP
- Ubicación del archivo de funciones PHP en WordPress: RaizDelSitio/wp-content/themes/TemaActivo/functions.php.
- Enlace al archivo con el código: Funciones PHP
- El código: El código a añadir al archivo functions.php es el siguiente:
/* Indicar la hoja de estilos para el login */ Function my_custom_login () { echo '<link rel="stylesheet" type="text/css" href="https://www.midominio.com/comun/login/custom-login-styles.css" />'; } add_action('login_head', 'my_custom_login'); /* Cambiar el enlace hacia el que apunta nuestro logo * en este caso, apuntamos a nuestro propio sitio web */ function my_login_logo_url() { return get_bloginfo( 'url' ); } add_filter( 'login_headerurl', 'my_login_logo_url' ); /* Modificamos el ALT text de nuestro logo */ function my_login_logo_url_title() { return 'El nombre de nuestro sitio e información del mismo'; } add_filter( 'login_headertitle', 'my_login_logo_url_title' ); /* Ocultar el mensaje de error por defecto cuando el usuario o contraseña introducidos son incorrectos e introducir un texto personalizado */ function login_error_override() { return 'Datos de inicio de sesión incorrectos.';} add_filter('login_errors', 'login_error_override');
Código para la hoja de estilos
- Ubicación de la hoja de estilos: RaizDelSitio/comun/login/custom-login-styles.css.
- Enlace al archivo con el código: Hoja de estilo de pagina de inicio de sesión de WordPress
- El código: El código del archivo custom-login-styles.css es el siguiente:
/* Fondo personalizado con una imagen */ body.login { background-image: url('banner_codigo_binario.png'); background-repeat: repeat; background-attachment: fixed; background-position: center center; background-size: 900px !important; } /* Remplazar el logo de WordPress */ .login h1 a { width: auto !important; background-image: url('zeppelinux2.png'); background-size: auto !important; } /* Modificar estilo del formulario: Transparente y esquinas de los bordes redondeadas */ form { position: relative; width: 250px; margin: 0 auto; background: rgba(130,130,130,.3) !important; padding: 20px 22px; border: 1px solid; border-top-color: rgba(255,255,255,.4) !important; border-left-color: rgba(255,255,255,.4) !important; border-bottom-color: rgba(60,60,60,.4) !important; border-right-color: rgba(60,60,60,.4) !important; -webkit-border-radius: 8px; } /* Personalizar color y formato del texto del formulario */ .login label { font: bold 14px; color: #ffffff; } /* Personalizar los cuadros de texto para el nombre de usuario y password */ .login input[type="text"], .login input[type="password"] { width: 212px; border: 1px solid; border-bottom-color: rgba(255,255,255,.5); border-right-color: rgba(60,60,60,.35); border-top-color: rgba(60,60,60,.35); border-left-color: rgba(80,80,80,.45); background-color: rgba(0,0,0,.2); background-repeat: no-repeat; padding: 8px 24px 8px 10px; font: bold .875em/1.25em sans-serif; letter-spacing: .075em; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.1) !important; margin-bottom: 19px; -webkit-border-radius: 8px; } /* Oscurece el fondo de los cuadros de texto nombre de usuario y password al recibir el foco */ form input:focus { background-color: rgba(0,0,0,.4) !important; } /* Personalizar el botón submit */ .login input[type="submit"] { width: 120px; float:right; margin-bottom: 0; color: #ffffff; font-weight: bold !important; letter-spacing: .05em; text-shadow: 0 1px 0 #133d3e; text-transform: uppercase; background-color: rgba(17,123,156,.5) !important; border-top-color: #9fb5b5; border-left-color: #608586; border-bottom-color: #1b4849; border-right-color: #1e4d4e; cursor: pointer; -webkit-border-radius: 8px; } .login input[type="submit"]:hover { color: #717171 !important; font-weight: bold !important; } /* Eliminar el enlace de contraseña perdida */ p#nav { display: none; } /* Eliminar el enlace de Volver a la página de inicio del sitio */ /* p#backtoblog { display: none; } */ /* Personalizar enlace volver al sitio */ /* Personalizar la fuente del enlace */ p#backtoblog { font-size: 14px !important; font-weight: bold !important; } /* Personalizar las pseudo-clases del enlace */ p#backtoblog a:link, p#backtoblog a:visited, p#backtoblog a:active { color: #ffffff; } p#backtoblog a:hover { color: #717171 !important; }
Espero que este artículo os haya sido de utilidad. Si pensáis que podéis colaborar para mejorar este artículo, que hay algo erróneo en él o simplemente deseáis comentarlo, por favor, dejad vuestra opinión más abajo.
Configuración de privacidad y de cookies.
Deja una respuesta