1. Modificação do Template de Portfólio
Uma das principais melhorias que fiz no site foi a modificação do template de portfólio. Nesse processo, criei botões que podem ser controlados diretamente pelo administrador e que refletem no front-end do site.
Seção 1: Informações sobre o Curso
Na administração do WordPress, criei uma seção chamada “Informações sobre o Curso”. Dentro dessa seção, temos os seguintes controles:
Aba 1: Sobre o Curso
Modalidade do Curso: O administrador pode escolher entre Ao Vivo, Gravada, E-book ou Híbrido. Apenas uma opção pode ser selecionada.
- O Curso é: O administrador pode marcar se o curso é pago ou gratuito.
- Carga Horária: Um campo de texto para inserir a carga horária do curso.
- Público Alvo: Um campo de texto para descrever o público-alvo.
- Produto da Loja: Esse campo permite fazer um link direto para um produto já cadastrado no WooCommerce.
Aba 2: Data do Curso
- Data: Um seletor de data para definir a data do curso.
- Hora: Um seletor de hora para definir o horário do curso.
Código do painel de Informações:
<?phpif( function_exists('acf_add_local_field_group') ):acf_add_local_field_group(array('key' => 'group_6125993f9cb6f','title' => 'Informações sobre o curso:','fields' => array(array('key' => 'field_61297349dfd1d','label' => 'Sobre o curso','name' => '','type' => 'accordion','instructions' => '','required' => 0,'conditional_logic' => 0,'wrapper' => array('width' => '','class' => '','id' => '',),'open' => 1,'multi_expand' => 1,'endpoint' => 0,),array('key' => 'field_6129ac2e43a46','label' => 'Modalidade do curso','name' => 'modalidade_do_curso','type' => 'radio','instructions' => '','required' => 1,'conditional_logic' => 0,'wrapper' => array('width' => '40','class' => '','id' => '',),'formula' => '','calculated_format' => '','blank_if_zero' => 0,'readonly' => 0,'choices' => array('Ao vivo' => 'Ao vivo','Gravado' => 'Gravado','E-Book' => 'E-Book','Hibrido' => 'Hibrido',),'allow_null' => 0,'other_choice' => 0,'default_value' => '','layout' => 'horizontal','return_format' => 'value','save_other_choice' => 0,),array('key' => 'field_612cc791f5f2a','label' => 'O curso é:','name' => 'o_curso_e:','type' => 'radio','instructions' => '','required' => 1,'conditional_logic' => array(array(array('field' => 'field_6129ac2e43a46','operator' => '!=','value' => 'E-Book',),),),'wrapper' => array('width' => '40','class' => '','id' => '',),'formula' => '','calculated_format' => '','blank_if_zero' => 0,'readonly' => 0,'choices' => array('Curso Pago' => 'Curso Pago','Curso Gratuito' => 'Curso Gratuito',),'allow_null' => 0,'other_choice' => 0,'default_value' => '','layout' => 'horizontal','return_format' => 'value','save_other_choice' => 0,),array('key' => 'field_6127d261b719c','label' => 'Carga horária','name' => 'carga_horaria','type' => 'text','instructions' => '','required' => 0,'conditional_logic' => array(array(array('field' => 'field_6129ac2e43a46','operator' => '!=','value' => 'E-Book',),),),'wrapper' => array('width' => '20','class' => '','id' => '',),'formula' => '','calculated_format' => '','blank_if_zero' => 0,'readonly' => 0,'default_value' => '','placeholder' => 'Informe a carga horária do curso:','prepend' => '','append' => '','maxlength' => '',),array('key' => 'field_6125998d1dccf','label' => 'Público Alvo','name' => 'Público Alvo','type' => 'text','instructions' => '','required' => 0,'conditional_logic' => array(array(array('field' => 'field_6129ac2e43a46','operator' => '!=','value' => 'E-Book',),),),'wrapper' => array('width' => '50','class' => '','id' => '',),'formula' => '','calculated_format' => '','blank_if_zero' => 0,'readonly' => 0,'default_value' => '','placeholder' => 'Descreva o público alvo:','prepend' => '','append' => '','maxlength' => '',),array('key' => 'field_6129bd775ee86','label' => 'Produto da Loja','name' => 'produto','type' => 'post_object','instructions' => '','required' => 0,'conditional_logic' => array(array(array('field' => 'field_612cc791f5f2a','operator' => '==','value' => 'Curso Pago',),),),'wrapper' => array('width' => '50','class' => '','id' => '',),'formula' => '','calculated_format' => '','blank_if_zero' => 0,'readonly' => 0,'post_type' => array(0 => 'product',),'taxonomy' => '','allow_null' => 0,'multiple' => 1,'return_format' => 'id','ui' => 1,),array('key' => 'field_61296f7360979','label' => 'Data do Curso','name' => '','type' => 'tab','instructions' => '','required' => 0,'conditional_logic' => array(array(array('field' => 'field_6129ac2e43a46','operator' => '==','value' => 'Ao vivo',),),array(array('field' => 'field_6129ac2e43a46','operator' => '==','value' => 'Hibrido',),),),'wrapper' => array('width' => '','class' => '','id' => '',),'formula' => '','calculated_format' => '','blank_if_zero' => 0,'readonly' => 0,'placement' => 'top','endpoint' => 0,),array('key' => 'field_6129b3e1fd55b','label' => 'Data','name' => 'data','type' => 'date_picker','instructions' => '','required' => 0,'conditional_logic' => 0,'wrapper' => array('width' => '20','class' => '','id' => '',),'formula' => '','calculated_format' => '','blank_if_zero' => 0,'display_format' => 'd/m/Y','return_format' => 'd/m/Y','first_day' => 1,),array('key' => 'field_613ea4def7066','label' => 'Hora','name' => 'hora','type' => 'time_picker','instructions' => '','required' => 0,'conditional_logic' => 0,'wrapper' => array('width' => '20','class' => '','id' => '',),'formula' => '','calculated_format' => '','blank_if_zero' => 0,'readonly' => 0,'display_format' => 'g:i a','return_format' => 'H:i:s',),),'location' => array(array(array('param' => 'post_type','operator' => '==','value' => 'portfolio',),),),'menu_order' => 0,'position' => 'normal','style' => 'default','label_placement' => 'top','instruction_placement' => 'label','hide_on_screen' => array(0 => 'discussion',1 => 'slug',2 => 'page_attributes',3 => 'send-trackbacks',),'active' => true,'description' => '','show_in_rest' => 0,));endif;{codeBox}
Seção 2: Gestão das Ferramentas da Página
Essa seção é exclusiva e contém botões seletivos para controlar as seguintes funcionalidades:
- Barra Lateral: O administrador pode escolher entre Exibir ou Ocultar a barra lateral.
- Contador: O administrador pode escolher entre Exibir ou Ocultar um contador.
- Guia de Preço: O administrador pode escolher entre Exibir ou Ocultar o guia de preço.
Código da Ferramentas de Página
<?phpif( function_exists('acf_add_local_field_group') ):acf_add_local_field_group(array('key' => 'group_613e688dc0468','title' => 'Gestão das ferramentas da pagina','fields' => array(array('key' => 'field_613e6ad22c58e','label' => 'Barra Lateral','name' => 'Ocbarra','type' => 'true_false','instructions' => 'Oculta a barra lateral','required' => 0,'conditional_logic' => 0,'wrapper' => array('width' => '','class' => '','id' => '',),'formula' => '','calculated_format' => '','blank_if_zero' => 0,'readonly' => 0,'message' => '','default_value' => 1,'ui' => 1,'ui_on_text' => 'Exibir','ui_off_text' => 'Ocultar',),array('key' => 'field_613e932c68e6d','label' => 'Contador','name' => 'Occontador','type' => 'true_false','instructions' => 'Oculta contador do fim da Página','required' => 0,'conditional_logic' => 0,'wrapper' => array('width' => '','class' => '','id' => '',),'formula' => '','calculated_format' => '','blank_if_zero' => 0,'readonly' => 0,'message' => '','default_value' => 1,'ui' => 1,'ui_on_text' => 'Exibir','ui_off_text' => 'Ocultar',),array('key' => 'field_63a9c310756ee','label' => 'Guia de Preço','name' => 'guia_de_preco','aria-label' => '','type' => 'true_false','instructions' => 'Ocultar guia de Preço','required' => 0,'conditional_logic' => 0,'wrapper' => array('width' => '','class' => '','id' => '',),'formula' => '','calculated_format' => '','blank_if_zero' => 1,'readonly' => 0,'message' => '','default_value' => 1,'ui_on_text' => 'Exibir','ui_off_text' => 'Ocultar','ui' => 1,),),'location' => array(array(array('param' => 'post_type','operator' => '==','value' => 'portfolio',),),),'menu_order' => 0,'position' => 'side','style' => 'default','label_placement' => 'top','instruction_placement' => 'label','hide_on_screen' => '','active' => true,'description' => '','show_in_rest' => false,));endif;{codeBox}
2. Comportamento Dinâmico dos Campos
Os campos da seção 1 (Sobre o Curso) se comportam de maneira dinâmica com base na modalidade selecionada:
- Modo Ao Vivo ou Híbrido: Todos os campos estão disponíveis.
- Modo Gravado: Apenas os campos O Curso é, Carga Horária, Público Alvo e Produto da Loja estão disponíveis.
- Modo E-book: Todos os campos ficam ocultos.
Código do comportamento do campo no Front:
<?php//Shortcod ocultar barra Lateralfunction ocutbarra(){//Retorna o campo da Data referente ao post que o shortcode está sendo solicitado$acfmod = get_field('Ocbarra');$output= '';if ($acfmod == "1"){$output = "exibir";}else {$output = "ocultar";}return $output;}add_shortcode( 'ocutbarralat', 'ocutbarra' );//Shortcod mudança do texto de dias referente ao acf modalidadefunction acfmodalidade(){//Retorna o campo da Data referente ao post que o shortcode está sendo solicitado$acfmod = get_field('modalidade_do_curso');$acfdata = get_field('data');$horaacfmeta = get_post_meta(get_the_id(),'hora',true); //Retorna do Valor do ACF Hora em Modelo Metadado$dataacfmeta = get_post_meta(get_the_id(),'data',true);$output= '';if ($acfmod == "Gravado"){$output = "Início Imediato!";}else {$output = "Data: " .$acfdata ." às " .$horaacfmeta ;}return $output;}add_shortcode( 'acfdata', 'acfmodalidade' );//Shortcod mudança do botão do textofunction botinscrito(){//Retorna o campo da Data referente ao post que o shortcode está sendo solicitado$acfmod = get_field('o_curso_e:');$output= '';if ($acfmod == "Curso Gratuito"){$output = "Inscreva-se!";}else {$output = "Compre agora";}return $output;}add_shortcode( 'botinscrito', 'botinscrito' );function botinscritourl(){//Retorna o campo da Data referente ao post que o shortcode está sendo solicitado$acfmod = get_field('o_curso_e:');$output= '';if ($acfmod == "Curso Gratuito"){$output = "#gratuito";}else {$output = "#preco";}return $output;}add_shortcode( 'botinscritourl', 'botinscritourl' );//Shortcod ocultar contadorfunction ocutcontador(){//Retorna o campo da Data referente ao post que o shortcode está sendo solicitado$acfmod = get_field('Occontador');$acfmod2 = get_field('modalidade_do_curso');$output= '';if ($acfmod == 1){if ($acfmod2 == 'Ao vivo'){$output = "exibir";}else {$output = "ocultar";}}else {$output = "ocultar";}return $output;}add_shortcode( 'ocutcontinf', 'ocutcontador' );// Shortcord data completafunction timeZone_funch( $atts ){extract(shortcode_atts(array('timezone' => 'America/Sao_Paulo'), $atts));/* America/Sao_Paulo is default Timezone */$output = '';if (in_array($timezone, DateTimeZone::listIdentifiers())){date_default_timezone_set($timezone);$currentTime = date( 'd-m-Y h:i:s A');$output = $currentTime;}else {$output = "Invalid Timezone";}return $output;}add_shortcode( 'current_time', 'timeZone_funch' );//Shortcood datafunction displaydate(){extract(shortcode_atts(array('timezone' => 'America/Sao_Paulo'), $atts));/* America/Sao_Paulo is default Timezone */$output = '';if (in_array($timezone, DateTimeZone::listIdentifiers())){date_default_timezone_set($timezone);$currentTime = date( 'd/m/Y ');$output = $currentTime;}else {$output = "Invalid Timezone";}return $output;}add_shortcode( 'date', 'displaydate' );//Shortcood horafunction displayhora(){extract(shortcode_atts(array('timezone' => 'America/Sao_Paulo'), $atts));/* America/Sao_Paulo is default Timezone */$horasistema = '';if (in_array($timezone, DateTimeZone::listIdentifiers())){date_default_timezone_set($timezone);$horasistema = date( 'H:i:s');}else {$horasistema = "Invalid Timezone";}return $horasistema;}add_shortcode( 'hora', 'displayhora' );//Shortcod mostrar se for pagofunction ocbpreco(){//Retorna o campo da Data referente ao post que o shortcode está sendo solicitado$acfmod = get_field('o_curso_e:');$acfpreco = get_field('guia_de_preco');$output= '';if ($acfmod == "Curso Pago"){if ($acfpreco == "0"){$output = "ocultar";}else {$output = "exibir";}}else {$output = "ocultar";}return $output;}add_shortcode( 'ocbpreco', 'ocbpreco' );//Shortcod mostrar se for gratuitofunction ocbgratuito(){//Retorna o campo da Data referente ao post que o shortcode está sendo solicitado$acfmod = get_field('o_curso_e:');$output= '';if ($acfmod == "Curso Gratuito"){$output = "exibir";}else {$output = "ocultar";}return $output;}add_shortcode( 'ocbgratuito', 'ocbgratuito' );//Shortcod oculta a guia certificado se for ebookfunction ocbcertificado(){//Retorna o campo modalidade do curso$acfmod = get_field('modalidade_do_curso');$output= '';if ($acfmod == "E-Book"){$output = "ocultar";}else {$output = "exibir";}return $output;}add_shortcode( 'ocbcertificado', 'ocbcertificado' );{codeBox}
3. Exibição no Front-End
Todos os campos configurados na administração do site refletem no front-end. Por exemplo:
- Público Alvo: Enfermeiros e Acadêmicos de Enfermagem do último período.
- Carga Horária: 80 horas.
- Data de Início: 18/09/2022 às 00:00:00.
- Compre Agora: Link para o produto.
4. Automação do Contador de Tempo
Uma automação que me tomou muito tempo foi a criação de um contador de tempo. Esse contador é baseado na data cadastrada na administração do site e é exibido no front-end. Por exemplo:
Se a data do evento for definida como 01/08/2024 às 09:00 PM e a data atual for 22/05/2024 às 1:29 PM, o contador mostrará: Tempo até o Evento:
- 71 dia(s)
- 3 hora(s)
- 27 minuto(s)
Quando o prazo acabar, o texto mudará para “Evento Encerrado”.
Código da que realiza os cálculos:
function contagemregressiva(){$output = '';if (in_array($timezone, DateTimeZone::listIdentifiers())){date_default_timezone_set($timezone);$currentTime = date( 'Y-m-d H:i:s');$output = $currentTime;}else {$output = "Invalid Timezone";}#Informamos as datas e horários de início e fim no formato Y-m-d H:i:s e os convertemos para o formato timestamp$horaacfmeta = get_post_meta(get_the_id(),'hora',true); //Retorna do Valor do ACF Hora em Modelo Metadado$dataacfmeta = get_post_meta(get_the_id(),'data',true);$junto = $dataacfmeta .$horaacfmeta;$dia_hora_atual = strtotime(date("Y-m-d H:i:s"));$dia_hora_evento = strtotime(date($junto));#Achamos a diferença entre as datas...$diferenca = $dia_hora_evento - $dia_hora_atual;#Fazemos a contagem...$dias = intval($diferenca / 86400);$marcador = $diferenca % 86400;$hora = intval($marcador / 3600);$marcador = $marcador % 3600;$minuto = intval($marcador / 60);$segundos = $marcador % 60;#Exibimos o resultadoif ($minuto <= 0 ){return "Evento Encerrado";}else {//return "$dias dia(s) $hora hora(s) $minuto minuto(s) $segundos segundo(s)";return "$dias dia(s) $hora hora(s) $minuto minuto(s)";}}add_shortcode( 'contagemregressiva', 'contagemregressiva' );{codeBox}
Este relato marca apenas o início da jornada de inovações que implementei no site Unintegrativa. Com as funcionalidades descritas, busquei não apenas melhorar a interatividade e a gestão do site, mas também proporcionar uma experiência mais rica e personalizada para os usuários.
As automações e controles que desenvolvi são um testemunho do potencial que a tecnologia oferece para transformar a educação online. Estou ansioso para compartilhar mais sobre esse projeto e outras funcionalidades que estão em desenvolvimento. Fiquem atentos para mais atualizações e histórias de sucesso do Portal Acadêmico da Unintegrativa.
Acesse todos as automações pelo meu Git: Clique aqui
Postagens
0 Comentários