Neste artigo vou demonstrar como podemos alterar um pouco o visual da página de login do WordPress, ela que é utilizada para autenticação no WordPress.
Além de alterar a imagem do logo também vamos mudar o link. Ao clicar na imagem agora será redirecionado para a home do seu site.
Para fazer isso vamos criar algumas funções e chamando elas nos ganchos (Hooks) do WordPress.
Para a imagem do logo vamos usar custom-logo, que é aquela imagem que é definida no painel do WordPress em Aparência -> Personalizar -> Identidade do site -> Logo.
Então em seu arquivo functions.php, vale sempre o lembrete de não alterar esse arquivo de temas de terceiros no pai, a boa prática é criar um filho, veja aqui como fazer isso.
/*
* Modifica a imagem do logo na tela de login e as cores de fundo e do texto
*/
if ( ! function_exists('wpi_custom_login') ) {
function wpi_custom_login(){
if ( has_custom_logo( )) {
$image = wp_get_attachment_image_src( get_theme_mod( 'custom_logo' ), 'full' );
?>
<style type="text/css">
.login h1 a {
background-image:url(<?php echo esc_url( $image[0] ); ?>);
background-size:contain;
height:60px;
width:auto;
}
body {
background: #204273;
}
.login #backtoblog a,
.login #nav a {
color:#fff
}
</style>
<?php
}
}
}
add_action( 'login_head', 'wpi_custom_login' );
Muito bem esta parte além de definir a imagem que será usada também iniciei umas customizações de fundo e da cor dos links, a partir disso a criatividade pode ir longe.
Inclusive podemos criar um plugin para realizar está ação, se você ficou interessado neste plugin, comenta aqui que dependendo do interesse podemos transformar esse trecho em plugin, para que a pessoa possa alterar a imagem e as cores de fundo e dos links, quem sabe até outros CSSs.
Mas não acaba por aqui, agora vamos incluir uma função que vai ser capaz alterar a URL do link do logo, para isso fazer criar um filtro com o seguinte trecho:
/**
* Alterar o link do logo na tela de login
*/
if ( ! function_exists('wpi_new_link')) {
function wpi_new_link(){
return home_url();
}
}
add_filter( 'login_headerurl', 'wpi_new_link');
Prontinho agora seu tema terá essas novas funções que irão modificar o logo da sua página de login do WordPress e outros CSSs e também o link do logo, que levará para a home.