Usando o bloco de loop de consulta no WordPress - OSTraining

No WordPress 5.8, eles lançaram um novo recurso chamado Query Loop Block. Se você ainda não conferiu, vale a pena conferir! Você pode ler esta postagem no blog ou assistir ao vídeo na parte inferior!

Então o Query Loop Block basicamente vai escrever um pequeno loop PHP para você, sem que você precise escrever nenhum código. Agora, isso é semelhante ao Bloco de postagem mais recente, mas é muito mais poderoso e pode fazer muito mais, então vamos mergulhar e dar uma olhada. Para as capturas de tela, temos um site de demonstração do WordPress com algumas informações para usarmos.

Na página inicial temos os artigos do blog, então nossos posts ficam aqui na página inicial. Eu quero salientar que este muito top é um post fixo, e vou explicar por que isso é importante mais tarde. Em seguida, temos duas páginas configuradas, uma é sobre um de nossos autores “Robbie” e a outra é sobre “Bugs”, nosso outro autor.

Portanto, temos dois autores para essas postagens no blog. O que queremos fazer é nestas páginas mostrar todos os blogs que o autor escreveu. Podemos fazer isso com o bloco Query Loop!

No back-end do WordPress, quero salientar mais uma vez que já existem posts, e eles são escritos por Bugs Bunny ou Robbie Adair.

Você verá no backend, que há um post fixo escrito por “Robbie Adair” também.

Então, quando olhamos em Páginas, temos duas páginas. Então temos nossas duas páginas “Sobre Bugs” e “Sobre Robbie”.

Vamos começar com a página “Sobre Robbie”. Quando abrimos a página, quero descer até o final deste conteúdo e adicionar um novo bloco. Então vou acrescentar que quero um novo bloco e vou começar a digitar “query” na busca do bloco, para query loop e ele vai localizar o bloco Query Loop para mim.

Você verá que existem alguns padrões abaixo, mas vou colocar o bloco Query Loop na parte inferior do meu artigo.

Agora podemos selecionar o bloco e queremos que ele esteja em uma exibição de carrossel, o que significa que eles serão artigos singulares, e queremos tê-lo em uma grade onde eles estão em colunas. Podemos até começar em branco, se você souber o design que deseja.

Vamos começar com o carrossel, então podemos mergulhar. Vou escolher o bloco e você verá que o que tenho agora é um título, uma imagem, o trecho ou o primeiro parágrafo , um link leia mais, a data e uma pequena linha separadora.

Em primeiro lugar, tenho mais blogs do que este, então você verá que pode alterar o número de itens que está exibindo e compensá-los, além de poder definir um número máximo. Vou avançar e aumentar para seis por enquanto, para que você possa ver que está puxando todos os blogs que temos.

Isso inclui o post fixo, você o verá na lista. Então o que vamos fazer é selecionar nosso bloco de loop de consulta novamente. Agora, eu gostaria que este bloco se destacasse para que ficasse um pouco diferente da minha página, então você verá que quando eu selecionar o bloco nas minhas configurações eu posso mudar a cor. Vou mudar a cor de fundo para branco, meio que se destaca um pouco melhor nesta página, então sei que há algo diferente.

Além disso, você verá no painel de configurações do bloco que você pode realmente escolher “post” ou “pages” para um tipo, para que você possa controlar o que vai puxar para este bloco de loop de consulta. Portanto, essa capacidade de também puxar páginas, define o bloco de loop de consulta acima do bloco de postagens mais recentes.

Também nas configurações de “bloqueio” podemos definir por categoria, autor ou palavra-chave. Em nosso exemplo, queremos mostrar todos os blogs por “Robbie”, então vamos selecionar “Robbie” como nosso autor. Automaticamente, está mostrando apenas as postagens do blog que Robbie escreveu, incluindo a postagem fixa.

Nota : Podemos dizer que não queremos esse post fixo e definir para excluí-lo.

Você também pode dizer “somente”, então, se você quiser colocar as postagens adesivas em lugares, poderá. Vamos excluí-lo aqui, e agora você verá o que eu tenho é apenas a postagem de blogs de Robbie nesta página. Vamos em frente e atualizar esta página e vê-la a partir do front-end. Então, vamos voltar ao backend e ver a página “Bugs”. Nós vamos fazer mais uma coisa lá.

Agora vamos editar a página “Sobre Bugs” e adicionar o bloco de loop de consulta.

Vamos adicionar o bloco Query Loop novamente, só que desta vez vamos selecionar que queremos começar em branco. Quando você começar em branco, verá que obtém algumas informações básicas aqui. Queremos a opção “título e data”.

Você pode ver que eu só tenho o título e a data dessas postagens do blog que existem. Agora precisamos ir até as configurações de bloco e selecionar Bugs Bunny como autor e de repente temos menos, porque Bugs tem apenas dois que ele escreveu.

A última coisa que eu quero mostrar é que quando você está fazendo isso sozinho do zero, você ainda pode adicionar elementos. Então você pode dizer “bem, ficou melhor com uma imagem”, adivinhem? Se olharmos para o nosso navegador de estrutura de tópicos, ele lhe dará uma ideia melhor de que o bloco de loop de consulta já está abrigando dois blocos, Post Title e Post Date.

Então podemos ir e adicionar outro bloco aqui. Talvez queiramos que a imagem do post em destaque vá para lá, basta arrastar e soltar onde quiser no editor.

Você verá porque este é um loop que fez isso com todos os posts lá. E eu poderia movê-los se quisesse essa imagem abaixo do título, você pode simplesmente movê-la.

Vamos atualizar a página do jeito que está e voltar e atualizar nossa página Sobre Bugs no frontend. Você verá que este se parece com o nosso que fizemos em branco.

Essa é uma rápida olhada no Query Loop Block, é uma nova adição muito legal ao WordPress e espero que você experimente e veja o que pode fazer com ele! Acho que você ficará bastante satisfeito com a versatilidade que ele oferece.