Como criar padrões de bloco para acelerar a criação de sites

Os padrões de bloco serão um grande negócio para todos os usuários do WordPress e, neste post, mostrarei exatamente como criar seus próprios padrões de bloco.


add_action ('init', function () {

register_pattern ('NAME', [
'title' => __ ('TÍTULO'),
'content' =>
'PADRONIZAR'
]);
});

Dois dias atrás, publiquei um vídeo e apresentei esse conceito que está chegando ao WordPress chamado padrões de blog. É meio experimental agora, e é algo que estou realmente animado com isso. E acho que, se você se concentrar no potencial do que são os padrões de bloqueio, poderá ver o potencial para ajudá-lo a fornecer sites mais rapidamente se tiver clientes, para permitir que eles façam mais com seus local na rede Internet.

Então eu vou te mostrar. Exatamente como criar um padrão de bloco neste vídeo. Agora vamos fazer algumas coisas um pouco do lado técnico, e eu sei que esse é o canal do WordPress para não-técnicos, então vou tentar simplificar o máximo possível, mas você vamos ver até o final como é simples criar um desses padrões de bloco.

Então, vamos em frente e dar uma olhada nisso. Então, aqui está a página em que ele fala sobre o novo lançamento desse recurso. Capaz de apenas as pessoas comuns criarem um padrão de bloco. Então, quando eu rolar para baixo, ele fornece o tipo de modelo para ele. Então, tudo o que está envolvido nisso é criar algo chamado função personalizada.

Mas não se preocupe, eu vou tornar super fácil para todo mundo fazer, mas é aqui que está esse pequeno trecho de código. Agora eu vou ter um link na descrição do vídeo abaixo. Levará você ao meu site. Você receberá instruções escritas sobre como fazer isso também. Este pequeno trecho de código que você pode copiar e colar em seu próprio site.

Ok, aqui está o que vamos precisar. Este é um novo recurso do Gutenberg e você precisará que o plug-in Gutenberg esteja instalado e ativado, portanto, você precisará de uma versão mínima do 7.8 e foi isso que saiu recentemente. Agora, o que vai acontecer talvez seja de quatro a seis meses, talvez até o final do verão de 2020 isso esteja incluído no WordPress por padrão, mas, por enquanto, você precisará, se quiser tentar isso , você precisará instalar o plug-in Gutenberg.

A próxima coisa que você pode fazer, e isso é opcional, se você não sabe como adicionar uma função personalizada a um tema filho, e eu nem uso mais um tema filho, convém usar este plug-in gratuito, e este é um dos melhores plugins gratuitos. Que eu já vi, e é chamado de snippets de código. E isso nos permitirá adicionar essa função personalizada e uma maneira muito fácil de usar, fácil de gerenciar.

OK? Então você vai precisar disso. E isso é opcional. Este é um plugin gratuito chamado blocos de cadência. E o que isso faz é adicionar muitas funcionalidades do construtor de páginas ao Gutenberg. É bem legal no que permite que você faça. Você pode arrastar e redimensionar colunas. Há muitos elementos nele que adicionam muitas funcionalidades desse construtor de páginas, mas ao Gutenberg, e é um plugin totalmente gratuito.

OK. Agora vamos pular para o meu site. Então aqui está um site. Está tudo pronto agora. E se você não sabe instalar um plug-in, alguém ficou realmente bravo comigo outro dia por não mostrar como instalar um plug-in e um vídeo. Você acessa plug-ins, clica em adicionar novo e, aqui, faz uma pesquisa pelo nome desse plug-in e, em seguida, clica em.

Baixe, ou desculpe, você clica em instalar agora e depois a ativa. É um processo muito simples. Então, eu vou clicar nos meus plugins instalados e você pode ver que eu tenho o Gutenberg instalado, blocos de cadência opcionais, e aqui estão trechos de código. Então, eu vou ativar os trechos de código e você pode ver que agora ele está ativado aqui.

Então vá em frente e clique nos trechos de código e você verá alguns deles. E aqui está esse botão de alternância e é alternado. Eles estão todos desativados e você realmente não precisa manter esses que vêm por padrão. Você pode simplesmente clicar aqui e excluir todos eles, mas eu já fui em frente e adicionei um aqui chamado modelo de padrão de bloco.

Então, o que você faria. É clicar em adicionar novo e você pode nomear esse modelo de padrão de bloco nesse pequeno trecho de código que eu mostrei aqui, mas fornecerei uma versão modificada disso no meu site. Você apenas copiará e colará isso aqui e, em seguida, clique em salvar alterações.

Você não clicará em salvar e ativar, clicará em para salvar as alterações, e mostrarei o porquê em apenas um momento. OK. Então agora o que você deseja fazer é criar esse padrão de bloco. E um padrão de bloco é simplesmente apenas uma seção salva. Portanto, se você usa um construtor de páginas, agora sabe que pode salvar seções e algumas delas vêm com seções predefinidas, mas a experiência do usuário, acho que é muito melhor em Gutenberg.

Então, o que você vai querer fazer é ir para as páginas. E clique em adicionar novo, e você vai querer nomear isso. Na verdade, deixe-me me livrar dessa turnê. Você vai querer nomear esse padrão de bloco, e é aqui que vamos criar esse padrão de bloco. Agora, não vou criar um padrão de bloco agora.

Vou lhe mostrar o que eu já criei, e é. Bem aqui. Então, aqui está um padrão de bloco que eu criei. Você pode ver que é esta seção. Tem esse fundo colorido. Eu tenho um cabeçalho, alguns subtítulos e alguns botões aqui, e coloco um vídeo. Então, eu vou fazer esse meu padrão de bloco para que eu possa com apenas dois cliques do mouse, adicionar em qualquer lugar do meu site.

Então, o que vou fazer é clicar no canto superior direito, há esses três pontos. Eles são meio difíceis de ver, e quando você clica nisso, existe esta opção aqui que diz editor de código. Então, você vai querer clicar no editor de código e mostrar todo o código envolvido para tornar esse blog um padrão de blog de padrão de bloco.

OK? Então, clique aqui e clique em controlar a ou comandar a no seu computador para destacar tudo. E eles são ano novo. Coloque-o na sua área de transferência. Então, eu vou controlar C. e agora está na minha área de transferência. Então agora o que vou fazer é sair daqui. Na verdade, se você quiser sair dessa visão, há um pequeno X aqui que diz sair do editor de código, e agora vai me mostrar da maneira que normalmente é aqui.

OK. Assim, você pode salvar isso como rascunho, se quiser, mas não precisará disso. Isso é apenas para você criar esse padrão de bloco, e você pode criar um padrão de bloco que seja qualquer coisa e não precisa ser um bloco de coisas. Pode ser um modelo inteiro para uma postagem no blog, por exemplo. Ok, agora vou clicar onde está o que me tira do editor de blocos.

Agora vou voltar para os snippets de código. Então, aqui é onde eu criei esse modelo de padrão de bloco. Clicarei no clone e agora ele criou um clone, e clicarei no título para começar a editá-lo. Então, para o título, vou mudar isso para um título que faça sentido para gerenciá-lo.

Então, para mim, só vou dar um nome. Um herói com vídeo. Então agora eu sei o que é isso quando estou olhando a lista no futuro. Ok, então há algumas coisas aqui que você precisará editar. Três coisas. É super simples. O primeiro é o nome. Portanto, esse pode ser qualquer nome, ele deve estar em letras minúsculas, sem espaços ou caracteres descolados.

Então, eu vou colocar um nome agora. Você pode ver que eu chamei de herói com vídeo. Em seguida, aqui você precisa colocar um título. Então, estamos substituindo esse título da palavra, e é isso que vai aparecer. Você está vendo uma lista de padrões de blog, de bloco, e não de bloco de blog. E se você notar, você pode, este é o nome amigável, para que ele possa ter espaços.

Eu não colocaria personagens engraçados lá. Spaces está bem. Então é isso que vai mostrar nesta lista um e o próximo aqui, onde diz o padrão a. Você vai colar o que acabou de copiar na área de transferência. Agora eu quero que você tome nota de uma coisa. Para cada um deles. Deixei o pequeno apóstrofo na frente e atrás.

Você vê que há o apóstrofo que deve estar lá. Se você acidentalmente remover isso, coloque-o de volta. OK. Estamos apenas mudando. Estamos apenas substituindo o espaço reservado para texto. Então, por aqui, não quero substituir tudo. Eu só quero substituir o padrão da palavra, então vou destacá-lo e depois colar o que copiei.

E aí está. Então agora eu vou rolar para baixo e desta vez vou clicar em salvar alterações e ativar. E agora, deve dizer snippet atualizado e ativado. E quando clico em todos os trechos, você pode ver agora que esse herói com vídeo está ativado. Então, no futuro, para padrões de bloco adicionais, quero ir para onde diz modelo de padrão de bloco e clicar em clonar e criar esse modelo de padrão de bloco dessa maneira.

Dessa forma, eu sempre tenho o modelo lá. Agora, se você já conhece e tem seu próprio modo de adicionar funções personalizadas, não precisa de trechos de código e, e todo esse tipo de coisa, você pode colocá-lo onde deseja colocá-lo. Essa é apenas uma maneira muito mais fácil de gerenciar, se você me perguntar. Ok, agora vou para as páginas do meu clique em adicionar novo e, se você quiser ver o.

Padrões de bloco. Bem, aqui está o ícone para isso. E quando você passa o mouse sobre ela, diz padrões de bloco. E quando clico nele, você vê alguns dos padrões de bloco que estão sendo experimentados no momento. Mas quando você rolar para baixo, verá o padrão de bloco que eu criei. E o mais interessante é que ele gera uma visualização em miniatura.

E faz isso dinamicamente. Você tem ferramentas de criação de página que nem fazem isso. E torna muito mais fácil gerenciar seus padrões de bloqueio. Então, e você pode ver aqui, aqui diz herói com modelo. Agora, se eu quiser usar isso em qualquer lugar do meu site, é apenas um clique do mouse. E aí está. E tudo o que eu teria que fazer naquele momento para começar a mudar alguns textos, alterar os links para os botões.

Eu posso clicar aqui e posso mudar o vídeo. Assim. É assim que você cria um padrão de bloco. Agora, isso é muito importante, acho que porque o que vai acontecer é um tema. Desenvolvedores e criadores de plugins, eles poderão criar esses padrões de bloco para você, por isso será muito mais rápido, rápido e fácil criar um site usando a ferramenta nativa de criação de blocos que o WordPress já inclui.

Não há nada para comprar, não há inchaço no código. Não há nenhuma dessas coisas, e. O que leva ainda mais longe. Você pode ver como é fácil criar seus próprios padrões de bloco, e é realmente fácil vê-lo em uma lista. Clique em um botão e ele é colocado lá. Portanto, agora você pode pensar em como pode ser mais fácil criar um site quando tiver sua própria biblioteca de padrões de blocos.

Portanto, se você criar sites para clientes e não quiser usar um construtor de páginas. Você só quer usar o construtor de blocos embutido. Você pode criar sua própria biblioteca de padrões. Você viu como é fácil. Eu posso fazer isso. Você poderia fazê-lo. Você pode criar sua própria biblioteca de padrões de bloco que você pode mover de site para site e mostrar ao seu cliente como eles podem criar isso.

Agora, isso não é apenas para páginas, é para postagens e não se limita apenas àquela seção que você viu. Basicamente, qualquer coisa que você possa criar em uma página. Você pode fazer um padrão de bloco. Portanto, se você estiver usando o construtor de blocos apenas para postagens do blog e houver certos elementos que deseja usar repetidamente em uma postagem do blog para aprimorar o layout das postagens do blog, bem, é possível criar um padrão de bloco para isto.

E é realmente fácil. Um clique e você poderá usá-lo. De fato, todos os modelos de postagem do blog. Portanto, se houver uma fórmula a ser seguida para as seções de uma postagem no blog, você poderá fazer com que a postagem inteira seja um modelo de bloco. Esse clique é aplicado e tudo o que você precisa fazer é apontar, clicar e editar.

Portanto, a última coisa antes de encerrarmos aqui, esse é um novo conceito e é algo para se pensar nos próximos meses. Experimente agora. Não é bem Yeti, Yeti. Não está pronto para o horário nobre, porque se você notou, a única coisa negativa que vi foi quando você está olhando o blog. Veja lá vou eu de novo.

Se você estiver olhando para os padrões de bloco, é apenas uma lista de artigos mais alta na qual você precisa rolar para que eles precisem melhorar o processo de categorização e organização. Talvez eles tenham algum tipo de interface para torná-lo mais visual e fácil de trabalhar. Se você tiver 50 blocos diferentes.

Padrões. Então eles só precisam melhorar isso. E algumas das sintaxes do código podem mudar um pouco. Quem sabe quando isso finalmente sai? Mas o objetivo deste vídeo é apenas mostrar o que será possível muito, muito em breve, para que você possa começar. Pensando em como isso pode se aplicar ao seu fluxo de trabalho e o que você está fazendo como criador de sites.

De qualquer forma, é tudo o que tenho para você neste post. Espero que você aprecie as visões avançadas do futuro do WordPress assim, e se você gostou deste vídeo ou achou algum valor, considere dar um joinha e compartilhar esse vídeo para que as pessoas possam ver o que está por vir.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Adblock
    detector