Guia do desenvolvedor: Usando o WordPress Gutenberg para Frontpage e Landing Pages

Neste post, veremos como utilizar o editor Gutenberg para criar frontpages ou landing pages bonitas e modernas. Veremos especialmente como você, como desenvolvedor, pode ajustar o código do seu tema para oferecer suporte a isso. Este guia é perfeito para você que deseja ajustar um tema antigo para suportar o Gutenberg ou deseja aprender a desenvolver novos temas otimizados para o Gutenberg.

Quando o WordPress introduziu o novo editor Gutenberg no WordPress 5.0 (lançado por volta de dezembro de 2018), tornou desnecessário o uso de um plugin de construtor de páginas separado. O editor Gutenberg dá ao autor do WordPress muita flexibilidade e a possibilidade de criar conteúdo rico e designs que não eram fáceis antes – a menos que o tema ou um plugin fornecesse a funcionalidade para eles usando, por exemplo, códigos de acesso.

Você obtém muito estilo para blocos Gutenberg prontos para uso no WordPress, mas com um pouco de trabalho em seu tema e conhecimento sobre os blocos, você pode adicionar muito mais à experiência Gutenberg. Vamos dar uma olhada em como!

Habilitando blocos largos e de largura total

A maioria dos blocos permite que você escolha alinhamentos de blocos. Quando você está trabalhando em Gutenberg em um tema não desenvolvido para Gutenberg, você pode escolher entre “Alinhar à Esquerda, “Alinhar ao Centro" e “Alinhar à Direita”.

Mas você sabia que na verdade existem mais dois? Os outros dois, “Wide Width” e “Full Width” são perfeitos para fazer uma página inicial ou página de destino. Veremos mais de perto como otimizar o layout e o design do seu tema para oferecer suporte total a blocos largos e de largura total mais tarde. Primeiro você precisa dizer ao WordPress para adicionar suporte para esses dois alinhamentos de blocos em seu tema.

Em uma função ligada a after_setup_themevocê simplesmente chame add_theme_support('align-wide'). Você provavelmente já tem uma função de “configuração” em seu tema, ou se não – adicione isso no seu tema functions.php:

add_action('after_setup_theme', function() {
    add_theme_support('align-wide');
});

Com este código ativo em seu tema, agora você deve obter um total de cinco opções para alinhamentos de blocos. Para alguns blocos, por exemplo, Colunas, você obtém apenas os dois novos.

Existem certos tipos de blocos onde você pode definir alinhamentos de blocos – principalmente é o tipo que suporta blocos aninhados, ou seja. um bloco que permite adicionar blocos dentro. Esses blocos populares são Capa, Colunas, Imagem, blocos de incorporação e assim por diante. O bloco Cover é um ótimo bloco para construir frontpages ou landing pages, como veremos ao longo deste post.

Usando o bloco de tampa

O bloco de capa é definitivamente o melhor bloco quando você deseja criar uma página inicial ou uma página de destino dividida em seções. Você pode adicionar qualquer tipo de bloco e quantos blocos quiser dentro de um bloco Cover. Com um bloco de capa, você pode definir uma cor de fundo, uma imagem de fundo ou uma imagem de fundo com uma sobreposição de cores.

Combinado com a opção de definir o ajuste do bloco para largura ou largura total (como fizemos acima), o bloco Cover é uma ferramenta poderosa. Você pode criar uma página onde todo o conteúdo resida dentro de seções de blocos de capa de largura total, cada uma com sua própria cor de fundo ou imagem de fundo. Com o estilo e layout corretos em seu tema, você tem um construtor de frontpage moderno e completo.

No WordPress 5.3, uma melhoria importante veio para o bloco Cover: Um wrapper HTML interno. Isso significa que o bloco Cover tem um elemento HTML para a própria seção – com sua cor de fundo ou imagem de fundo e, em seguida, outro elemento HTML onde reside todo o conteúdo. Combine isso com um alinhamento de bloco de largura total: estilize o elemento externo (com a cor de fundo ou a imagem) para ter largura total e, em seguida, estilize o elemento HTML interno com o conteúdo para caber no contêiner do seu tema.

Por exemplo, suponha que seu tema tenha um contêiner de largura máxima de 1200px. Você provavelmente já tem uma classe HTML específica que é estilizada com max-width, garantindo que seu conteúdo não seja simplesmente expandido em largura total, independentemente do tamanho da tela. Adicione seu estilo de largura máxima ao HTML interno da capa; nome da classe wp-block-cover__inner-container. Como um exemplo:

.wp-block-cover-image.alignfull .wp-block-cover__inner-container, 
.wp-block-cover.alignfull .wp-block-cover__inner-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
}

No código CSS acima, direciono duas classes pai Cover. A classe de bloco de capa pai muda dependendo de você escolher ou não uma imagem de fundo. Os blocos de cobertura com uma imagem de fundo recebem a classe ” wp-block-cover-image” e os blocos de cobertura com uma cor de fundo recebem a classe ” wp-block-cover“. Além disso, também direciono o alinhamento do bloco “Full Width” com a classe ” alignfull“. O alinhamento do bloco “Wide Width” obtém a classe ” alignwide“. Adicione CSS para direcionar esse alinhamento de bloco também – dependendo do que você deseja fazer.

Se você começou a brincar com isso, pode ter encontrado problemas com o layout geral do tema. Seu tema provavelmente força seus blocos de cobertura de largura total a não atingirem a largura total. Vejamos isso a seguir.

Layout de tema e estilo de largura total

Até agora, adicionamos suporte para blocos largos e de largura total e aprendemos como usar e otimizar o bloco Capa para funcionar como seções de página inicial ou de página de destino. Mas, na maioria dos temas, seu HTML e layout podem impedir que o conteúdo de sua postagem tenha largura total.

Seu tema provavelmente tem uma barra lateral direita em uma única postagem ou visualização de página. Provavelmente há wrappers HTML adicionais, incluindo um elemento de contêiner max-width, que impede que seus blocos de largura total tenham largura total. Seus wrappers provavelmente também têm um pouco de margens ou preenchimento, o que novamente impede que os blocos de largura total toquem completamente as bordas da tela. Mas você precisa fazer com que uma única postagem ou página pareça boa para postagens em que o usuário não use blocos de capa também. Você precisa considerar seus wrappers ao desenvolver para Gutenberg com suporte para blocos largos e de largura total. Tudo depende do design, HTML e estilo do seu tema – mas vamos ver algumas ideias para resolver isso.

Uma boa solução seria adicionar opções de postagem; meta configurações personalizadas para postagens e páginas que afetam o layout dessa página. Você pode fazer uma configuração para ocultar a barra lateral ou para forçar o conteúdo do seu post a ficar completamente na largura total. Crie configurações de postagem manualmente adicionando metaboxes ou use Campos personalizados avançados para facilitar esse processo. E então, em seu tema, você busca as configurações de postagem e manipula a saída HTML de forma correspondente.

Outras boas opções de postagem são ocultar o título da página e/ou ocultar a imagem em destaque. Isso permite que você crie conteúdo normalmente, mas para páginas específicas você pode facilmente configurar uma página de destino completamente com blocos de capa de largura total. Ao ocultar o título da página padrão, você pode criar um cabeçalho com melhor aparência ou uma seção de chamada para ação para atuar como o título da página.

Criar estilos de bloco

Há um recurso pouco conhecido no WordPress Gutenberg; os blocos podem ter estilos diferentes. Você pode ver os estilos de bloco em ação com o bloco Quote. Adicione o bloco em seu editor e dê uma olhada no Inspetor (barra lateral direita). Você encontrará o tópico “Estilos” e duas opções entre estilos diferentes.

Crie estilos personalizados que facilitem a criação de frontpage e landing pages. Sugiro pelo menos adicionar estilos de bloco personalizados ao bloco Heading, para que você possa criar estilos personalizados sem interromper os títulos de postagens normais. Crie um estilo de bloco para títulos de seção com fonte extra grande e preenchimento adicional.

Ao tentar criar páginas iniciais, anote o que você precisa personalizar repetidamente – isso pode ser uma boa opção para um estilo de bloco.

Adicionar estilos de bloco personalizados é realmente muito fácil e não requer conhecimento de Javascript. Eu tenho um tutorial separado sobre como fazer isso, se você quiser aprender mais sobre isso.

PS: Se você não vir estilos de bloco, seu tema pode não ter suporte para isso. O processo é o mesmo que fizemos para alinhamentos de blocos largos e de largura total; no gancho after_setup_theme, você adiciona add_theme_support('wp-block-styles'):

add_action('after_setup_theme', function() {
    add_theme_support('wp-block-styles');
});

Usando cores do tema como paleta de cores

Se você já brincou com o Gutenberg, provavelmente notou que o Gutenberg oferece um certo conjunto de cores para texto ou cor de fundo. Por exemplo, adicionar um bloco de capa solicitará que você escolha uma cor de uma paleta de cores.

Você tem a opção de usar um seletor de cores para escolher ou inserir a cor hexadecimal para a cor exata desejada. Você pode acessá-lo clicando no link “Cor Personalizada”. Mas se você estiver usando o mesmo conjunto de cores em seu tema e quiser mantê-lo consistente, pode ser complicado lembrar constantemente e inserir os mesmos códigos de cores hexadecimais todas as vezes.

Felizmente, o WordPress Gutenberg permite que você defina a paleta de cores! Este é mais um add_theme_support()onde você fornece uma variedade de cores que deseja na paleta. Em uma função ligada a after_setup_theme, faça isso:

No código acima adicionamos suporte ao tema para ‘ editor-color-palette‘, e como segundo parâmetro para a função definimos um array de todas as cores que queremos. Cada cor requer os atributos name, sluge color. nameé o que aparece quando você passa o mouse sobre a cor na paleta. slugé o nome da classe que será adicionada ao elemento do bloco. E colordefine o código hexadecimal para sua cor.

Tenha em mente que você precisa adicionar estilos em seu CSS visando cada uma dessas classes (definidas por slug). O WordPress não aplica automaticamente a cor hexadecimal em seus blocos, embora digamos ao WordPress qual é o código de cores.

Como exemplo, a imagem à direita é a minha paleta de cores que defini para o tema deste site – para A White Pixel:

Essas são as cores do meu tema e em 95% dos casos vou usar uma dessas cores – seja como fundo ou como cor de texto. Em casos raros, posso puxar o colorpicker, mas ter os suspeitos usuais já definidos na paleta de cores torna a vida muito mais fácil.

Uma dica é sempre se certificar de adicionar preto puro (#000000) e branco puro (#FFFFFF) na sua paleta de cores. Provavelmente também é uma boa ideia ter uma ou duas cores cinza claro.

Usando uma página inicial estática e otimizando o modelo da página inicial

Você provavelmente já sabe sobre isso, mas vou mencioná-lo do mesmo jeito. No WordPress você pode definir uma página estática como página inicial acessando Configurações > Leitura.

Como a página inicial padrão do WordPress mostra uma lista dos posts mais recentes. Mas se você selecionar “Uma página estática” e escolher uma página no menu suspenso, o WordPress exibirá esta página como a página inicial do seu site.

Este é um acéfalo na configuração de uma página inicial para o seu site WordPress. Na página selecionada você pode construir a página inicial usando todos os truques mencionados acima. Por exemplo, você pode ter opções de postagem desmarcadas para mostrar o título da página, a barra lateral e a imagem em destaque. E a página é totalmente construída com blocos de capa e conteúdo de largura total. No entanto, você pode optar por não seguir a rota das opções de postagem (ocultar a barra lateral, etc.) e simplesmente criar um modelo de página inicial para substituí-las ou forçá-las.

Quando seu WordPress é definido como uma página estática como frontpage, o WordPress procurará o modelo front-page.phpem seu tema. Isso será usado em vez de page.php. Isso permite que você crie e ajuste um modelo separado que é usado apenas para sua página inicial.

Nesse front-page.phpmodelo, você já pode definir HTML para garantir que todos os blocos tenham largura total, não tenha barra lateral, título de página ou imagem em destaque. Você pode querer simplesmente fazer the_content()a saída do conteúdo da página na íntegra.

Por exemplo, isso é o que eu tenho no tema deste site front-page.php. Considerando que em todos os outros modelos, como page.php, eu tenho muitas saídas para barra lateral, título de postagem e assim por diante, esta é a extensão total do meu loop em front-page.php:

while (have_posts()): the_post();
    the_content('');
endwhile;

É isso. Meu HTML e classes de encapsulamento garantem que o conteúdo da postagem seja totalmente de largura total.

Lembre-se que esta é uma boa solução se você, como usuário do tema, entender como seus templates funcionam. Eu sei que todo o meu conteúdo na minha página inicial deve ser totalmente encapsulado dentro de blocos de capa. Eu confio no HTML do contêiner interno do bloco Cover para garantir que meu conteúdo tenha uma boa aparência e caia em um contêiner de largura máxima. Se eu fosse adicionar um bloco de parágrafo simples sem um bloco de capa de embrulho, não ficaria bom porque não teria preenchimento nas laterais.

Tornando o cabeçalho do seu site transparente no primeiro bloco de capa

Uma característica muito comum em sites modernos é tornar o cabeçalho transparente na página inicial. À medida que o usuário começa a rolar a página, o cabeçalho muda para um estilo fixo e recebe um plano de fundo. Mas manter um cabeçalho transparente pode parecer muito bom quando podemos ver as cores ou a imagem por trás da primeira seção.

Eu faço isso na página inicial deste site. Dê uma olhada! No topo da página, meu cabeçalho não tem plano de fundo e mostra o plano de fundo da seção gradiente roxa (um bloco de capa) atrás. Uma vez que você começa a rolar, ele obtém um plano de fundo sólido fixo.

Tenha em mente que você precisa estar ciente das cores do seu cabeçalho e do primeiro plano de fundo da capa. Se o seu cabeçalho consiste em logotipo branco e itens de menu brancos (como o meu), você não pode usar esse truque com um bloco de capa que tenha um fundo claro. Isso tornaria seu cabeçalho ilegível!

Se você quiser fazer isso, lembre-se de que requer um pouco de conhecimento de Javascript. Mas na verdade é muito simples. Vou passar pelo básico para você:

Todo o meu elemento de cabeçalho é sempre position: fixed. Como normalmente não quero que meu conteúdo desapareça atrás do cabeçalho, adicionei um padding-top no elemento body, empurrando o conteúdo para baixo do cabeçalho. No entanto, adicionei uma regra de que, se estivermos no modelo de primeira página, esse preenchimento não será adicionado. Isso garante que apenas na página inicial, a parte do corpo apareça atrás do cabeçalho. Em seguida, direciono o primeiro bloco de capa na página inicial e adiciono um preenchimento superior adicional, para garantir que o conteúdo desse primeiro bloco não fique atrás do cabeçalho – dando a ele um bom preenchimento após o cabeçalho.

E então eu adicionei um código Javascript muito simples usando jQuery:

O que esse código faz é adicionar uma classe ‘ navbar-fixed‘ quando a página é rolada além de 60px na página. E no meu CSS eu simplesmente direciono essa classe e adiciono uma cor de fundo fixa. Sem esta classe, o fundo do cabeçalho fica transparente na página inicial.

Isso é o básico. Brinque com o CSS – ajuste o “ponto de ponta” do Javascript e use por exemplo transitiona propriedade para fazer uma transição mais suave quando a cor de fundo for aplicada.

Ótimos blocos para frontpages e landing pages

O WordPress oferece uma gama completa de blocos prontos para você usar. Alguns deles são especialmente úteis na construção de uma página inicial ou página de destino. Se você já conhece todos os blocos disponíveis, provavelmente já os conhece.

• Colunas. Um bloco que permite blocos aninhados, o que significa que você pode adicionar qualquer bloco dentro de cada coluna. Você também pode adicionar colunas dentro de um bloco de capa. Perfeito para estruturar conteúdo em colunas. Você pode decidir o número de colunas e para cada coluna você pode decidir suas larguras. Eles podem ter larguras iguais ou larguras personalizadas.
• Grupo. Outro bloco que permite blocos aninhados. Ótimo para definir um fundo colorido em torno de vários outros blocos (como um título e alguns parágrafos).
• Botão. Não há frontpage sem botões. Os botões são ótimos como call to action e direcionam seus visitantes para onde você quer que eles vão. Você pode personalizar a aparência e o design do botão. Combine isso com estilos de blocos personalizados para botões!
• Espaçador. Se você sentir que está faltando espaço em suas seções, adicione um bloco Espaçador – que é simplesmente espaço sem nenhum conteúdo. Você pode definir a altura do espaçador.
• Separador. Semelhante ao bloco Spacer, mas adiciona uma linha agradável. Outra opção para separar claramente o conteúdo. Personalize o design da linha no CSS do seu tema ou adicione estilos de bloco personalizados.
• Galeria. Excelente para exibir imagens. Tem suporte para alinhamento de blocos de largura total, para que você possa criar uma galeria de imagens de largura total em sua página inicial.
• Mídia e Texto. Uma boa maneira fácil de alinhar uma imagem ou mídia ao lado do texto. Pode ser uma opção melhor do que colunas em alguns casos.
• Incorporações: Youtube ++. O WordPress oferece várias incorporações para mídia. Você pode, por exemplo, ter um vídeo do Youtube de largura total sendo reproduzido em sua página inicial.
• Widgets: campo de pesquisa, postagens mais recentes, calendário++. O WordPress oferece alguns bons elementos de conteúdo padrão. Se você quiser exibir uma lista de postagens recentes ou uma barra de pesquisa em sua página de destino, vá em frente.

Se, no entanto, você sentir que faltam blocos para fazer o que deseja, a solução é criar seus próprios blocos personalizados.

Criando blocos personalizados

Um recurso muito comum em uma página inicial ou landing page é um elemento de “atalho”; onde você escolhe uma postagem ou página, e gera um bloco com link para a postagem, contendo a imagem em destaque, o título da postagem, possivelmente o trecho. No momento em que escrevo isso, não existe essa opção no WordPress padrão. Você teria que fazer esse atalho manualmente, inserindo manualmente a mesma imagem em destaque da postagem, digitando manualmente o título e o trecho da postagem e agrupando tudo em um link.

Outros exemplos de blocos que são muito úteis para a construção de frontpage e landing page são sliders/carrosséis, tabelas de comparação de preços e depoimentos.

Para otimizar para esses tipos de blocos, você precisa encontrar um plugin que forneça isso (não explorei essa opção) ou faça você mesmo. Fazer seus próprios blocos personalizados requer um conhecimento significativo de Javascript e React e uma boa quantidade de codificação. Eu recomendo seguir esse caminho se você for sério sobre ser um desenvolvedor do WordPress.

Se você estiver interessado em aprender como criar blocos personalizados para o Gutenberg, tenho uma série de tutoriais que aborda isso em detalhes.

Você também pode optar por uma rota mais fácil e adquirir o Advanced Custom Fields Pro (ACF). Com este plugin, você pode criar blocos personalizados do Gutenberg sem nenhum conhecimento de Javascript. Você apenas controla a saída PHP dos blocos e deixa o ACF lidar com a parte Javascript. Mas lembre-se de que isso cria uma dependência do seu tema para um plugin licenciado.

Conclusão

Espero que este post tenha ajudado você a desenvolver ainda mais suas habilidades e conhecimentos com o WordPress Gutenberg! No momento em que escrevo isso, há realmente uma falta de informação e experiência em como otimizar seu tema para o Gutenberg. Eu tive muita dificuldade em encontrar algo sobre como construir bem uma primeira página. Então, isso é o que eu aprendi por muito experimentar e brincar.