Como adicionar uma animação de carregamento de página (pré-carregador) no WordPress
Publicados: 2023-02-12A velocidade da página desempenha um papel crítico no desempenho do seu site. Se demorar mais de um ou dois segundos para uma página carregar totalmente, isso pode frustrar os usuários o suficiente para fazê-los sair do site. No entanto, pode ajudar se o visitante tiver algo interessante para ver enquanto a página termina de carregar.
Uma animação de carregamento de página, ou 'animação de pré-carregamento', ajuda a informar aos visitantes que uma página está carregando (não está travada) e aumenta a probabilidade de permanecerem no site. Dessa forma, pode melhorar a experiência do usuário (UX) e reduzir suas taxas de rejeição.
Nesta postagem, explicaremos os benefícios das animações do pré-carregador e quando usá-las. Em seguida, mostraremos suas opções para adicionar uma animação de carregamento de página do WordPress. Vamos começar!
O que é uma animação de pré-carregador?
Uma animação do pré-carregador sinaliza aos usuários que uma página está carregando ativamente. É uma animação simples que pode ser usada como um indicador de progresso para páginas que carregam apenas determinados conteúdos por vez.
Os pré-carregadores do WordPress oferecem aos visitantes algo mais agradável e interessante de se ver nos segundos enquanto esperam que a página inteira termine de carregar. Em alguns casos, eles podem até oferecer uma estimativa de quanto tempo resta.
Quando devo usar um pré-carregador?
Um pré-carregador é uma escolha inteligente quando você tem um site WordPress com muitos vídeos ou imagens que demora um pouco mais para carregar do que o normal. Dessa forma, os visitantes terão a certeza de que seu site está funcionando conforme o esperado e não está quebrado.
No entanto, se o seu site for principalmente baseado em texto, uma animação de pré-carregamento pode não ser necessária. Em vez disso, faria mais sentido focar em melhorar a velocidade da sua página.
2 opções para adicionar uma animação de carregamento de página ao WordPress
Existem dois métodos principais que você pode usar para adicionar uma animação do pré-carregador do WordPress ao seu site. Você pode usar um plug-in, que é a opção mais fácil, ou executar a tarefa manualmente. Vamos dar uma olhada em como começar com ambos os métodos.
Opção 1: adicionar uma animação de pré-carregador usando um plug-in
Adicionar uma animação de pré-carregador por meio de um plug-in é a opção mais rápida e fácil para a maioria dos usuários. Existem vários plugins que você pode usar, mas recomendamos o WP Smart Preloader:
Este é um plug-in gratuito e altamente personalizável. Ele usa CSS e marcação HTML mínima para ajudar a reduzir o risco de os usuários deixarem seu site à medida que o conteúdo é carregado. Nas etapas a seguir, mostraremos como isso funciona.
Passo 1: Baixar WP Smart Preloader
Você pode baixar o plug-in WP Smart Preloader através do diretório de plug-ins do WordPress. Em seguida, você pode carregar o arquivo .zip para o seu site WordPress, acessando Plugins > Adicionar novo > Carregar plug- in no painel de administração:
Outra opção é procurar o plug-in através da barra de pesquisa na tela Plug-in > Adicionar novo :
De qualquer forma, depois que o plug-in estiver instalado, clique no botão Ativar . Você pode localizar suas opções em Configurações> WP Smart Preloader .
Etapa 2: selecione seu estilo
Na página WP Smart Preloader Settings , a primeira coisa a fazer é selecionar um estilo para o preloader. Na seção Selecionar pré-carregador , haverá um menu suspenso que permite escolher entre seis opções de estilo, bem como uma opção para animação personalizada:
Depois de selecionar um estilo, você pode visualizá-lo na janela abaixo. Se quiser adicionar sua própria animação personalizada, você pode incluir seu código HTML na seção Animação personalizada :
No final desta tela, você pode definir a duração do próprio carregador e o efeito 'fade out':
Se você deixar esses campos em branco, os padrões serão definidos em 1.500 milissegundos (1,5 segundos) e 2.500 milissegundos (2,5 segundos), respectivamente. Quando terminar, clique no botão Salvar alterações .
Etapa 3: visualize sua animação do pré-carregador
Depois de definir suas configurações, visite seu site WordPress em uma nova guia do navegador para visualizar a animação do pré-carregador. Você pode voltar para fazer alterações estilísticas conforme necessário. Quando estiver satisfeito com o pré-carregador, ele estará configurado e pronto para uso.
Opção 2: adicionar uma animação de pré-carregador manualmente
Se você não estiver interessado em usar um plug-in, ainda poderá adicionar esse recurso ao seu site manualmente. A principal vantagem de criar um pré-carregador personalizado é que você tem mais flexibilidade na forma como ele é projetado.
Claro, também é um processo mais difícil. A seguir, orientaremos você sobre como criar, carregar e formatar uma animação de pré-carregador personalizada para seu site WordPress.
Passo 1: Brainstorm sua animação
O primeiro passo é decidir que tipo de animação você vai usar. Você pode pesquisar outras ferramentas de animação do pré-carregador para ter uma ideia do estilo que você gosta. Existem algumas animações gratuitas que você pode usar e explorar no Codepen, o que pode ser uma ótima maneira de obter algumas ideias.
Etapa 2: Desenvolva ou baixe sua animação
Para desenvolver sua animação, você pode usar uma ferramenta como o Photoshop para criar um GIF ou uma animação pré-carregadora giratória. Você também pode consultar nosso recurso sobre como criar animações do WordPress usando CSS.
Recomendamos a última abordagem, pois adicionar um pré-carregador de GIF ao seu site WordPress é melhor feito com um plug-in. Além do Codepen (mencionado acima), você também pode baixar uma animação de sites como Spinkit e LoadLab.
Para este tutorial, usaremos uma animação de pré-carregador do Spinkit. Independentemente de onde você obtém sua animação, você precisará do código-fonte CSS para adicioná-la manualmente ao seu site WordPress:
A maioria das animações de pré-carregamento gratuitas inclui um link de origem, onde você pode encontrar o HTML e o CSS:
Lembre-se de que você também pode usar o código-fonte CSS de uma animação do pré-carregador e, posteriormente, personalizá-lo ao seu gosto.
Etapa 3: criar um tema filho
Depois de ter sua animação, você pode adicioná-la ao seu site WordPress. A maneira mais segura de fazer isso é configurar um tema filho. Se você não tem certeza de como fazer isso, pode revisar nosso tutorial sobre como criar um tema filho do WordPress.
Etapa 4: adicionar código HTML ao arquivo header.php do seu tema
O próximo passo é localizar o arquivo header.php para o seu tema WordPress. Você pode fazer isso através da tela do WordPress Theme Editor :
Você também pode editar os arquivos usando um cliente FTP como o FileZilla. O arquivo estará localizado na pasta wp-content > themes no diretório raiz do seu site.
Depois de localizar e abrir o arquivo, insira o seguinte código HTML abaixo da tag body:
<!--CSS Spinner--> <div class="spinner-wrapper"> <div class="spinner"></div> </div>
Ajuste ou adicione qualquer código HTML necessário para sua animação específica do pré-carregador do WordPress e salve o arquivo.
Etapa 5: adicione o código CSS à sua folha de estilo
Agora é hora de adicionar CSS para estilizar sua animação. Localize a folha de estilo CSS ( style.css ) do seu tema WordPress e copie e cole o código-fonte CSS da sua animação. No nosso caso, adicionaremos o seguinte:
.spinner { margin: 100px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; } .spinner > div { background-color: #333; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }
Antes de salvar suas alterações, remova esta parte: “margin: 100px auto;”. Em seu lugar, copie e cole o seguinte:
position: absolute; top: 48%; left: 48%;
Então você pode salvar o arquivo.
Etapa 6: adicionar código jQuey para fazer a animação funcionar
Para fazer a animação do pré-carregador do spinner funcionar, você precisará adicionar um pouco de jQuery. Para fazer isso, você pode navegar de volta para o arquivo header.php e inserir o seguinte antes da tag body de fechamento:
<script> $(document).ready(function() { //Preloader preloaderFadeOutTime = 500; function hidePreloader() { var preloader = $('.spinner-wrapper'); preloader.fadeOut(preloaderFadeOutTime); } hidePreloader(); }); </script>
Em seguida, salve seu arquivo e visualize seu site para garantir que a animação do pré-carregador do WordPress funcione conforme o esperado.
Encontre mais dicas e guias do WP Engine
Adicionar animações do pré-carregador do WordPress ao seu site pode ajudar a envolver os visitantes e reduzir as taxas de rejeição. Além disso, você tem várias opções para fazer o trabalho rapidamente.
No WP Engine, nossa missão é fornecer dicas, truques e recursos para desenvolvedores, para ajudá-lo a garantir que seu site sempre tenha a melhor aparência. Saiba mais sobre nossos planos hoje!