Categoria
TutoriaisPostado em
24 de maio de 2019Última Atualização
13 de junho de 2019Visualizações
1854Começ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.