Como evitar erros comuns de desenvolvimento de temas WordPress
Publicados: 2021-02-16O WordPress é conhecido por ser incrivelmente flexível, especialmente quando se trata de desenvolvimento de temas e plugins. Se você quiser ver a prova, pergunte a um grupo de desenvolvedores como eles implementariam um recurso específico. As chances são de que você receberá vários métodos diferentes para obter o mesmo resultado. Os fóruns de suporte estão repletos desses tipos de exemplos.
Mas com essa flexibilidade também é a realidade de que é fácil fazer as coisas da maneira “errada”. Agora, neste caso, “errado” significa que algo é ineficiente ou um pouco difícil de manter no caminho. Embora possa funcionar no sentido de ser funcional, geralmente há maneiras melhores de fazer as coisas.
Vamos dar uma olhada em cinco dos erros mais comuns encontrados no desenvolvimento de temas, juntamente com alternativas que vão lhe poupar dores de cabeça futuras.
1. Usando URLs absolutos em modelos
Se você já viu o código HTML que uma página ou postagem do WordPress produz, notará que tanto as imagens quanto os links internos usam URLs absolutos (completos). Mas essa não é a melhor maneira de fazer as coisas ao adicionar código aos seus modelos de tema.
Como exemplo, digamos que você esteja desenvolvendo um site que está usando um URL temporário. Uma URL absoluta codificada em um modelo significa que você terá que fazer alterações de código manualmente quando estiver pronto para iniciar o site em seu domínio permanente. Embora isso possa ser feito, é muito fácil esquecer todos os pontos em que esse tipo de código pode estar à espreita.
O WordPress possui maneiras integradas de determinar a URL correta – extraída diretamente da área Settings > General
do Painel.
Para um link, esc_url( home_url() )
fornecerá um caminho completo para a página inicial. Portanto, em vez de colocar explicitamente a URL em seu código, você pode adicionar um link simples de volta à sua página inicial da seguinte forma:
<a href="<?php echo esc_url( home_url() ); ?>" />Home</a>
Além disso, você também pode usar isso para apontar para páginas secundárias. Por exemplo, se quisermos criar um link para a página Sobre nós do nosso site, podemos usar o seguinte código:
<a href="<?php echo esc_url( home_url() ); ?>/about-us/" />About Us</a>
Um trecho semelhante também funciona para imagens. Este exemplo extrai uma imagem da subpasta /images/
do nosso tema ativo:
<img src="<?php echo esc_url( get_stylesheet_directory_uri() ) ; ?>/images/hello.png" />
2. Adicionando scripts e estilos diretamente a um modelo
Usar scripts e estilos de terceiros com o WordPress é um mundo próprio. Quando você começa a criar temas, pode ficar tentado a simplesmente colocar tags <script>
ou <style>
, ou até mesmo um código de incorporação do Google Font diretamente no cabeçalho do seu tema. Geralmente é assim que as coisas são feitas com sites HTML estáticos, então faz sentido fazer o mesmo aqui.
Mas, como quase tudo no WordPress, há uma maneira melhor de fazer isso. Em vez disso, aproveite wp_enqueue_script()
e wp_enqueue_style()
– que adicionam scripts e folhas de estilo aos locais corretos para você. Também torna o gerenciamento de ativos muito mais fácil, pois tudo é chamado do arquivo functions.php
do seu tema.
Em vez de reinventar a roda aqui, o WordPress Theme Handbook tem um guia fantástico sobre como adicionar scripts e estilos corretamente ao seu tema.
3. Chamando instâncias externas do jQuery
Em uma nota relacionada, um dos segredos ocultos do WordPress é que ele já inclui uma cópia do jQuery, juntamente com vários recursos populares de interface do usuário. Portanto, você não precisa instalar o jQuery ou chamá-lo remotamente. Isso facilita o aproveitamento da popular biblioteca JavaScript e a implementação de elementos como guias, seletores de data, diálogos e muito mais.
O único problema é que você precisa habilitar especificamente os itens que deseja usar através do arquivo functions.php
do seu tema. Embora isso crie um pouco de curva de aprendizado, também reduz o inchaço.
E, verdade seja dita, não é muito difícil implementar um elemento jQuery UI desejado. Por exemplo, para habilitar o uso do jQuery UI Tabs, basta adicionar o seguinte trecho ao seu functions.php
:
function my_jquery_elements() { wp_enqueue_script( 'jquery-ui-tabs', array('jquery')); add_action( 'template_redirect', my_jquery_elements ', 10 );
Isso diz ao WordPress para carregar o elemento de sua biblioteca já existente. A partir daí, projete suas guias e defina-as conforme especificado na documentação da interface do usuário do jQuery.
4. Levando a personalização longe demais
A capacidade de adicionar campos personalizados e tipos de postagem personalizados pode facilitar muito a vida dos desenvolvedores e editores de conteúdo do site. Eles oferecem conveniência, melhor organização de conteúdo e um UX mais intuitivo. Mas às vezes levamos isso longe demais.
Eu sou um grande fã de campos personalizados, por exemplo. Mas até eu admito que houve momentos em que personalizei um tema ao ponto de inflexibilidade. Os campos são ótimos para configurações em que sabemos exatamente qual conteúdo precisará ser inserido – como os campos de um perfil de membro da equipe.
No entanto, pode ficar confuso quando há inconsistências nos tipos de conteúdo que alguém deseja adicionar. Os clientes são notórios por terem exceções “menores” no conteúdo que podem dificultar o uso de personalizações. A lógica condicional pode explicar parte disso, mas você só pode ir tão longe antes que a interface do usuário fique fora de controle.
Não há regras rígidas e rápidas para esse tipo de personalização. A única coisa que podemos realmente fazer é usar nosso melhor julgamento sobre o que deve ser personalizado e o que pode ser deixado para o editor de conteúdo do WordPress ou até mesmo para um plugin de nicho. Quando adicionamos campos ou tipos de postagem, saiba que as coisas podem mudar no futuro e tente construir com isso em mente.
5. Falha ao comentar o código
Vou fazer outra admissão aqui: comentar código não é um dos meus pontos fortes. Não é que eu não use comentários, mas é mais porque eles não são muito articulados. Normalmente, aponto o início e o fim de itens específicos sem muitas informações intermediárias. Eu deveria estar fazendo mais? Provavelmente sim.
Comentar é importante porque pelo menos fornece alguns pontos de referência dentro do código. Ao vasculhar arquivos PHP ou JS que contenham mais de uma coisa, você desejará saber onde encontrar um determinado item.
Mesmo que você seja o único a editar esse código, comentários são altamente recomendados. Se, por exemplo, você precisar alterar algo daqui a seis meses, é improvável que você se lembre do local exato em que colocou um trecho de código.
Então, não vou ser um grande hipócrita e implorar que você comente tudo com grande profundidade. Mas vou dizer que mesmo um esforço mínimo aqui torna a manutenção futura mais fácil para você ou outro desenvolvedor que precisa vasculhar seu trabalho.
Melhores técnicas ao longo do tempo
Construir seu próprio tema WordPress pode ser uma ótima experiência. Mas é preciso um pouco de prática para entender os detalhes mais sutis da criação de um tema bem codificado e fácil de manter. Quanto mais experiência você ganhar, mais suas técnicas evoluirão.
Posso dizer honestamente que os primeiros temas que montei não foram tão eficientes quanto agora. E também estou certo de que eles ainda podem não ser bons quando vistos por um desenvolvedor verdadeiramente especialista. Nesse sentido, nossa evolução é constante.
Finalmente, gostaria de observar que cometi pessoalmente cada um dos erros mencionados acima. Foi apenas por tentativa e erro, juntamente com várias visitas ao Codex, que descobri como começar a fazer as coisas do “jeito WordPress”.
A lição é que todos nós vamos cometer erros. Mas cada um nos dá a chance de aprender e melhorar.