• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Personalizar el formulario de login de WordPress

Personalizar el formulario de login de WordPress

Personalizar el formulario de login de WordPress

[ 14 noviembre 2018 ] [ Actualizado: 28 mayo 2020 ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Avanzado] [ ]

css dashboard

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Uno de los formularios que probablemente usarán más los administradores de un sitio es el formulario de login de WordPress, aprende como personalizar este formulario de login y darle un aspecto más profesional acorde con el diseño general de tu web.

 

Resultado Final

Al final obtendremos el formulario de login personalizado, tal como se muestra en la siguiente imagen:

Comparación antes y después, formulario de login WordPress

 

Generalidades

Existen multitud de plugins que te permiten hacer modificaciones al formulario de login de WordPress, sin embargo en este artículo veremos cómo realizar esto simplemente con estilos CSS y algunos Hooks de WordPress y así evitar el uso de plugins adicionales.

La idea es sobreescribir los estilos que tiene por defecto el formulario, cambiando básicamente la imagen y el color de fondo, para lograr esto necesitaremos cargar un archivo CSS.

 

Usando un Hook para cargar el archivo CSS

Usaremos el siguiente código para cargar un archivo CSS en la pantalla que muestra el formulario de login de WordPress.


function my_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/css/style-login.css' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

Puedes agregar este código en el archivo functions.php de tu child-theme

En el código anterior:

  • Usamos el hook login_enqueue_scripts que hace referencia a la función my_login_stylesheet
  • Dentro de la función usamos la función de WordPress wp_enqueue_style para agregar un archivo CSS
  • Asumimos que existe un archivo style-login.css en la carpeta css del theme que tenemos activo.

 

Sobreescribiendo los estilos del formulario

Según la documentación podemos sobreescribir estilos CSS teniendo en cuenta las siguientes clases:


body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

Por lo tanto podemos usar algunas de estas clases para hacer nuestros cambios, al final obtendremos un código CSS como se muestra a continuación:


body.login div#login h1 a {
	width:256px;
	height: 30px;
	background-size: 256px 30px;
    background-image: url("../images/logo.svg");
}

body.login {
	background: #192d38;
}


body.login div#login p#nav a,
body.login div#login p#backtoblog a{
	color:#ccc;
}

body.login div#login p#nav a:hover,
body.login div#login p#backtoblog a:hover{
	color:white;
}

Este código CSS debe estar en el archivo: /css/style-login.css de tu theme o child-theme.

En el código anterior

  • Estamos cambiando el logo, asumimos que hay un archivo logo.svg dentro de la carpeta images
  • El logo debe tener unas determinadas dimensiones, en nuestro ejemplo 256 x 30
  • Cambiamos el color de fondo, el color que usaremos será #192d38
  • La última parte del código cambia el color de los enlaces inferiores

 

Cambiando la url del logo

Finalmente podemos cambiar la url a la que enlaza el logo, ya que por defecto nos lleva al sitio oficial de WordPress, podemos cambiar esto para que nos lleve a la url de nuestro sitio web. También cambiaremos el atributo title que se muestra cuando colocamos el mouse sobre la imagen.


function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
    return 'Sitio Web DECODECMS';
}
add_filter( 'login_headertext', 'my_login_logo_url_title' );

Puedes agregar este código en el archivo functions.php de tu child-theme

 

Conclusión

Como hemos visto, puedes hacer personalizaciones al formulario de login de WordPress, usando código CSS y algunos Hooks, de manera simple y evitando el uso de plugins adicionales.

 

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Formulario de login mejorado sin plugins en WordPressFormulario de login mejorado sin plugins en WordPress
  • Formulario de login sin plugins en WordPressFormulario de login sin plugins en WordPress
  • Letra capital en párrafos en WordPressLetra capital en párrafos en WordPress
  • Fechas relativas en WordPress a través de códigoFechas relativas en WordPress a través de código
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 4,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Carmen

    31 enero, 2019

    Hola. Muy interesante. He pesonalizado mi WP Login, pero no acabo de dar con la manera de poder cambiar el logo del tick del checkbox “recuérdame” de color azul (defecto) a blanco. ¿Se te ocurre alguna idea?

    • Jhon Marreros Guzmán

      1 febrero, 2019

      Hola, en el código CSS, usa !important para las sentencias , por ejemplo: color:white!important;

  2. Julio

    2 abril, 2019

    excelente tutorial, sabes cual es el id de la palabra “registrarse” ? Quiero quitarlo o que redireccione a mi formulario de incripcion, gracias

    • Jhon Marreros Guzmán

      3 abril, 2019

      Hola, busca el archivo wp-login.php, allí verás la construcción de este formulario, veo que hay un filtro que podrías probar llamado ‘register’ en la línea 633 aprox.

  3. William

    29 marzo, 2020

    Hola Jhon gratis por tus consejos. Estoy utilizando tema Buddyboss y he tenido un problema grande es que me muestra Sign In. — Sign Up , en ingles, ya traduje al español todo el tema y la plataforma, pero no funciona sigue en Ingres, ademas el formulario de registro aparece en español, pero el de ingresar en Ingles!!! Podrías ayudarme?

  4. William

    29 marzo, 2020

    Olvide mencionar , que el Registro me enlaza con una pagina de registro, mientras que el Sign In me lleva es al wp-login.php gracias!!

    • Jhon Marreros Guzmán

      29 marzo, 2020

      Hola, podrías probar usando el plugin Loco Translate, veo que tu theme es un theme de pago, podrías consultar directamente con los desarrolladores ya que tiene soporte.

  5. Daniel

    29 julio, 2020

    Hola Jhon, muchas gra lo hice mi que quedó genial. ¿Habría la posibilidad de crear un plugin con todos estos cambios?

    • Jhon Marreros Guzmán

      30 julio, 2020

      Hola Daniel, si, puedes revisar: https://decodecms.com/usar-un-plugin-para-crear-plugins/

  6. Daniel

    29 julio, 2020

    Hola Jhon, muchas gracias por tu ayuda. He realizado el tutorial y me ha quedado genial. Soy novato en wordpress y he intentado crear un plugin que haga todo esto en mi web, pero lo activo y no me realiza los cambios. ¿Alguna recomendación o algún sitio para consultar?

    • Jhon Marreros Guzmán

      30 julio, 2020

      Hola, entiendo que a nivel de tu theme si te funciona, podrías igual aislar tu código creando un tema hijo.

  7. Daniel

    31 julio, 2020

    Gracias Jonh por la respuesta. Así lo haré 🙂

  8. Hernan

    19 agosto, 2020

    Excelente tutorial! felicitaciones

    • Jhon Marreros Guzmán

      19 agosto, 2020

      Gracias Hernan. Saludos

  9. Cristian David

    8 marzo, 2022

    Hola amigo, que tal? soy nuevo por aquí que grandioso fue encontrar esta información, muchas gracias. Quisiera saber si una vez cambien el logo y los estilos , no se pueden volver a cambiar. Es que puse un logo y me quedo muy pequeño y ahora lo intento cambiar y no me deja, se queda el mismo.

    • Jhon Marreros Guzmán

      8 marzo, 2022

      Si ya cambiaste la imagen y se sigue viendo la anterior es posible que sea algo relacionado a la cache de tu navegador, prueba limpiar cache o prueba en incógnito o en otro navegador.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Campo de texto para escribir en productos WooCommerce

Métodos alternos para desactivar plugins en WordPress

Anterior y siguiente en la página de producto de WooCommerce

Agregar un Slider al tema Storefront

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados