{"id":233834,"date":"2023-02-22T19:40:00","date_gmt":"2023-02-22T16:40:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233834"},"modified":"2022-11-11T12:42:23","modified_gmt":"2022-11-11T09:42:23","slug":"guia-do-desenvolvedor-usando-o-wordpress-gutenberg-para-frontpage-e-landing-pages","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/guia-do-desenvolvedor-usando-o-wordpress-gutenberg-para-frontpage-e-landing-pages\/","title":{"rendered":"Guia do desenvolvedor: Usando o WordPress Gutenberg para Frontpage e Landing Pages"},"content":{"rendered":"\n

Neste post, veremos como utilizar o editor Gutenberg para criar frontpages ou landing pages bonitas e modernas. Veremos especialmente como voc\u00ea, como desenvolvedor, pode ajustar o c\u00f3digo do seu tema para oferecer suporte a isso. Este guia \u00e9 perfeito para voc\u00ea que deseja ajustar um tema antigo para suportar o Gutenberg ou deseja aprender a desenvolver novos temas otimizados para o Gutenberg.<\/p>\n

Quando o WordPress introduziu o novo editor Gutenberg<\/a> no WordPress 5.0 (lan\u00e7ado por volta de dezembro de 2018), tornou desnecess\u00e1rio o uso de um plugin de construtor de p\u00e1ginas separado. O editor Gutenberg d\u00e1 ao autor do WordPress muita flexibilidade e a possibilidade de criar conte\u00fado rico e designs que n\u00e3o eram f\u00e1ceis antes \u2013 a menos que o tema ou um plugin fornecesse a funcionalidade para eles usando, por exemplo, c\u00f3digos de acesso.<\/p>\n

Voc\u00ea obt\u00e9m 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\u00ea pode adicionar muito mais \u00e0 experi\u00eancia Gutenberg. Vamos dar uma olhada em como!<\/p>\n

Habilitando blocos largos e de largura total<\/h2>\n

\"Guia<\/a><\/p>\n

A maioria dos blocos permite que voc\u00ea escolha alinhamentos de blocos. Quando voc\u00ea est\u00e1 trabalhando em Gutenberg em um tema n\u00e3o desenvolvido para Gutenberg, voc\u00ea pode escolher entre “Alinhar \u00e0 Esquerda, “Alinhar ao Centro" e “Alinhar \u00e0 Direita”.<\/p>\n

Mas voc\u00ea sabia que na verdade existem mais dois? Os outros dois, “Wide Width” e “Full Width” s\u00e3o perfeitos para fazer uma p\u00e1gina inicial ou p\u00e1gina 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\u00ea precisa dizer ao WordPress para adicionar suporte para esses dois alinhamentos de blocos em seu tema.<\/p>\n

Em uma fun\u00e7\u00e3o ligada a after_setup_theme<\/code>voc\u00ea simplesmente chame add_theme_support('align-wide')<\/code>. Voc\u00ea provavelmente j\u00e1 tem uma fun\u00e7\u00e3o de “configura\u00e7\u00e3o” em seu tema, ou se n\u00e3o \u2013 adicione isso no seu tema functions.php<\/code>:<\/p>\n

add_action('after_setup_theme', function() {\n    add_theme_support('align-wide');\n});<\/code><\/pre>\n
Com este c\u00f3digo ativo em seu tema, agora voc\u00ea deve obter um total de cinco op\u00e7\u00f5es para alinhamentos de blocos. Para alguns blocos, por exemplo, Colunas, voc\u00ea obt\u00e9m apenas os dois novos.<\/p>\n
\"Guia<\/a><\/p>\n
Existem certos tipos de blocos onde voc\u00ea pode definir alinhamentos de blocos – principalmente \u00e9 o tipo que suporta blocos aninhados, ou seja. um bloco que permite adicionar blocos dentro. Esses blocos populares s\u00e3o Capa, Colunas, Imagem, blocos de incorpora\u00e7\u00e3o e assim por diante. O bloco Cover \u00e9 um \u00f3timo bloco para construir frontpages ou landing pages, como veremos ao longo deste post.<\/p>\n
Usando o bloco de tampa<\/h2>\n
O bloco de capa \u00e9 definitivamente o melhor bloco quando voc\u00ea deseja criar uma p\u00e1gina inicial ou uma p\u00e1gina de destino dividida em se\u00e7\u00f5es. Voc\u00ea pode adicionar qualquer tipo de bloco e quantos blocos quiser dentro de um bloco Cover. Com um bloco de capa, voc\u00ea pode definir uma cor de fundo, uma imagem de fundo ou uma imagem de fundo com uma sobreposi\u00e7\u00e3o de cores.<\/p>\n
\"Guia<\/a><\/p>\n
Combinado com a op\u00e7\u00e3o de definir o ajuste do bloco para largura ou largura total (como fizemos acima), o bloco Cover \u00e9 uma ferramenta poderosa. Voc\u00ea pode criar uma p\u00e1gina onde todo o conte\u00fado resida dentro de se\u00e7\u00f5es de blocos de capa de largura total, cada uma com sua pr\u00f3pria cor de fundo ou imagem de fundo. Com o estilo e layout corretos em seu tema, voc\u00ea tem um construtor de frontpage moderno e completo.<\/p>\n
\"Guia<\/a><\/p>\n
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\u00f3pria se\u00e7\u00e3o \u2013 com sua cor de fundo ou imagem de fundo e, em seguida, outro elemento HTML onde reside todo o conte\u00fado. 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\u00fado para caber no cont\u00eainer do seu tema.<\/p>\n
Por exemplo, suponha que seu tema tenha um cont\u00eainer de largura m\u00e1xima de 1200px. Voc\u00ea provavelmente j\u00e1 tem uma classe HTML espec\u00edfica que \u00e9 estilizada com max-width, garantindo que seu conte\u00fado n\u00e3o seja simplesmente expandido em largura total, independentemente do tamanho da tela. Adicione seu estilo de largura m\u00e1xima ao HTML interno da capa; nome da classe wp-block-cover__inner-container<\/code>. Como um exemplo:<\/p>\n
.wp-block-cover-image.alignfull .wp-block-cover__inner-container, \n.wp-block-cover.alignfull .wp-block-cover__inner-container {\n    position: relative;\n    width: 100%;\n    max-width: 1200px;\n    padding: 0 20px;\n}<\/code><\/pre>\n
No c\u00f3digo CSS acima, direciono duas classes pai Cover. A classe de bloco de capa pai muda dependendo de voc\u00ea escolher ou n\u00e3o uma imagem de fundo. Os blocos de cobertura com uma imagem de fundo recebem a classe ” wp-block-cover-image<\/code>” e os blocos de cobertura com uma cor de fundo recebem a classe ” wp-block-cover<\/code>“. Al\u00e9m disso, tamb\u00e9m direciono o alinhamento do bloco “Full Width” com a classe ” alignfull<\/code>“. O alinhamento do bloco “Wide Width” obt\u00e9m a classe ” alignwide<\/code>“. Adicione CSS para direcionar esse alinhamento de bloco tamb\u00e9m \u2013 dependendo do que voc\u00ea deseja fazer.<\/p>\n
Se voc\u00ea come\u00e7ou a brincar com isso, pode ter encontrado problemas com o layout geral do tema. Seu tema provavelmente for\u00e7a seus blocos de cobertura de largura total a n\u00e3o atingirem a largura total. Vejamos isso a seguir.<\/p>\n
Layout de tema e estilo de largura total<\/h2>\n
At\u00e9 agora, adicionamos suporte para blocos largos e de largura total e aprendemos como usar e otimizar o bloco Capa para funcionar como se\u00e7\u00f5es de p\u00e1gina inicial ou de p\u00e1gina de destino. Mas, na maioria dos temas, seu HTML e layout podem impedir que o conte\u00fado de sua postagem tenha largura total.<\/p>\n
Seu tema provavelmente tem uma barra lateral direita em uma \u00fanica postagem ou visualiza\u00e7\u00e3o de p\u00e1gina. Provavelmente h\u00e1 wrappers HTML adicionais, incluindo um elemento de cont\u00eainer max-width, que impede que seus blocos de largura total tenham largura total. Seus wrappers provavelmente tamb\u00e9m t\u00eam um pouco de margens ou preenchimento, o que novamente impede que os blocos de largura total toquem completamente as bordas da tela. Mas voc\u00ea precisa fazer com que uma \u00fanica postagem ou p\u00e1gina pare\u00e7a boa para postagens em que o usu\u00e1rio n\u00e3o use blocos de capa tamb\u00e9m. Voc\u00ea 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 \u2013 mas vamos ver algumas ideias para resolver isso.<\/p>\n
\"Guia<\/a><\/p>\n
Uma boa solu\u00e7\u00e3o seria adicionar op\u00e7\u00f5es de postagem; meta configura\u00e7\u00f5es personalizadas para postagens e p\u00e1ginas que afetam o layout dessa p\u00e1gina. Voc\u00ea pode fazer uma configura\u00e7\u00e3o para ocultar a barra lateral ou para for\u00e7ar o conte\u00fado do seu post a ficar completamente na largura total. Crie configura\u00e7\u00f5es de postagem manualmente adicionando metaboxes ou use Campos personalizados avan\u00e7ados<\/a> para facilitar esse processo. E ent\u00e3o, em seu tema, voc\u00ea busca as configura\u00e7\u00f5es de postagem e manipula a sa\u00edda HTML de forma correspondente.<\/p>\n
Outras boas op\u00e7\u00f5es de postagem s\u00e3o ocultar o t\u00edtulo da p\u00e1gina e\/ou ocultar a imagem em destaque. Isso permite que voc\u00ea crie conte\u00fado normalmente, mas para p\u00e1ginas espec\u00edficas voc\u00ea pode facilmente configurar uma p\u00e1gina de destino completamente com blocos de capa de largura total. Ao ocultar o t\u00edtulo da p\u00e1gina padr\u00e3o, voc\u00ea pode criar um cabe\u00e7alho com melhor apar\u00eancia ou uma se\u00e7\u00e3o de chamada para a\u00e7\u00e3o para atuar como o t\u00edtulo da p\u00e1gina.<\/p>\n
Criar estilos de bloco<\/h2>\n
H\u00e1 um recurso pouco conhecido no WordPress Gutenberg; os blocos podem ter estilos diferentes. Voc\u00ea pode ver os estilos de bloco em a\u00e7\u00e3o com o bloco Quote. Adicione o bloco em seu editor e d\u00ea uma olhada no Inspetor (barra lateral direita). Voc\u00ea encontrar\u00e1 o t\u00f3pico “Estilos” e duas op\u00e7\u00f5es entre estilos diferentes.<\/p>\n
\"Guia<\/a><\/p>\n
Crie estilos personalizados que facilitem a cria\u00e7\u00e3o de frontpage e landing pages. Sugiro pelo menos adicionar estilos de bloco personalizados ao bloco Heading, para que voc\u00ea possa criar estilos personalizados sem interromper os t\u00edtulos de postagens normais. Crie um estilo de bloco para t\u00edtulos de se\u00e7\u00e3o com fonte extra grande e preenchimento adicional.<\/p>\n
Ao tentar criar p\u00e1ginas iniciais, anote o que voc\u00ea precisa personalizar repetidamente \u2013 isso pode ser uma boa op\u00e7\u00e3o para um estilo de bloco.<\/p>\n
Adicionar estilos de bloco personalizados \u00e9 realmente muito f\u00e1cil e n\u00e3o requer conhecimento de Javascript. Eu tenho um tutorial separado sobre como fazer isso, se voc\u00ea quiser aprender mais sobre isso.<\/p>\n
PS: Se voc\u00ea n\u00e3o vir estilos de bloco, seu tema pode n\u00e3o ter suporte para isso. O processo \u00e9 o mesmo que fizemos para alinhamentos de blocos largos e de largura total; no gancho after_setup_theme<\/code>, voc\u00ea adiciona add_theme_support('wp-block-styles')<\/code>:<\/p>\n
add_action('after_setup_theme', function() {\n    add_theme_support('wp-block-styles');\n});<\/code><\/pre>\n
Usando cores do tema como paleta de cores<\/h2>\n
Se voc\u00ea j\u00e1 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\u00e1 que voc\u00ea escolha uma cor de uma paleta de cores.<\/p>\n
Voc\u00ea tem a op\u00e7\u00e3o de usar um seletor de cores para escolher ou inserir a cor hexadecimal para a cor exata desejada. Voc\u00ea pode acess\u00e1-lo clicando no link “Cor Personalizada”. Mas se voc\u00ea estiver usando o mesmo conjunto de cores em seu tema e quiser mant\u00ea-lo consistente, pode ser complicado lembrar constantemente e inserir os mesmos c\u00f3digos de cores hexadecimais todas as vezes.<\/p>\n
Felizmente, o WordPress Gutenberg permite que voc\u00ea defina a paleta de cores! Este \u00e9 mais um add_theme_support()<\/code>onde voc\u00ea fornece uma variedade de cores que deseja na paleta. Em uma fun\u00e7\u00e3o ligada a after_setup_theme<\/code>, fa\u00e7a isso:<\/p>\n
add_theme_support('editor-color-palette', [\n    [\n        'name' => __('Main blue profile color', 'txtdomain'),\n        'slug' => 'blue-profile',\n        'color' => '#59BACC'\n    ],\n    [\n        'name' => __('Secondary green profile color', 'txtdomain'),\n        'slug' => 'secondary-profile',\n        'color' => '#58AD69'\n    ],\n]);<\/code><\/pre>\n
No c\u00f3digo acima adicionamos suporte ao tema para ‘ editor-color-palette<\/code>‘, e como segundo par\u00e2metro para a fun\u00e7\u00e3o definimos um array de todas as cores que queremos. Cada cor requer os atributos name<\/code>, slug<\/code>e color<\/code>. name<\/code>\u00e9 o que aparece quando voc\u00ea passa o mouse sobre a cor na paleta. slug<\/code>\u00e9 o nome da classe que ser\u00e1 adicionada ao elemento do bloco. E color<\/code>define o c\u00f3digo hexadecimal para sua cor.<\/p>\n
\"Guia<\/a><\/p>\n
Tenha em mente que voc\u00ea precisa adicionar estilos em seu CSS visando cada uma dessas classes (definidas por slug<\/code>). O WordPress n\u00e3o aplica automaticamente a cor hexadecimal em seus blocos, embora digamos ao WordPress qual \u00e9 o c\u00f3digo de cores.<\/p>\n
Como exemplo, a imagem \u00e0 direita \u00e9 a minha paleta de cores que defini para o tema deste site \u2013 para A White Pixel:<\/p>\n
Essas s\u00e3o as cores do meu tema e em 95% dos casos vou usar uma dessas cores \u2013 seja como fundo ou como cor de texto. Em casos raros, posso puxar o colorpicker, mas ter os suspeitos usuais j\u00e1 definidos na paleta de cores torna a vida muito mais f\u00e1cil.<\/p>\n
Uma dica \u00e9 sempre se certificar de adicionar preto puro (#000000<\/code>) e branco puro (#FFFFFF<\/code>) na sua paleta de cores. Provavelmente tamb\u00e9m \u00e9 uma boa ideia ter uma ou duas cores cinza claro.<\/p>\n
Usando uma p\u00e1gina inicial est\u00e1tica e otimizando o modelo da p\u00e1gina inicial<\/h2>\n
Voc\u00ea provavelmente j\u00e1 sabe sobre isso, mas vou mencion\u00e1-lo do mesmo jeito. No WordPress voc\u00ea pode definir uma p\u00e1gina est\u00e1tica como p\u00e1gina inicial acessando Configura\u00e7\u00f5es > Leitura.<\/p>\n
\"Guia<\/a><\/p>\n
Como a p\u00e1gina inicial padr\u00e3o do WordPress mostra uma lista dos posts mais recentes. Mas se voc\u00ea selecionar “Uma p\u00e1gina est\u00e1tica” e escolher uma p\u00e1gina no menu suspenso, o WordPress exibir\u00e1 esta p\u00e1gina como a p\u00e1gina inicial do seu site.<\/p>\n
Este \u00e9 um ac\u00e9falo na configura\u00e7\u00e3o de uma p\u00e1gina inicial para o seu site WordPress. Na p\u00e1gina selecionada voc\u00ea pode construir a p\u00e1gina inicial usando todos os truques mencionados acima. Por exemplo, voc\u00ea pode ter op\u00e7\u00f5es de postagem desmarcadas para mostrar o t\u00edtulo da p\u00e1gina, a barra lateral e a imagem em destaque. E a p\u00e1gina \u00e9 totalmente constru\u00edda com blocos de capa e conte\u00fado de largura total. No entanto, voc\u00ea pode optar por n\u00e3o seguir a rota das op\u00e7\u00f5es de postagem (ocultar a barra lateral, etc.) e simplesmente criar um modelo de p\u00e1gina inicial para substitu\u00ed-las ou for\u00e7\u00e1-las.<\/p>\n
Quando seu WordPress \u00e9 definido como uma p\u00e1gina est\u00e1tica como frontpage, o WordPress procurar\u00e1 o modelo front-page.php<\/code>em seu tema. Isso ser\u00e1 usado em vez de page.php<\/code>. Isso permite que voc\u00ea crie e ajuste um modelo separado que \u00e9 usado apenas para sua p\u00e1gina inicial.<\/p>\n
Nesse front-page.php<\/code>modelo, voc\u00ea j\u00e1 pode definir HTML para garantir que todos os blocos tenham largura total, n\u00e3o tenha barra lateral, t\u00edtulo de p\u00e1gina ou imagem em destaque. Voc\u00ea pode querer simplesmente fazer the_content()<\/code>a sa\u00edda do conte\u00fado da p\u00e1gina na \u00edntegra.<\/p>\n
Por exemplo, isso \u00e9 o que eu tenho no tema deste site front-page.php<\/code>. Considerando que em todos os outros modelos, como page.php<\/code>, eu tenho muitas sa\u00eddas para barra lateral, t\u00edtulo de postagem e assim por diante, esta \u00e9 a extens\u00e3o total do meu loop em front-page.php<\/code>:<\/p>\n
while (have_posts()): the_post();\n    the_content('');\nendwhile;<\/code><\/pre>\n
\u00c9 isso. Meu HTML e classes de encapsulamento garantem que o conte\u00fado da postagem seja totalmente de largura total.<\/p>\n
Lembre-se que esta \u00e9 uma boa solu\u00e7\u00e3o se voc\u00ea, como usu\u00e1rio do tema, entender como seus templates funcionam. Eu sei que todo o meu conte\u00fado na minha p\u00e1gina inicial deve ser totalmente encapsulado dentro de blocos de capa. Eu confio no HTML do cont\u00eainer interno do bloco Cover para garantir que meu conte\u00fado tenha uma boa apar\u00eancia e caia em um cont\u00eainer de largura m\u00e1xima. Se eu fosse adicionar um bloco de par\u00e1grafo simples sem um bloco de capa de embrulho, n\u00e3o ficaria bom porque n\u00e3o teria preenchimento nas laterais.<\/p>\n
Tornando o cabe\u00e7alho do seu site transparente no primeiro bloco de capa<\/h2>\n
Uma caracter\u00edstica muito comum em sites modernos \u00e9 tornar o cabe\u00e7alho transparente na p\u00e1gina inicial. \u00c0 medida que o usu\u00e1rio come\u00e7a a rolar a p\u00e1gina, o cabe\u00e7alho muda para um estilo fixo e recebe um plano de fundo. Mas manter um cabe\u00e7alho transparente pode parecer muito bom quando podemos ver as cores ou a imagem por tr\u00e1s da primeira se\u00e7\u00e3o.<\/p>\n
Eu fa\u00e7o isso na p\u00e1gina inicial<\/a> deste site. D\u00ea uma olhada! No topo da p\u00e1gina, meu cabe\u00e7alho n\u00e3o tem plano de fundo e mostra o plano de fundo da se\u00e7\u00e3o gradiente roxa (um bloco de capa) atr\u00e1s. Uma vez que voc\u00ea come\u00e7a a rolar, ele obt\u00e9m um plano de fundo s\u00f3lido fixo.<\/p>\n
Tenha em mente que voc\u00ea precisa estar ciente das cores do seu cabe\u00e7alho e do primeiro plano de fundo da capa. Se o seu cabe\u00e7alho consiste em logotipo branco e itens de menu brancos (como o meu), voc\u00ea n\u00e3o pode usar esse truque com um bloco de capa que tenha um fundo claro. Isso tornaria seu cabe\u00e7alho ileg\u00edvel!<\/p>\n
Se voc\u00ea quiser fazer isso, lembre-se de que requer um pouco de conhecimento de Javascript. Mas na verdade \u00e9 muito simples. Vou passar pelo b\u00e1sico para voc\u00ea:<\/p>\n
Todo o meu elemento de cabe\u00e7alho \u00e9 sempre position: fixed<\/code>. Como normalmente n\u00e3o quero que meu conte\u00fado desapare\u00e7a atr\u00e1s do cabe\u00e7alho, adicionei um padding-top no elemento body, empurrando o conte\u00fado para baixo do cabe\u00e7alho. No entanto, adicionei uma regra de que, se estivermos no modelo de primeira p\u00e1gina, esse preenchimento n\u00e3o ser\u00e1 adicionado. Isso garante que apenas na p\u00e1gina inicial, a parte do corpo apare\u00e7a atr\u00e1s do cabe\u00e7alho. Em seguida, direciono o primeiro bloco de capa na p\u00e1gina inicial e adiciono um preenchimento superior adicional, para garantir que o conte\u00fado desse primeiro bloco n\u00e3o fique atr\u00e1s do cabe\u00e7alho – dando a ele um bom preenchimento ap\u00f3s o cabe\u00e7alho.<\/p>\n
E ent\u00e3o eu adicionei um c\u00f3digo Javascript muito simples usando jQuery:<\/p>\n
$(window).scroll(function() {\n    if ($(window).scrollTop() >= 60) {\n        $('#header').addClass('navbar-fixed')\n    } else {\n        $('#header').removeClass('navbar-fixed');\n    }\n});<\/code><\/pre>\n
O que esse c\u00f3digo faz \u00e9 adicionar uma classe ‘ navbar-fixed<\/code>‘ quando a p\u00e1gina \u00e9 rolada al\u00e9m de 60px na p\u00e1gina. E no meu CSS eu simplesmente direciono essa classe e adiciono uma cor de fundo fixa. Sem esta classe, o fundo do cabe\u00e7alho fica transparente na p\u00e1gina inicial.<\/p>\n
Isso \u00e9 o b\u00e1sico. Brinque com o CSS \u2013 ajuste o “ponto de ponta” do Javascript e use por exemplo transition<\/code>a propriedade para fazer uma transi\u00e7\u00e3o mais suave quando a cor de fundo for aplicada.<\/p>\n
\u00d3timos blocos para frontpages e landing pages<\/h2>\n
O WordPress oferece uma gama completa de blocos prontos para voc\u00ea usar. Alguns deles s\u00e3o especialmente \u00fateis na constru\u00e7\u00e3o de uma p\u00e1gina inicial ou p\u00e1gina de destino. Se voc\u00ea j\u00e1 conhece todos os blocos dispon\u00edveis, provavelmente j\u00e1 os conhece.<\/p>\n