Aula 34: Blocos avançados para exibição de post

Usar os blocos de exibição de posts no plugin Spectra para WordPress é uma excelente maneira de exibir seus posts de forma dinâmica e organizada, seja em uma página ou post específico do seu site. Esses blocos permitem que você mostre seus conteúdos de forma estilizada, com opções de filtragem, layout e personalização que tornam a navegação mais fácil e atraente para os usuários.

Como Usar os Blocos de Exibição de Posts no Spectra

O Spectra oferece alguns blocos específicos para exibição de posts que ajudam a apresentar seus conteúdos de forma personalizada e visualmente atraente. Vamos detalhar como usar esses blocos, como o bloco de Lista de Posts e o bloco de Grid de Posts, e as opções de personalização disponíveis.

Passo 1: Instalar e Ativar o Spectra

Caso ainda não tenha o Spectra instalado, siga estes passos:

1. No painel do WordPress, vá até Plugins > Adicionar Novo.
2. Na barra de pesquisa, digite “Spectra” e instale o plugin.
3. Após a instalação, clique em Ativar.

Passo 2: Adicionar um Bloco de Exibição de Posts

O Spectra adiciona blocos de exibição de posts no editor Gutenberg. Para adicionar um bloco de exibição de posts (como o Lista de Posts ou o Grid de Posts), siga esses passos:

1. Abra o Editor de Blocos (Gutenberg) na página ou post onde deseja exibir os posts.
2. Clique no ícone de + para adicionar um novo bloco.
3. No campo de pesquisa, digite “Post” ou “Posts”.
4. Escolha o bloco Lista de Posts ou Grid de Posts (dependendo do layout que deseja usar).

Bloco de Lista de Posts:

Este bloco exibe os posts em uma lista vertical, com informações como título, data e, opcionalmente, um resumo ou imagem em destaque.

Bloco de Grid de Posts:

Este bloco organiza os posts em uma grade (em linhas e colunas), o que pode ser útil para exibir um número maior de posts de forma compacta e visualmente organizada.

Passo 3: Personalizar os Blocos de Exibição de Posts

Após adicionar o bloco desejado, você pode personalizar a maneira como seus posts serão exibidos. Aqui estão algumas das opções de personalização mais comuns:

1. Número de Posts Exibidos

• Você pode definir quantos posts serão exibidos no bloco. Por exemplo, se você quiser exibir apenas os últimos 5 posts, basta ajustar essa configuração nas opções do bloco.

2. Exibir ou Ocultar Informações Específicas

• Título: Você pode optar por mostrar ou ocultar o título dos posts.
• Imagem em Destaque: Habilite ou desabilite a exibição das imagens em destaque dos posts.
• Data: Você pode decidir se deseja exibir a data de publicação dos posts ou não.
• Resumo ou Excerpt: Muitos blocos de exibição de posts permitem exibir um resumo do conteúdo do post, ajudando o visitante a decidir se quer ler mais.
• Categoria ou Tag: Você pode exibir as categorias ou tags associadas aos posts, facilitando a navegação entre temas semelhantes.

3. Filtragem e Ordenação dos Posts

O Spectra oferece algumas opções avançadas para filtrar e ordenar os posts exibidos:

• Ordenar por: Você pode ordenar os posts por data (mais recentes ou mais antigos), título, ou até autor.
• Filtrar por Categoria ou Tag: Se você tem várias categorias ou tags, pode exibir posts de uma categoria específica ou tags relacionadas.
• Excluir Posts Específicos: Também é possível excluir posts de determinadas categorias ou tags da exibição.

4. Configurar o Layout

O layout da exibição pode ser ajustado para se adequar ao estilo do seu site:

• Grade (Grid): O bloco de grid organiza os posts em uma estrutura de várias colunas. Você pode definir o número de colunas, o espaçamento entre elas e o layout responsivo.
• Lista: O bloco de lista exibe os posts de forma vertical, com uma coluna única. Esse layout é ideal para sites com foco em conteúdo textual e minimalista.

5. Estilo e Design

O Spectra permite que você ajuste o estilo visual dos blocos para que se integrem perfeitamente ao design do seu site. Algumas opções incluem:

• Cor de Fundo: Altere a cor de fundo dos posts ou da área de exibição.
• Fontes e Tipografia: Ajuste o tipo de letra, tamanho e estilo para os títulos, resumos e outros textos.
• Bordas e Sombreamento: Você pode adicionar bordas arredondadas, sombreamento ou outras animações para tornar a exibição mais dinâmica.
• Espaçamento: Defina o preenchimento e a margem do bloco de posts para garantir que o layout tenha o espaçamento adequado entre os elementos.

6. Configurações de Responsividade

O Spectra oferece configurações responsivas para que seus blocos se ajustem bem em dispositivos móveis. Para exibir posts de forma eficiente em telas pequenas, o layout do grid pode ser configurado para colapsar em uma única coluna, garantindo que os posts sejam legíveis e bem apresentados em qualquer dispositivo.

Passo 4: Visualizar e Publicar

Após personalizar o bloco de exibição de posts, você pode visualizar como ele ficará em sua página ou post. Clique em Visualizar para ver o layout final antes de publicar. Se tudo estiver conforme o esperado, clique em Publicar ou Atualizar para tornar as mudanças visíveis no seu site.

Exemplos de Uso de Blocos de Exibição de Posts

1. Página de Blog ou Notícias: Você pode usar o bloco Grid de Posts ou Lista de Posts em uma página dedicada ao blog ou notícias, exibindo os posts mais recentes ou agrupando-os por categorias, como “Notícias”, “Artigos”, “Dicas”, etc.

2. Página Inicial ou Seção de Destaques: Adicione blocos de posts na página inicial do site para mostrar artigos em destaque, com a opção de filtrar posts mais populares, mais recentes ou com as maiores visualizações.

3. Seção de Artigos Relacionados: Em postagens individuais, você pode adicionar blocos de posts relacionados para sugerir outros conteúdos para o usuário, incentivando a navegação no site.

4. Página de Projetos ou Portfólio: Para sites de portfólio ou negócios, os blocos de posts podem ser usados para exibir projetos anteriores ou estudos de caso, organizados por categoria ou tipo de serviço.

Conclusão

Os blocos de exibição de posts no Spectra são uma excelente ferramenta para tornar seu conteúdo dinâmico e bem organizado. Com opções como o Grid de Posts e a Lista de Posts, você pode personalizar a exibição de seus artigos, ajustando a ordem, filtragem, layout e design, para criar uma experiência de navegação mais fluida e atraente para os visitantes.

Esses blocos não só ajudam a melhorar a organização do conteúdo no seu site, mas também oferecem flexibilidade para personalizar a exibição de acordo com a identidade visual do seu site e os interesses dos usuários.