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
  Importante: Actualización Wordpress 5.0 Vicen 1 53 Hace 1 hora
Último mensaje: Jean Pierre
  agrega imagen destaca en wordpress con enlace skions 2 32 Hace 1 hora
Último mensaje: Jean Pierre
Bombilla Temas Wordpress GRATIS calidad PREMIUM nicarao 9 317 03-10-2018, 05:44 PM
Último mensaje: DamianUzcanga
  100 Temas WordPress Gratis 2018 (Parte 5) Sprystate 1 132 07-09-2018, 01:10 PM
Último mensaje: York0x
  100 Temas WordPress Gratis 2018 (Parte 4) Sprystate 0 82 06-09-2018, 10:54 PM
Último mensaje: Sprystate
  100 Temas WordPress Gratis 2018 (Parte 3) Sprystate 0 102 06-09-2018, 10:19 PM
Último mensaje: Sprystate
  100 Temas WordPress Gratis 2018 (Parte 2) Sprystate 1 100 06-09-2018, 10:11 PM
Último mensaje: York0x
  100 Temas WordPress Gratis 2018 (Parte 1) Sprystate 0 111 06-09-2018, 09:29 PM
Último mensaje: Sprystate
  Agregar un anuncio de adsense desde el editor de temas de WordPress cmascreativo.ml 1 94 06-09-2018, 06:20 AM
Último mensaje: jcifuentes
  Top 3 plugins para build wordpress PabloA3 2 105 06-09-2018, 04:37 AM
Último mensaje: jcifuentes



Usuarios navegando en este tema: 1 invitado(s)