Neste tutorial, veremos mais de perto como você pode modificar a forma como as publicações individuais são exibidas. Exploraremos dois designs e aprenderemos a reestruturar e aninhar vários tipos de blocos.
Resultados de aprendizagem
- Acessar o Editor do site e o modelo de publicação.
- Reconhecer o layout padrão do modelo de publicação do seu tema.
- Identificar uma variedade de blocos de tema usados para criar o layout de uma publicação individual.
- Modificar o modelo de publicação para atender às suas necessidades.
- Mover e aninhar vários tipos de blocos.
Perguntas de compreensão
- Como você gostaria que o conteúdo da sua publicação fosse exibido?
- Quais blocos de tema são usados com mais frequência?
Transcrição
Olá e seja bem-vindo ao Learn WordPress. Na sessão de hoje, veremos como personalizar o layout do conteúdo da sua publicação. Todo tema de blocos vem com o modelo de publicação individual, que fornece a estrutura ou o design de como uma publicação individual é exibida. E, é claro, você tem a possibilidade de modificá-lo para atender às suas necessidades.
Atualmente, tenho o tema Twenty Twenty-Two instalado, e esta é a estrutura padrão de uma publicação ao editar um modelo no Editor do site. Vamos clicar na Visualização em lista para podermos ter uma visão melhor da estrutura da página. Agora você perceberá que temos o bloco Título da publicação, o bloco Imagem destacada da publicação, o bloco Conteúdo da publicação e, bem no final, o bloco Data da publicação, o bloco Autor da publicação, o bloco Categorias da publicação e o bloco Tags da publicação. Observe que esse layout padrão será diferente dependendo do tema que você estiver usando. Vamos ver como isso aparece na parte pública do seu site. Você verá o título da publicação, a imagem destacada da publicação, o conteúdo da publicação, a data da publicação, o autor da publicação e, depois, uma tag ou categoria.
Deixe-me mostrar como você poderia alterar esse design padrão de duas maneiras diferentes. No meu primeiro exemplo, você perceberá que alterei o alinhamento do título do site e movi os blocos Data, Autor e Categorias da publicação para baixo do título do site e acima da imagem destacada da publicação. Também deixei os blocos Imagem destacada da publicação e Conteúdo da publicação no mesmo lugar.
No segundo exemplo, criei um cabeçalho personalizado para a publicação. Usei um bloco Capa e aninhei nele o menu de navegação, a imagem destacada, o bloco Título da publicação e também os blocos Data e Autor da publicação.
Vamos ver como você pode personalizar o modelo da sua publicação e recriar esses exemplos. Para obter o layout que vimos no primeiro exemplo, clique em Aparência e depois em Editor. Clique no ícone do WordPress ou no ícone do site, vá até Modelos e selecione o modelo de publicação individual. Clique na Visualização em lista para ter uma visão melhor da estrutura da página e, primeiro, vamos alterar o alinhamento do título da publicação para o centro. Depois, role para baixo e encontre os outros blocos de tema; selecione o bloco Linha pai. Agora vamos arrastar o bloco Linha para cima, para baixo do bloco Título da publicação, na nossa Visualização em lista, e depois alterar o alinhamento para o centro. Quando terminar, clique em Salvar. Agora podemos voltar à parte pública do nosso site para ver como isso ficará para alguém que visitar seu site. E pronto.
Para recriar o segundo exemplo, estamos novamente no Editor do site e vamos até Modelos e selecionaremos outra vez o modelo de publicação individual. A primeira coisa que faremos será remover o cabeçalho, o bloco Título da publicação, o bloco Imagem destacada da publicação e todos os outros blocos de tema. Agora vamos adicionar um bloco Capa no topo da nossa página. Na barra de ferramentas do bloco, há uma opção para adicionar mídia e, à esquerda, uma opção para usar a imagem destacada. Clique em Usar imagem destacada e depois selecione uma cor de sobreposição. Selecione o bloco Capa e altere a opacidade para 80. Depois disso, clique no Inseridor e adicione um bloco Linha. Dentro do bloco Linha, vamos adicionar o logotipo do site, depois o título do site e, em seguida, o bloco Navegação. Selecionarei um dos menus que já criei. Depois de fazer isso, selecione os blocos Logotipo do site e Título do site e agrupe-os em uma linha.
Em seguida, selecione novamente o bloco Linha pai e, ao lado de Justificação, escolha Espaçar entre os itens. Por fim, selecione o bloco Navegação e certifique-se de desativar a opção Permitir quebra em várias linhas. Depois, vamos selecionar o bloco e enviá-lo para o topo do bloco Capa. Agora vou adicionar meu bloco Título da publicação e alinhá-lo ao centro. Em seguida, adicionarei outro bloco Linha para agrupar a data e o autor da minha publicação. Primeiro, adicionarei o bloco Data da publicação e depois o bloco Autor da publicação. Selecionarei novamente o bloco pai e alterarei a justificação para o centro. Depois, adicionaremos um parágrafo entre eles, inseriremos um ponto final e o colocaremos em negrito. Vou me certificar de que selecionei novamente o bloco pai e usarei as configurações da barra lateral para alterar o espaçamento do bloco para 10 pixels, aproximando-o. Depois, fecharei as configurações da barra lateral e a Visualização em lista, e aumentarei o tamanho do meu bloco Capa. Por fim, você também pode decidir remover o bloco Separador logo abaixo do bloco Capa. Depois, você pode voltar à parte pública do site para ver suas alterações em ação.
Se você modificou um modelo, perceberá que há um pequeno ponto acima da imagem, ao lado do nome do seu tema. Se não estiver satisfeito com suas alterações, clique nos três pontos verticais e selecione Limpar personalizações. Agora o modelo voltou ao estado original. Isso nos leva ao fim deste tutorial.
Tudo de bom ao personalizar seu próprio modelo de publicação e visite o Learn WordPress para conferir mais tutoriais e materiais de treinamento.