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
  Que es Wordpress - Aquí te digo que es Murcie1021 0 14 15-02-2019, 03:22 AM
Último mensaje: Murcie1021
  Carga lenta en Wordpress WMasterT 3 77 09-02-2019, 11:24 PM
Último mensaje: ReyNexo23
  [Duda] Mailrelay - Wordpress alieninc 1 43 29-01-2019, 10:48 PM
Último mensaje: angelismo
  agrega imagen destaca en wordpress con enlace skions 9 157 05-01-2019, 06:32 PM
Último mensaje: brettavz
Ladrillo Crear y diseñar sliders con WordPress skions 4 100 04-01-2019, 06:13 AM
Último mensaje: manuelxd1010
  Importante: Actualización Wordpress 5.0 Vicen 6 473 12-12-2018, 06:08 PM
Último mensaje: ArtuGar
Bombilla Temas Wordpress GRATIS calidad PREMIUM nicarao 9 361 03-10-2018, 05:44 PM
Último mensaje: DamianUzcanga
  100 Temas WordPress Gratis 2018 (Parte 5) Sprystate 1 164 07-09-2018, 01:10 PM
Último mensaje: York0x
  100 Temas WordPress Gratis 2018 (Parte 4) Sprystate 0 106 06-09-2018, 10:54 PM
Último mensaje: Sprystate
  100 Temas WordPress Gratis 2018 (Parte 3) Sprystate 0 143 06-09-2018, 10:19 PM
Último mensaje: Sprystate



Usuarios navegando en este tema: 1 invitado(s)