Geek the Planet


CSS no image

Published on Marzo 3rd, 2009 | by Angelfire

2

How To: Personalizar el login de wordpress

Personalizar la pantalla de login de wordpress (por donde accedemos a la dashboard) es muy fácil, recuerdo que hace ya algún tiempo, creo que para la versión 2.5 estuvo muy de buena cambiarle la apariencia al formulario de login, simplemente cambiando un par de imágenes por algo más personalizado.

En general a esta área no deberiamos prestarle mucha atención, pues en teoria el único visitante de esta zona deberia ser el administrador, sin embargo es tán fácil darle un aspecto más profesional que de seguro la mayoria no se resistiran.

Lo primero que tiene que revisar es que el theme que están usando contenga en fichero functions.php, sino pueden crearlo abriendo el block de notas y guardando un archivo con ese nombre.

Deben agregar el siguiente código:

<?php
function custom_login(){
echo '<link rel="stylesheet" type="text/css" href=" '.  get_bloginfo('template_directory') . /custom-login.css" />';
}
add_action('login_head', 'custon_login');
?>


Debemos crear también un fichero con el nombre custom-login.css, allí es donde pondremos nuestro código css. El fichero debe estar en la carpeta principal del theme.

Un ejemplo de un CSS que han hecho es el siguiente:

/* Custom Login Styles */

html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;} /* Page background. Can't use the body tag for this! */
h1 a { /* Title image (The "WordPress Logo"). Remember to update the height and width your image's dimensions */
background:url(../images/pbd-title.png) 0 0 no-repeat;
width:415px;
height:70px;
}

body.login {border-top-color:#dff4fc;} /* Top bar background color */
.login p#backtoblog a:link, .login p#backtoblog a:visited {color:#17272d;} /* Link effects in top bar */
.login p#backtoblog a:hover, .login p#backtoblog a:active {color:#17272d;text-decoration:underline;} /* Rollover link effects in top bar */

Este es sólo un ejemplo, lo pueden ver funcionando en http://www.problogdesign.com/wp-admin.

wp-admin wordpress

Esta fue una personalización sencilla, sin embargo se pueden hacer mucho más complejas, como esta:

wp-login wordpress

Ya es cuestion de creatividad de uds ver que cosas interesantes pueden hacer, eso sí, se debe tener algo de manejo de CSS.

Visto en: WordPress: Inicio de sesión 100% personalizado

Tags: , , , ,


About the Author

Systems Engineering, Computer Systems Specialist, Social Engineering Specialist. Social Media Analyzer. Usability and SEO enthusiasm (Este es mi perfil de Twitter...)



2 Responses to How To: Personalizar el login de wordpress

  1. jose luis says:

    hola, muy bueno el tutorial, pero tengo una duda y me gustaría que me ayudaras.

    Bueno sabes que wordpress tiene la ventaja de que los invitados puedan registrarse, no es asi? bueno en los campos que aparece para registrarse se pueden cambiar o agregar más campos???
    se que si, pero me podrías ayudar con algun tutorial???
    Gracias
    espero que me ayudes.

  2. Pordo says:

    Excelente! Aporto un par de modificaciones en el script php porque me daba un error:

    <?php
    function custom_login(){
    echo "”;
    }
    add_action(‘login_head’, ‘custom_login’);
    ?>

    (Las modificaciones son las comillas, y que decia “custon” en vez de custom)

    Saludos!

Back to Top ↑
  • Comentarios recientes

  • Miniposts

    • iOS 8 disponible para descargar

      Hoy se anunció de manera oficial iOS 8, la fecha de llegada será el próximo 17 de septiembre. En iPhonehacks han recopilado los enlaces de descarga directo para los diferentes dispositivos que soportan la nueva versión del sistema operativo. Así que para quienes no desean esperar, ya pueden acceder a la versión Golden Master ...

    • Festigame Colombia 2014

      El festival de videojuegos, cultura gamer y entretenimiento familiar más grande de América Latina ha llegado a nuestro país. Festigame que es un evento creado en Chile en 2012, se ha convertido en el evento anual donde las marcas más importantes de la industria presentan sus últimos productos en el ...

    • Peter Griffin también tiene cuenta en Instagram

      El protagonista de la serie de humor, Padre de Familia, Peter Griffin ha inaugurado su presencia en la red social de fotografía con divertidas fotografías de su vida, y a pesar de ser un personaje de ficción ya ha superado los 200.000 seguidores en tan sólo dos semanas. Son unas fotos bastante divertidas, las ...

    • Manual y documentación de Node.js para Android

      Node.js se ha venido haciendo bastante popular en los últimos años, cada vez son más los usos que como desarrolladores web le damos a esta tecnología. La siguiente aplicación es el manual y la documentación de Node.js, que contiene los siguientes temas: About these Docs Synopsis Assertion Testing Buffer C/C++ Addons Child Processes Cluster Console Crypto Debugger DNS Domain Events File System Globals HTTP HTTPS Modules Net OS Path Process Punycode Query Strings Readline REPL Stream String Decoder Timers TLS/SSL TTY UDP/Datagram URL Utilities VM ZLIB

    • Star Wars Traceroute

      ¿Qué pasa cuando un ingeniero está muy desocupado? pues pasan cosas como esta: Mac y Linux Van a la consola y escriben: traceroute 216.81.59.173 Windows Buscan el CMD y escriben: tracert 216.81.59.173 El resultado es interesante y sorprendente. Si quieren ver la salida de la ejecución del comando, pueden ver el gist Ver más: Beagle Network

  • Comunicados - Notas de Prensa