Este snippet de código adiciona um botão “Voltar ao Topo” ao seu site WordPress. O botão aparece quando o usuário rola a página para baixo e, ao ser clicado, faz a página rolar suavemente de volta ao topo.
function wp24horas_back_to_top() {
echo '<a href="#" id="back-to-top" title="Voltar ao Topo">↑</a>';
}
add_action('wp_footer', 'wp24horas_back_to_top');
function wp24horas_back_to_top_styles() {
echo '
#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
background-color: #000;
color: #fff;
padding: 10px 15px;
border-radius: 5px;
text-decoration: none;
font-size: 20px;
}
#back-to-top:hover {
background-color: #444;
}
';
}
add_action('wp_head', 'wp24horas_back_to_top_styles');
function wp24horas_back_to_top_script() {
echo '
jQuery(document).ready(function($) {
var backToTop = $("#back-to-top");
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
backToTop.fadeIn();
} else {
backToTop.fadeOut();
}
});
backToTop.click(function(e) {
e.preventDefault();
$("html, body").animate({scrollTop: 0}, 800);
return false;
});
});
';
}
add_action('wp_footer', 'wp24horas_back_to_top_script');
function wp24horas_back_to_top() { ... }: Define a função que adiciona o HTML do botão “Voltar ao Topo”.echo '<a href="#" id="back-to-top" title="Voltar ao Topo">↑</a>';: Adiciona o link com o ID back-to-top no rodapé da página.add_action('wp_footer', 'wp24horas_back_to_top');: Adiciona a função wp24horas_back_to_top ao gancho wp_footer, garantindo que o botão seja adicionado ao rodapé da página.function wp24horas_back_to_top_styles() { ... }: Define a função que adiciona os estilos CSS para o botão “Voltar ao Topo”.echo '<style> ... </style>';: Adiciona os estilos CSS diretamente na cabeça da página.add_action('wp_head', 'wp24horas_back_to_top_styles');: Adiciona a função wp24horas_back_to_top_styles ao gancho wp_head, garantindo que os estilos sejam carregados.function wp24horas_back_to_top_script() { ... }: Define a função que adiciona o script JavaScript/jQuery para a funcionalidade do botão “Voltar ao Topo”.echo '<script> ... </script>';: Adiciona o script diretamente no rodapé da página.add_action('wp_footer', 'wp24horas_back_to_top_script');: Adiciona a função wp24horas_back_to_top_script ao gancho wp_footer, garantindo que o script seja carregado.Esse código pode ser usado adicionando-o ao arquivo functions.php do seu tema ou, preferencialmente, em um plugin específico para o site. Utilizar um plugin para essas customizações mantém o código organizado e seguro contra atualizações do tema.
Este snippet adiciona um botão “Voltar ao Topo” ao seu site WordPress, melhorando a navegação para os usuários ao permitir que voltem facilmente ao topo da página com um clique. Os estilos e scripts garantem que o botão seja exibido de forma atraente e funcione suavemente.
Se você está aproveitando nosso conteúdo gratuito, vai adorar os benefícios exclusivos que oferecemos aos nossos assinantes!
Não perca a oportunidade de maximizar seu potencial no WordPress. Clique no botão abaixo para se tornar um assinante e leve suas habilidades ao próximo nível!
