Este post é baseado na palestra que apresentei no Meetup de WordPress aqui em Curitiba. Aliás, se você ainda não participa da comunidade de WordPress da sua cidade, aproveite e clica aqui para ver se ela possui. Se não possuir, é um excelente momento para você juntar algumas pessoas que trabalham com WordPress na sua cidade e criar uma comunidade local (pode inclusive solicitar a criação de um canal específico para ela no Slack da comunidade WordPress Brasil) 😉 .
Por diversas vezes nos deparamos com projetos que necessitam de algum algum comportamento específico, seja acrescentando ou removendo uma funcionalidade.
Neste post, vou mostrar como criei meu primeiro plugin e como disponibilizei ele no repositório oficial de plugins para WordPress, e o melhor: com estas dicas você não precisa ser exatamente um desenvolvedor para pode criar um plugin!
Recentemente trabalhei em um projeto no qual eu precisava remover os produtos relacionados que o WooCommerce exibe por padrão na página do produto:
Como esconder a div com CSS, não era uma opção muito boa (apesar de não aparecer, os elementos na tela, eles ainda seriam carregados pelo navegador), decidi pesquisar se existia algum filtro (caso não saiba o que é um filtro, o Felipe Elia fez uma série de vídeos no YouTube com uma excelente explicação e você pode assistir clicando aqui) que poderia ser utilizado para remover esta área. Foi aí que encontrei neste post o seguinte filtro:
add_filter('woocommerce_product_related_posts_query', '__return_empty_array', 100);
Adicionando este código no arquivo functions.php do tema que eu estava utilizando, a página do produto não exibia mais os produtos relacionados e o problema estava resolvido.
O filtro acima faz com que toda vez que a função (woocommerce_product_related_posts_query) for chamada, ela não retorne nenhum produto (__return_empty_array). Além disso, ela é definida com a prioridade 100, para ter prioridade maior do que a prioridade padrão da função no plugin do WooCommerce.
Mas editar o arquivo functions.php do tema não é uma boa pratica, pois quando o tema tivesse uma atualização o arquivo seria modificado e o filtro seria removido. Nestes casos, o melhor é criar um tema descendente e incluir o filtro no arquivo functions.php dele, assim, em uma atualização o filtro não seria removido. Porém, no meu caso, a única funcionalidade do tema descendente seria apenas para manter este filtro, então porque não transformar o filtro em um plugin?
Para transformá-lo em um plugin, basta colocar o código dentro de um arquivo .php e colocar este arquivo dentro da pasta wp-content/plugins, mas podemos deixar ele melhor escrito e organizado.
Primeiro vamos escolher um nome para o plugin. No meu caso, escolhi “Remove WooCommerce Product Related”, sendo assim, o arquivo php que contém o filtro ficou com o nome remove-woocommerce-product-related.php. Criei uma pasta com o mesmo nome (remove-woocommerce-product-related) e inseri o arquivo dentro dela.
Para deixar o plugin mais seguro, precisamos impedir que o arquivo seja acessado de forma direta, para isso, acrescentamos o seguinte código, no início do nosso arquivo:
if ( ! defined( 'ABSPATH' ) ) {
exit; // Interrompe a chamada se acessado diretamente
}
Como o filtro é para remover uma funcionalidade do WooCommerce, ele deve funcionar apenas se o WooCommerce estiver ativo. Para isso, podemos fazer a seguinte verificação:
/** Verificando se o WooCommerce está ativado **/
if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
/** Aqui vai o código do filtro **/
}
O código PHP plugin ficou assim:
if ( ! defined( 'ABSPATH' ) ) {
exit; // Interrompe a chamada se acessado diretamente
}
/** Verificando se o WooCommerce está ativado **/
if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
add_filter('woocommerce_product_related_posts_query', '__return_empty_array', 100);
}
Agora o plugin está praticamente pronto, mas ainda podemos inserir os requisitos de cabeçalho (no topo do arquivo, logo abaixo da tag de abertura do php), que são responsáveis pela exibição do nome, url do site do plugin, descrição, autor, url do site do autor do plugin, versão do plugin, tipo de licença, url da licença, domínio do texto, etc. Temos mais detalhes aqui.
O requisito mínimo é o nome do plugin, mas é interessante incluir o maior número de dados possíveis, como no exemplo a seguir, que utilizei na criação do meu plugin:
/**
* Plugin Name: Remove WooCommerce Product Related
* Plugin URI: https://github.com/marcos-alexandre82/remove-woocommerce-product-related
* Description: Removes, globally, related products in WooCommerce.
* Author: Marcos Alexandre
* Author URI: https://marcosalexandre.dev/
* Version: 1.0.0
* License: GNU General Public License v3.0
* License URI: http://www.gnu.org/licenses/gpl-3.0.html
* Text Domain: remove-woocommerce-product-related
* Domain Path: /languages
* WC tested up to: 5.2.2
*/
Agora que meu filtro se tornou um plugin, porque não disponibilizá-lo no repositório oficial e ajudar outros usuários que também podem precisar desta funcionalidade? Foi aí que pesquisei sobre como fazer e vi que não era um bicho de sete cabeças, como muitos acham que é.
Como a intenção é enviá-lo para o repositório oficial de plugin do WordPress, utilizar termos em inglês é a melhor prática, pois assim ele fica acessível à mais usuários. A seguir temos o código PHP completo do plugin:
Observem que em Text Domain (domínio de texto), utilizei o nome do arquivo do plugin. É através dele que podemos identificar os textos (strings) do nosso plugin, na hora de traduzí-lo.
Por último, precisamos criar um arquivo readme.txt. Este arquivo é o responsável por exibir informações como descrição, dúvidas frequentes, etc. na página do plugin no repositório. Para isso existem duas ferramentas que auxiliam:
Plugin Readme Generator e Readme Validator.
Para enviar o plugin para o repositório oficial do WordPress é necessário ter uma conta no WordPress.org.
Ao fazer o login, basta acessar este link e utilizar o campo de envio no final da página, enviando um arquivo .zip da pasta contendo os arquivos do plugin.
Após o envio, será exibida uma mensagem contendo informações quanto ao prazo de análise do código pela equipe de plugins e a quantidade de plugins que estão na fila. Depois desta análise, se ele for aceito, você receberá um e-mail com o link do repositório SVN do plugin.
É através deste repositório que você irá enviar o código do seu plugin, o ícone e o banner que vão ser exibidos na página do repositório, além de fazer edições no código, para futuras atualizações, se necessário.
O acesso será algo como este exemplo:
Existem algumas formas de gerenciar os arquivos, porém irei abordar inicialmente apenas uma. Se estiver utilizando Windows, podemos utilizar uma ferramenta chamada Tortoise SVN.
Basta fazer o download da ferramenta, instalar, acessar a pasta do plugin no seu computador, clicar com o botão direito e escolher a opção “SVN Checkout”, inserir a URL do repositório SVN, escolher uma pasta no seu computador onde os arquivos serão salvos, clicar em Ok, inserir o nome de usuário e senha (o mesmo do WordPress.org):
Na sequência, copie e cole os arquivos PHP e readme do seu plugin para a pasta “trunk”:
Para inserir uma imagem para a capa do plugin, basta criar uma imagem no tamanho 772×250, no formato JPG ou PNG, com o nome banner-772x250.(jpg|png).
Podemos melhorar ainda mais a exibição da capa, enviando um arquivo com o dobro do tamanho, para exibição em telas com alta DPI (retina). Ainda, como o plugin poderá ser acessado por pessoas que utilizam idiomas com a leitura da direita para a esquerda (RTL), é possível enviar a capa (tanto no tamanho normal quanto para tela retina), com suporte à estes idiomas, ficando da seguinte forma:
Banner normal: banner-772x250.(jpg|png)
Banner normal (RTL): banner-772x250-rtl.(jpg|png)
Alta DPI (Retina): banner-1544x500.(jpg|png)
Alta DPI (Retina RTL): banner-1544x500-rtl.(jpg|png)
Seguindo o mesmo formato, para inserir um ícone para o plugin, basta criar uma imagem no formato JPG ou PNG, no tamanho 128×128, para telas normais, e 256×256 para telas retina. Ainda é possível enviar um ícone SVG:
Normal: icon-128x128.(png|jpg)
Alta DPI (Retina): icon-256x256.(png|jpg)
SVG: icon.svg
Depois de criadas as imagens, basta copiá-las para a pasta “assets”, que vai estar dentro da pasta do seu plugin:
Após inserir as imagens na pasta “assets”, clique novamente com o botão direito na pasta raiz do seu plugin e selecione a opção “SVN Commit”. Insira uma mensagem descrevendo a alteração e clique em OK:
Feito isso, seu plugin já estará publicado e com as imagens na página oficial:
Lista dos links que me auxiliaram na criação do plugin:
Introdução sobre como criar plugin para WooCommerce
Introdução sobre Markdown
Introdução sobre como enviar seu plugin
Planejar, enviar e manter o plugin
Validar Readme.txt
Enviar plugin
Como usar o Subversion
Como funciona o Readme.txt
Gerador de readme
Como enviar ícones e capas para o plugin
Playlist do YouTube sobre criação de plugin e utilização do Tortoise (em inglês)
Como usar o Subversion com o diretório de plugins do WordPress (em inglês)
TortoiseSVN Checkout (em inglês)
Repositório de Snippets
Snippets WordPress
Snippets WooCommerce
Gostou deste post? Tem alguma sugestão sobre ele? Comentem 🙂
