Como adicionar uma animação de carregamento de página (pré-carregador) no WordPress

Publicados: 2023-02-12

A 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!

Índice
1. O que é uma animação de pré-carregamento?
2. Quando devo usar um pré-carregador?
3. 2 opções para adicionar uma animação de carregamento de página ao WordPress
3.1. Opção 1: adicionar uma animação de pré-carregador usando um plug-in
3.1.1. Passo 1: Baixar WP Smart Preloader
3.1.2. Etapa 2: selecione seu estilo
3.1.3. Etapa 3: visualize sua animação do pré-carregador
3.2. Opção 2: adicionar uma animação de pré-carregador manualmente
3.2.1. Passo 1: Brainstorm sua animação
3.2.2. Etapa 2: Desenvolva ou baixe sua animação
3.2.3. Etapa 3: criar um tema filho
3.2.4. Etapa 4: adicionar código HTML ao arquivo header.php do seu tema
3.2.5. Etapa 5: adicione o código CSS à sua folha de estilo
3.2.6. Etapa 6: adicionar código jQuey para fazer a animação funcionar
4. Encontre mais dicas e guias do WP Engine

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!