{"id":245760,"date":"2022-04-13T09:22:00","date_gmt":"2022-04-13T06:22:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=245760"},"modified":"2022-05-16T14:22:07","modified_gmt":"2022-05-16T11:22:07","slug":"como-adicionar-scroll-infinito-com-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-adicionar-scroll-infinito-com-wordpress\/","title":{"rendered":"Como adicionar scroll infinito com WordPress"},"content":{"rendered":"<p>A rolagem infinita \u00e9 uma maneira incr\u00edvel de tornar a navega\u00e7\u00e3o no seu conte\u00fado mais f\u00e1cil.<\/p>\n<p>Ele funciona carregando novas postagens na p\u00e1gina conforme os visitantes rolarem, em vez de faz\u00ea-los clicar na pr\u00f3xima p\u00e1gina de postagens. Ent\u00e3o, como voc\u00ea adiciona rolagem infinita ao seu site?<\/p>\n<p>Essas s\u00e3o as duas melhores abordagens e plug-ins que voc\u00ea pode usar para seu site.<\/p>\n<p>A melhor implementa\u00e7\u00e3o de rolagem infinita para sites WordPress est\u00e1 no <a href=\"https:\/\/wordpress.org\/plugins\/jetpack\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">plugin Jetpack<\/a>.<\/p>\n<p>Antes de instal\u00e1-lo, entre em contato com o desenvolvedor do tema e pergunte se o seu tema tem suporte. Em caso afirmativo, voc\u00ea pode simplesmente instalar o Jetpack e ativar o <a href=\"https:\/\/jetpack.com\/support\/infinite-scroll\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">m\u00f3dulo de rolagem infinita<\/a>.<\/p>\n<p>Dito isso, nem todo tema j\u00e1 tem suporte e voc\u00ea pode n\u00e3o querer instalar o plugin Jetpack. Se for voc\u00ea, aqui est\u00e1 uma maneira alternativa de adicionar rolagem infinita.<\/p>\n<p><strong>Voc\u00ea \u00e9 um usu\u00e1rio do Compete Themes?<\/strong> Todos os <a href=\"https:\/\/www.competethemes.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">nossos temas<\/a> incluem suporte para rolagem infinita com Jetpack.<\/p>\n<p>A alternativa para rolagem infinita sem Jetpack \u00e9 usar o plugin <a href=\"https:\/\/wordpress.org\/plugins\/yith-infinite-scrolling\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">YITH Infinite Scrolling<\/a>.<\/p>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/yith-infinite-scrolling\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176925-616f33793454c.png\" alt=\"Como adicionar scroll infinito com WordPress\" \/><\/a><\/p>\n<p>Embora este plugin funcione muito bem, a configura\u00e7\u00e3o \u00e9 um pouco t\u00e9cnica. Vamos cobrir as etapas agora.<\/p>\n<h3>Instalar e ativar<\/h3>\n<p>Primeiro, instale e ative YITH Infinite Scrolling atrav\u00e9s do menu Plugins. Uma vez instalado, voc\u00ea encontrar\u00e1 um novo item de menu YITH Plugins adicionado ao seu painel. Clique nele para ver as configura\u00e7\u00f5es de rolagem infinita.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176925-616f337bd829d.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176925-616f337bd829d.png\" alt=\"Como adicionar scroll infinito com WordPress\"><\/a><\/p>\n<h3>Defina as configura\u00e7\u00f5es<\/h3>\n<p>Esta parte pode engan\u00e1-lo se voc\u00ea n\u00e3o souber nada sobre HTML e CSS.<\/p>\n<p>Para fazer o plugin funcionar, voc\u00ea precisa fornecer seletores CSS para quatro elementos HTML diferentes. N\u00e3o h\u00e1 como um plug-in saber esses seletores com anteced\u00eancia, por isso voc\u00ea mesmo ter\u00e1 que inseri-los.<\/p>\n<p>Voc\u00ea n\u00e3o precisa fazer isso com o Jetpack porque o autor do tema j\u00e1 fez isso para voc\u00ea.<\/p>\n<h4>Como encontrar os seletores CSS<\/h4>\n<p>Se voc\u00ea n\u00e3o sabe o que \u00e9 CSS ou como ele se relaciona com o seu site, consulte nossa <a href=\"https:\/\/themewp.inform.click\/pt-pt\/o-que-e-css-e-como-isso-afeta-o-wordpress\/\" title=\"vis\u00e3o geral de CSS com WordPress\">vis\u00e3o geral de CSS com WordPress<\/a>.<\/p>\n<p>Encontrar os seletores CSS de que voc\u00ea precisa \u00e9 realmente f\u00e1cil e direto com a abordagem certa. Se voc\u00ea n\u00e3o tiver certeza de como encontr\u00e1-los, siga <a href=\"https:\/\/themewp.inform.click\/pt-pt\/como-encontrar-seletores-css-em-sites-wordpress\/\" title=\"este tutorial para localizar seletores CSS\">este tutorial para localizar seletores CSS<\/a>. \u00c9 a maneira mais f\u00e1cil de navegar no HTML do seu site para encontrar os elementos que voc\u00ea est\u00e1 procurando.<\/p>\n<h4>Adicione os seletores<\/h4>\n<p>Copie cada seletor nas entradas em YITH Infinite Scrolling conforme voc\u00ea os encontra. Se voc\u00ea \u00e9 um usu\u00e1rio do Compete Themes, pode copiar as classes exatas usadas na imagem acima.<\/p>\n<p>Agora, conforme voc\u00ea rola para baixo no seu site, novas postagens s\u00e3o carregadas automaticamente na p\u00e1gina. O plug-in funciona imediatamente depois que os quatro seletores CSS s\u00e3o fornecidos.<\/p>\n<p>Rolagem infinita no <a href=\"https:\/\/www.competethemes.com\/apex\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tema Apex<\/a> com Rolagem infinita YITH.<\/p>\n<p>Os dois m\u00e9todos acima s\u00e3o os mais f\u00e1ceis e eficazes para adicionar rolagem infinita ao seu site WordPress.<\/p>\n<p>Embora existam plug-ins alternativos, eles tamb\u00e9m requerem um punhado de seletores CSS, e nenhum funciona t\u00e3o bem quanto o plug-in YITH. Configurar a rolagem infinita pode ser um pouco complicado, mas depois de adicionado, funcionar\u00e1 perfeitamente para seus visitantes.<\/p>\n<p>Se voc\u00ea tiver alguma d\u00favida sobre rolagem infinita ou como adicion\u00e1-la ao seu site, poste um coment\u00e1rio abaixo.<\/p>\n<p><strong>Divulga\u00e7\u00e3o:<\/strong> esta postagem pode conter links afiliados. A compra de um produto por meio de um desses links gera uma comiss\u00e3o para n\u00f3s, sem nenhuma despesa adicional para voc\u00ea.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/www.competethemes.com\" class=\"external external_icon\">www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aprenda as duas maneiras mais f\u00e1ceis de adicionar rolagem infinita ao seu site WordPress. O primeiro m\u00e9todo pode ser incrivelmente simples, mas depende de uma coisa &#8230;<\/p>\n","protected":false},"author":1,"featured_media":257628,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[553],"tags":[848],"class_list":["post-245760","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-personalizar-wordpress-2","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/245760","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=245760"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/245760\/revisions"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=245760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=245760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=245760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}