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