Customizando a tela de login do WordPress - Criando Plugin - Parte 2

Customizando a tela de login do WordPress - Criando Plugin - Parte 2

CUSTOMIZANDO A TELA DE LOGIN DO WORDPRESS - CRIANDO PLUGIN - PARTE 1

Categoria

Tutoriais

Postado em

24 de maio de 2019

Tempo de leitura

10 minutos

Visualizações

4834

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.

Classe de referência

Customização da API

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:

Customização de cor

Customização de Imagens

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.

Gostou? compartilhe nas redes!! ;)

Deixe seu comentário