En este artículo vamos a personalizar la página de inicio de sesión de WordPress. Vamos a enseñarte dos maneras de cambiar el logo de WordPress, por el logo que tú quieras, de manera fácil.
Existen varios métodos de como personalizar el logo y la página de login de WordPress, hoy intentaremos que aprendas como hacerlo vía plugin, y como hacerlo de manera manual, utilizando el archivo de función de tu plantilla.
Personalizar la página de inicio de sesión de WordPress
El formulario de inicio de sesión de WordPress es muy conocido, aunque ha cambiado bastante durante sus últimas versiones, siempre ha tenido una apariencia sin tantos cambios.
Con WordPress se pueden desarrollar un montón de sitios web distintos, desde blog, hasta portales, y sitios de membresía. Ya hemos visto en ocasiones anteriores por ejemplo: Como crear un sitio de membresia utilizando plugin en WordPress.
En muchos casos cuando se crea un sitio de membresía queremos darle a nuestro usuario, o visitantes una apariencia personalizada en cada parte de nuestro sitio.
En este caso vamos a aprender a modificar toda la apariencia del sitio de dos maneras distintas. Una con plugin y otra modificando el archivo function.php de nuestra plantilla.
¿Diferencias entre usar plugin, y modificar funciones con function.php en WordPress?
Aunque me gustaria escribir realmente un articulo completamente sobre las grandes ventajas y desventajas de usar plugin, o de modificar directamente los archivos de una plantilla de WordPress. Hoy lo explicaremos un poco resumido.
Existen muchas soluciones que podríamos resolver sin la necesidad de utilizar un plugin. Usar muchos plugin en una instalación de WordPress Puede provocar serios daños en el tiempo de carga de un sitio web.
Pero modificar una plantilla podría ser un gran error, ya que los plugin y plantillas se actualizan de manera recurrente, y puedes perder los cambios cada vez que actualices tu plantilla.
Si bien se pueden utilizar plantillas hijos, o «Child» pero eso lo dejaremos para otro artículo. Depende que tan grande sea el cambio a realizar, va a depender si conviene utilizar un plugin, o modificar directamente la plantilla.
Sin más vueltas, vamos a personalizar ese formulario de inicio de sesión.
Plugin para personalizar inicio de sesión de WordPress.
Custom Login Page Customizer – Login Designer
Un plugin muy fácil de utilizar, con el que podrás personalizar realmente a tu gusto tu formulario de inicio de sesión de WordPress.
Si bien existen un montón de plugin con el que podrás modificar, o personalizar, Custom Login Page Customizer – Login Designer me pareció un plugin super fácil e intuitivo.
Este plugin es realmente muy interesante, y antes de empezar a hablar sobre sus grandes características, es bueno decir que es totalmente gratuito. Es de libre uso, no tendrás que pagar una costosa licencia por utilizar el plugin.
El plugin se puede descargar desde el repositorio de WordPress. Es realmente muy sencillo de utilizar.
Una vez que instales y actives el plugin, podrás personalizar todo en tiempo real, cada cambio que realices podrás verlo sin necesidad de actualizar la página, o de tener que cerrar e iniciar sesión cada rato.
Podrás cambiar todos los aspectos del formulario de login como muestran algunas capturas a continuación:
Como podras ver en la captura el login se ve totalmente distinto al formulario por defecto de WordPress, totalmente personalizado.
Cambiar el estilo sin tocar un solo código de fuente es especial para aquellos que no desean modificar su plantilla.
También te dejamos un video de la demostración realizada por los mismos desarrolladores para que puedas apreciar cada aspecto del plugin.
Otros plugin con lo que podrás personalizar el inicio de sesión de WordPress
Si bien el plugin que te mostramos cumple perfectamente su labor, con el que puedes modificar completamente el estilo, no se pueden modificar aspecto de funcionalidad como iniciar con una red social, o dispone de un captcha para evitar el intento de acceso de bots.
A continuación otros plugin con los que podrás modificar tu formulario de inicio de sesión.
- Custom Login Page Customizer by Colorlib
- Admin Custom Login
- Custom Login
- Custom Login Page Customizer
- Birds Custom Login
Personalizar inicio de sesión de WordPress sin utilizar plugin.
En esta parte del artículo vamos a aprender a modificar y personalizar la página de inicio de seon de WordPress sin ningun plugin.
Antes de proceder a empezar a explicar como realizar las modificaciones, es importante aclarar que vamos a tocar código fuente, y si no te sientes seguro de realizar estas modificaciones, te conviene personalizar tu formulario de inicio de sesión con plugin.
Todas las plantillas disponen de un archivo que se llama Functions.php, nosotros hoy nos encargaremos de agregar alguna línea de código.
Es recomendable utilizar plantillas Child para hacer cambios, pero ese tema lo tocaremos en otro artículo.
¡Empecemos!
Primero vamos a localizar el archivo que tenemos que modificar, por suerte es solo uno, y no es dificil de ubicar.
Primero tienes que ingresar a tu escritorio de WordPress, ir al menú de Apariencia, y después a «Editor de temas».
Una vez que ingresamos al Editor de temas, en la parte derecha de la pantalla buscamos functions.php.
Puedes guiarte por la captura de pantalla a continuacion:
Cambiando el aspecto del formulario
Todo es copiar y pegar. Contamos con que si llegaste hasta aca, sabes bastante de codigo, y no te perderas.
La apariencia solo se basa en conocer un poco de CSS, si bien hemos comentado cada línea del código que verás a continuación, para que te resulte fácil la modificación.
//Personalizar formulario de inicio de sesion
add_action( 'login_enqueue_scripts', 'bs_change_login_logo' );
function bs_change_login_logo() { ?>
<style type="text/css">
body {
/* Cambiamos el fondo de la pagina de inicio de sesion */
background-image: url(https://i.ibb.co/tZGSBH4/body-bg-2.jpg) !important;
}
#login h1 a {
/* Cambiamos el logo de WordPress, por un logo personalizado */
background-image: url(https://soportetop.com/wp-content/uploads/2020/08/SOPORTETOP.png);
width: 200px !important;
background-size: 204px !important;
}
.login form {
/* Asignamos transparencia al formulario*/
background: #ffffff47 !important;
}
.login label {
/* Cambiamos el color del texto del formulario, y le asignamos la propiedad de negrita */
color: #006799;
font-weight: bold;
}
</style>
<?php }A continuacion te dejamos un ejemplo de como quedara tu formulario despues de pegar el codigo de arriba. Si bien esta todo comentado para que puedas personalizar a gusto, este codigo te servira, y tu formulario quedara asi.
En conclusion:
En este artículo vimos como personalizar y darle un estilo único a tu formulario de inicio de sesión en WordPress.
Pudimos ver que existen una gran variedad de plugin que ter permitirán modificar a gusto tu formulario de inicio de sesión. Y también pudimos apreciar, que agregando unas cuantas líneas de código al archivo functions.php de tu plantilla también se le puede dar un aspecto completamente distinto.
Si bien debes jugar un poquito con el CSS de tu sitio, podrás obtener los resultados que esperas.
Esperamos que este artículo haya sido de tu gusto, y por favor, no te vayas sin compartir en tus redes sociales.
