7 coisas que você não sabia que poderia fazer com campos personalizados avançados
Publicados: 2023-04-09Advanced Custom Fields (ACF) é quase sinônimo de desenvolvimento WordPress. Alimentando mais de 4,5 milhões de sites, este plug-in ajudou o WordPress a crescer a novos patamares. Você conhece o plug-in. Você provavelmente construiu com o plugin. Mas você está aproveitando ao máximo?
Nesta sessão, daremos uma olhada rápida em algumas das maneiras menos conhecidas de aproveitar o ACF para criar suas experiências WordPress mais dinâmicas, poderosas e envolventes.
Caixas de som:
- Iain Poulson, gerente sênior de produtos da WP Engine
- Rob Stinson, gerente de marketing de produto da WP Engine
Diapositivos da Sessão:
Transcrição:
Iain Poulson: Olá, bem-vindo à nossa sessão sobre o plug-in Advanced Custom Fields. Sou Iain Poulson, gerente de produto da ACF na WP Engine, e estou aqui acompanhado por Rob Stinson, que é nosso gerente de marketing de produto. Hoje, vamos levá-lo através de uma sessão bastante rápida de sete coisas que você não sabia que poderia fazer com o plug-in Advanced Custom Fields, algumas coisas relativamente novas e outras menos conhecidas. E a funcionalidade que vamos centralizar em um site fictício que Rob projetou, então somos fãs basicamente de exemplos reais em vez de coisas abstratas, mas também somos grandes fãs de filmes.
Portanto, este site é uma celebração do melhor período do cinema, provavelmente, indiscutivelmente, os filmes dos anos 90, e assim o site é baseado em reconhecer e premiar os filmes mais populares e amados dos anos 90. O site precisa mostrar filmes e permitir que os usuários votem em seus favoritos e, no verdadeiro estilo Rob, o site parece ótimo. Então, vamos começar e começar do começo e instalar o ACF. Diga-me como, Rob.
ROB Stinson: Legal, obrigado, Iain. Sim, obrigado, cara. Parece muito bom, não é? Foi um bom tempo projetando-o, me diverti um pouco. Então nós ganhamos o contrato. Nós temos o projeto e estamos dando o pontapé inicial, e a primeira coisa que fizemos foi se identificou, que isso faz sentido primeiro, para a ACF. Vamos precisar configurar um monte de campos personalizados para alguns tipos de postagem personalizados e fazer alguns modelos interessantes e coisas assim. ACF é a ferramenta para o trabalho aqui. Então, é claro, primeiro precisamos instalar o ACF, e isso é o número um aqui. Normalmente, sabemos que você pode simplesmente pegar o plug-in como um arquivo zip e carregá-lo no administrador do WordPress, de maneira simples.
Essa é a maneira padrão de instalar um plug-in, mas também sabemos que os desenvolvedores hoje em dia gostam de gerenciar suas dependências de maneira um pouco diferente. Eu normalmente gosto de gerenciá-lo dentro do código, e dentro do mundo PHP, isso normalmente é feito com o Composer. Agora você pode instalar plug-ins do WordPress a partir do repositório WordPress.org por algum tempo facilmente com o Composer, mas tem sido um pouco mais difícil de fazer com plug-ins premium como o ACF Pro.
Mas o lançamento mais recente há algumas semanas, na verdade, cerca de um mês atrás, habilitamos a capacidade de instalar o ACL Pro agora via Composer, o que é fantástico, então vamos fazer isso agora. Então, como fazer isso é, passo número um, você precisa adicionar o URL do ACF Pro Composer Repo ao seu arquivo composer.JSON. A segunda etapa é criar um arquivo auth.JSON para suas credenciais e colocá-lo na raiz do seu projeto, localmente e no caminho para onde estamos implantando e o as credenciais necessárias para esse arquivo agora estão disponíveis na área da sua conta em advancedcustomfields.com.
Então, se você fizer login, verá uma área de licenças, e há algumas guias extras e coisas assim, você pode realmente pegar todo o código, copiar e colar tudo, ou você pode pegar o nome de usuário individual e senha e leve-a para o arquivo que você criou, o arquivo auth.JSON.
E a terceira etapa, executamos o comando Composer, o que é bom e fácil, um processo de 3 etapas, mas fantástico porque significa que, como eu disse, os desenvolvedores que gostam de ter um controle um pouco mais ajustado sobre como eles gerenciam suas dependências de seu projeto, agora você pode fazer isso com o ACF Pro, o que é fantástico. Claro que há mais documentação sobre isso, então, apenas para ir mais fundo e apenas para ver como tudo se desenrola, pule para os documentos no site e você deve estar pronto para ir. Legal, vou vomitar para Iain pelo número dois.
Iain Poulson: Certo, agora vamos falar sobre como configurar os dados para o site. Então, os tipos de postagem personalizados são bastante fundamentais no WordPress na forma como você constrói um site que não é apenas sobre postagens ou páginas. É o recurso de tipo de postagem personalizado que veio em qualquer versão do WordPress que o transforma em um CMS adequado, e geralmente é a primeira etapa que os desenvolvedores executam quando estão construindo os sites. E isso sempre foi algo que aconteceu fora da ACF. Historicamente, você registra um tipo de postagem com código ou usa outro plug-in para fazer isso, mas é a parte da jornada que se conecta muito bem com o ACF. Portanto, como parte do ACF 6.1, essa funcionalidade está chegando ao plug-in, portanto, é o ponto de partida natural da jornada.
Você quer construir um site com dados de estrutura de dados, você vai construir um tipo de postagem. Você vai adicionar campos a ele e, em seguida, pode adicionar algumas taxonomias e, em seguida, começar a editar esses dados. Então, sim, isso é algo que colocamos no 6.1, e é muito empolgante ter todo esse fluxo de construção no CMS. Então vamos procurar o site do prêmio VHS. Vamos precisar estruturar nossos dados e fazer com que o WordPress faça o que precisamos, então em relação ao tipo de post, como não queremos usar posts e páginas, vamos criar um post personalizado digite para filme, para armazenar os dados do filme, o objeto de dados ou o modelo de dados, mas obviamente em termos do WordPress, esse é um tipo de postagem personalizado.
Queremos classificar os filmes com uma taxonomia para que possamos permitir que os usuários vejam facilmente filmes de um tipo de gênero, e então você obterá a visualização frontal fácil, os URLs simples que permitem acessar filmes de determinados gêneros. E vamos precisar de alguns campos extras para armazenar dados estruturados em torno de um filme, então queremos, por exemplo, que o diretor seja um campo de texto. Vamos precisar do ano em que o filme foi lançado como um número, e vamos precisar de alguma forma de relacionamento para relacionar os filmes entre si e, claro, precisamos armazenar o número de votos que ele receberá, e esse é o campo numérico.
Então, vamos dar uma olhada rápida no ACF 6.1 como faremos isso. Esta é a tela do ACF 6.1, e você notará um pouco diferente, temos o menu na barra lateral. É ACF agora, não apenas campos personalizados, e esta é a tela de tipo de postagem. Portanto, este sou apenas eu configurando o tipo de postagem do filme. É o fluxo de trabalho mais simples aqui, de apenas adicionar um rótulo singular para o tipo de postagem, que é filme, o rótulo plural, e é gerada automaticamente a chave do tipo de postagem. A configuração pública está definida como padrão porque quero que fique visível no front-end, o tipo de postagem e quero poder editá-la no admin.
Depois de salvar e adicionar, o bom da conexão aqui com o ACF é o fato de que a próxima etapa da jornada é criarmos o tipo de postagem, queremos adicionar campos ao tipo de postagem ou queremos vincular campos existentes ao tipo de postagem ou criar uma taxonomia? Então, podemos fazer tudo a partir desse ponto aqui, então, obviamente, precisamos ir e adicionar esses campos. OK, então clicando nesse aviso para adicionar novos campos ao tipo de postagem do filme, obtemos o Editor de grupo de campos, e ele é pré-preenchido na parte inferior da Metabox de configurações.
Portanto, as regras de localização já estão definidas para dizer, mostre esses campos, quando você estiver editando o tipo de postagem do filme, e então você pode ir em frente e adicionar seus campos, o que já fiz aqui na captura de tela. Então temos o diretor, o ano, os votos e os filmes relacionados. Então, é claro, podemos registrar a taxonomia personalizada da qual falamos, adicionando o gênero e conectando a taxonomia de gênero ao pós-tipo de filmes. Mas esses são os campos que adicionamos e que estão anexados ao objeto do filme, mas e os campos de que precisamos para armazenar dados que podem ser mais globais ou de todo o site? Rob, o que temos para isso?
Rob Stinson: Legal, obrigado por isso, Iain, parece bom. Nosso modelo de conteúdo está indo bem, mas ainda não terminamos. Agora, já cobrimos a instalação do ACF Pro via Composer e apenas examinamos os tipos de postagem personalizados e as taxonomias personalizadas no ACF. Agora, essas duas coisas que são muito, muito novas, mas a terceira coisa que quero cobrir agora, é antiga, mas uma boa. E está no plug-in há vários anos, mas nem todo mundo sabe sobre isso e nem todos entendem totalmente o valor disso, então vamos olhar agora para os campos globais com a página de opções.
Normalmente, você pensa em um campo personalizado e como ele armazena dados para uma postagem específica, uma página ou um tipo de postagem personalizado. Mas às vezes temos a necessidade de armazenar dados associados em todo o site, e um ótimo exemplo em nosso maravilhoso site de prêmios VHS é esse tipo de notificação principal ou barra promocional. E esta é uma barra que queremos persistir em cada página do site. Página inicial, você vai para a página de um filme, está lá. Você vai para a página Sobre, ou uma página de Contato, ou uma página de Blog, esta pequena barra fica em todo o site, não importa onde o usuário navegue, então não faz sentido associar esses dados relevantes a uma postagem ou um filme.
É algo que deve estar associado ao site. Portanto, queremos poder ativar e desativar esta barra porque queremos configurar as coisas, mas talvez desejemos ativá-la em determinadas épocas do ano. Podemos ter uma promoção ou uma campanha específica, então queremos a capacidade de ter um campo booleano, para que possamos ativar e desativar essa coisa. Além disso, queremos poder atualizar o texto da própria ação chamada, ou no botão, então é claro que os campos personalizados fazem muito sentido para isso.
Agora, para configurar uma página de opções, que é o recurso dentro do ACF que nos permite fazer isso, a etapa número um é, normalmente em suas funções, arquivo .PHP, ou você pode, é claro, registrá-lo em outro lugar, talvez um plug-in que você está desenvolvendo. Mas você vai registrar a própria página de opções, e há algumas pequenas configurações nas configurações que você pode fazer. Você pode ter uma única página de opções, mas também pode ter várias, e você as tem meio que aninhadas, então páginas filhas ou páginas pai e coisas assim, para que você possa fazer coisas interessantes.
Para o nosso, o nosso é bem simples. Estamos apenas configurando uma barra de notificação aqui, então só precisamos de uma única página, então a primeira etapa é registrar a página Opções. Etapa dois, como faríamos normalmente, criaríamos um grupo de campo. Nós o chamaríamos de campos de barra de promoção, ou algo assim, ou campos de barra de notificação, e você pode ver que tenho meu campo booleano no topo, então verdadeiro ou falso é a barra de promoção ativa. E então eu tenho um campo de texto para mensagem, um campo de texto para o texto do botão, um campo de URL para o link do botão e também podemos ter um tipo de aviso, mas talvez queiramos ter alertas ou estilo promocional avisos, e talvez façamos algum estilo condicional interessante com base no que for selecionado lá.
Portanto, adicionamos nosso grupo de campos e adicionamos nossos campos, e a etapa três está logo abaixo disso. Como você sabe, nas regras de localização, agora podemos selecionar a página Opções igual a– e você vê as configurações do site que tenho lá– que é a página Opções que registrei na etapa número um. E assim, com tudo isso feito, no administrador do WordPress agora vemos no lado esquerdo, em nossa barra de administração temos Configurações do site, e clicamos nele e vemos todos os campos, como seria de esperar.
E podemos ativar ou desativar a barra de notificação. Podemos atualizar o texto, atualizar o botão e, em seguida, esses dados serão disponibilizados para nosso modelo e, portanto, a experiência de modelo com campos de dados em uma página de opções é basicamente a mesma que você faria de outra forma. Há algumas pequenas nuances sobre como você direciona especificamente o fato de que esta é uma página de opções e não uma postagem, mas pule para a documentação em advancedcustomfields.com e orienta você sobre como lidar com isso. Número quatro, vou jogar de volta para você, Iain.
Iain Poulson: Obrigado, Rob, sim. Eu só quero falar agora sobre como registramos campos programaticamente com o ACF. Portanto, criar campos no ACF é superfácil com a interface de usuário do Field Editor, o tipo de coisa que conhecemos e amamos, vimos anteriormente, mas existem outras maneiras de definir campos. O ACF nos permite exportar arquivos JSON e PHP com definições de campo e que podem ser usados para criar campos.
Mas você sabia que, na verdade, existe na comunidade ACF um pacote chamado construtor ACF que permite criar campos usando uma espécie de API fluente com código PHP? Na verdade, é um pacote de terceiros e é chamado de ACF Builder Package da StoutLogic. Sim, o link do GitHub está lá. Basicamente, ele permite que você crie campos diretamente do código sem conhecer as complexidades de como o ACF precisa dos dados do campo em PHP. Ele usa uma maneira muito expressiva de fazer isso. Isso o torna reutilizável e portátil.
Você pode confirmar as definições de campo porque com arquivos PHP para seu controle de versão, é fácil colaborar. É fácil enviar para o seu mecanismo de implantação e você também remove a interface do usuário do editor de grupo de campos, então você está definindo esses campos no código que impedem os clientes de tocar na interface do usuário, então vamos dar uma olhada rápida em como nós faça isso. Para instalá-lo, porque é um pacote – falamos sobre o Composer anteriormente. Este é um pacote do Composer que você pode instalar com o seguinte comando, o Composer adquire o StartLogic, o fornecedor, o ACF Builder e é assim que o código se parece.
Você está meio que instanciando uma instância do Fields Builder e está dando a ele o slug do que seria o grupo de campos. E então você está dizendo, neste grupo de campos, vamos adicionar um campo de texto chamado Diretor. Vamos adicionar um campo numérico chamado Ano e, mais importante, vamos definir o local para o grupo de campos aparecer no tipo de postagem do filme.
E tudo isso faz muito por você sem você ter que pensar nisso, então você dá o nome de diretor para o rótulo do campo, e ele vai em frente e, obviamente, cria o slug ou a chave do campo sem você ter para adicionar isso, isso requer muita digitação, muito pensamento e muita criação propensa a erros. E a segunda parte é onde você carrega essa definição de campo no ACF, e ele criará o grupo de campos para você.
Rob Stinson: Tudo bem, então número 5 aqui, relacionamentos bidirecionais. Agora, isso é interessante. Acho que me lembro desse projeto específico em que trabalhei nos tempos da minha agência, onde realmente descobri isso, e foi uma virada de jogo. Portanto, se isso não é algo que você já fez com o ACF antes, preste atenção, porque isso é realmente útil, então vamos ver um exemplo. Olhando para, é claro, nosso site de prêmios VHS, temos uma lista de, digamos, 100 filmes, e há diferentes maneiras de, obviamente, conectar essas coisas.
Antes, tínhamos nossa taxonomia personalizada de gênero. Podemos ter alguns campos diferentes que lidam com coisas como tags ou agrupamento, portanto, relacionamentos bidirecionais são úteis quando você deseja criar um tipo específico de conexão bidirecional entre duas postagens ou, no nosso caso, dois filmes. Então, para o nosso exemplo, digamos que temos esses três filmes em nosso banco de dados, e todos eles são animados, então queremos criar um relacionamento bidirecional com eles.
Agora, o que isso significa é que temos nosso primeiro filme aqui, “Toy Story”, ótimo filme, e identificamos que há dois outros filmes relacionados que queremos associar a isso. Então, poderíamos criar um Campo de Relacionamento para nosso tipo de postagem personalizado, que é filmes, e teríamos um Campo de Relacionamento lá, e selecionaríamos o filme “O Rei Leão” e Princes Monon– Sinto muito. Eu continuo tropeçando nesta palavra. Estou massacrando, mas o filme se chama “Princesa Mononoke”. Há, há, há. Por favor, não me odeie. Estou apenas lutando para pronunciar essa palavra por algum motivo.
E identificamos que esses dois filmes estão relacionados, então os selecionamos no Campo Relacionamento. Agora, neste caso, faria sentido que, sim, “O Rei Leão”, por exemplo, esteja relacionado a “Toy Story” e, portanto, “Toy Story” esteja relacionado a “O Rei Leão”. Então, talvez normalmente iríamos para a tela de edição de “Rei Leão” e, em seguida, encontraríamos “Toy Story” e o adicionaríamos lá, mas estamos dobrando nosso trabalho lá. Então, o que um relacionamento bidirecional faz é criar automaticamente essa conexão para nós, o que é muito, muito útil.
Assim que adicionamos, por exemplo, “O Rei Leão” a “Toy Story”, “Toy Story” é adicionado automaticamente a “Rei Leão”, e isso é muito, muito útil. Isso economiza muito tempo para criadores de conteúdo e gerentes de conteúdo. Reduz o risco de esquecimento, ou talvez você remova um de um post e depois esqueça de removê-lo do outro. Simplifica muito, muito a experiência de edição de conteúdo, então é algo realmente útil que pode ser usado, especialmente em sites interessantes como este. Então, como fazemos isso? Bem, há duas maneiras de fazer isso atualmente, e falarei sobre uma terceira coisa, talvez, que acontecerá ainda este ano.
Então, como isso é feito, o número um é, você pode fazer isso no código. Portanto, apenas com o plug-in ACF Pro instalado, você pode escrever o código para fazer isso. E você pode escrever uma função que se conecta ao filtro de valor de atualização do ACF, e esse filtro é executado antes que um valor seja salvo e basicamente o que ele faz é pegar a postagem atual que você está editando e identificar o ID da postagem. que foi adicionado e, em seguida, atualiza a outra postagem e faz esse tipo de correspondência em segundo plano para você, o que é bastante útil.
Um pouco de código, desde que você se sinta confortável com isso, não é muito pesado. Mas, novamente, há um link lá, ou um URL, que você pode verificar nos documentos de campos personalizados avançados para ver como fazer isso. A opção dois, porém, é nenhum código, o que é bom algumas vezes. Portanto, este é realmente um plug-in do ecossistema chamado ACF Extended. Ele está disponível no WordPress.org e o que ele faz é apenas trazer esse recurso para a própria interface do usuário do ACF.
Portanto, se você instalou esta extensão, ACF Extended, e tem o ACF Pro instalado, verá uma opção que, ao criar um Campo de Relacionamento, há uma alternância bidirecional que você pode ativar e, em seguida, pode estabeleça isso em uma coleção diretamente da interface do usuário, o que é bastante útil. Agora as coisas estão indo muito interessantes com este projeto, mas não vamos perder a cabeça com isso, ou devemos? Iain, para você.
Iain Poulson: Sim, obrigado Rob. Vale a pena chamar de headless quando se trata de ACF. O ACF tem suporte headless, então sim, sites headless subjacentes, natureza dissociada dos sites. Há muita comunicação de API acontecendo e o ACF tem suporte de API. A API REST que adicionamos nativamente ao ACF a partir de 5.11 ou 5.11, e oferecemos suporte ao GraphQL com o plug-in WP GraphQL, que possui um complemento ACF para WP GraphQL, portanto, o ACF oferece suporte a sites sem cabeça. Ele tem integração com o programa WP Engine Atlas para sites WordPress headless adequados, mas vamos falar apenas sobre um tipo de exemplo do mundo real de como você pegaria os dados que estão em nosso site VHS WordPress e os usaria de maneira dissociada.
Então, por exemplo, ouça-me, as pessoas estão basicamente votando no site do prêmio VHS, e eles vão ser - acho que colocamos uma data arbitrária - eles têm que votar até o final da data certa, e nós 'll ver o que é o mais popular. Temos nosso cinema local e está fazendo uma lista dupla dos filmes mais votados dos anos 90. Então eles têm, no cinema, eles têm seu outdoor, e é online. Ele está conectado à web e podemos ativar dinamicamente o que está sendo exibido naquele outdoor, então precisamos nos conectar ao nosso site WordPress.
Por exemplo, o outdoor é um aplicativo de nó simples, precisamos buscar os dados do site VHS, então vamos dar uma olhada rápida em como podemos fazer isso com um endpoint de API REST personalizado e, como eu disse antes, temos tem suporte GraphQL. Isso pode ser feito das duas maneiras, mas este é provavelmente um exemplo mais simples para mostrar. Em primeiro lugar, criaremos uma função que basicamente obtém os dados de que precisamos, então, passando por isso, é uma consulta WP que diz: eu quero filmes ou postar tipos de um tipo de filme, mas eu só quer dois. Mas eu também quero ordenar pelo campo ACF, que é o nome do campo é votos, e estamos ordenando em ordem decrescente, então vamos pegar o topo, e vamos pegar o topo dois.
Em seguida, criaremos um endpoint REST personalizado, que está usando a função de retorno de chamada que criamos no slide anterior, e isso nos dará um endpoint que podemos acessar para obter os dois filmes. Então, o que realmente parece na realidade - e isso é apenas um teste - então o URL é vhsawards.com, o WP-JSON, e então demos a ele um namespace de VHS Versão 1 caso desejemos alterar a API e acabamos de obter uma estrutura de URL muito simples de popular.
E isso é apenas retornar um objeto JSON com dois itens, os dois mais votados, que por acaso são “Fight Club” e “Goodfellas”, que são muito bons, então sim. Isso é definitivamente bom para mostrar como o ACF alimenta sites desacoplados e sem cabeça, mas é muito difícil falar sobre o WordPress no momento sem mencionar os blocos. Não acredito que chegamos tão longe sem sequer mencionar os blocos. O que você tem para nós, Rob, para mudar isso?
Rob Stinson: Nós definitivamente precisamos falar sobre bloqueios. Antes disso, percebi que pouco antes, quando estávamos analisando o número cinco sobre relacionamentos bidirecionais, sugeri uma terceira maneira de fazer isso. Eu não falei sobre isso, então tudo que quero dizer é observar este espaço porque estamos planejando, temos no roteiro, olhar para adicionar um melhor suporte de relacionamento bidirecional nativamente no próprio plug-in, para que você possa facilitar essas coisas apenas dentro do plug-in ACF sem a necessidade de material de terceiros, então apenas assista a este espaço, sem compromissos de tempo. Isso é algo que estamos olhando.
Então número sete, sim. Vejamos como criar um bloco personalizado com ACF. Agora, a maioria das pessoas sabe que você pode fazer isso no ACF agora, mas nem sempre todos tentaram. Portanto, se você estiver nesse campo e for um usuário ACF de longa data e ainda não tiver usado a funcionalidade de bloqueio personalizado, observe isso, porque pode apenas solicitar que você veja o valor desse recurso. Mas como vamos usar isso para o VHS Awards? Talvez desejemos ter um componente de bloco para o nosso site que possamos adicionar em vários locais, e essa é a beleza de um bloco personalizado, ou de qualquer bloco, é que ele pode ser usado e colocado em páginas e postagens em todo o site, e queremos para criar um bloco de chamada para ação personalizado.
Agora, este é um bloco bem simples e você pode definitivamente fazer coisas mais interessantes com blocos personalizados. Vamos simplificar agora. Mas esse banner azul, chamada para Action Block, queremos poder colocar na página inicial, ou talvez em algumas postagens de blog e coisas assim, incentivando os leitores e os visitantes do site a clicar nesse botão e passar, e vote em seu filme favorito dos anos 90. Então, como construiríamos esse bloco personalizado com ACF? E a razão pela qual estamos fazendo isso como um bloco personalizado é que ele tem um design exclusivo.
Ele tem um gradiente de fundo interessante acontecendo para esse padrão de pontos repetidos, e percebemos que é mais fácil para nós construí-lo como o bloco personalizado com aquele controle ajustado que nos dá, em comparação com o que talvez pudéssemos fazer com blocos que estão fora do prateleira com núcleo WordPress. Então, como fazemos isso? A primeira etapa é registrar nosso bloco personalizado, geralmente em functions.PHP, ou onde quer que você esteja escrevendo esse tipo de código. Agradável e simples, e apontamos para o diretório onde os arquivos de modelo estarão finalmente para o nosso bloco personalizado, então essa é a etapa número um.
Etapa número dois, criamos nosso grupo de campos e adicionamos nossos campos. Portanto, para nosso bloco Called Action, também queremos ter texto, texto do botão, link do botão e cor de fundo. Talvez queiramos dar a opção de alguma variação de estilo para isso. O número três é que vamos, nas regras de localização, selecionar o bloco e dizer que é igual a, e registramos o bloco CTA anteriormente, e é por isso que está disponível para nós lá naquele menu suspenso. Agora vamos para o nosso arquivo de modelo, então todos os campos e tudo mais estão configurados, e agora vamos fazer alguns dos nossos modelos. Agora, o modelo é diferente em alguns aspectos de como você faria, talvez, tradicionalmente o modelo com ACF.
Mas, de muitas outras maneiras, é muito, muito semelhante, então muitos dos padrões que você normalmente emprega para o seu desenvolvimento, você usará ao construir seus blocos personalizados, o que é fantástico. Então, em nosso projeto, diremos que é nosso tema personalizado. Temos um diretório de blocos, então temos um diretório CTA, que corresponde ao bloco que registramos e, normalmente, você teria três arquivos de modelo, block.JSONsomething.PHP, que é nossa marcação HTML e, em seguida, dot CSS para nosso estilo.
Então este é o tipo de bloco JSON, e é aqui que registramos o bloco, mas é assim que podemos entender as coisas um pouco mais, e há muito que você pode fazer aqui em relação à configuração e vários recursos nativos do Core que você pode ativar ou desativar, disponibilizar para o seu bloco personalizado. Portanto, verifique definitivamente a documentação sobre isso e entenda o que pode ser feito, porque é aqui que você pode, como eu disse, configurar como esse bloco é disponibilizado e exibições e os recursos, os principais recursos pelos quais você pode passar ao seu bloco personalizado.
Em seguida, temos nosso arquivo de modelo, nosso arquivo PHP, e você pode ver aqui que estou apenas configurando variáveis interagindo com o campo Get, interagindo com nossos dados de campo, um pouco de lógica condicional muito simples em nosso estilo, e então nosso HTML para nosso próprio bloco. E então não vou percorrer o CSS. Você sabe o que é CSS e tenho certeza de que provavelmente poderia escrever um CSS melhor do que o que escrevi aqui, mas você entendeu. Você tem um arquivo CSS para o estilo do seu bloco e pode ver que temos algumas coisas interessantes sobre fontes e o plano de fundo gradiente radial para esse tipo de plano de fundo de ponto, o que é divertido.
Mas, novamente, a razão pela qual estamos criando este bloco personalizado é porque queremos que ele afine nosso CSS, nosso estilo, para que possamos realmente implementar o design no qual estamos trabalhando. E apenas para mostrar a você como isso se parece no Editor, você pode ver, podemos selecionar nosso bloco Called Action, você pode iluminar amplamente. Podemos interagir com nossos campos, adicionar o texto para o texto e o botão e adicionar um link para o botão também, e esse é um bloco personalizado muito bonito para o qual podemos passar para nossos editores de conteúdo.
Iain Poulson: Sim, obrigado, Rob. Que visão bonita. Nós realmente precisamos colocar isso ao vivo. Isso é incrível. Certo, vamos repassar o que falamos hoje. Então, passamos por como instalar o ACF Pro, mas com o Composer. Falamos sobre como registrar tipos de postagem personalizados e taxonomias no ACF. Examinamos o registro de campos globais ou de todo o site com uma página de opções e uma maneira diferente de registrar campos programaticamente com um pacote.
Rob mergulhou em relacionamentos e como criar relacionamentos bidirecionais. Abordamos o headless com ACF, e Rob acabou de fazer um ótimo exemplo de criação de um bloco personalizado com ACF com quase nada além de algum PHP, HTML e CSS, e nenhuma reação acontecendo, então isso é muito bom. Isso tem sido ótimo, Rob. Quais são os votos? Como saímos?
Rob Stinson: Olha, para mim, tudo se resume a isso - o maior filme dos anos 90 é inegavelmente "Hook" de Robin Williams. Muita nostalgia embrulhada para mim nisso, eu amo esse filme. E você, Ian?
Iain Poulson: Para mim, deve ser “Robin Hood, Príncipe dos Ladrões” de Kevin Costner. É um clássico. Esqueça o cabelo ruim, as tainhas, o sotaque inglês duvidoso que nem é sotaque inglês. É o maior filme de Robin Hood de todos os tempos, e é uma colina onde estou disposto a morrer.
Rob Stinson: Ha, ha, não, é justo. Olha, obrigado a todos, por sair. Espero que você tenha aprendido alguma coisa e estamos realmente ansiosos para ver o que você constrói com o ACF, saúde.