Como criar um lightbox

É muito comum que sites que possuem galeria de fotos precisem de um lightbox para poder ver melhor as fotos. Existem muitos plugins pra isso, mas plugins podem dar problemas ao longo do tempo. Então criei um lightbox simples, que você pode personalizar como quiser.
Na página onde você possui a galeria de fotos, no meu caso a galeria fica na single-product.php, vamos colocar este código html:

<div class="lightbox-product">
    <a class="btn-blue prev-photo"><i class="fas fa-caret-left"></i></a>
        <div class="content-light-img">
            <a class="btn-blue close-light"><i class="fas fa-times"></i></a>
            <img>
        </div>
    <a class="btn-blue next-photo"><i class="fas fa-caret-right"></i></a>
</div>

E no arquivo JS vão os códigos:
– Esse bloco pega as informações da foto clicada, pego o src da imagem e o id e coloco na tag <img> que está dentro do ‘content-light-img’;

   $('.thumbnail-principal').on('click', function(){
       var src =  $('.thumbnail-principal .slick-current').attr('src');
       var id =  $('.thumbnail-principal .slick-current').attr('id');
        $('.lightbox-product img').attr('src',src);
        $('.lightbox-product img').attr('id',id);
         $('.lightbox-product').fadeIn();
         $('.lightbox-product').css('display','flex');
    });

– Este código é o do botão que passa para a próxima foto, pegamos o id da foto atual dentro do lightbox e contamos a quantidade de fotos dentro do container, se o id for igual a quantidade de fotos voltamos para 1 senão soma-se mais 1 ao id.  Com o resultado dessa soma pegamos as informações da próxima foto.

    $('.next-photo').on('click', function(){
        var id = $('.lightbox-product img').attr('id');
        var photos = $('.thumbnail-principal .slick-slide').length;
        if(id == photos){
            var result = 1;
        } else {
            var result = parseInt(id) + 1;
        }
        var value_result = $('.thumbnail-principal .slick-slide#'+result).attr('src');
        $('.lightbox-product img').attr('src',value_result);
        $('.lightbox-product img').attr('id',result);
    });

 
– Esse código é do botão que volta uma foto, como no botão next pegamos todas as informações da foto que está no lightbox só que ao contrário do outro subtraímos 1 do id, e quando id for igual a 1 dizemos ao contador que ele é igual a quantidade de fotos dentro do container.

    $('.prev-photo').on('click', function(){
        var id = $('.lightbox-product img').attr('id');
        var photos = $('.thumbnail-principal .slick-slide').length;
        if(id == 1){
            var result = photos;
        } else {
            var result = parseInt(id) - 1;
        }
        var value_result = $('.thumbnail-principal .slick-slide#'+result).attr('src');
        $('.lightbox-product img').attr('src',value_result);
        $('.lightbox-product img').attr('id',result);
    });

– E por ultimo esse código que fecha o lightbox;

    $('.close-light').on('click', function(){
        $('.lightbox-product').fadeOut();
    });

E esse foi o resultado:
lightbox
Nesse lightbox eu usei os efeitos de Fade do javascript, mas você pode animar da forma que achar melhor.
Espero ter ajudado, e até a próxima!

READ MORE
widget

Criando área de widget

O que seria a área de widget? Bom, ela pode ser seu sidebar ou um menu no rodapé da página por exemplo, você decide. Eu usei como sidebar no site em que estava desenvolvendo.
Para adicionar a área de widget usamos a função abaixo:

function widgets_novos_widgets_init() {
                 register_sidebar( array(
                                'name' => 'Sidebar',
                                'id' => 'sidebar_widgets',
                                'before_widget' => '<div class="sidebar">',
                                'after_widget' => '</div>',
                                'before_title' => '<h2>',
                                'after_title' => '</h2>',
                 ) );
 }
 add_action( 'widgets_init', 'widgets_novos_widgets_init' );

Ela vai aparecer no painel do wordpress em Aparência > Widgets, assim:
result
Para mostrar o widget na página desejada usamos a seguinte função:

dynamic_sidebar('sidebar_widgets');

Em ‘sidebar_widgets’ vai o id que você deu ao seu widget.
Espero ter ajudado, e até a próxima.

READ MORE
Ajax – 400 bad request

Ajax – 400 bad request – Como resolver?

Estava eu desenvolvendo meu projeto quando preciso fazer uma requisição via ajax e apareceu esse erro, e agora? Bom, como todo programador fui atrás de uma solução.
No meu arquivo functions.php coloquei a seguinte função:

add_action('wp_footer', 'eps_footer');
 function eps_footer() {
     echo "<script>var ajax_request_url = '".admin_url( 'admin-ajax.php' )."'</script>";
 }

E não resolveu todo o problema, começou a dar o erro 500 – internal server error, e comecei a pensar, por que não fiz Ed. Física?
Por fim a solução para esse erro era muito simples, eu tinha esquecido de dar o include do arquivo ajax.php no arquivo functions.php.
NÃO ESQUEÇAM DE DAR INCLUDE DO SEU ARQUIVO AJAX.
Espero ter ajudado, e até a próxima!
 

READ MORE
wordpress

Como adicionar campo para classe no widget do WordPress

Pra que você otimize seu tempo e seu projeto, segue uma dica super importante sobre o wordpress.
Estava desenvolvendo um projeto e precisava de um campo para colocar uma classe personalizada que pudesse diferenciar um widget do outro. Então achei essa função:

function field_in_widget_form($t,$return,$instance){
 $instance = wp_parse_args( (array) $instance, array( 'widget_class' => '') );
 if($instance['widget_class'] != ''){
 $value = $instance['widget_class'];
 }else{
 $value = '';
 }
 ?>

(Essa parte você pode personalizar o campo, usando outas tags, tipo de input etc…)

 <p> <input id="<?php echo $t->get_field_id('widget_class'); ?>" name="<?php echo $t->get_field_name('widget_class'); ?>" type="text" value="<?php echo $value; ?>" />
 <label for="<?php echo $t->get_field_id('widget_class'); ?>"><?php _e('Adicionar Classe'); ?></label>   </p>
 <?php
 $return = null;
 return array($t,$return,$instance);
 }
 add_action('in_widget_form', ' field _in_widget_form',5,3);

Onde está ‘widget_class’ vai o nome  que você quiser colocar para seu campo.
E para salvar o valor no seu novo campo usamos essa outra função:

function field_in_widget_form_update($instance, $new_instance, $old_instance){        $instance['widget_class'] = $new_instance['widget_class'];
 return $instance;
 }
 add_filter('widget_update_callback', ' field _in_widget_form_update',5,3);

E prontinho, agora você tem um campo para pôr classes no seu widget.
exemplo

READ MORE

Enviar arquivo de um servidor para outro usando SSH

Temos aqui na agência frequentemente a necessidade de enviar sites inteiros de um servidor para outro (de uma Hospedagem para outra), normalmente em migrações. Faço um arquivo compactado (*.zip) faço download, faço upload no servidor novo e descompacto.
O processo de compactação e descompactação já fazia via SSH, mas ainda sim demorava pois tinha que fazer download e upload utilizando minha banda para isso. Em uma conversa com um atendente de suporte da Locaweb, peguei esse script em SSH para realizar a transferência diretamente de um servidor para outro, acelerando assim a transferência que agora não depende mais da velocidade da minha internet.
Como nunca escrevi sobre SSH, então vou mostrar como compactar todos os arquivos, depois transferir o arquivo compactado e por último como descompactar.

Como compactar arquivos usando SSH

Faço isso usando um MacBook (ainda não encontrei uma maneira de fazer isso no Windows) então abro o Terminal e digito:

ssh usuario@ftp.dominio.com.br

Em seguida o sistema vai te solicitar a senha de acesso ao FTP, é só digitar e dar um Enter. Feito isso você estará dentro da raiz do seu FTP, então usando comandos do antigo “DOS” você consegue navegar pelas pastas:

cd nome_da_pasta

Para entrar em uma pasta.

cd..

Para subir um nível na pasta.

dir

Mostra todos os arquivos/pastas da pasta onde você está.
Dito isso, você vai digitar o seguinte para compactar:

zip -r nome-do-arquivo-novo.zip nome-da-pasta nome-do-arquivo.html

“nome-do-arquivo-novo.zip” será o nome do seu arquivo compactado, e depois disso você digita o nome dos arquivos (separado por espaço) ou pastas que irão ser incluídos nesse *.zip.
Feito isso é só dar Enter e ele vai começar a compactar tudo.

Como transferir um arquivo de um servidor para outro com SSH (de uma hospedagem para outra)

Estando já dentro da pasta onde o arquivo compactado se encontra, digite o seguinte

scp nome-do-arquivo-novo.zip usuario2@ftp.dominio2.com.br:/home/usuario/public_html
  1. “scp” noma da função
  2. Nome do arquivo compactado
  3. Usuário do FTP para onde quer enviar o arquivo
  4. @
  5. Host FTP para onde será enviado o arquivo
  6. Dois pontos
  7. Caminho absoluto da pasta onde será colocado o arquivo.

Esse caminho normalmente você encontra no seu FileZila (ou software similar de FTP), ou ainda acessando a hospedagem via SSH e digitando:

pwd

Feito isso ele vai solicitar a sua senha e vai iniciar a transferência.

Como descompactar arquivos com SSH

Agora é fácil, acesse sua hospedagem via SSH, vá até a pasta onde o arquivo se encontra e digite:

unzip nome-do-arquivo.zip pasta/pasta

“pasta/pasta” é para que você extraia os arquivos em uma pasta diferente daquela onde o arquivo se encontra.

READ MORE

30 anos do www

Você imagina sua vida sem internet hoje? Nós não, de jeito nenhum! Aliás, se o provedor fica fora, se rompe a fibra ótica ou se dá alguma pane que comprometa o tráfego, já estamos dando “piti”, entrando em contato com a central de atendimento e assim que possível, registrando reclamação no “reclame aqui”. Tudo isso por quê? Porque somo tão dependentes da comunicação on line e tão impacientes quando ficamos sem ela, que “precisamos garantir conexão” onde quer que estejamos.
Se você também é assim, um salve a Tim Berners-Lee, que no ano de 1989 estava tentando criar um jeito de facilitar a comunicação com os colegas cientistas, através de troca de informações on line.
Há apenas 30 anos não conhecíamos as expressões www, URL, HTTP, HTML, web, navegar etc.

Doodle do Google
Doodle do Google

Origem da World Wide Web

O projeto de Berners-Lee envolveu uma grande base de dados de hipertexto (links) entrelaçados, que poderiam ser acessados de diferentes máquinas de acordo com um determinado protocolo. O objetivo era facilitar o compartilhamento de informações entre computadores do CERN (sigla em francês para Organização Europeia para a Pesquisa Nuclear).
Os escritos do engenheiro resultaram, em 1990, no desenvolvimento da linguagem HTML, que viria a enriquecer o conteúdo mostrado em uma página. Berners-Lee também criou o endereço chamado de URL. No mesmo ano, surgiu o primeiro navegador de internet, chamado de World Wide Web (WWW).

READ MORE
woo

Saiba como adicionar Custom Fields nos dados gerais do produto (woocommerce)

No cadastro de produtos do woocommerce tem uma tabela com vários dados sobre o produto, nesse artigo vou ensinar como colocar campos novos na aba “Geral”, que é a primeira aba que aparece aberta.
sem-campo
Eu precisava de campos para colocar preço de atacado nos produtos, então adicionei a seguinte função no meu arquivo functions.php:
add_action(‘woocommerce_product_options_general_product_data’,’woo_add_custom_general_fields’ );
function woo_add_custom_general_fields() {
global $woocommerce, $post;
echo ‘<div class=”options_group”>’;
echo ‘<h2>Atacado</h2>’;
woocommerce_wp_text_input(array(
‘id’                => ‘_regular_price_wholesale’,
‘class’             => ‘short wc_input_price’,
‘label’             => __( ‘Preço (R$)’, ‘woocommerce’ ),
‘placeholder’       => ”,
‘type’              => ‘text’,
)
);
woocommerce_wp_text_input(array(
‘id’                => ‘_sale_price_wholesale’,
‘class’             => ‘short wc_input_price’,
‘label’             => __( ‘Preço promocional (R$)’, ‘woocommerce’ ),
‘placeholder’       => ”,
‘type’              => ‘text’,
)
);
echo ‘</div>’;
}
Você pode personalizar os nomes dos campos , classes, placeholder, tipo de input e etc…
Após adicionar os campos que você deseja precisará salvar eles também, e pra isso utilizamos essa outra função, também no arquivo funtions.php:
add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );
function woo_add_custom_general_fields_save( $post_id ){
$woocommerce_text_field = $_POST[‘_regular_price_wholesale’];
$_woocommerce_text_field = $_POST[‘_sale_price_wholesale’];
if( !empty( $woocommerce_text_field ) ){
update_post_meta( $post_id, ‘_regular_price_wholesale’, esc_attr( $woocommerce_text_field ) );
}
if( !empty( $_woocommerce_text_field ) ){
update_post_meta( $post_id, ‘_sale_price_wholesale’, esc_attr( $_woocommerce_text_field ) );
}
}
com-campo
E esse foi o resultado! Espero ter ajudado, e até a próxima.

READ MORE

Aprenda como reorganizar os campos de checkout do woocommerce

Quando o usuário vai finalizar uma compra o woocommerce mostra os campos do checkout organizados da forma padrão, só que o projeto que eu estava desenvolvendo pedia por uma disposição dos campos de forma diferente. Então pesquisando achei uma solução simples e que funciona muito bem.
Na pasta checkout do woocommerce tem um arquivo de nome form-billing.php, nele estão os campos que aparecem no checkout. Você vai copiar a pasta e o arquivo para o seu tema para pode editar.
Ao abrir o arquivo ele estará desta forma:
foreach
 
Ele distribui os campos através de um foreach, então para mudar os campos vamos mexer nessa função, e ela ficará desta forma:
second-foreach
Você vai colocar os nomes dos campos na ordem em que deseja dentro de um array(), e depois fazer um foreach para mostras os campos utilizando a própria função do woocommerce: woocommerce_form_field(), como no exemplo acima. Eu fiz dois foreach por que queria colocar em divs diferentes, mas você poderá personalizar como quiser.

READ MORE
whatsapp

Limite de encaminhamento de mensagens para usuários do whatsapp

Virou febre, vício, necessidade. O fato é que o WhatsApp ganhou milhões de usuários e se tornou um aplicativo extremamente necessário no nosso dia a dia, tanto no âmbito pessoal quanto profissional.

O WhatsApp anunciou nesta segunda-feira (21) que vai limitar o reenvio de mensagens em seu aplicativo dos atuais 20 para até 5 contatos da lista pessoal (por vez). Segundo a empresa, a medida “vai ajudar a manter o aplicativo focado em mensagens privadas com contatos próximos”.
A mudança será implementada a partir desta segunda, por meio de uma atualização no aplicativo, e foi decidida, diz a companhia, após ouvir a avaliação de usuários do durante seis meses.
A mudança ocorre meses após o WhatsApp ser alvo de polêmicas durante a campanha eleitoral, quando a plataforma foi acusada de ser usada para disseminar rapidamente  informações falsas.
Já se perguntou o motivo disso? Tentativa de combate a fakenews. Antes, usuários podiam encaminhar mensagens a até 20 grupos ou usuários – ao limitar para 5, o whatsapp tenta diminuir a circulação de desinformação e fake news em sua plataforma.
Com 1,5 bilhão de usuários, o WhatsApp vem experimentando novas formas de diminuir a circulação de fake news. A mudança será aplicada em uma nova atualização do app. Usuários do sistema Android receberão a atualização antes—posteriormente, usuários do iPhone também terão a alteração.

READ MORE
abri-um-negocio-de-assinaturas-e-agora

Thumbnail não aparece quando vou cadastrar um post – e agora?

A resposta é bem simples e prática, está faltando o suporte ao tema para ativar o recurso das thumbnails.
Vá no arquivo functions.php do seu tema, e adicione a seguinte função:
add_action( ‘after_setup_theme’, ‘my_theme_setup’ );
function my_theme_setup(){
add_theme_support( ‘post-thumbnails’ );
}
Prontinho, agora você já pode cadastrar as thumbnails no seu post.

READ MORE
  • 1
  • 2