Tema para iniciantes Tonik WordPress

Quando se trata de trabalhar com plugins do WordPress, não é incomum ver pessoas usando ferramentas mais modernas, como Composer, gerenciamento de dependências de front-end por meio de ferramentas como Node e assim por diante.

Na verdade, eu diria que o mais popular é provavelmente o projeto Sage da equipe Roots. É ótimo, mas recentemente alguns amigos e eu nos deparamos com o Tonik WordPress Starter Theme, e tive o prazer de conversar com o líder do projeto, Patryk.

Portanto, para aqueles que estão interessados ​​em fluxos de trabalho, ferramentas e estratégias mais modernos e empregá-los no contexto do desenvolvimento de temas, acho que vale a pena conferir o Tonik.

Não demorei muito para obter uma instância do tema na minha máquina local. Mas o objetivo disso não é sobre minha experiência com isso – é por isso que acho que vale a pena conferir.

Tema para iniciantes Tonik WordPress

Antes de entrar na instalação real do tema, achei que valeria a pena destacar o que faz o Tonik valer a pena conferir.

Para aqueles que estão interessados ​​em usar as técnicas de programação de linha de comando e de programação orientada a objetos, o tema oferece o seguinte:

• interface de linha de comando, para iniciar facilmente novos temas,
• modelagem aprimorada com suporte para passagem de dados,
• webpack para gerenciar, compilar e otimizar ativos,
• orientado para a construção com ações e filtros

Primeiro, você pode ver o projeto no GitHub, mas antes de passar e baixar todos os vários componentes relacionados (como Gin ), é importante observar como o fluxo de trabalho funciona para esse tema específico.

Ou seja, não é como se você baixasse, instalasse e estivesse pronto para começar. Em vez disso, o fluxo de trabalho é um pouco diferente.

Começando

Por exemplo, para começar com o Tonik, aqui está o que você precisa fazer (observe que tudo isso pressupõe que você tenha o Composer e o Node instalados).

Navegue até o diretório wp-content/themes e digite o seguinte comando:

$ composer create-project tonik/theme acme-theme

Claro, você não precisa chamá-lo de "acme-theme".

A partir daí, você precisará clonar o repositório do projeto do GitHub (é por isso que você não o instala da maneira usual de instalar temas, mas mais sobre isso em um minuto):

Neste ponto, há mais algumas dependências que ele precisa resolver. Para fazer isso, navegue até o diretório do tema recém-criado e use o Composer para instalar essas dependências.

$ composer install

E, em seguida, instale as dependências de front-end:

$ npm install

Neste ponto, tudo o que resta é construir o tema fundamental e ativá-lo (através da linha de comando que é onde o WP-CLI entra em ação):

$ npm run dev

$ wp theme activate acme-theme

Neste ponto, você está pronto para começar a usar o tema no WordPress.

“Parece um pouco complicado…"

Dadas todas as etapas acima, a pergunta natural é provavelmente “Por que eu me incomodaria em fazer tudo isso quando posso apenas construir um tema usando a metodologia normal?”

E essa é uma boa pergunta. Mas se você é alguém que está procurando criar soluções para si mesmo ou para outras pessoas usando ferramentas mais modernas, acho que usar ferramentas como essa pode ajudar bastante a tornar isso possível.

Tudo que oferece

Caso em questão: Um ponto problemático ao desenvolver modelos para outros é a falta de um verdadeiro mecanismo de modelagem no WordPress (pelo menos no momento da redação deste artigo).

Mas se você der uma olhada apenas na documentação para modelagem, verá algumas coisas, como espaços reservados e outras maneiras de lidar com determinados elementos.

E há muito mais embutido nele. Eu adoraria dizer que experimentei todos os aspectos do que ele oferece, mas sinto que apenas arranhei a superfície. Por exemplo, não tive a chance de mexer em nenhum dos recursos HTTP.

Mesmo assim, aqui está um rápido resumo do que todo o tema oferece:

• uma estrutura de diretórios pré-configurada,
• modelagem,
• suporte de componentes,
• funções auxiliares,
• Suporte Ajax,
• ações e filtros do tema,
• um recipiente de serviço,
• suporte para códigos de acesso,
• carregamento automático,
• e muito mais.

Tudo isso pode ser revisto na documentação.