Como esmaecer o último widget da barra lateral no WordPress usando jQuery

Recentemente, um de nossos usuários nos perguntou como adicionar um efeito de fade in ao último widget da barra lateral. Esse efeito popular do jQuery é usado em muitos sites e blogs conhecidos. À medida que o usuário rola a página para baixo, o último widget da barra lateral desaparece e se torna visível. A animação torna o widget atraente e perceptível, o que aumenta consideravelmente a taxa de cliques. Neste artigo, mostraremos como esmaecer o último widget da barra lateral no WordPress usando jQuery.

Abaixo está uma demonstração de como seria:

Neste tutorial, você modificará os arquivos do tema. É recomendável que você faça backup do tema antes de prosseguir.

Etapa 1: Adição de JavaScript para o efeito Fadein

Primeiro, você precisa adicionar o código jQuery ao seu tema do WordPress como um arquivo JavaScript separado. Comece abrindo um arquivo em branco em um editor de texto como o Bloco de notas. Em seguida, salve esse arquivo em branco como wpb_fadein_widget.js em sua área de trabalho e cole o seguinte código dentro dele.

jQuery(document).ready(function($) {
/**
* Configuração
* O contêiner para sua barra lateral, por exemplo, aside, #sidebar etc.
*/

var sidebarElement = $('div#secondary');


// Verificar se a barra lateral existe
se ($(sidebarElement).length > 0) {

// Obtenha o último widget na barra lateral e sua posição na tela

var widgetDisplayed = false;
var lastWidget = $('.widget:last-child', $(sidebarElement));
var lastWidgetOffset = $(lastWidget).offset().top -100;
	
// Ocultar o último widget
$(lastWidget).hide();
	
// Verificar se a rolagem do usuário alcançou o topo do último widget e exibi-lo
$(document).scroll(function() {

// Se o widget tiver sido exibido, não precisaremos continuar fazendo a verificação.

se (!widgetDisplayed) {
se ($(this).scrollTop() > lastWidgetOffset) {
$(lastWidget).fadeIn('slow').addClass('wpbstickywidget');
widgetDisplayed = true;  
}
}
});
}
});

A linha mais importante nesse código é var sidebarElement = $('div#secondary');.

Esse é o ID da div que contém sua barra lateral. Como cada tema pode usar diferentes divs de contêiner da barra lateral, você precisa descobrir o id do contêiner que o seu tema está usando para a barra lateral.

Você pode descobrir isso usando a ferramenta inspecionar elemento no Google Chrome. Basta clicar com o botão direito do mouse na barra lateral no Google Chrome e selecionar Inspecionar elemento.

No código-fonte, você poderá ver a div do contêiner da barra lateral. Por exemplo, o tema padrão do Twenty Twelve usa secondary e o Twenty Thirteen usa teritary como o ID do contêiner da barra lateral. Você precisa substituir secondary pelo ID da sua div do contêiner da barra lateral.

Em seguida, você precisa usar um cliente FTP para carregar esse arquivo na pasta js dentro do diretório de temas do WordPress. Se o diretório do tema não tiver uma pasta js, será necessário criá-la clicando com o botão direito do mouse e selecionando “Criar novo diretório” no cliente FTP.

Etapa 2: Enfileirando seu JavaScript no tema do WordPress

Agora que seu script jQuery está pronto, é hora de adicioná-lo ao seu tema. Usaremos o método adequado para adicionar o javascript em seu tema, portanto, basta colar o seguinte código no arquivo functions.php do tema.

wp_enqueue_script( 'stickywidget', get_template_directory_uri() . '/js/wpb-fadein-widget.js', array('jquery'), '1.0.0', true );

Isso é tudo, agora você pode adicionar um widget em sua barra lateral que deseja que apareça com o efeito fadein e, em seguida, visitar seu site para vê-lo em ação.

Etapa 3: Tornar o último widget fixo após o efeito fade in

Um recurso frequentemente desejado com o efeito fade in é fazer com que o último widget da barra lateral role à medida que o usuário rola a página. Isso é chamado de widget flutuante ou widget fixo.

Se você observar o código jQuery acima, verá que adicionamos uma classe CSS wpbstickywidget ao widget após o efeito de fade in. Você pode usar essa classe CSS para fazer com que seu último widget fique fixo depois de desaparecer. Tudo o que você precisa fazer é colar esse CSS na folha de estilo do seu tema.

.wpbstickywidget { 
position:fixed;
top:0px; 
}

Sinta-se à vontade para modificar o CSS para atender às suas necessidades. Você pode alterar a cor do plano de fundo ou as fontes para tornar o widget ainda mais proeminente. Se quiser, pode até adicionar um efeito de rolagem suave para o topo ao lado do último widget, o que permitirá que os usuários rolem para trás rapidamente.

Esperamos que este artigo tenha ajudado você a adicionar um efeito de fade in ao último widget da barra lateral do WordPress. Para obter mais recursos de jQuery, confira os melhores tutoriais de jQuery para WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para obter tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Google+.