Como fazer o último widget da barra lateral no WordPress aparecer gradualmente usando jQuery

Recentemente, um de nossos usuários nos perguntou como adicionar um efeito de aparecimento gradual para o último widget na barra lateral. Este popular efeito jQuery é usado em muitos sites e blogs conhecidos. Conforme o usuário rola a página, o último widget na barra lateral aparece gradualmente e se torna visível. A animação torna o widget chamativo e notável, o que aumenta drasticamente a taxa de cliques. Neste artigo, mostraremos como fazer o último widget da barra lateral aparecer gradualmente no WordPress usando jQuery.

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

Neste tutorial, você modificará os arquivos do seu tema. Recomenda-se que você faça backup do seu tema antes de prosseguir.

Passo 1: Adicionando JavaScript para o Efeito de Aparecimento Gradual

Primeiro, você precisa adicionar o código jQuery ao seu tema 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 este arquivo em branco como wpb_fadein_widget.js na sua área de trabalho e cole o seguinte código dentro dele.

jQuery(document).ready(function($) {
/**
* Configuration
* The container for your sidebar e.g. aside, #sidebar etc.
*/

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


// Check if the sidebar exists
if ($(sidebarElement).length > 0) {

// Get the last widget in the sidebar, and its position on screen

var widgetDisplayed = false;
var lastWidget = $('.widget:last-child', $(sidebarElement));
var lastWidgetOffset = $(lastWidget).offset().top -100;
	
// Hide the last widget
$(lastWidget).hide();
	
// Check if user scroll have reached the top of the last widget and display it
$(document).scroll(function() {

// If the widget has been displayed, we don't need to keep doing a check.

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

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

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

Você pode descobrir isso usando a ferramenta de inspecionar elemento no Google Chrome. Simplesmente clique com o botão direito na sua barra lateral no Google Chrome e, em seguida, selecione Inspecionar Elemento.

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

Em seguida, você precisa usar um Cliente FTP para fazer o upload deste arquivo para a pasta js dentro do diretório do seu tema WordPress. Se o diretório do seu tema não tiver uma pasta js, você precisará criá-la clicando com o botão direito e selecionando ‘Criar Novo Diretório’ no seu cliente FTP.

Etapa 2: Enfileirando seu JavaScript no Tema WordPress

Agora que seu script jQuery está pronto, é hora de adicioná-lo ao seu tema. Usaremos o método correto de adição de JavaScript ao seu tema, então simplesmente cole o seguinte código no arquivo functions.php do seu 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 na sua barra lateral que deseja que apareça com o efeito fadein e, em seguida, visite seu site para vê-lo em ação.

Etapa 3: Tornando 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 conforme o usuário rola. Isso é chamado de widget flutuante ou widget fixo.

Se você olhar o código jQuery acima, notará que adicionamos uma classe CSS wpbstickywidget ao widget após o efeito fade in. Você pode usar esta classe CSS para tornar seu último widget fixo após ele aparecer. Tudo o que você precisa fazer é colar este 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 de fundo ou as fontes para tornar o widget ainda mais proeminente. Se desejar, você pode até adicionar um efeito de rolagem suave para o topo ao lado do seu último widget, o que permitirá aos usuários rolar de volta rapidamente.

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

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