Categorias: CSS | PHP

Tags: WordPress

Customizações da página de login e painel administrativo do WordPress

Escrito por Amanda de Lavra

9 de fevereiro de 2024
Para todo o site que eu faço, personalizo a página de login e também o wp-admin para ficar com a marca do cliente. Recentemente, aperfeiçoei o código para que o login ficasse no meio da página, tanto verticalmente quanto horizontalmente. Segue código usado aqui neste blog:
//Customiza página de login do WP
function al_login_logo() { ?>

  <style type="text/css">
    html {
      height: 100%;
      display: table;
      margin: 0;
      padding: 0;
    }
    
    .login {
      background: center center url(<?php echo get_stylesheet_directory_uri(); ?>/img/login-fundo.png);
      background-color: #C87C81;
      display: table-cell;
      vertical-align: middle;
      height: 100%;
      width: 100vw;
      padding: 20px 0 !important;
    }
    
    #login {
      padding: 0 !important;
    }

    @media only screen and ( min-width: 440px )  {
		#login {
			width: 420px !important;
		}
		#login h1 {
			padding-bottom: 30px;
		}
    }

    #login h1 {
      height: 180px;
      width: 100%;
    }

    #login h1 a, .login h1 a {
      background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/img/logo-login.png);
      width: 100%;
      height: 100%;
      background-size: 100%;
      background-repeat: no-repeat;
    }
  
    #loginform #wp-submit, #language-switcher input {
      color:  #ffffff;
      background-color: #3f6460;
      border-color: #3f6460;
      box-shadow: none;
      text-shadow: none;
      font-weight: bold;
    }

    #loginform #wp-submit:hover, #language-switcher input:hover {
      background-color: #c9b790;
      border-color: #c9b790;
    }

    .login #backtoblog a, .login #nav a {
      color: #3f6460 !important;
    }

    .login #backtoblog a:hover, .login #nav a:hover {
      color: #333330 !important;
    }

    .dashicons-translation::before {
      color: #3f6460;
    }
    </style>
<?php }
add_action('login_enqueue_scripts', 'al_login_logo');

//Altera url da imagem na página de login padrão do WP
function al_login_logo_url() {

  return home_url();

}
add_filter('login_headerurl', 'al_login_logo_url');

//Altera título no login padrão do WP para acessibilidade
function al_login_logo_title() {

	$titulo = get_bloginfo( 'name' );
	return $titulo;

}
add_filter('login_headertext', 'al_login_logo_title');

//Remover WP Logo e Nome do site da toolbar
function al_toolbar_remove_menu() {
  
  global $wp_admin_bar;

  $wp_admin_bar->remove_menu( 'wp-logo' );
  $wp_admin_bar->remove_menu( 'site-name' );

}
add_action('wp_before_admin_bar_render', 'al_toolbar_remove_menu');

//Adiciona Nome do Site com ícone
function al_toolbar_add_menu() {
  
  global $wp_admin_bar;

  $tema = get_stylesheet_directory_uri();
  $do_title = '<img src="' . $tema . '/img/icone-adminbar.png" style="vertical-align:middle;margin:0 8px 0 6px;max-width:24px;max-height:24px"/>' . get_bloginfo( 'name' );
  $do_url = is_admin() ? site_url() : admin_url();

  $wp_admin_bar->add_menu( array(
    'id'    => 'site-al',
    'title' => $do_title,
    'href'  => $do_url
  ) );

}
add_action('admin_bar_menu', 'al_toolbar_add_menu',  10);
É importante notar que geralmente não uso uma imagem de background, então essa linha pode ser excluída. Em alguns casos, eu uso degradê. Segue código para 2 tipos de degradê diferentes:
/*Linear gradiente*/
.login {
	background-image: linear-gradient(to bottom right, #412979 0%, #ff6100 100%);
	background-attachment: fixed;
}

/*Radial gradiente*/
.login {
	background-image: radial-gradient(#033320 0%, #0A7047 100%);
	background-attachment: fixed;
}
Os tamanhos máximos para logo do cliente na página de login são: 420px de largura e 180px de altura.

Posts relacionados

Aviso de Coming Soon quando não há posts no Blog no Elementor

Aviso de Coming Soon quando não há posts no Blog no Elementor

O cliente queria um blog no site, mas não tinha nenhum conteúdo ainda para publicar, por isso, pediu para que aparecesse Coming Soon! no lugar dos posts. O módulo Posts do Elementor não dá a opção de personalizar a mensagem quando não há posts na query. Simplesmente...

Remover Post Type Projects

Remover Post Type Projects

Eu estava fazendo um site que usaria o tipo de post nativo do Divi que é o Projeto, mas depois a agência mudou de ideia e achei melhor retirar completamente o post type do site. Achei um tutorial em:...

Botão Leia Mais no Elementor

Botão Leia Mais no Elementor

O site do cliente tinham alguns textos que eram muito extensos e, num layout de coluna, variavam muito de tamanho. Decidi adaptar o que já havia feito no Divi, ao incluir um botão Leia Mais (https://blog.amandadelavra.com.br/modulo-texto-com-botao-leia-mais/), mas...