¿Cómo personalizar la página de login en WordPress?

¿Cómo personalizar la página de login en WordPress?

Este artículo es el primero de una serie de publicaciones un poco más técnicas de lo que venimos haciendo, y que recogeremos en la categoría “aspectos técnicos” del blog. En ellos intentaremos dar pistas, consejos y trucos para sacar el máximo rendimiento de la web que estéis desarrollando.

Como carta de presentación, nos ha parecido apropiado comenzar con la personalización de una de las grandes olvidadas en WordPress: la página de login. Vamos a comentar tres formas de hacerlo: redefiniendo los aspectos básicos en el fichero de funciones, cambiando el aspecto total de la página mediante programación, y en último lugar, usando un plugin como herramienta.

Personalización de la página de login de wordpress


La página de login por defecto de WordPress es la que se ve en la imagen inferior, y tiene 4 elementos básicos que modificar:

  • El logo de cabecera
  • La dirección a la que apunta el enlace de la cabecera
  • El título del enlace
  • El aspecto de la página: tipo de letra, tamaños, dimensiones…

pagina login defecto wordpress

Todo esto se puede arreglar añadiendo 3 métodos al fichero functions.php. Este archivo lo podéis encontrar accediendo mediante FTP en la ruta wp-content/themes/tu-tema-instalado/functions.php, o desde el panel de control de Wodrpess, en la opción del menú Apariencia->Editor.

¿Cómo cambiar logo de wordpress de la página de login?

Crearemos una función my_custom_login_page_css, que se encargará de añadir nuestro propio fichero css a la cabecera de la página, y la encolamos en las acciones de WordPress mediante add_action.

function my_custom_login_page_css() {
wp_enqueue_style( 'login_css', get_template_directory_uri() . '/css/login.css' );
}
add_action('login_head', 'my_custom_login_page_css');

En el fichero css, tendremos que añadir un estilo para modificar la imagen de fondo.

#login h1 a {
background-image:url("http://YOUR-WEBSITE.com/wp-content/themes/YOUR_THEME/images/custom_logo.png") !important;
}

¿Cómo cambiar el destino del logo de WordPress en la página de login?

Crearemos una función my_custom_login_url que devuelva la dirección de nuestra web, y la añadimos a la lista de filtros usando add_filter.

function my_custom_login_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_custom_login_url' );

¿Cómo cambiar el título del logo de WordPress en la página de login?

Crearemos una función my_custom_login_url_title que devuelva el título que nos gustaría que tuviese la imagen de cabecera, y la añadimos a la lista de filtros usando add_filter.

function my_custom_login_url_title() {
return 'Mi título personalizado del enlace';
}
add_filter( 'login_headertitle', 'my_custom_login_url_title' );

¿Cómo personalizar otros aspectos de la página de login de WordPress?

Se puede personalizar mediante css todos los aspectos de la página añadiendo el código deseado en el fichero css que usamos en el paso uno, para modificar la imagen de cabecera.

Modificación avanzada de la página de login de wordpress

Si tienes conocimientos de programación, puedes personalizar tu página de login creando un diseño totalmente a tu medida. Para ello puedes partir del fichero wp-login.php que se encuentra en el raiz de tu instalación WordPress, y realizar todos los cambios que necesites desde ahí.

Es muy importante que hagas una copia de seguridad de los ficheros que modifiques si tienes pensado instalar una actualización de WordPress en algún momento, ya que todo lo que no esté dentro de la carpeta wp-content podría ser remplazado por una nueva versión durante el proceso de actualización, perdiendo todos tus cambios. Esto sucede así porque WordPress considera que esos ficheros nunca van a modificarse, “siendo él el único responsable de su mantenimiento”.

Plugin de WordPress para personalizar la página de login

También existen plugins muy potentes que te permiten crear una página de login a medida desde el menú de administración, como este Custom Login.

Y hasta aquí nuestro primer artículo de este tipo.
El equipo de Cleventy está disponible para ayudaros en cualquier duda que podáis tener.

Publicado en agosto 11, 2012

Deja un comentario

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

« »