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:
Os tamanhos máximos para logo do cliente na página de login são: 420px de largura e 180px de altura.