{"id":3846,"date":"2024-10-24T14:33:11","date_gmt":"2024-10-24T06:33:11","guid":{"rendered":"https:\/\/www.openbyt.com\/?p=3846"},"modified":"2024-10-26T18:18:58","modified_gmt":"2024-10-26T10:18:58","slug":"in-depth-analysis-adding-a-custom-preloader-to-wordpress","status":"publish","type":"post","link":"https:\/\/www.openbyt.com\/pt\/analise-aprofundada-da-adicao-de-um-pre-carregador-personalizado-ao-wordpress","title":{"rendered":"An\u00e1lise aprofundada: Adicionando um pr\u00e9-carregador personalizado ao WordPress"},"content":{"rendered":"

A cria\u00e7\u00e3o de um s\u00edtio Web WordPress profissional e envolvente exige mais do que conte\u00fados atractivos e visuais apelativos. Um aspeto frequentemente negligenciado que pode melhorar significativamente a experi\u00eancia do utilizador \u00e9 a utiliza\u00e7\u00e3o de um pr\u00e9-carregador personalizado<\/strong>. Um pr\u00e9-carregador pode ajudar a entreter os utilizadores enquanto a sua p\u00e1gina est\u00e1 a carregar, reduzir as taxas de rejei\u00e7\u00e3o e dar um toque de personalidade de marca ao seu site.<\/p>

Este guia aprofundado fornecer\u00e1 detalhes abrangentes sobre como adicionar um pr\u00e9-carregador personalizado ao seu site WordPress. Exploraremos m\u00e9todos manuais e baseados em plug-ins, discutiremos as pr\u00e1ticas recomendadas e examinaremos exemplos do mundo real.<\/p>

\"\"<\/figure>

Porqu\u00ea utilizar um pr\u00e9-carregador personalizado?<\/h2>

Um pr\u00e9-carregador \u00e9 um elemento gr\u00e1fico ou anima\u00e7\u00e3o que aparece enquanto uma p\u00e1gina ou ativo est\u00e1 a carregar. Compreender o valor de um pr\u00e9-carregador personalizado requer uma an\u00e1lise mais profunda do comportamento do utilizador, da velocidade do s\u00edtio Web e da estrat\u00e9gia de marca. Eis algumas das principais vantagens:<\/p>

  1. Reduza as taxas de rejei\u00e7\u00e3o<\/strong>: Os longos tempos de carregamento fazem frequentemente com que os utilizadores abandonem um s\u00edtio Web antes de o conte\u00fado aparecer. Um pr\u00e9-carregador fornece um feedback visual que indica o progresso, o que pode reduzir significativamente as taxas de rejei\u00e7\u00e3o.<\/li>\n\n
  2. Reforce a sua marca<\/strong>: Os pr\u00e9-carregadores personalizados permitem-lhe refletir a personalidade da sua marca. Quer seja atrav\u00e9s de cores, log\u00f3tipos ou anima\u00e7\u00f5es, um pr\u00e9-carregador bem concebido aumenta o reconhecimento da sua marca.<\/li>\n\n
  3. Refor\u00e7ar o profissionalismo<\/strong>: Os s\u00edtios Web com pr\u00e9-carregadores subtis e polidos parecem mais sofisticados e cuidadosamente concebidos.<\/li>\n\n
  4. Melhore a experi\u00eancia do utilizador<\/strong>: Em vez de ficarem a olhar para um ecr\u00e3 em branco, os utilizadores t\u00eam algo interessante para ver, ajudando a aliviar a frustra\u00e7\u00e3o da espera.<\/li><\/ol>
    \"\"<\/figure>

    A ci\u00eancia por detr\u00e1s dos tempos de carregamento e do comportamento dos utilizadores<\/h2>

    A investiga\u00e7\u00e3o mostra que os utilizadores formam uma opini\u00e3o sobre um s\u00edtio Web em 0,05 segundos ap\u00f3s a sua primeira intera\u00e7\u00e3o. Os atrasos no carregamento da p\u00e1gina podem criar primeiras impress\u00f5es negativas, afectando a satisfa\u00e7\u00e3o e a reten\u00e7\u00e3o do utilizador. Um pr\u00e9-carregador ocupa os utilizadores durante o carregamento e contribui para definir expectativas e criar antecipa\u00e7\u00e3o para o conte\u00fado.<\/p>

    Solu\u00e7\u00f5es de pr\u00e9-carregadores para WordPress<\/h2>

    Ao adicionar um pr\u00e9-carregador a um site WordPress, tem duas op\u00e7\u00f5es principais:<\/p>

    1. Utilizar plug-ins<\/strong>: Este m\u00e9todo \u00e9 acess\u00edvel a principiantes e n\u00e3o requer conhecimentos de programa\u00e7\u00e3o.<\/li>\n\n
    2. M\u00e9todo manual<\/strong>: Para utilizadores avan\u00e7ados, a abordagem manual oferece maior flexibilidade e permite uma personaliza\u00e7\u00e3o detalhada.<\/li><\/ol>
      \"\"<\/figure>

      Discutiremos ambos os m\u00e9todos, incluindo exemplos pr\u00e1ticos, para o ajudar a escolher a melhor abordagem para o seu projeto.<\/p>

      M\u00e9todo 1: Adicionar um pr\u00e9-carregador utilizando um plug-in do WordPress<\/h2>

      Passo 1: Escolher o plug-in correto<\/h3>

      O WordPress oferece v\u00e1rios plug-ins para adicionar pr\u00e9-carregadores personalizados. Algumas escolhas populares incluem:<\/p>

      • Pr\u00e9-carregador Plus<\/strong><\/li>\n\n
      • LoftLoader<\/strong><\/li>\n\n
      • Pr\u00e9-carregador inteligente WP<\/strong><\/li><\/ul>

        Para esta discuss\u00e3o, utilizaremos Pr\u00e9-carregador Plus<\/strong> devido \u00e0 sua facilidade de utiliza\u00e7\u00e3o e flexibilidade.<\/p>

        Passo 2: Instalar e ativar o plug-in<\/h3>
        1. Aceda ao painel de controlo do WordPress.<\/li>\n\n
        2. Navegue at\u00e9 Plugins > Adicionar novo<\/strong>.<\/li>\n\n
        3. Procure por Pr\u00e9-carregador Plus<\/strong>.<\/li>\n\n
        4. Clique em Instale agora<\/strong> e depois Ativar<\/strong>.<\/li><\/ol>
          \"\"<\/figure>

          Passo 3: Configurar as defini\u00e7\u00f5es do pr\u00e9-carregador<\/h3>

          Para configurar o seu pr\u00e9-carregador:<\/p>

          1. Aceda a Defini\u00e7\u00f5es > Pr\u00e9-carregador Plus<\/strong>.<\/li>\n\n
          2. Aqui encontrar\u00e1 op\u00e7\u00f5es de personaliza\u00e7\u00e3o:
            • Tipo de anima\u00e7\u00e3o<\/strong>: Escolha um tipo de anima\u00e7\u00e3o, como um spinner, um fade ou um SVG personalizado.<\/li>\n\n
            • Mensagem de carregamento<\/strong>: Uma mensagem curta e cativante pode melhorar ainda mais a experi\u00eancia do utilizador.<\/li>\n\n
            • Dura\u00e7\u00e3o e atraso<\/strong>: Defina uma dura\u00e7\u00e3o adequada para manter o pr\u00e9-carregador no ecr\u00e3 at\u00e9 o conte\u00fado estar pronto.<\/li><\/ul><\/li>\n\n
            • Utilize a fun\u00e7\u00e3o de pr\u00e9-visualiza\u00e7\u00e3o para ver o efeito e ajustar as defini\u00e7\u00f5es conforme necess\u00e1rio.<\/li><\/ol>

              Exemplo: Configurando um pr\u00e9-carregador de spinner simples<\/h3>

              Vamos configurar um spinner simples:<\/p>

              1. Sob Defini\u00e7\u00f5es > Pr\u00e9-carregador Plus<\/strong>, selecione Girador<\/strong> como anima\u00e7\u00e3o.<\/li>\n\n
              2. Conjunto Cor prim\u00e1ria<\/strong> para combinar com a sua marca.<\/li>\n\n
              3. Defina o Dura\u00e7\u00e3o<\/strong> como 2 segundos.<\/li>\n\n
              4. Adicione uma mensagem de carregamento como \"Aguente firme, estamos quase l\u00e1!\"<\/li>\n\n
              5. Guarde as suas altera\u00e7\u00f5es e visite o seu s\u00edtio Web para ver o pr\u00e9-carregador em a\u00e7\u00e3o.<\/li><\/ol>
                \"\"<\/figure>

                M\u00e9todo 2: Adicionar um pr\u00e9-carregador manualmente com c\u00f3digo personalizado<\/h2>

                Se procura controlo total, o m\u00e9todo manual permite pr\u00e9-carregadores personalizados que se alinham perfeitamente com a identidade da sua marca. Aqui, pode utilizar HTML, CSS e JavaScript para criar algo \u00fanico.<\/p>

                \"\"<\/figure>

                Passo 1: Criar o pr\u00e9-carregador<\/h3>

                Decida o design do pr\u00e9-carregador. Pode optar por um girador simples<\/strong>, a barra de progresso<\/strong>, ou um anima\u00e7\u00e3o personalizada<\/strong> com o seu log\u00f3tipo.<\/p>

                C\u00f3digo HTML<\/h4>

                Crie um <div><\/code> para o pr\u00e9-carregador:<\/p>

                <div id="preloader">\n    <div class="spinner"><\/div>\n<\/div><\/code><\/pre>
                C\u00f3digo CSS<\/h4>
                Estilize o girador<\/em>:<\/p>
                #preloader {\n    position: fixed;\n    left: 0;\n    top: 0;\n    largura: 100%;\n    altura: 100%;\n    fundo: #ffffff;\n    exibi\u00e7\u00e3o: flex;\n    alinhar-itens: centro;\n    justify-content: center;\n    z-index: 9999;\n}\n\n.spinner {\n    border: 5px solid rgba(0, 0, 0, 0.1);\n    cor da margem esquerda: #000;\n    raio da margem: 50%;\n    largura: 50px;\n    altura: 50px;\n    anima\u00e7\u00e3o: gire 1s linear infinito;\n}\n\n@keyframes spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}<\/code><\/pre>
                Etapa 2: JavaScript para ocultar o pr\u00e9-carregador<\/h3>
                Adicione JavaScript para ocultar o pr\u00e9-carregador assim que a p\u00e1gina for carregada:<\/p>
                <script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    window.addEventListener(\"load\", function() {\n        var preloader = document.getElementById('preloader');\n        preloader.style.display = 'none';\n    });\n});\n<\/script><\/code><\/pre>
                Passo 3: Inserir o c\u00f3digo no seu tema<\/h3>
                Para adicionar o pr\u00e9-carregador ao seu tema:<\/p>
                1. Fa\u00e7a uma c\u00f3pia de seguran\u00e7a do seu tema<\/strong>: Crie sempre uma c\u00f3pia de seguran\u00e7a antes de efetuar altera\u00e7\u00f5es.<\/li>\n\n
                2. Editar <\/strong>header.php<\/strong><\/code>: Navegue para Apar\u00eancia > Editor de temas<\/strong> e abra header.php<\/code>.<\/li>\n\n
                3. Insira o HTML, CSS e JavaScript<\/strong>: Adicione o HTML logo abaixo do <body><\/code> e inclua o CSS e o JavaScript conforme necess\u00e1rio.<\/li><\/ol>
                  \"\"<\/figure>
                  Exemplo: Adicionando um pr\u00e9-carregador centrado na marca<\/h3>
                  Se tiver um log\u00f3tipo de marca, pode utiliz\u00e1-lo como pr\u00e9-carregador:<\/p>
                  C\u00f3digo HTML<\/h4>
                  Utilize a imagem do seu log\u00f3tipo como pr\u00e9-carregador:<\/p>
                  <div id="preloader">\n    <img src="path\/to\/your\/logo.png" alt="Carregando...">\n<\/div><\/code><\/pre>
                  C\u00f3digo CSS<\/h4>
                  Centre o log\u00f3tipo no ecr\u00e3:<\/p>
                  #preloader {\n    position: fixed;\n    left: 0;\n    top: 0;\n    largura: 100%;\n    altura: 100%;\n    fundo: #ffffff;\n    exibi\u00e7\u00e3o: flex;\n    alinhar-itens: centro;\n    justify-content: center;\n    z-index: 9999;\n}\n\n#preloader img {\n    largura: 100px;\n    altura: auto;\n    anima\u00e7\u00e3o: fadeIn 1.5s ease-in-out;\n}\n\n@keyframes fadeIn {\n    0% { opacidade: 0; }\n    100% { opacidade: 1; }\n}<\/code><\/pre>
                  Melhores pr\u00e1ticas para pr\u00e9-carregadores<\/h2>
                  Para garantir que o pr\u00e9-carregador funciona eficazmente em diferentes dispositivos e navegadores, \u00e9 crucial efetuar testes e optimiza\u00e7\u00f5es exaustivos. Abaixo est\u00e3o algumas instru\u00e7\u00f5es detalhadas:<\/p>
                  Compatibilidade com dispositivos m\u00f3veis e navegadores cruzados<\/h3>
                  \"\"<\/figure>
                  1. Ferramentas de teste<\/strong>: Utilize ferramentas como Pilha de navegadores<\/strong> ou LambdaTest<\/strong> para testar o seu pr\u00e9-carregador em v\u00e1rios dispositivos e navegadores. Isto garante que as anima\u00e7\u00f5es funcionam bem em ambientes como o Safari (iOS) ou vers\u00f5es mais antigas do Internet Explorer.<\/li>\n\n
                  2. Considera\u00e7\u00f5es sobre a janela de visualiza\u00e7\u00e3o<\/strong>: Certifique-se de que o seu pr\u00e9-carregador \u00e9 reativo, utilizando unidades relativas (por exemplo, %<\/code>, vw<\/code>, vh<\/code>) em vez de unidades fixas como px<\/code>. Isto assegura que o pr\u00e9-carregador \u00e9 dimensionado corretamente em diferentes tamanhos de ecr\u00e3.<\/li>\n\n
                  3. Degrada\u00e7\u00e3o graciosa<\/strong>: Para os browsers que n\u00e3o suportam anima\u00e7\u00f5es CSS avan\u00e7adas, forne\u00e7a estilos de recurso. Por exemplo, utilize um pr\u00e9-carregador mais simples ou uma imagem est\u00e1tica como alternativa se as anima\u00e7\u00f5es n\u00e3o forem suportadas.<\/li>\n\n
                  4. Otimiza\u00e7\u00e3o do desempenho<\/strong>: Utilizar vai mudar<\/code> no CSS para informar o navegador sobre as propriedades que ser\u00e3o alteradas, permitindo uma melhor otimiza\u00e7\u00e3o. Por exemplo:<\/li><\/ol>
                    .spinner {\n    will-change: transform;\n}<\/code><\/pre>
                           5.Movimento Reduzido<\/strong>: Tenha em conta os utilizadores que preferem movimentos reduzidos, utilizando consultas multim\u00e9dia para desativar as anima\u00e7\u00f5es:@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }<\/code><\/p>
                    Para garantir que os pr\u00e9-carregadores acrescentam valor ao seu s\u00edtio Web, \u00e9 importante aderir \u00e0s melhores pr\u00e1ticas:<\/p>
                    1. Optimize os tempos de carregamento<\/strong>: Os pr\u00e9-carregadores n\u00e3o substituem a otimiza\u00e7\u00e3o do desempenho do site. Certifique-se de que o seu s\u00edtio Web est\u00e1 optimizado para que o pr\u00e9-carregador apare\u00e7a apenas por breves instantes.<\/li>\n\n
                    2. Design minimalista<\/strong>: Utilize anima\u00e7\u00f5es simples e elegantes que n\u00e3o distraiam os utilizadores. As anima\u00e7\u00f5es complexas podem afetar negativamente o desempenho.<\/li>\n\n
                    3. Compatibilidade com telem\u00f3veis e navegadores<\/strong>: Verifique se o pr\u00e9-carregador funciona bem tanto no computador como em dispositivos m\u00f3veis. Teste-o em v\u00e1rios navegadores.<\/li>\n\n
                    4. Teste A\/B<\/strong>: Considere a possibilidade de efetuar testes A\/B para determinar como diferentes pr\u00e9-carregadores afectam a experi\u00eancia do utilizador e as taxas de rejei\u00e7\u00e3o.<\/li><\/ol>
                      Estudo de caso: Efic\u00e1cia dos pr\u00e9-carregadores<\/h2>
                      Para ilustrar a efic\u00e1cia dos pr\u00e9-carregadores, vamos considerar um cen\u00e1rio com dados e informa\u00e7\u00f5es visuais. Abaixo, encontrar\u00e1 um gr\u00e1fico que demonstra o impacto da adi\u00e7\u00e3o de um pr\u00e9-carregador personalizado nas taxas de rejei\u00e7\u00e3o e nas m\u00e9tricas de envolvimento do utilizador.<\/p>
                      Informa\u00e7\u00f5es de dados sobre o impacto do pr\u00e9-carregador<\/h3>
                      \"\"<\/figure>
                      • Redu\u00e7\u00e3o da taxa de rejei\u00e7\u00e3o<\/strong>: Uma amostra de 100 s\u00edtios Web de com\u00e9rcio eletr\u00f3nico revelou uma redu\u00e7\u00e3o m\u00e9dia da taxa de rejei\u00e7\u00e3o de 20%<\/strong> depois de implementar os pr\u00e9-carregadores.<\/li>\n\n
                      • Envolvimento do utilizador<\/strong>: A dura\u00e7\u00e3o m\u00e9dia da sess\u00e3o aumentou em 15%<\/strong>indicando uma maior paci\u00eancia e envolvimento dos utilizadores enquanto aguardam o carregamento da p\u00e1gina.<\/li>\n\n
                      • Taxas de convers\u00e3o<\/strong>: Os s\u00edtios Web com pr\u00e9-carregadores registaram um aumento de 10% nas taxas de convers\u00e3o em compara\u00e7\u00e3o com os que n\u00e3o tinham pr\u00e9-carregador.<\/li><\/ul>
                        Gr\u00e1fico: Impacto dos pr\u00e9-carregadores nas m\u00e9tricas do utilizador<\/h3>
                        Este gr\u00e1fico mostra como a implementa\u00e7\u00e3o de um pr\u00e9-carregador melhorou as taxas de rejei\u00e7\u00e3o, a dura\u00e7\u00e3o das sess\u00f5es e as taxas de convers\u00e3o em diferentes sectores. Repare na tend\u00eancia ascendente na dura\u00e7\u00e3o da sess\u00e3o e nas m\u00e9tricas de convers\u00e3o depois de os pr\u00e9-carregadores terem sido integrados, ilustrando o seu valor na manuten\u00e7\u00e3o do envolvimento do utilizador.<\/p>
                        Um estudo de caso envolvendo um s\u00edtio Web de com\u00e9rcio eletr\u00f3nico revelou que a adi\u00e7\u00e3o de um pr\u00e9-carregador reduziu as taxas de rejei\u00e7\u00e3o em 20%<\/strong>. O pr\u00e9-carregador apresentava uma anima\u00e7\u00e3o subtil do log\u00f3tipo da marca, criando uma experi\u00eancia positiva para o utilizador durante os tempos de carregamento. Os utilizadores sentiram o site como mais polido e profissional, o que acabou por melhorar as m\u00e9tricas de envolvimento.<\/p>
                        Este caso destaca o papel de um pr\u00e9-carregador simples, mas bem pensado, na melhoria da perce\u00e7\u00e3o e da intera\u00e7\u00e3o do utilizador.<\/p>
                        \"\"<\/figure>
                        Conclus\u00e3o<\/h2>
                        Adicionar um pr\u00e9-carregador personalizado ao seu site WordPress pode melhorar a experi\u00eancia do utilizador, reduzir as taxas de rejei\u00e7\u00e3o e adicionar uma camada de polimento profissional \u00e0 sua marca. Quer utilize um plug-in ou implemente uma solu\u00e7\u00e3o personalizada utilizando HTML, CSS e JavaScript, \u00e9 essencial concentrar-se nos aspectos essenciais de usabilidade, est\u00e9tica e desempenho.<\/p>","protected":false},"excerpt":{"rendered":"
                        A cria\u00e7\u00e3o de um s\u00edtio Web WordPress profissional e cativante exige mais do que conte\u00fados atraentes e visuais apelativos. Um aspeto frequentemente negligenciado que pode melhorar significativamente a experi\u00eancia do utilizador...<\/p>","protected":false},"author":31,"featured_media":3866,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65,58],"tags":[340,338,339,206],"class_list":["post-3846","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-page-loading","category-speed","tag-cross-browser-compatibility","tag-custom-preloader","tag-ux-design","tag-wordpress-development",""],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/posts\/3846","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/comments?post=3846"}],"version-history":[{"count":7,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/posts\/3846\/revisions"}],"predecessor-version":[{"id":3869,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/posts\/3846\/revisions\/3869"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/media\/3866"}],"wp:attachment":[{"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/media?parent=3846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/categories?post=3846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/tags?post=3846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}