HOME || Wordpress || Modificar la página de Acceso en WordPress
Creado el: 17 marzo, 2019 - Actualizado el: 2 abril, 2019 - Autor: lornal
AMP Versión AMP: Modificar la página de Acceso en WordPress (Versión AMP)

Modificar la página de Acceso en WordPress

Modificar la página de Acceso en WordPress

Modificar la página de acceso o login en WordPress como el logo, el enlace y aspecto del formulario para que se adapte al diseño de nuestro sitio.

Indice de contenido

Editar página de acceso / login de WordPress

En este artículo veremos como editar puntualmente la página de acceso / logín la cual nos permite, entre otras cosas, ingresar al sitio como administrador o usuario registrado. Modificaremos la imagen Logo, la que aparece en la parte superior del formulario de entrada, el enlace de dicho logo que de manera predeterminado cuando instalamos el CMS apunta a la HOME de WordPress y también retocaremos mediante CSS todo el aspecto del formulario, el que nos permite ingresar a nosotros y a los usuarios si es que están registrados.

Al ser contenido dinámico programado en PHP la página en cuestión quedará modificada no solo en la sección de acceso sino también en la de salida y en diferentes secciones de la misma como puede ser las notificaciones cuando un usuario pretende entrar y su usuario y/o contraseña es incorrecto o no existe, o por ejemplo en la página que se genera cuando hacemos un clic en el enlace de recuperación de contraseña la que muestra el formulario para ingresar los datos de registro así el propio sistema enviará un mail con la información de recuperación.

Esto es muy ventajoso ya que con un poco de edición CSS podemos modificar todo el contenido de una vez no teniendo que retocar página por página.

Página de acceso a dontecno
Página de acceso a dontecno

Modificaciones en el código de WordPress

WordPress es un CMS gratuito que nos permite crear, diseñar y estructurar nuestro sitio sin ningún tipo de limitaciones. Cada línea de código puede ser editada a nuestro gusto, sólo hay que saber hacerlo. Repasemos juntos cada uno de los puntos para dejar nuestro sitio y marca bien diferenciada.

WordPress utiliza en el sitio que creamos una publicidad no invasiva lo que quiere decir que en ciertas páginas y contenido podemos encontrar algún logo o enlace que apunte a información sobre sí mismo. Como dijimos antes, todo esto puede ser editado y es perfectamente legal hacerlo. Al modificar el código no estaremos infringiendo ninguna ley WordPress.

Editando la plantilla PHP de nuestro tema

El archivo que vamos a editar concretamente es functions.php, se encuentra en nuestro tema, el que tenemos activo y editamos muchas veces para realizar una tarea específica en todo el contenido de nuestras entradas.

Por que editar el archivo functions.php y no las plantillas de WordPress?

Es muy importante siempre que hagamos un cambio de este tipo en nuestro sitio que tengamos en cuenta las actualizaciones del sistema WordPress o el de nuestro tema. Si modificamos directamente los archivos de plantilla PHP de WordPress o tema como los CSS de los mismos y se produce una actualización de contenido perderemos todos los cambios que hayamos hecho y tendremos que volver a empezar. Y créeme que no es una tarea fácil. Llegado cierto tiempo que tengas tu sitio, ya publicado y visible al mundo harás tantas modificaciones que te perderás en ellas y si no tienes bien diferenciado el contenido original y el que vayas agregando estarás en serios problemas.

Es por eso que como primer paso deberás crear un tema HIJO para editar todo el contenido de tu tema. Puedes leer este artículo donde te explico claramente Como crear un tema hijo en WordPress .

También te recomiendo que antes de empezar realices una copia de seguridad del o los archivos que vamos a modificar y ante un desastre siempre puedes restaurar a la versión que antes funcionaba correctamente sin miedo a trabajar y editar el contenido.

Dicho todo este vamos a empezar a realizar las modificaciones necesarias para editar la página de acceso / logín de nuestro sitio WordPress, esa página que es la entrada de todos nuestros usuarios registrados o posibles usuarios que van a formar parte de nuestra humilde comunidad.

Abriremos el archivo function.php ubicado en wp-content/themes/TU-TEMA/ y en cualquier parte de él escribiremos el siguiente código:

// Modificación de la página de acceso a WordPress
// Por CSS modificamos la imagen logo y el aspecto del formulario
function my_login_logo() { ?>
  <style type="text/css">
    body {
    background-color: #fff !important;
    }
    form {
    min-height: 4.2em !important;
    padding: .6em 1.2em .8em !important;
    border: 1px solid #d9d733 !important;
    color: #6d45aa !important;
    background: #ffffd8 !important;
    text-indent: 0 !important;
    -moz-border-radius: 4px !important;
    -webkit-border-radius: 4px !important;
    -khtml-border-radius: 4px !important;
    border-radius: 4px !important;
    -moz-box-shadow: inset 0 0 8em #e3e161 !important;
    -webkit-box-shadow: inset 0 0 8em #e3e161 !important;
    box-shadow: inset 0 0 8em #e3e161 !important;
    }
		
    .login h1 a {
    background-image: url("https://www.tu-sitio.com/tu-imagen.png") !important;
    background-size: auto !important;
    }
  </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

Como verás puedes agregar todas las modificaciones que quieras como si se tratara de una hoja de estilo normal. En este ejemplo modificamos el color de fondo de la página y retocamos bastante el formulario de acceso. La clase .login de la etiqueta H1 A es en la que se debe cambiar el logo por el que queramos, indicando en url(“”) la URL de la imagen que quieres poner.

Si prestas atención todas las propiedades que cambiamos terminan con !important lo que permite que el navegador tome como prioridad el valor que le indicamos nosotros.

Modificar enlace y título en la página de acceso

Solo nos falta modificar una cosa para que la página de acceso a nuestro sitio quede totalmente personalizada. El enlace y el título que mostrará el logo cuando nos paremos sobre él con el puntero del mouse en la página de acceso al sitio WordPress.

// Modificamos el enlace del logo WordPress en la página de acceso
function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

// Modificamos el título del enlace
function my_login_logo_url_title() {
    return 'Este es el título del enlace';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

Con la primera función cambiamos el enlace que antes apuntaba a la web de WordPress y ahora lo hará a la HOME de nuestro sitio.

La segunda función cambia el título del logo / enlace que se muestra cuando nos paramos con el puntero sobre él.

Resumen

Vimos como modificar la página de acceso a WordPress

La página de acceso a nuestro sitio es el empleado del comercio que atiende con una sonrisa cuando un cliente entra a comprar. El que tenga un sitio hecho con WordPress sabrá las ventajas de usar este fantástico CMS pero los usuarios no tienen por qué saberlo, si ven el logo de WordPress en la entrada a tu sitio quizás no les agrade mucho y hasta los confunda.

Es por eso que vimos como podemos modificar con unas simples funciones, agregadas a la plantilla de tu tema, todo el aspecto de la página de acceso / login.

Aprovecha a lucirte y has que la bienvenida a tus usuarios sea única!

Te fue útil el artículo? Califícalo

Votos: - Promedio: