You are currently viewing Guia para iniciantes: Como usar os padrões de blocos do WordPress

Guia para iniciantes: Como usar os padrões de blocos do WordPress

Deseja aprender a usar os padrões de blocos do WordPress em seu website?

Os padrões de blocos permitem que o senhor adicione rapidamente elementos de design comumente usados aos layouts de seus posts ou páginas.

Neste artigo, mostraremos como usar os padrões de bloco do WordPress e encontraremos mais padrões para usar em seu website.

Usando padrões de blocos no WordPressUsando padrões de blocos no WordPress

Aqui estão os tópicos que abordaremos neste guia.

O que são padrões de bloco do WordPress?

Padrões de blocos do WordPress são uma coleção de elementos de design pré-fabricados que o senhor pode usar para criar layouts de conteúdo personalizados com mais rapidez.

O WordPress vem com um editor intuitivo comumente conhecido como o editor de blocos. Ele permite que os usuários criem belos layouts para seus posts e páginas usando blocos para elementos de conteúdo comuns.

Editor de blocos do WordPressEditor de blocos do WordPress

No entanto, nem todos os usuários do WordPress são designers ou querem gastar tempo criando layouts toda vez que precisam criar um post ou uma página.

Os padrões de blocos oferecem uma solução fácil para esse problema. O WordPress agora vem com vários padrões de blocos úteis por padrão.

Padrões de blocos no WordPressPadrões de blocos no WordPress

Temas populares do WordPress também fornecem seus próprios padrões que o senhor pode usar ao escrever o conteúdo.

Esses padrões incluem itens como layouts pré-criados de várias colunas, padrões de mídia e texto, padrões de call-to-action e cabeçalhos, botõese muito mais.

É possível encontrar ainda mais padrões no site WordPress.org, e o senhor também pode criar e compartilhar seus próprios padrões.

Dito isso, vamos dar uma olhada em como usar facilmente os padrões de blocos no WordPress para criar um belo conteúdo para o seu site.

Tutorial em vídeo

Assine o WPBeginner

Se o senhor preferir instruções por escrito, continue lendo.

Como usar padrões de bloco no WordPress

Por padrão, o WordPress vem com vários padrões de blocos úteis que o senhor pode usar em seu site. Seu tema do WordPress e alguns plug-ins também podem adicionar seus próprios padrões.

Para usar padrões de blocos, o senhor precisa editar o arquivo WordPress post ou página do WordPress onde o senhor deseja usar o padrão de bloco.

Na tela de edição da postagem, clique no botão Add Block para abrir o inseridor de blocos. A partir daí, mude para a guia Patterns (Padrões) para visualizar os padrões de bloco disponíveis.

Adicionar padrão de blocoAdicionar padrão de bloco

O senhor pode rolar a tela para baixo para ver os padrões de blocos disponíveis.

O senhor também pode visualizar padrões de blocos em diferentes categorias, como destaque, botões, colunas, cabeçalho e muito mais.

Classificar padrões de blocos por categoriaClassificar padrões de blocos por categoria

Como alternativa, o senhor também pode clicar no botão Explore para visualizar os padrões de blocos.

Aqui o senhor pode ver visualizações maiores em um pop-up.

Visualização de padrões de blocosVisualização de padrões de blocos

Quando encontrar um padrão que queira experimentar, basta clicar para inseri-lo na área de conteúdo do seu post ou página.

Editar padrão de blocoEditar padrão de bloco

Depois disso, o senhor pode simplesmente apontar e clicar em qualquer bloco dentro do padrão para editar e alterar seu conteúdo de acordo com suas próprias necessidades.

O senhor ainda terá todas as opções que normalmente tem para cada bloco. Por exemplo, se for um bloco de capa, o senhor poderá alterar a cor da capa ou o imagem de fundo.

O senhor pode adicionar quantos padrões forem necessários para o post ou a página do seu blog. O senhor também pode simplesmente excluir um padrão para removê-lo de um post ou página, da mesma forma que excluiria qualquer bloco do WordPress.

Remover o bloco da tampaRemover o bloco da tampa

Ao usar padrões de blocos, o senhor pode criar rapidamente belos layouts para seus artigos e Site do WordPress.

Em última análise, os padrões de blocos ajudam a economizar o tempo que seria gasto na organização manual dos blocos sempre que fosse necessário adicionar um cabeçalho, uma galeria, botões e muito mais.

Como encontrar mais padrões de blocos para usar em seu site

Por padrão, o WordPress vem com alguns padrões de blocos comumente usados. Os temas do WordPress também podem adicionar seus próprios padrões ao seu site.

No entanto, é possível encontrar muito mais padrões de blocos do que os disponíveis no inseridor de blocos do seu site.

Basta acessar a seção Diretório de Padrões do WordPress para ver muitos outros padrões de blocos.

Diretório de padrões de blocosDiretório de padrões de blocos

Aqui o senhor encontrará muitos outros padrões de blocos enviados pela comunidade do WordPress.

Para usar um desses padrões de bloco, basta passar o mouse sobre o padrão de bloco e clicar no botão Copiar.

Padrão de bloco de cópiaPadrão de bloco de cópia

Em seguida, o senhor precisa voltar ao seu blog do WordPress e edite o post ou a página em que o senhor deseja inserir esse padrão de bloco.

Na tela de edição do post, basta clicar com o botão direito do mouse e selecionar Colar no menu do navegador ou pressionar CTRL+V (Command + V no Mac).

Colar padrão de blocoColar padrão de bloco

Como criar e compartilhar seus próprios padrões de blocos

Deseja criar e compartilhar seus próprios padrões de blocos do WordPress e compartilhá-los com o mundo?

Com o WordPress, é muito fácil criar padrões de blocos e usá-los em seus próprios sites ou compartilhá-los com todos os usuários do WordPress em todo o mundo.

Basta visitar o site do Diretório de Padrões do WordPress e clicar no link ‘Create New Pattern’ (Criar novo padrão).

Criar padrão de blocoCriar padrão de bloco

Observação: O senhor precisará fazer login ou criar uma conta gratuita no WordPress.org para salvar seus padrões.

Uma vez conectado, o senhor chegará à página do editor de padrões de blocos. Ela é idêntica ao editor de blocos padrão do WordPress e o senhor pode usá-la para criar seu padrão.

Criador de padrões de blocosCriador de padrões de blocos

Basta adicionar blocos para criar o layout de seu padrão.

O senhor pode usar blocos de layout como group, cover, galeriae outros para organizar seu layout.

Edição de layout de padrão de blocoEdição de layout de padrão de bloco

Há também imagens livres de royalties disponíveis para uso em seus blocos de mídia. A biblioteca de mídia do WordPress permitirá que o senhor encontre e use facilmente essas imagens em seus padrões.

Quando estiver satisfeito com seu padrão de bloco, o senhor poderá salvá-lo como rascunho ou enviá-lo para o diretório de padrões.

Antes de enviar seu padrão de bloco para o diretório de padrões, certifique-se de que leu o texto diretrizes do diretório de padrões.

O senhor pode gerenciar todos os seus padrões de blocos clicando no link My Patterns (Meus padrões). Ele mostrará todos os padrões de blocos que o senhor compartilhou, os padrões de rascunho e os padrões que favoritou.

Seus padrõesSeus padrões

Se quiser criar padrões de blocos apenas para seu próprio uso, o senhor pode salvá-los como rascunhos. Depois disso, basta copiá-los e colá-los da página My Patterns em seu site WordPress.

Criação manual de padrões de blocos do WordPress

O senhor também pode criar padrões de blocos manualmente e adicioná-los ao seu tema do WordPress ou ao plugin de snippets personalizados.

Basta criar um novo post ou página no WordPress. Na área de conteúdo, use blocos para criar um layout personalizado ou uma coleção de blocos que o senhor deseja salvar como um padrão.

Mudar para o editor de códigoMudar para o editor de código

Depois disso, mude para o modo Code Editor e copie todo o conteúdo que o senhor vê no editor de código.

Copiar blocos de código brutoCopiar blocos de código bruto

Em seguida, abra um editor de texto simples, como o Bloco de Notas, e cole esse código. O senhor precisará dele na próxima etapa.

Agora o senhor está pronto para registrar seus blocos como um padrão.

Para fazer isso, basta copiar e colar o seguinte código na seção functions.php ou um arquivo plugin específico do site. Se o senhor nunca inseriu um código em seu arquivo functions.php, recomendamos usar a opção plug-in gratuito do WPCode para adicioná-lo.

Aqui está o guia completo para adicionar código personalizado no WordPress.

function wpb_my_block_patterns() {
    register_block_pattern(
        'my-plugin/my-awesome-pattern',
        array(
            'title'       => __( 'Two column magazine layout', 'my-theme'),
            'description' => _x( 'A simple magazine style two-column layout with large image and stylized text', 'my-theme' ),
            'categories'  => array( 'columns' ),
            'content'     => ' Your block content code goes here'
            )
    );
}
add_action( 'init', 'wpb_my_block_patterns' );

Agora, copie e cole os dados brutos dos blocos que o senhor copiou anteriormente como o valor do parâmetro content. Em outras palavras, o senhor precisará substituir o texto que diz “Your block content code goes here” pelo código do bloco. Não se esqueça de deixar as aspas simples ao redor do texto no lugar.

Por fim, não se esqueça de alterar o título e a descrição para os seus próprios e salvar as alterações.

Agora o senhor pode acessar seu site e editar o post ou a página. Agora, o padrão de bloco recém-registrado poderá ser visto no inseridor de blocos.

Adicionar padrão de bloco personalizado ao seu postAdicionar padrão de bloco personalizado ao seu post

Remover um padrão de bloco no WordPress

O senhor pode remover ou cancelar facilmente o registro de qualquer padrão de bloco no WordPress. Digamos que o senhor queira remover o padrão de bloco que criou no exemplo acima.

Tudo o que o senhor precisa fazer é copiar e colar o seguinte código na seção functions.php ou um arquivo plugin específico do site.

function wpb_unregister_my_patterns() {
  unregister_block_pattern( 'my-plugin/my-awesome-pattern' );
}
add_action( 'init', 'wpb_unregister_my_patterns' );

Neste exemplo, 'my-plugin/my-awesome-pattern' é o nome do padrão que usamos ao registrá-lo.

O senhor pode usar esse código para cancelar o registro de qualquer padrão de bloco criado pelo seu tema ou por um plug-in. Tudo o que o senhor precisa saber é o nome usado para registrar o padrão.

Remover padrões principais do WordPress

Os padrões principais do WordPress estão disponíveis para todos os usuários do WordPress. Isso significa que eles podem ser usados em excesso e podem nem mesmo corresponder ao restante do seu tema do WordPress.

Se não quiser usar um padrão, o senhor pode simplesmente evitar adicioná-lo ao seu conteúdo. No entanto, se o senhor executar um site WordPress com vários autoreso senhor pode querer impedir que todos os usuários usem esses padrões principais.

Para remover todos os padrões principais do WordPress, o senhor precisa adicionar o seguinte código ao arquivo de funções do seu tema ou a um plug-in específico do site.

remove_theme_support( 'core-block-patterns' );

Qual é a diferença entre blocos reutilizáveis e padrões de blocos?

Tanto os padrões de blocos quanto os blocos reutilizáveis pretendem resolver um problema semelhante: oferecer aos usuários opções para adicionar facilmente blocos usados com frequência.

Entretanto, eles são bem diferentes um do outro.

Por exemplo, os blocos reutilizáveis podem ser editados e salvos diretamente no editor de posts, mas não são tão flexíveis quanto os padrões de blocos.

Uma grande diferença é que, se o senhor fizer uma alteração em um bloco reutilizável, o bloco será alterado em todos os posts ou páginas em que foi usado.

Bloco reutilizável no WordPressBloco reutilizável no WordPress

Para obter mais detalhes, consulte nosso tutorial sobre como usar blocos reutilizáveis no WordPress.

Por outro lado, se o senhor inserir um padrão e editá-lo, essas alterações serão aplicadas somente ao post ou à página em que o senhor adicionou esse padrão.

Os padrões de bloco também podem ser registrados pelo seu tema do WordPress ou por plug-ins como plugins de blocos. Isso permite que esses desenvolvedores ofereçam aos senhores muito mais opções de design para criar layouts de posts e páginas.

Esperamos que este guia tenha ajudado o senhor a aprender como usar os padrões de blocos do WordPress em seu site. Talvez o senhor também queira ver nosso guia sobre Como adicionar código personalizado no WordPressou Guia para iniciantes sobre como colar snippets da Web no WordPress

Se o senhor gostou deste artigo, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo sobre o WordPress. O senhor também pode nos encontrar em Twitter e Facebook.