Crie uma seção "Trending Posts" no Oxygen Builder - Tutorial

Publicados: 2022-06-22

Neste artigo e tutorial em vídeo, vamos construir uma seção de postagens populares/de tendências no Oxygen Builder usando o elemento repeater, WordPress Popular Posts Plugin e consultas avançadas.

Um dos primeiros tutoriais que publicamos neste blog relacionado ao Oxygen foi como criar uma seção de postagem popular. Agora, em 2022, vamos revisitar este tópico usando os métodos mais atualizados e os melhores plugins para o trabalho.

Nossa agência trabalha em muitos sites de notícias e grandes conteúdos. Um requisito contínuo desse tipo de site é a capacidade de exibir postagens populares e de tendências. O mecanismo que cada um desses widgets usa é o mesmo - primeiro, precisamos entender quantas visualizações uma postagem específica está obtendo e, em seguida, podemos consultar com base nisso.

Curso de Construtor de Oxigênio - em breve!

O curso Oxygen Builder Mastery o levará do iniciante ao profissional - módulos ACF, MetaBox e WooCommerce incluídos.

Receba notificação de lançamento e desconto

As postagens populares geralmente analisam a contagem geral de visualizações de postagens por um longo período de tempo. Por exemplo, podemos mostrar as postagens mais populares de todos os tempos no blog ou as postagens mais populares de um ano específico.

As postagens de tendências analisam a contagem geral de visualizações em um período mais curto, geralmente um dia ou uma semana. Por exemplo, se uma postagem tiver 100 visualizações em um dia, em comparação com a média do site de 33 visualizações, saberemos que isso é tendência.

Existem muitos plugins no repositório do WordPress que permitem adicionar rapidamente esses tipos de widgets a um site WordPress. No entanto, o repetidor de oxigênio e o elemento post fácil permitem que você personalize seriamente a saída de dados dinâmicos de cada post. Em nossos projetos, construímos displays e cartões totalmente personalizados usando repetidores.

Com esse método, podemos incorporar facilmente postagens populares e postagens de tendências no Oxygen Builder usando repetidores.

Vídeo tutorial

Obtenha as visualizações

O primeiro passo é entender quantas visualizações uma postagem individual está obtendo.

Para obter as visualizações íamos usar um plugin popular chamado " WordPress Popular Posts ". Esta é uma ferramenta realmente poderosa - suporta vários idiomas, vem com cache, está muito bem documentada no GitHub, tem um painel de estatísticas no WP admin e ainda tem suporte à API!

isotrópico-2022-06-19-at-17-41-16 — Instale este plugin no seu site Oxygen Builder

Pronto para uso, ele oferece widgets personalizáveis para exibir facilmente as postagens mais populares em seu site. Você pode inseri-los no Oxygen usando códigos de acesso.

No entanto, queremos dar um passo adiante e usar o elemento repetidor Oxygen Builder para exibir as postagens mais populares e populares. Dessa forma, podemos usar o construtor para personalizar completamente a aparência de nossas postagens mais populares.

No entanto, há um pequeno problema com a forma como este plugin gerencia a contagem de visualizações. As visualizações são armazenadas em uma tabela de banco de dados separada de posts ou postmeta . Para consultar usando o WordPress Square padrão no construtor de oxigênio, precisamos desses dados acessíveis por meio de um metacampo.

Adicionar visualizações ao meta do post

Depois de instalar o plugin WordPress Popular Posts , é hora de tornar esses dados utilizáveis para nossas consultas.

Para fazer isso, precisamos pegar os números de visualização mais atualizados e preenchê-los em um campo personalizado associado às nossas postagens.

Assim que esses dados estiverem acessíveis, podemos usá-los para ordenar postagens por popularidade em consultas personalizadas do WordPress.

Primeiro, adicione este código ao seu site usando um gerenciador de snippets de código. Sugerimos o Organizador de Scripts para sites do Oxygen Builder.

/** * Armazena visualizações de diferentes períodos de tempo como meta-chaves. * * @author @migueleste / @radgh * @link https://wordpress.org/support/topic/how-to-sort-a-custom-query-by-views-all-time-monthly-weekly-or- daily/ * @param int $postid O ID da postagem/página/tipo de postagem personalizada atual. */ function custom_wpp_update_postviews($postid) { // Precisão: // 10 = 1 em 10 visitas atualizará a contagem de visualizações. (Recomendado para sites de alto tráfego.) // 30 = 30% das visitas. (Websites de tráfego médio.) // 100 = Cada visita. Cria muitas operações de gravação de banco de dados a cada solicitação. $precisão = 50; if ( function_exists('wpp_get_views') && (mt_rand(0,100) < $accuracy) ) { // Remova ou comente linhas que você não usará!! update_post_meta( $postid, 'views_total', wpp_get_views($postid, 'all', false) ); update_post_meta( $postid, 'views_daily', wpp_get_views($postid, 'daily', false) ); update_post_meta( $postid, 'views_weekly', wpp_get_views($postid, 'weekly', false) ); update_post_meta( $postid, 'views_monthly', wpp_get_views($postid, 'mensal', false) ); } } add_action('wpp_post_update_views', 'custom_wpp_update_postviews');

Este código é criado pelo desenvolvedor por trás do plug-in para fazer exatamente o que precisamos - nos fornecer dados utilizáveis para consulta.

Ele nos dá quatro novos meta campos para trabalhar - views_total, views_daily, views_weekly, views_monthly .

O total de visualizações e as visualizações mensais são ótimas para serem usadas em uma seção de postagem popular. As visualizações diárias e semanais são ótimas para postagens de tendências.

Cada campo contém um número para as visualizações correspondentes - por exemplo, em uma postagem específica, posso mostrar o total de visualizações no frontend adicionando isso em um bloco de código Oxygen em um modelo aplicado às postagens:

<?php the_field('views_total'); ?> //exemplo de saída seria 1203. Isso significa que desde que o post foi publicado, ele recebeu 1203 visualizações.

Espere!

Dependendo do tráfego que seu site recebe, você vai querer otimizar isso para que os recursos do servidor se esgotem ao gravar cada visualização no banco de dados. Felizmente, há um recurso interno para este trecho de código que aborda exatamente isso.

Perto da parte superior deste snippet de código, você pode ver uma seção de precisão. Comentado no código são instruções.

A precisão é controlada de 0 a 100. Se definido como 100, cada exibição de página será registrada no banco de dados. Se definido como 1, 1 em 10 visitas atualizará a contagem de visualizações.

A precisão deve ser reduzida para sites de maior tráfego. Isso minimiza a carga no servidor e os problemas de desempenho.

Tenha em mente que este plugin não se destina a substituir uma solução de análise. Portanto, a precisão não importa tanto, pois a proporção de visualizações para postagens será a mesma. Você ainda saberá quais de suas postagens são populares.

Crie a seção de postagens populares

Agora, vamos criar rapidamente as seções de postagens populares e de tendências.

Vou usar um repetidor e adicionar rapidamente uma imagem em destaque, título de postagem, trecho e link para ler mais. Você também pode usar postagens fáceis, pois usaremos o recurso de consultas avançadas incluído no Oxygen.

isotrópico-2022-06-19-at-18-04-50 — Minha exibição "top stories", construída com um repetidor Oxygen Builder

Consultar postagens de tendências

Agora, é hora de consultar as postagens de tendências. Como mencionado anteriormente, usaremos a contagem geral de visualizações do dia, pois isso nos dá uma boa compreensão do que está em alta durante esse período específico.

Para fazer isso, use o recurso de consulta avançada para o elemento repetidor ou post fácil.

Clique no botão "editar consulta" para abrir a interface de consulta avançada.

Agora, adicione o seguinte. Para este caso usado, eu só queria mostrar as oito postagens mais populares com base nas visualizações semanais.

Eu coloco:

posts_per_page = 8
no_found_rows = true (desabilita a paginação para o repetidor)
post_type = post
meta_key = views_weekly (isso informa ao WordPress que precisamos associar os dados deste campo à consulta. Lembre-se, podemos alterar isso para total, diário, semanal ou mensal, dependendo se queremos postagens populares ou populares)
order_by = meta_value_num (isso nos diz que vamos ordenar pelo número associado ao nosso meta-valor que neste caso são as visualizações semanais)
order = desc (isso nos diz para ordenar as postagens por mais visualizações para menos visualizações)

Agora, salve tudo e vá para o front-end do seu site Oxygen. Você agora exibirá postagens neste repetidor específico ordenados pelo número de visualizações durante o período de tempo selecionado.

Bônus

Também quero exibir a contagem geral de visualizações para meus leitores no front-end do blog. Para fazer isso, vou criar um código curto. Eu adiciono este código ao meu gerenciador de trechos:

<?php add_action('init', function(){ add_shortcode('post_views', function(){ return wpp_get_views(get_the_ID()); }); }); ?>

Então, posso inserir a contagem de visualizações para um único post adicionando este shortcode:

[post_views]

Para este tutorial, coloquei este shortcode no meu repetidor para exibir as visualizações associadas a uma postagem. Dessa forma, pude verificar se minha consulta estava funcionando conforme o planejado.

isotrópico-2022-06-19-at-18-03-45 — Não funcionará no editor, mas funciona no frontend.

isotrópico-2022-06-19-at-18-14-12 — Repetidor de front-end, classificado por contagem de visualizações semanal, mostrando o total de visualizações de página no front-end.

Algo a ser observado aqui é que isso não está usando os campos de contagem de visualizações que adicionamos à nossa postagem única com o snippet de código anterior. Em vez disso, ele está extraindo da tabela do banco de dados que este plug-in adiciona durante a instalação. Isso significa que sempre será uma contagem de visualizações precisa, independentemente da precisão dita no snippet anterior (são duas coisas diferentes).

Também posso adicionar essas informações adicionando o seguinte PHP vá diretamente a um bloco de código em um modelo aplicado a um único post:

<?php if ( function_exists('wpp_get_views') ) { // get_the_ID() só funciona quando usado // dentro do The Loop! (https://codex.wordpress.org/The_Loop) echo wpp_get_views(get_the_ID()); } ?> // Eu também posso filtrar <?php if ( function_exists('wpp_get_views') ) { // '15' aqui é o ID do post/página echo wpp_get_views(15, 'last7days'); } ?> // Mais: https://github.com/cabrerahector/wordpress-popular-posts/wiki/2.-Template-tags#wpp_get_views

Conclusão

Este artigo mostrou como adicionar uma seção de postagem popular e/ou tendência usando o repetidor Oxygen Builder a um site criado com este plug-in. Se você tiver dúvidas ou sugestões, sinta-se à vontade para deixá-las na seção comum abaixo.

Você pode gostar

Inscreva-se e compartilhe

Se você gostou deste conteúdo, assine nosso resumo mensal de notícias do WordPress, inspiração de sites, ofertas exclusivas e artigos interessantes.

Cancele a inscrição a qualquer momento. Não fazemos spam e nunca venderemos ou compartilharemos seu e-mail.