Cargando

Ir a contenido

X

 


Cómo personalizar la página de inicio de sesión de Wordpress

En este tutorial vamos a ver como personalizar tres aspectos de la pantalla de login empleando para ello únicamente unos fragmentos de código en PHP.


Escrito por sep 28 2015 07:54 wordpress


inicio sesion wordpress.png

 

Si trabajamos con Wordpress es posible que nos guste personalizar nuestra página con todos los detalles que sean posibles. Una de las personalizaciones más solicitadas por los clientes es la del inicio sesión. Por defecto el diseño que nos ofrece Wordpress para el inicio de sesión es bastante sencillo y limpio. Es por ello que quizás queramos incluir en el un toque más personal como puede ser nuestra marca.

 

Si cuentas con un blog desarrollado en Wordpress, sabrás que para administrarlo debes acceder a una url del tipo http://www.midominio.com/wp-admin, en la que se muestra la página de inicio de sesión del administrador de la instalación; esta, por defecto, incluye un logo de Wodpress que podemos cambiar. Pero no sólo eso, sino que también podemos modificar el enlace al que apunta cuando haces clic sobre él, así como su tooltip (el cartel que se muestra al situar el puntero del ratón encima del logotipo).


personalizar-pagina-inicio-wordpress-1.jpg

 

Existen dos formas de llevar a cabo esta personalización: mediante plugins especializados o añadiendo un trozo código al archivo de la instalación correspondiente.

 

Si bien llevar a cabo cualquier personalización en Wordpress resulta más sencilla mediante un plugin, lo cierto es que estos inciden directamente en el tiempo de carga de nuestra página por lo que siempre que esté a nuestro alcance, resultará más liviano llevar a cabo este tipo de acciones “tocando” el código.

 

En este tutorial vamos a ver cómo hacerlo directamente añadiendo los tres fragmentos de código php correspondientes a cada una de las personalizaciones que llevaremos a cabo:

 

Personalizaciones
  • Cambiar el logotipo.
  • Cambiar el enlace del logotipo.
  • Personalizar el tooltip del logotipo.

 


1. Cambiar el logotipo


Paso 1

Lo primero que debemos hacer es preparar la imagen que utilizaremos como logotipo. Esta debe ser cuadrada, de 80 x 80 px y en formato .png, preferiblemente con el fondo transparente, ya que la página de login es de un tono grisáceo y, de este modo, se “fundirá” perfectamente con él.


personalizar-inicio-sesion-wordpress-3.jpg

 

Paso 2

Una vez tengamos lista la imagen que utilizaremos como logo, que en nuestra ejemplo se llama logo.png, debemos guardarla en la carpeta images de nuestro tema actual ( \wp-content\themes\tema_actual\images) donde tema_actual se corresponde con el nombre del tema que tengas activo en tu instalación.


personalizar-pagina-inicio-wordpress-2.jpg

 

Este proceso lo podemos llevar a cabo, tanto mediante un cliente FTP como mediante el administrador de archivos del hosting, en caso de que cuente con él.

 

Paso 3

Ahora será necesario añadir el correspondiente código php al archivo functions.php de nuestro tema activo. La forma más rápida de hacerlo es utilizando el propio editor de archivos que incluye Wordpress. Para ello, dentro de la instalación de Wordpress, haz clic sobre el menú Personalizar y, a continuación, sobre Editor. Ahora en la columna de la izquierda haz clic sobre el archivo functions.php y desplázate hasta el final del mismo.

 


personalizar-inicio-sesion-wordpress-5.jpg

 

Para indicar el logo que deseas que se muestre, añade el siguiente código. En el fragmento de código debes substituir el texto logo.png por el nombre que le hayas dado a tu propio logotipo

//personalizar el logo de inicio de sesiónfunction my_custom_login_logo() { echo '<style type="text/css"> h1 a { background-image:url('.get_stylesheet_directory_uri().'/images/logo.png) !important; } </style>'; } add_action('login_head', 'my_custom_login_logo');


personalizar-inicio-sesion-photoshop-4.jpg

 


2. Cambiar el enlace del logotipo


Para cambiar la URL enlazada con el logotipo de la página, deberás añadir también al archivo functions.php el siguiente trozo de código:
// personalizar en enlace del logotipo function put_my_url(){ return ('http://www.solvetic.com'); // Aquí indica la URL a la que enlaza el logotipo } add_filter('login_headerurl', 'put_my_url');

personalizar-inicio-sesion-wordpress-8.jpg

 


3. Personalizar el tooltip del logotipo


Por último y para que la personalización de la página de login sea completa, cambiaremos el texto que aparece al pasar por encima de la imagen del logo, y que por defecto es “Powered by WordPress”.

 

Para ello tendrás que añadir un último fragmento de código al archivo functions.php del tema activo:

// personalizar en enlace del logotipo function put_my_url(){ return ('http://www.solvetic.com'); // Aquí indica la URL a la que enlaza el logotipo } add_filter('login_headerurl', 'put_my_url');

personalizar-inicio-sesion-wordpress-9.jpg

 

Una vez terminada la edición, será necesario guardar los cambios realizados para que estos surtan efecto. Para ello haz clic sobre el botón Actualizar archivo que se encuentra al final del editor. Ahora si accedes a tu página de inicio de sesión de Wordpres podrás comprobar cómo luce después de los cambios aplicados.

 


personalizar-inicio-sesion-wordpress-10.jpg

 

Recuerda
Puedes probar estos “trucos” sin temor a desconfigurar tu sitio en Wordpress utilizando una instalación local tal y como se explica en el tutorial Cómo tener una instalación portable de WordPress

 

¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0


AYUDA A MEJORAR ESTE TUTORIAL!

¿Quieres ayudarnos a mejorar este tutorial más? Puedes enviar tu Revisión con los cambios que considere útiles. Ya hay 0 usuario que han contribuido en este tutorial al enviar sus Revisiones. ¡Puedes ser el próximo!


Tutoriales Relacionados



Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
9.3
VOTA
5
66.67%
4
33.33%
3
0%
2
0%
1
0%

  Información

  •   Publicado sep 28 2015 07:54
  •   Actualizado dic 21 2016 14:27
  •   Visitas 10.3K
  •   Nivel
    Básico