• Inicio
  • Libros sobre WordPress
  • WordPress Hosting
  • Acerca de
Sign in
Welcome!Log into your account
¿Olvidaste tu contraseña?
Password recovery
Recupera tu contraseña
Buscar
Sign in
¡Bienvenido! Ingresa en tu cuenta
Forgot your password? Get help
Password recovery
Recupera tu contraseña
Se te ha enviado una contraseña por correo electrónico.
WordPress Directo
  • Inicio
  • Libros sobre WordPress
  • WordPress Hosting
  • Acerca de
General Cómo personalizar la pantalla de login de WordPress
  • General

Cómo personalizar la pantalla de login de WordPress

Por
Jorge López
-
Jun 28, 2019
Share
Facebook
Twitter
Linkedin
Pinterest
Tumblr
WhatsApp
Telegram
Email

    Está claro que contar con una buena imagen corporativa refuerza nuestra marca y hace que la percepción de clientes y usuarios hacia nosotros sea más robusta y profesional. Por eso no hay que dejar escapar la oportunidad de dotar de nuestra personalidad a cada uno de los elementos que nos pertenecen, producimos o simplemente, estamos relacionados. Uno de estos elementos al que solemos olvidar y que siempre parece poco profesional al verse el logotipo de la empresa a la que pertenece en sí es el login de WordPress. Al entrar aparece el logo del CMS, con sus colores corporativos y demás. Eso da una sensación de poco detallismo. ¿Es posible cambiar esto? La respuesta es sí y en este artículo te indicamos cómo hacerlo.

    El nuevo filtro logo_headertext introducido en WordPress 5.2

    Una de las nuevas características que más pasó desapercibida en WordPress 5.2 fue la adición de un nuevo filtro que nos ayuda a modificar el logo que aparece en la pantalla de login del backoffice de WordPress que, por si no recuerdas, es el del propio WordPress.

    Es decir, si abres el fichero wp-login.php del directorio raíz de tu proyecto, verás cómo se utiliza el nuevo filtro. Este es el código en el que aparece:

    $login_header_text = apply_filters( 'login_headertext', $login_header_text );

    Añadir un logo personalizado mediante el nuevo filtro

    Ya que hemos visto como en esta nueva versión de WordPress se utiliza el filtro para modificar el logo de la pantalla de login, vamos a proceder a modificarlo. Para ello, abre el fichero functions.php del tema que estés utilizando actualmente en WordPress e introduce este código al final.

    function cambiar_login_logo( $login_header_text ) {
     
        $logo_url          = 'LA_URL_DE_TU_LOGO_AQUI';
     
        $login_header_text = ''; .
        $login_header_text = '<img src="' . $logo_url . '" alt="' . get_bloginfo( 'title' ) . '" />';
     
        return $login_header_text;
     
    }
     
    // Si la versión de WP es igual o mayor a la 5.2...
    if ( 5.2 >= get_bloginfo( 'version' ) ) {
        add_filter( 'login_headertext', 'cambiar_login_logo' );
    }

    Ni que decir tiene que debes modificar el texto LA_URL_DE_TU_LOGO_AQUI por la URL de tu logo en el código.

    Ahora vamos a eliminar los estilos CSS que WordPress aplica al logo por defecto. WordPress sabe que ahí se va a mostrar el logo de WordPress (valga la redundancia) por eso cuenta con reglas CSS que se adecúan perfectamente a sus dimensiones. Pero claro, nuestro logo es posible que cuente con unas dimensiones bien distintas. Por eso, hay que modificarlos.

    Añade esto en el fichero functions.php del tema que estés utilizando actualmente:

    function cambiar_estilos_login_logo() { ?>
        <style type="text/css">
            #login h1 a,
            .login h1 a {
                    background-size: auto;
                    background-image: none;
                    background-position: center center;
                    text-indent: 0;
                    width: auto;
                    height: auto;
                    max-width: 320px; //el ancho en px de tu logo
            }
     
            #login h1 a img,
            .login h1 a img {
            max-width: 100%;
            }
        </style>
    <?php }
    add_action( 'login_enqueue_scripts', 'cambiar_estilos_login_logo');

    ¿Y si gestionamos esto con el Personalizador de WordPress?

    El anterior código para reemplazar el logo de WordPress por nuestro logo en la pantalla de WordPress está muy bien, pero peca de estático. Si alguna vez quisiéramos modificar el logo, tendríamos que editar otra vez el código del archivo functions.php y eso puede ser delicado.

    Lo ideal es que podamos modificar el logo de la pantalla de login desde el Personalizador de WordPress.

    Este código sustituye al primer código del artículo:

    function cambiar_login_logo( $login_header_text ) {
     
        $login_header_text = $login_header_text;
     
        if ( '' != get_theme_mod( 'logo_login' ) ) {
            $login_header_text = '';
            $logo_url          = get_theme_mod( 'logo_login' );
            $login_header_text = '<img src="' . $logo_url . '" alt="' . get_bloginfo( 'title' ) . '" />';
        }
     
        return $login_header_text;
     
    }
     
    // Si la versión de WP es igual o mayor a la 5.2...
    if ( 5.2 >= get_bloginfo( 'version' ) ) {
        add_filter( 'login_headertext', 'cambiar_login_logo' );
    }

    Mediante este código contaremos con una sección en el Personalizador de WordPress en la que podremos subir el logo que nos de la gana para que se miestre en el login de la plataforma. Un lujo, ¿verdad?

    Modificar colores también con el Personalizador

    Ahora que hemos sentido en nuestras carnes el poder del Personalizador de WordPress, ¿qué tal si lo extendemos a otros ámbitos como los colores de diversos elementos de la página de login?

    En este caso vamos a modificar el color de los enlaces. Para ello debes agregar este código en el segundo código que he puesto en este artículo (sí, el que modificaba el CSS del logo).

    body.login a,
    body.login a:visited,
    body.login a:focus,
    body.login a:active,
    body.login #backtoblog a,
    body.login #nav a {
        color: <?php echo get_theme_mod( 'login_link_color' ); ?>;
    }
     
    body.login #backtoblog a:hover,
    body.login #nav a:hover,
    body.login h1 a:hover,
    body.login #backtoblog a:focus,
    body.login #nav a:focus,
    body.login h1 a:focus {
        color: <?php echo get_theme_mod( 'login_link_hover_color' ); ?>;
    }

    Ahora, vamos a modificar la apariencia de los botones que aparecen en pantalla. Huelga decir que he hecho que los botones sean full-width. Si no te gusta, recuerda modificar el porcentaje del atributo width del código. Ojo, este código va donde iba el anterior.

    body.login.wp-core-ui .button-primary {    background-color: <?php echo get_theme_mod( 'login_button_color' ); ?>;    border-color: <?php echo get_theme_mod( 'login_button_color' ); ?>;    box-shadow: none;    text-shadow: none;    color: <?php echo get_theme_mod( 'login_button_text_color' ); ?>;    width: 100%;    margin-top: 16px;    padding: 6px 12px 6px 12px;    height: auto;    font-size: 16px;}body.login.wp-core-ui .button-primary:hover {    background-color: <?php echo get_theme_mod( 'login_button_hover_color' ); ?>;    border-color: <?php echo get_theme_mod( 'login_button_hover_color' ); ?>;    box-shadow: none;    text-shadow: none;    color: <?php echo get_theme_mod( 'login_button_hover_text_color' ); ?>;}

    Y hasta aquí nuestro artículo sobre cómo personalizar la pantalla de login de WordPress. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. ¡Nos leemos!

    • Etiquetas
    • acceso
    • acceso a backoffice
    • backoffice de WordPress
    • login
    Facebook
    Twitter
    Linkedin
    Pinterest
    Tumblr
    WhatsApp
    Telegram
    Email
      Artículo anteriorPlugins y herramientas para consultar el mapa de calor de tu WordPress
      Artículo siguienteCómo quitar el «Creado con WordPress» del pie
      Jorge López
      http://www.colorvivo.com
      Soy programador web y me gusta mucho el diseño gráfico, la fotografía y todo lo relacionado con las nuevas tecnologías. En mis ratos libres me encanta dibujar y escuchar música. ¡No podría vivir sin ella! Aparte soy un friki de las series...las devoro

      Artículo relacionadosMás del autor

      ¿Qué novedades trae la nueva versión de WordPress 5.6?

      Contrata tu plan de Hosting ahora y ahorra un 50% en su precio

      Las tendencias de newsletter en 2020

      Divi 2.5 la plantilla que ha revolucionado WordPress
      Amazon Affiliate WordPress Plugin - The #1 plugin for successful Affiliate Marketing

      Categorías

      • Código fuente
      • Colaboración
      • General
      • Noticias
      • Optimización
      • Plantillas
      • Plugins
      • SEO
      • Social Media
      • Tutoriales
      • wordpress.com
      • wordpress.org

      Empresa con más de 20 años de experiencia en blogging y una amplia red de medios digitales que ofrece servicios relacionados con los contenidos online: redacción de blogs y webs, publicidad, post patrocinados, y diseño y desarrollo web.

      Más información | Contacto
      • Política de privacidad y cookies
      • Aviso Legal
      © Contenidos bajo licencia Creative Commons (CC) 1995-2018 Medios y Redes online. Otros contenidos se cita fuente.
      Esta página utiliza cookies para mejorar tu experiencia de navegación. Si sigues navegando por la web aceptas su uso. Aceptar Más info
      Politica de privacidad y cookies

      Privacy Overview

      This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
      Necesarias
      Siempre activado

      Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

      No necesarias

      Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.