Começando o segundo tutorial sobre a criação do plugin para Customização da tela de Login.
Para quem ainda não viu o artigo (Parte 1) segue abaixo o link:
Customizando a tela de login do WordPress – Criando Plugin – Parte 1
Como passado no artigo anterior, nós vamos agora criar o arquivo customizando.php.
O arquivo customizando.php será onde trabalharemos com a classe $wp_customize, segue abaixo alguns links de referência para consulta.
Mão na massa..!! 🙂
Vamos criar no mesmo nível de acesso, ou seja, na pasta point_paginadelogin que criamos no artigo anterior, o arquivo tanto comentado acima customizando.php.
Após criar o arquivo insira o código abaixo:
<?php
function point_pagina_login_customizer($wp_customize) {
/*******************************************************************************************************************
* AQUI SERÁ INSERIDO O CONTEUDO DO NOSSO CUSTOMIZER
******************************************************************************************************************/
}
add_action( 'customize_register' , 'point_pagina_login_customizer');
No código acima nós criamos uma função chamada point_pagina_login_customizer, onde passamos a classe ($wp_customize) dentro da função e em seguida registramos a função adicionando a ação add_action ('customize_register' , 'point_pagina_login_customizer');
Informação: Observe que o point_pagina_login_customizer é o nome da função que criamos e registramos.
Agora vamos começar a registrar os campos, gravem bem as 3 informações que vou passar abaixo:
1 – Seção
2 – Configuração
3 – Controle
As informações acima são basicamente o que usaremos para registrar as customizações.
Para abrir um campo de customização no menu (Aparência > Personalizar) precisamos criar uma seção add_section conforme abaixo:
//********** CRIANDO A SEÇÃO $wp_customize->add_section( 'sec_tela_login' , array( 'title' => __( 'Tela de Login' , 'pointcomunicacao' ), 'description' => __( 'Configuração da tela de login' , 'pointcomunicacao' ), ));
add_section: Estamos adicionando a seção
title: titulo da sessão
description: Descrição da seção
Ao acessar o menu Aparência > Personalizar você verá as seguintes imagens
Após clicar irá aparecer assim:
Veja que apareceu o título e descrição conforme colocamos na seção.
Abaixo vou ser mais breve para que o artigo não fique tão extenso.
//********** BACKGROUND
$wp_customize->add_setting( 'PointSet_background_login' , array(
'type' => 'theme_mod',
'default' => ''
));
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'PointCtrl_background_login' , array(
'label' => __( 'Background' , 'pointcomunicacao' ),
'description' => __( 'Faça o Upload da imagem de fundo da tela de login' , 'pointcomunicacao' ),
'section' => 'sec_tela_login',
'settings' => 'PointSet_background_login',
'context' => 'image'
)));
//********** LOGOTIPO
$wp_customize->add_setting( 'PointSet_logotipo_login' , array(
'type' => 'theme_mod',
'default' => ''
));
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'PointCtrl_logotipo_login' , array(
'label' => __( 'Logotipo' , 'pointcomunicacao' ),
'description' => __( 'Faça o Upload do logotipo da tela de login' , 'pointcomunicacao' ),
'section' => 'sec_tela_login',
'settings' => 'PointSet_logotipo_login',
'context' => 'image'
)));
//********** LARGURA DO LOGOTIPO
$wp_customize->add_setting( 'PointSet_logotipo_width' , array(
'type' => 'theme_mod',
'default' => ''
));
$wp_customize->add_control( 'PointCtrl_logotipo_width' , array(
'label' => __( 'Largura' , 'pointcomunicacao' ),
'description' => __( 'Coloque a largura do seu logotipo, a medida é em pixel, somente número' , 'pointcomunicacao' ),
'section' => 'sec_tela_login',
'settings' => 'PointSet_logotipo_width',
'context' => 'text'
));
$wp_customize->add_setting( 'PointSet_logotipo_height' , array(
'type' => 'theme_mod',
'default' => ''
));
//********** ALTURA DO LOGOTIPO
$wp_customize->add_control( 'PointCtrl_logotipo_height' , array(
'label' => __( 'Altura' , 'pointcomunicacao' ),
'description' => __( 'Coloque a altura do seu logotipo, a medida é em pixel, somente número' , 'pointcomunicacao' ),
'section' => 'sec_tela_login',
'settings' => 'PointSet_logotipo_height',
'context' => 'text'
));
$wp_customize->add_setting( 'PointSet_pglogin_cor_background' , array(
'type' => 'theme_mod',
'default' => '#333333'
));
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize , 'PointCtrl_pglogin_cor_background' , array(
'label' => __( 'Cor do Background' , 'pointcomunicacao' ),
'description' => __( 'Selecione a cor do background, essa cor só terá efeito se não tiver uma imagem inserida acima no campo <b>background</b>, cor padrão <i>#333333</i>' , 'pointcomunicacao' ),
'section' => 'sec_tela_login',
'settings' => 'PointSet_pglogin_cor_background',
'context' => 'color'
)));
//********** COR PADRÃO
$wp_customize->add_setting( 'PointSet_pglogin_cor' , array(
'type' => 'theme_mod',
'default' => '#a8cf45'
));
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize , 'PointCtrl_pglogin_cor' , array(
'label' => __( 'Cor Padrão' , 'pointcomunicacao' ),
'description' => __( 'Selecione a cor padrão da tela de login, cor padrão <i>#a8cf45</i>' , 'pointcomunicacao' ),
'section' => 'sec_tela_login',
'settings' => 'PointSet_pglogin_cor',
'context' => 'color'
)));
$wp_customize->add_setting( 'PointSet_pglogin_cor_secundaria' , array(
'type' => 'theme_mod',
'default' => '#195faa'
));
//********** COR SECUNDÁRIA
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize , 'PointCtrl_pglogin_cor_secundaria' , array(
'label' => __( 'Cor Secundária' , 'pointcomunicacao' ),
'description' => __( 'Selecione a cor secundária da tela de login, cor padrão <i>#195faa</i>' , 'pointcomunicacao' ),
'section' => 'sec_tela_login',
'settings' => 'PointSet_pglogin_cor_secundaria',
'context' => 'color'
)));
Acima deixei tudo comentado para que possam ter uma visão de como foram criado os campos.
Vou listar abaixo algumas classes de referencias que usei para consultarem:
Agora vamos para o arquivo class.pagina-login.php que foi onde inseri todo o css.
<?php
/**
* Customização de tela de login
*
* Link de referencia: https://codex.wordpress.org/Customizing_the_Login_Form
*
* @package WordPress
* @subpackage Point Comunicação
*
*
*/
/***********************************************************************************************************************
* MODIFICANDO A TELA DE LOGIN
**********************************************************************************************************************/
function point_login_estilo(){ ?>
<style type="text/css">
html, body{
height: 100%;
}
body{
background-color: <?php echo get_theme_mod( 'PointSet_pglogin_cor_background' )?>;
background-image: url(<?php echo get_theme_mod( 'PointSet_background_login' ); ?>);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
}
.login #login_error {
border-left-color: #dc3232;
width: 420px;
margin: 0 auto;
margin-bottom: 15px;
}
#login{
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
position: fixed;
}
#login form{
width: 400px;
margin: 0 auto;
}
.login .message{
width: 420px;
margin: 0 auto;
margin-bottom: 20px;
}
.login h1 a{
background-image: url(<?php echo get_theme_mod( 'PointSet_logotipo_login' ); ?>);
background-size:
<?php echo get_theme_mod( 'PointSet_logotipo_width' ); ?>px
<?php echo get_theme_mod( 'PointSet_logotipo_height' ); ?>px;
width: <?php echo get_theme_mod( 'PointSet_logotipo_width' ); ?>px;
height: <?php echo get_theme_mod( 'PointSet_logotipo_height' ); ?>px;
outline: none;
box-shadow:none !important;
}
.login #nav{
padding: 0;
text-align: center;
width: 447px;
margin: 0 auto;
}
.login #nav a{
color: #FFFFFF;
display: inline-block;
outline: none;
box-shadow:none !important;
padding: 5px 20px;
background-color: <?php echo get_theme_mod( 'PointSet_pglogin_cor_secundaria' ); ?>;
}
.login #nav a:hover{
color: #FFFFFF;
}
.login #backtoblog a{
display: none;
}
.login form{
padding-top: 40px;
background: rgba(0, 0, 0, 0.8);
border-bottom: 2px solid <?php echo get_theme_mod( 'PointSet_pglogin_cor_secundaria' ); ?>;
border-top: 2px solid <?php echo get_theme_mod( 'PointSet_pglogin_cor_secundaria' ); ?>;
}
.login label{
color: #888;
}
.login form .input, .login input[type=text]{
background: transparent;
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 1px solid <?php echo get_theme_mod( 'PointSet_pglogin_cor_secundaria' ); ?>;
outline: none;
box-shadow:none !important;
}
.login form input[type=checkbox]{
background: rgba(0, 0, 0, 0.2);
-webkit-appearance: none;
-moz-appearance: none;
outline: none;
box-shadow:none !important;
}
input[type="checkbox"]:checked::before{
color: <?php echo get_theme_mod( 'PointSet_pglogin_cor' ); ?>;
outline: none;
box-shadow:none !important;
}
.login form input:focus,
.login form input{
color: #fff;
}
.login form .forgetmenot{
float: none;
display: block;
text-align: right;
}
.login .button-primary{
float: none;
display: block;
margin: 0 auto;
margin-top: 15px;
padding: 50px 20px;
}
.wp-core-ui .button.button-large{
padding: 20px 40px;
line-height: 0;
}
.wp-core-ui .button-primary{
background-color: <?php echo get_theme_mod('PointSet_pglogin_cor'); ?>;
border: 0;
border-radius: 0;
text-shadow: none;
text-transform: uppercase;
transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
box-shadow: none;
}
.wp-core-ui .button-primary:hover{
background-color: <?php echo get_theme_mod('PointSet_pglogin_cor_secundaria'); ?>;
transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
}
.wp-core-ui .button{
box-shadow: none;
}
@media only screen and (max-width: 500px) {
#login form{
width: 250px !important;
}
.login .message{
width: 270px !important;
}
}
</style>
<?php }
add_action( 'login_head' , 'point_login_estilo' );
/*Função que altera a URL, trocando pelo endereço do seu site*/
function point_url_site() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'point_url_site' );
/*Função que adiciona o nome do seu site, no momento que o mouse passa por cima da logo*/
function point_title_logo_login() {
return 'Voltar para o site';
}
add_filter( 'login_headertitle', 'point_title_logo_login' );
Para chegar a esse resultado das classes utilizei como referencia a documentação de customização do formulário.
Desculpem se fui muito breve.
Grande abraço a todos e espero ter ajudado.
