Ir para o conteúdo principal

Como carregar progressivamente artigos no WordPress

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Deseja adicionar um botão para carregar artigos de forma progressiva e assíncrona no WordPress? Muitas plataformas populares permitem que os usuários carreguem mais itens quando alcançam a parte inferior da página. Neste tutorial, mostraremos como adicionar facilmente um botão para carregar novos artigos no WordPress.

loadmorepostswp.png

Quando e por que adicionar um botão de carregamento de artigos no WordPress

Manter os usuários envolvidos com o conteúdo ajuda a obter mais visualizações e, finalmente, mais assinantes.

Muitos blogs usam o link de navegação simples "artigos anteriores" no final da página inicial, do blog e do arquivo. Alguns sites usam a navegação de página digital que adiciona mais contexto.

No entanto, existem certos tipos de sites que podem se beneficiar imensamente da rolagem infinita em todos os artigos. Alguns exemplos incluem: sites de fotografia, listas e sites de conteúdo viral.

Em vez de carregar uma nova página, o botão 'carregar mais artigo' funciona como uma rolagem infinita. Ele usa JavaScript para recuperar rapidamente o próximo conjunto de conteúdo. Isso aprimora a experiência do usuário e oferece a oportunidade de exibir mais conteúdo.

Dito isto, vamos dar uma olhada em como adicionar facilmente o botão de carregamento de artigos ao seu site WordPress.

Adicionando o botão de carregamento do artigo no WordPress

A primeira coisa a fazer é instalar e ativar o plugin Carga Ajax Mais . Para mais detalhes, consulte o nosso guia passo a passo em como instalar um plugin do WordPress.

Depois de ativar o plug-in, o plug-in adicionará um novo item de menu chamado "Carga Ajax MaisPara o seu painel do WordPress. Você precisa clicar nele e ir para a página de configurações do plugin.

ajaxmoresettings.jpg

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Na página de configurações, você pode escolher a cor do seu botão. Você também pode substituir o botão por rolagem infinita que carrega automaticamente o próximo lote de itens sem que os usuários cliquem no botão.

Então você tem que acessar " Ajax Load Plus » Modelo Repetidor » para adicionar seu modelo à visualização do artigo.

O plug-in vem com um modelo básico que contém o loop do WordPress para exibir os artigos. No entanto, pode não ser o seu tema.

Para resolver esse problema, você deve copiar o código usado pelo seu tema para exibir as postagens nas páginas iniciais, no arquivamento e no blog do blog.

Normalmente, esse código está na pasta de partes do modelo do seu tema. Nesta pasta, você verá modelos para exibir diferentes conteúdos. Por exemplo, content-page.php, content-search.php e muito mais.

Procurando o modelo genérico content.php. Aqui está um exemplo do arquivo content.php do nosso tema de demonstração:

<article id = "post - <? php the_ID ();?>" <? php post_class (); ? >> <? php // Postar miniatura. twentyfifteen_post_thumbnail (); ?> <header class = "entry-header"> <? php if (is_single ()): the_title ('<h1 class = "entry-title">', '</ h1>'); else: the_title (sprintf ('<h2 class = "entry-title"> <a href="%s" rel="bookmark">' esc_url (get_permalink ())), '</a> </ h2> '); endif; ?> </ header> <! - .entry-header -> <div class = "entry-content"> <? php / * tradutores:% s: Nome da postagem atual * / the_content (sprintf (__ (' Continue lendo% s ',' twentyfifteen '), the_title (' <span class = "screen-reader-text"> ',' </ span> ', false))); wp_link_pages (array ('before' => '<div class = "page-links"> <span class = "page-links-title">'. __ ('Páginas:', 'twentyfifteen'). '</ span > ',' depois '=>' </ div> ',' link_before '=>' <span> ',' link_after '=>' </ span> ',' pagelink '=>' <span class = "tela -reader-text "> '. __ (' Página ',' twentyfifteen ').' </ span>% ',' separator '=>' <span class =" screen-reader-text ">, </ span> '))); ?> </ div> <! - .entry-content -> <? php // Author bio. se (is_single () && get_the_author_meta ('description')): get_template_part ('author-bio'); endif; ?> <footer class = "entry-footer"> <? php twentyfifteen_entry_meta (); ?> <? php edit_post_link (__ ('Editar', 'twentyfifteen'), '<span class = "edit-link">', '</ span>'); ?> </ footer> <! - .entry-footer -> </ article> <! - #post - ## ->

Depois de encontrar esse código, cole-o no campo Modelos do repetidor nas configurações do plug-in.

Não se esqueça de clicar no botão « Salvar modelo Para armazenar suas configurações.

Então você tem que visitar " Ajax Load Plus » Shortcode Builder "para gerar o shortcode.

Esta página contém muitas opções que você pode personalizar. Você deve primeiro selecionar o tipo de contêiner. Se você não tiver certeza, basta olhar para o modelo que você copiou anteriormente. Os temas mais modernos usam o elemento

.

Depois disso, vá até a seção de etiquetas do botão. Aqui você pode alterar o texto que aparece no botão. Por padrão, o plug-in usa 'Carregar mais mensagens', e você pode mudá-lo para qualquer coisa que você quiser.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

buttonlabel.jpg

Por fim, você deve escolher se deseja que as publicações sejam carregadas automaticamente após um clique.

Desativar rolagem

Seu código de acesso está pronto para uso. Na coluna da direita, você verá a saída do código de acesso. Vá em frente, copie o código curto e cole-o em um editor de texto, pois você precisará dele na próxima etapa.

shortcodeoutput.jpg

Adicione mais artigos ao seu tema WordPress

Esta parte do tutorial requer que você adicione código nos arquivos de tema do WordPress.

Não se esqueça de salvar o seu tema WordPress antes de fazer alterações.

Você precisará encontrar os arquivos de modelo nos quais deseja adicionar o botão carregar no seu tema. Dependendo de como seu tema está organizado, geralmente esses arquivos são index.php, archives.php, categories.php e assim por diante.

Você precisará adicionar o código curto copiado anteriormente no seu tema logo após a tag EndWhile;.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Como estamos adicionando o shortcode a um arquivo de tema, precisamos adicioná-lo à função do_shortcode, assim:

echo do_shortcode ('[ajax_load_more container_type = "div" post_type = "post"]');

Agora você pode salvar suas alterações e visitar seu site para ver o botão "Carregar mais mensagens" em ação.

loadmoreposts.gif

É isso aí para este tutorial, espero que permita adicionar um botão de carregamento assíncrono no seu blog WordPress.

Este artigo contém comentários 0

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
5 ações
ação2
chilrear1
Enregistrer2