Micaela 2 de marzo de 2009 a las 09.30
   Imprimir artículo
elWebmaster.com

WordPress: Inicio de sesión 100% personalizado


inicio_sesion_portadaEl login del panel de administración de WordPress es en general siempre el mismo. Pocos se toman la molestia de modificarlo, personalizándolo para que se amalgame con el diseño de nuestro blog. Lo cierto es que personalizar el inicio de sesión es verdaderamente simple.

Mediante este código podrás añadir tu propio CSS a la página de registro y hacerla lucir como desees. Y lo mejor de todo es que los cambios se realizarán en los archivos de tu tema por lo que permanecerán aunque cambies la versión de WordPress. A continuación, los 3 pasos para lograrlo.

1. Edita Functions.php

inicio_sesionTu tema puede que incluya o no el archive functions.php. Si lo incluye simplemente añade el siguiente código al final de este archivo. Si no lo tiene, deberás crear un archivo en blanco en el bloc de notas y guardarlo con ese nombre dentro de la carpeta de tu tema.

Recuerda no dejar ningún espacio antes o después de las etiquetas <?php and ?>.

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

2. Edita los archivos de tu tema

Crea una carpeta dentro en la carpeta de tu tema con el nombre custom-login para incluir tus nuevos estilos CSS y las imágenes que puedas llegar a usar.

Y dentro de esa carpeta crea una nueva hoja de estilos llamada custom-login.css.

3. Agrega nuevas reglas CSS

El archivo custom-login.css se cargará cada vez que se visites el inicio de sesión de tu blog. Esto quiere decir que cualquier regla que añadas aquí se aplicará en la página de registro.

Si añades nuevas imágenes puedes almacenarlas en tu carpeta custom-login.

Sin embargo, si deseas reutilizar imágenes de tu tema, simplemente utiliza reglas CSS como la siguiente:

html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;}

Este es un sencillo ejemplo de lo que se puede lograr:

/* Estilos personalizados para el Inicio de Sesión */

html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;} /* Fondo de la página. ¡No puedes usar el tag body para esto! */
h1 a { /* Imgen de título (El logo de "WordPress"). Recuerda actualizar el ancho y alto en las dimensiones de tu imagen */
background:url(../images/pbd-title.png) 0 0 no-repeat;
width:415px;
height:70px;
}

body.login {border-top-color:#dff4fc;}    /* Color de fondo de la barra superior */
.login p#backtoblog a:link, .login p#backtoblog a:visited {color:#17272d;}    /* Efectos de enlaces para la barra superior */
.login p#backtoblog a:hover, .login p#backtoblog a:active {color:#17272d;text-decoration:underline;}    /* Efectos de enlace con rollover para la barra superior */

Fuente: Pro Blog Design


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (7)

  1. Alejandro dice:

    Juaaa jajaja justo necesitaba para hoy esta info, y la subiste hoy mismo, genial, gracias me sirvio de mucho. 😀

  2. Angelfire dice:

    Creo que cometieron errores en la traducción, en el script php se habla de una carpeta custom-login y un fichero CSS custom-login.css, pero en los puntos 2 y 3 se habla de una carpeta login-personal y un fichero CSS login-personal.css

  3. Alejandra dice:

    Gracias! Fue una pequeña equivocación con los nombres de los archivos y carpetas, pero ya está solucionado!

  4. sadia dice:

    !! LA VERDAD QUE LA WEB DE WORDPRESS ES SUPER BUENO ES INCREIBLE QUE UN SITIO ASI SEA GRATIS LOS SALUDA ATTE: SADIA

  5. hellover dice:

    no sé si yo estoy haciendo algo mal, o es que sólo os referíais a cambiar unas pocas propiedades, pero… a través de este método solo estoy pudiendo cambiar ciertas cosas, hay otros muchos estilos que no pueden cambiarse desde el “custom-login.css” por que ya están definidos en otras hojas de estilos que incluye wordpress, como: login.css, colors-fresh.css, etc… incluidas en la carpeta wp-admin y que en muchos casos se anteponen a lo que podamos definir en “custom-login.css” para la misma clase, ya que llevan el important!

    es normal q me suceda esto? o estoy metiendo la gamba por algún lado!?

  6. loogares dice:

    Muy interesante al fin encuentro una solucion

  7. Sarah dice:

    Se pueden realizar cambios de manera gratuita? He intentado hacerlo pero me pide que pague $15 para grabar los cambios, es asì en todos los blogs?

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder