Como criar uma página de blog com Gutenberg (baseado no tema Gutenberry)

Publicados: 2019-10-31

Neste tutorial, você encontrará tudo o que precisa sobre como criar uma página de blog com o editor Gutenberg e o tema GutenBerry.

Criação de uma página de blog com Gutenberg

Uma página de blog é uma página onde seus visitantes veem todas as publicações existentes em seu site. É uma página dinâmica, ou seja, exibe as publicações adicionadas ao seu site desde as mais recentes até as primeiras, ordenando-as por data.

É importante saber que no momento você pode desenhar a forma como as publicações são exibidas, no entanto, o trecho da postagem, a imagem em destaque, a meta da postagem e o título serão retirados da publicação.

Você precisa ter certeza de que há publicações em seu site e definir a imagem em destaque e todas as informações que deseja mostrar na página do Blog na lista de Postagens de antemão.

Para criar uma página de blog em seu site, você precisa ir para Páginas> Adicionar novo e aqui vamos nós!
Em primeiro lugar, você deve escolher o nome da sua página. Vamos chamá-la de “Minha primeira página do blog”, mas o nome da página deve ser uma pequena introdução.

Você pode preencher a página com o bloco clássico de Postagens de Gutenberg. No entanto, se você quiser economizar seu tempo e obter mais configurações adicionais para personalizar sua página de blog, você pode usar o plugin ZeGuten. Possui 5 layouts de postagem responsivos para tornar sua página mais atraente e envolvente.

Criação de uma página de blog baseada no Gutenberry

Depois de criar uma página de Blog, você pode navegar até Painel> Configurações> Leitura e localizar o menu suspenso da página Postagens. Especifique a página que você acabou de criar e clique no botão Salvar alterações.

Parabéns! Agora você atribuiu a página recém-criada como sua página de blog. No entanto, ainda existem muitas maneiras de personalizá-lo e torná-lo único.

Abra a página Blog recém-criada no Customizador e acesse a guia Configurações do Blog e, em seguida, vá para a guia Blog para ver o que você pode fazer.

Por padrão, muito provavelmente, você verá todas as publicações em seu site mostradas como uma lista. Para alterar a forma como as publicações são exibidas, use:

Tipo de layout de blog - aqui você pode escolher um layout na lista suspensa para fazer suas publicações serem exibidas como uma grade.

Colunas - ao definir um layout de grade para o seu blog, você verá a lista suspensa para escolher o número de colunas nas quais as postagens serão exibidas.

Existem também as configurações que o ajudarão a decidir quais metadados para as postagens você deseja mostrar: autor da postagem, data de publicação, categorias, tags, contagem de comentários, etc.

A última caixa de seleção permite que você ative a exibição do trecho das postagens.

Habilite o botão Mostrar Leia mais para permitir que os visitantes cliquem nele e naveguem até a página de um único post.

Além disso, você terá que definir o tipo de rótulo Sticky para marcar suas postagens como sticky, se houver.

Ativando a navegação para a página do blog

Quando você tem muitas postagens em seu site (sim, você é um blogueiro, claro que as tem), você sabe como o visitante pode se sentir desconfortável quando precisa rolar a página para baixo enquanto procura por uma postagem específica que você publicado há algum tempo.

Para tornar o processo mais fácil, você pode adicionar um tipo de navegação à página do Blog. Pode ser uma opção que permite ir de página em página ou setas de navegação.

Enquanto estiver no Customizador, você pode alterar o tipo de navegação a ser usado para a página do Blog na lista suspensa Tipo de navegação.

Aqui você pode escolher Paginação ou Navegação.

Se você não vir nenhum elemento de paginação, isso significa que ainda precisa definir o número de postagens a serem exibidas por página.

Vá para Painel> Configurações> Leitura e defina se as páginas do Blog mostram no máximo o valor (deve ser menor que o número de postagens que você tem para ver a opção de paginação).

Na maioria dos casos, isso será suficiente para criar uma página de blog. No entanto, se você deseja criar uma página estática com listagem de publicações dinâmicas, pode fazê-lo em Gutenberg. Continue lendo para aprender como.

Criação de uma página de blog estática com conteúdo dinâmico usando Gutenberg

Mais uma vez, você deve criar uma nova página. E agora estamos começando.

Vamos adicionar o bloco de Postagens à tela da página! Basta clicar no ícone “+” visto à esquerda do texto “Comece a escrever ou digite / para escolher um bloco”. Escolha o bloco chamado “Postagens” - você pode localizá-lo na categoria de blocos ZeGuten.

Agora você pode ver que o bloco Postagens exibe as publicações que você tem em seu site usando as configurações padrão. Vamos ajustá-los um pouco para obter melhores resultados.

A propósito, você pode usar facilmente os atalhos de Gutenberg para acelerar seu trabalho. Se você não sabe como usar os atalhos do teclado, sinta-se à vontade para ler este guia.

Configurações de bloqueio de postagens. Definir o layout das postagens em Gutenberg

Vamos estabelecer todas as configurações necessárias para trabalhar com o design do layout das postagens e o conteúdo que você deseja extrair de suas postagens para mostrá-lo no blog. Felizmente, no editor Gutenberg, você pode fazer tudo o que precisa ao usar o bloco de postagens. Isso não levará mais do que alguns minutos.

Bloco de postagens: opções de layout

Localize a barra de configurações de Bloqueio à direita da tela da página. Se você não o vê, isso significa que você o fechou anteriormente. Para recuperá-lo, clique no ícone da roda dentada no canto superior direito. Em seguida, clique no bloco Postagens na tela para torná-lo ativo e acessar suas configurações.

O bloco de Postagens permite escolher entre 3 opções de layout diferentes:

Lista de postagens - é um layout limpo onde as postagens são organizadas uma a uma em uma coluna;
Grade de Postagens - um layout onde você pode exibir postagens em várias colunas e linhas, configurando a grade para mostrar publicações;
Lista de postagens irregulares - use este layout para organizar as postagens na ordem do xadrez. Aqui você terá uma coluna, e as postagens são exibidas uma a uma em uma forma de listagem com as linhas pares mostrando a imagem em destaque à esquerda e exibindo-a irregularmente à direita.

Abra as Configurações de postagem abaixo para escolher as publicações que deseja obter usando este bloco.

Aqui você pode definir:

Categoria - a categoria da qual você deseja exibir as publicações.
Número de itens - limite as publicações a um certo número e não exiba mais do que um certo número. O máximo é 100 publicações, mas você certamente pode usar as configurações Ler mais para fazer com que o bloco pareça mais curto.
Colunas - use esta alternância para definir o número de colunas para seu layout de grade. O número máximo de colunas é 6.
Selecione a tag de título - aqui você pode definir a tag html a ser usada para o título (H1 - H6). Certifique-se de que seu título esteja definido corretamente para ter uma faixa mais alta nos resultados da pesquisa.
Ordenar por - esta opção permite ordenar as publicações da mais antiga para a mais recente, da mais recente para a mais antiga e usar a ordem alfabética para definir uma ordem.

Também existem opções para:

exibindo imagens em destaque - você deve certificar-se de definir as imagens em destaque em suas publicações para vê-las;
exibindo a data da postagem - uma opção para mostrar a data em que a postagem foi publicada;
exibir a categoria da postagem - permitirá ao visitante ver a qual categoria a postagem está relacionada;
exibir trecho da postagem - habilite esta opção para mostrar um trecho da sua postagem (pode ser personalizado ou um trecho gerado a partir do seu conteúdo). Você também poderá definir o comprimento do conteúdo do trecho cortando o número de palavras;
exibir autor da postagem - ative esta opção para mostrar quem escreveu esta publicação.