Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Personalizar Login de WordPress
#1
[Imagen: 51955d1430495023-personalizar-login-de-w...-login.png]

Personalizar la página login de wordpress es muy fácil, podemos añadir nuestro propio código css y hacer que se vea como mas nos guste. En este tutorial veremos como personalizar la página de login de wordress.

Para hacerlo crearemos una función login_css(){} dentro de nuestro archivo functions.php :

Código:
function login_css(){
   $meta_css = '<link id="login_admin_css" href="'. get_bloginfo( 'stylesheet_directory' ) .'/admin-login.css" rel="stylesheet" media="all" type="text/css">';
   echo $meta_css;
}

// Insertar el archivo admin-login.css en la pagina login
add_action('login_enqueue_scripts', 'login_css');

Esta función le indica a WordPress que insertaremos una nueva hoja de estilos admin-login.css a la pagina del login, mediante el hook login_enqueue_scripts.

Luego agregamos dos funciones más, la primera cambiara la url del logo, que por defecto apunta a WordPress.org, y la segunda función cambiara el titulo del enlace.


Código:
//Cambiamos la url del Logo
function logo_url() { return get_bloginfo('url'); }

//Cambiamos el titulo en el Logo
function logo_url_title() { return 'Mi Sitio Web'; }

add_filter('login_headerurl', 'logo_url');
add_filter('login_headertitle', 'logo_url_title');


Creando estilos CSS

Primero debemos saber cuáles son los estilos css que cambiaremos, para ello usando la tecla F12 de nuestro browser, en mi caso Chrome con Developer Tools, ubicaremos cada elemento html en la pagina y podremos ver sus propiedades css.

Luego procedemos a editar nuestro archivo admin-login.css. Por ejemplo si yo quiero cambiar el background de la página, escribiria:

Código:
body.login {
   background: #232B2D url(images/login-background.jpg) no-repeat center center;
   background-size: cover;
}

En este caso, he indicado que el elemento body con la clase .login tenga como background una imagen de fondo.

Esta seria la forma de ir agregando los estilos en nuestro archivo admin-login.css

admin-login.css

Código:
/* CSS Login WordPress */
body.login {
   background: #232B2D url(images/login-background.jpg) no-repeat center center;
   background-size: cover;
}
body.login h1 a {
   background: url(images/logo.png) no-repeat 0 0;
   margin: 0 auto;
   width: 54px;
   height: 54px;
}
body.login form {   margin-top: 0; }
body.login .button-primary{
   background: #FA7252;
   border:none;
   border-radius: 0;
   box-shadow: none;
   outline: 0;
}

body.login .button-primary:hover,
body.login .button-primary:focus{
   background: #F85129;
   border:none;
   box-shadow: none;
}

body.login .message{
   background: #EEE;
   border-color:#FA7252;
}

body.login #nav {
   background: #1D2425;
   margin-top: 0;
   padding: 24px;
   text-align: center;
}
body.login #nav a { color: #738E95; }

Conclusión

Utilizando algunas funciones básicas de WordPress y algunas técnicas css podemos personalizar páginas, secciones u otros elementos dentro de WordPress.
[-] El post de jcifuentes tiene 1 Me Gusta de parte de:
  • jebcalix
#2
Esto da un aspecto más profesional sin necesidad de cambiar muchas cosas.
Seguro que aprovecho y cambio un poco el estilo de mi login.


Un saludo y gracias por la aportación.
[Imagen: logo_300.png]
#3
Buena información. Gracias, por más plugins que existan, siempre es mejor hacerlo manual. Gran sonrisa

Buen aporte.
I'm back! 
#4
Gracias por compartirlo, recuerdo que hace un tiempo trate de cambiarlo por medio de un plugin, pero no logre obtener el resultado deseado.
[Imagen: 10wqwb4.png]
WWW
#5
Muy buen tutorial, cambia la imagen profesional de un sitio web creado con WP, muchas gracias por compartirlo...
WWW
#6
Saludos,

Como han comnetado es mejor hacerlo manualmente que utilizar un plugin aunque a veces hacerlo manual deja de funcionar ciertas cosas y si utilizamos plugins al momneot de actualizar puede que existan problemas..

Yo he utilizado un plugin de persoalización que ha me ido de maravillas, White Label CMS se llama, es gratuito y está en el repositorio de plugins.. De igual manera, guardaré este tema para probarlo en otro momento, Gracias..


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
Bombilla Temas Wordpress GRATIS calidad PREMIUM nicarao 9 259 03-10-2018, 05:44 PM
Último mensaje: DamianUzcanga
  100 Temas WordPress Gratis 2018 (Parte 5) Sprystate 1 101 07-09-2018, 01:10 PM
Último mensaje: York0x
  100 Temas WordPress Gratis 2018 (Parte 4) Sprystate 0 58 06-09-2018, 10:54 PM
Último mensaje: Sprystate
  100 Temas WordPress Gratis 2018 (Parte 3) Sprystate 0 70 06-09-2018, 10:19 PM
Último mensaje: Sprystate
  100 Temas WordPress Gratis 2018 (Parte 2) Sprystate 1 68 06-09-2018, 10:11 PM
Último mensaje: York0x
  100 Temas WordPress Gratis 2018 (Parte 1) Sprystate 0 66 06-09-2018, 09:29 PM
Último mensaje: Sprystate
  Agregar un anuncio de adsense desde el editor de temas de WordPress cmascreativo.ml 1 54 06-09-2018, 06:20 AM
Último mensaje: jcifuentes
  Top 3 plugins para build wordpress PabloA3 2 80 06-09-2018, 04:37 AM
Último mensaje: jcifuentes
  Mi experiencia con wordpress en producción yuma2009 7 264 03-09-2018, 10:34 PM
Último mensaje: yuma2009
  Como usar el plugin WordPress Popular Posts cmascreativo.ml 1 48 02-09-2018, 08:35 AM
Último mensaje: ReyNexo23



Usuarios navegando en este tema: 1 invitado(s)