Guia do desenvolvedor Adicionar um efeito de rolagem suave ao efeito superior no WordPress usando JQuery

Publicados: 2022-06-03

Todos nós amamos o WordPress por sua simplicidade e pelo fato de tornar as coisas muito mais fáceis quando se trata de usar um sistema de gerenciamento de conteúdo eficiente.

Não é exagero, mas o desenvolvimento web fácil e acessível é uma bênção para novos webmasters. O WordPress possui dezenas de recursos que permitem que vários proprietários de sites forneçam a seus usuários uma interface super suave e interativa.

Quem é novo no WordPress, pode conferir os tutoriais do WordPress em recursos como o The Blog Starter, que tem um guia passo a passo de como iniciar seu blog e gerenciá-lo.

Se você está se concentrando apenas no conteúdo do seu site, gostaríamos de dizer que um site responsivo e visualmente atraente é tão importante quanto o conteúdo.

Se você já tem um site e não sabe por onde começar, reserve um tempo e invista 30 minutos todos os dias para pensar na aparência e na interface do seu site. Confie em nós, pois você encontrará gradualmente os elementos que precisa corrigir. Depois de sobrecarregar seu site com grandes esforços visuais, as taxas de conversação aumentarão.

E se você é alguém que já investiu em fornecer aos usuários uma experiência de visita tranquila ao seu site, parabéns para você! Bem, temos um ótimo tutorial preparado para todos que desejam fornecer ainda mais uma mudança ousada em seu site e melhorar o desempenho visual geral do site.

Nesta postagem do blog, vamos orientá-lo sobre como adicionar um Smooth Scroll ao efeito superior no WordPress com a ajuda do jQuery.

Por que usar o Scroll Suave?

Normalmente, quando os sites têm artigos longos e o usuário está passando por eles, eles podem achar frustrante chegar ao final da página da web.

Portanto, se o seu site puder fornecer uma rolagem suave para o topo em apenas um clique, o leitor encontrará seu site perfeito e super suave.

Portanto, se você é proprietário de um site ou profissional de marketing digital, precisa ser um oportunista e garantir que faça tudo o que for necessário para atrair um público adicional e orgânico para seu site.

Maneiras de adicionar o efeito de rolagem suave ao topo no WordPress

Para poder adicionar uma rolagem suave ao To Effect no WordPress, você pode usar qualquer uma das maneiras abaixo:

1. Usando algum código escrito em jQuery

2. Usando um plug-in

Geralmente preferimos codificação em vez de plugins porque isso não deixa espaço para soluços se feito da maneira certa. Às vezes, os plug-ins podem reduzir a velocidade de carregamento do site, mas a codificação pode ajudá-lo a adicionar alguma personalização sem afetar a velocidade em primeiro lugar. Particularmente, neste tutorial, explicaremos o processo de codificação.

Como adicionar o efeito Smooth Scroll to Top no WordPress com codificação?

Para adicionar uma rolagem suave ao efeito superior em seu site WordPress usando codificação, você precisa seguir estas quatro etapas:

Crie um arquivo “Smoothscrolleffect.js”.
Anexe a função “Smoothscrolleffect.js” ao seu tema.
Adicione o ícone no tema
Vinculando o efeito com as páginas da web

Depois de concluir essas 4 etapas, você estará pronto para obter mais leitores. Se você é um programador, pode criar seus próprios scripts de acordo com seus requisitos.

Para não programadores, explicamos cada etapa detalhadamente e adicionamos o código necessário. Então, você só precisa ler as etapas e executá-las de acordo.

Etapa 1: crie um arquivo “Smoothscrolleffect.js”

Este é o arquivo mais importante que você criará para esta etapa. Se você não implementar esta etapa de forma eficaz, talvez não consiga uma rolagem suave completamente.

Nesta etapa, criaremos um arquivo “.js” (jQuery) que contém uma função que adicionará uma rolagem suave ao efeito Top. Siga as etapas para criar um arquivo “.js” e carregá-lo no diretório do site.

Crie um novo arquivo de bloco de notas em seu sistema.
Copie o seguinte código:

jQuery(document).ready(function($){

$(janela).scroll(function(){

if ($(this).scrollTop() < 200) {

$('#smoothup') .fadeOut();

} senão {

$('#smoothup') .fadeIn();

}

});

$('#smoothup').on('click', function(){

$('html, corpo').animate({scrollTop:0}, 'fast');

retorna falso;

});

Cole o código no arquivo do bloco de notas.
Salve-o com qualquer nome, mas certifique-se de que a extensão seja “.js”.
Faça login no cPanel do seu site.
Navegue até o diretório do site “/js/”

Nota: Se o seu site não tiver um diretório js, você precisará criar um.

Carregue o arquivo “.js” que você criou em seu sistema no diretório.

Passo 2: Anexe a rolagem suave ao tema

Na etapa acima, criamos um arquivo (com função de rolagem suave) no diretório do site e, nesta etapa, vincularemos a função de rolagem suave ao nosso tema. Para isso, siga os passos:

Navegue até o seu editor de temas no painel de administração do WordPress. Abra function.php para editar. e cole o seguinte código nele.

wp_enqueue_script( 'suavizar', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), ”, true );

Clique em “Salvar alterações”.

Etapa 3. Adicionar ícone ao tema

Obviamente, você deseja adicionar um ícone ao seu site através do qual você pode oferecer ao leitor a rolagem para o topo. Além disso, você precisa torná-lo mais interativo e responsivo. Você pode fazer isso com a ajuda do CSS da seguinte maneira:

Navegue até o stylesheet.css do seu tema no editor de temas.
Copie o código a seguir.

#suavizar {

altura: 40px;

largura: 40px;

Posição: fixo;

Parte inferior: 50px;

Direita: 100px;

Recuo de texto:-9999px;

Mostrar nenhum;

Background:url(“http://www.example.com/wp-content/uploads/2013/07/top_icon.png”);

-webkit-transição-duração: 0,4s;

-moz-transição-duração: 0,4s; duração da transição: 0,4s;

}

#suavizar:passar {

-webkit-transform: girar(360deg) }

background: url() sem repetição;

}

Cole-o na folha de estilo do seu tema.
Clique em “Salvar alterações”.

Aqui você pode alterar o ícone conforme suas necessidades; usamos uma referência. Para alterar a imagem, você pode carregá-la em seu site e colá-la no campo Background: URL no código acima.

Passo 4: Vinculando a rolagem suave com páginas da web.

Agora que criamos um arquivo “.js” e o carregamos no diretório do site, anexamos com o tema e criamos um ícone para o efeito, é hora do passo final. Agora, vincularemos o efeito de rolagem suave a todas as páginas da web do site. Siga os passos:

Abra footer.php no editor de temas.
Copie o seguinte código:
1. <a href=”#top” id=”smoothup” title=”Voltar ao início”></a>
Cole-o na página footer.php.
Clique em “Salvar alterações”.

Parabéns!, você adicionou com sucesso o efeito de rolagem suave ao seu site WordPress usando jQuery.

Conclusão

Esperamos que o tutorial acima o ajude efetivamente a adicionar o efeito 'smooth scroll to Top' no WordPress usando JQuery e conquiste seus usuários com uma ótima experiência de navegação no site.

Se você enfrentar algum problema ao implementar as etapas mencionadas acima, informe-nos deixando um comentário abaixo.