Plugin WordpressRecursossin categoria
Trending

Personalizar login WordPress de forma profesional sin plugin

Cambiar el login wordpress sin plugin, fácil y profesionalmente

Hoy en día están surgiendo nuevas versiones de WordPress, pero la página de login no ha cambiado mucho a lo largo del tiempo. Creemos que muchas empresas de desarrollo olvidan este aspecto que también llega a ser un aspecto muy importante en el diseño profesional de una web.

Hay que destacar, tanto si se trata de un e-commerce como de un blog, los usuarios que se registren o colaboren realizando artículos, pasarán por el login y estaremos perdiendo uno de los puntos más importantes como es nuestra imagen de marca y diseño. A su vez, estaremos mostrando a todo el mundo que nuestra página está desarrollada en WordPress.

Para personalizar el login de WordPress de una manera profesional si la utilización de plugin, vamos a ir detallando los pasos a realizar de una manera lo más sencilla posible, aunque no tengamos muchas nociones de php ni de css.

Cambiar logo de WordPress en el login

Este cambio que vamos a realizar es algo meramente estético, pero muy profesional hablando del diseño de la web, ya que dará más prestigio ver el logo de tu marca en vez del logo de WP.

Existen infinidad de plugins en el repositorio de WordPress que permiten cambiar el logo de WordPress para el login,  pero en este tutorial vamos a explicar los pasos para realizarlo en el código. Siempre es mucho mejor añadir unas pocas líneas de código en el archivo functions.php de tu tema que en un plugin de terceros, ya que si abusamos de ello, podemos perjudicarnos en la velocidad de carga, seguridad… entre otras.

Para comenzar, tenemos que abrir con un editor de texto el archivo functions.php de nuestro tema. Si no conoces ningún editor de texto, aquí te dejo un artículo anterior donde podrás conocer «Los 10 mejores editores de texto«.

Abrir archivo functions.php 

Podemos realizarlo desde el editor del propio wordpress o mediante el acceso al servidor o hosting, En la siguiente captura he optado por acceder mediante FileZilla. El archivo se encuentra dentro del tema activo.

El código a insertar en la parte final del archivo es el siguiente:

Solamente hemos añadido un estilo al logo de WordPress. Le estamos indicando que cambie la imagen que actualmente está cargando por la que nosotros deseemos  {{ background-image: url }}.

Sólo tienes que sustituir la url por la de tu imagen.

En caso de que vuestra imagen no se adapte visualmente al tamaño de vuestro agrado, podéis ajustarlo modificando las propiedades css del código anterior, la etiqueta height y width.

Añadir un mensaje personalizado a la página login de WordPress

Con esta funcionalidad, podemos mostrar un aviso a los usuarios registrados de nuestro sitio web, como por ejemplo:

«Bienvenido a mi blog JCWeb, por favor inicia sesión para continuar:»

Localizamos el mismo archivo que en el punto anterior «functions.php» y lo editamos añadiendo la siguiente función:

Como se puede observar, para editar el texto y mostrar el que desees, sólo hay que cambiar el mensaje que hay dentro de la etiqueta <p class=’message’> tu texto </p>.

Éste sería el resultado:

Ocultar mensaje de error al ingresar erróneamente usuario o contraseña

Cuando se ingresa erróneamente el usuario o la contraseña, nos sale un mensaje indicando cuál es el problema, si el usuario o la contraseña. Si el usuario es correcto pero la contraseña no, nos saldrá un mensaje indicando que la contraseña es incorrecta y viceversa.

Este mensaje puede ser útil para ti, pero también da pistas a los hackers, ahora, ya sabrán que el usuario es correcto, por ejemplo.

La forma más fácil de evitar esto es poniendo un mensaje genérico de error, sin indicar cuál ha sido el problema.

Para ello continuamos insertando código en el archivo function.php.

Y éste sería el resultado:

Checkbox Recuérdame marcarlo por defecto

Una opción algo útil puede ser dejar marcada por defecto la opción «Recuérdame«, así evitaremos tener que ingresar los datos de acceso constantemente. Para ello basta con añadir al archivo function.php el la siguiente función:

Eliminar opción ¿Olvidaste tu contraseña?

Este enlace es útil si has perdido la contraseña, pero si alguien te ha hackeado tu cuenta de email, le estarás abriendo las puertas a ingresar y hackear tu web, por lo tanto, por cuestiones de seguridad, aconsejamos quitarlo.

Esto es tan sencillo como ocultar el enlace añadiendo las siguientes líneas de código en el archivo de estilos de tu tema, para ello hay que localizar el archivo que carga la web para esos estilos.

Os voy a enseñar de la forma más breve posible como podemos localizar ese archivo, para ello realizaremos los siguientes pasos:

  • Abrimos nuestro login en una ventana de nuestro navegador preferido. También podéis ver cual es el mejor navegador web de 2019 por si os interesa más cambiar de navegador según sus características.
  • Hacemos clic con el botón derecho sobre el texto: ¿Olvidaste tu contraseña? y en la ventana damos a Inspeccionar.

Nos abrirá una ventana en la que situaremos el cursor sobre la etiqueta <p id=nav …..> y en la ventana de Styles podremos encontrar la ruta del archivo de estilos que está cargando, solamente poniendo el ratón encima de la url de estilos.

Puede parecer un poco complicado, pero creo que es más difícil de explicar que de realizar.

  • Localizamos el archivo css y lo editamos para añadir el siguiente código:

Eliminar el enlace para volver a la página de inicio

Esto simplemente lo quitamos por motivos estéticos, ya que ahora pinchando sobre el logo se puede volver a la página de inicio. Para realizarlo tenemos que localizar el archivo css que utiliza, como hemos realizado para eliminar el enlace de olvidado tu contraseña, y una vez localizado lo editamos para insertar el siguiente código:

Cambiar el fondo del login de WP

En nuestro caso, queremos utilizar una imagen de fondo, para esto tenemos que incluir en el archivo login.css, teniendo en cuenta que debemos subir la imagen al directorio.

Si buscas imágenes libres para poder utilizar, puedes visitar el artículo: Los 17 + 4 mejores bancos de imágenes gratuitas

También, tenemos la posibilidad de editar el color fijo que actualmente tiene por otro deseado, en lugar de la imagen, esto es sencillamente cambiar el CSS.

Y éste sería el resultado:

Resumen y conclusión

¿A que ha sido fácil? Simplemente con unas líneas de código podemos personalizar esta página de login que tantas y tantas veces accedemos.

Espero que este post ayude a que tu página web transmita más tu marca personal y no se vea más el logo de WordPress.

Summary
Personalizar login Wordpress de forma profesional sin plugin
Article Name
Personalizar login Wordpress de forma profesional sin plugin
Description
En este post vamos a personalizar el login de wordpress de forma profesional y sin plugin. No es neceserio tener conocimientos de programación.
Author
Publisher Name
JCWeb.es
Publisher Logo
Tags
Show More

jcarlos

Especialista en marketing digital, desarrollo web y apps. Con experiencia y conocimientos en SEO, mobile marketing, analítica web y app. Diseñador que mezcla el diseño más actual con la mejor experiencia de usuario.

Related Articles

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Close
Close