Ferramentas Essenciais para Desenvolvedores de Plugins WordPress

Ferramentas Essenciais para
Desenvolvedores de Plugins
WordPress
Tiago Hillebrandt
@tiagoscd

Tiago Hillebrandt
● Head of DevOps na Rainmaker Digital Services
● Trabalha diariamente em uma estrutura com milhares de instalações WordPress
● Colaborador de diversos projetos de software livre, tais como WordPress, WP-CLI, Ubuntu,
dentre outros
https://twitter.com/tiagoscd
Ferramentas Essenciais para Desenvolvedores de Plugins WordPress
Tiago Hillebrandt ( @tiagoscd )

● Se cada vez que você vê um repositório com essa estrutura de arquivos
você se pergunta WTF?, essa palestra é pra você.
● Cada uma das ferramentas mencionadas nesta apresentação já estão
consolidadas no mercado, e são amplamente utilizadas por diversas
empresas de desenvolvimento de plugins.

Ferramentas Essenciais
● Vagrant
● Composer
● PHP Code Sniffer
● Npm
● Grunt
● EditorConfig
● readme.txt
● Readme Validator
● WP Readme
Plugin de exemplo que usaremos na apresentação:
https://github.com/tiagohillebrandt/wordcamp-example-plugin/

Vagrant
● Permite criar ambientes de desenvolvimento em máquinas virtuais
● Possibilita a criação de ambientes locais mais próximos ao de produção
● Diversas imagens (boxes) estão disponíveis gratuitamente na Vagrant Cloud:
○ ubuntu/xenial64: Ubuntu 16.04 Xenial Xerus
○ debian/jessie64: Debian 8 Jessie
○ centos/7: CentOS 7
● Box para desenvolvedores WordPress: https://varyingvagrantvagrants.org/
○ https://varyingvagrantvagrants.org/docs/en-US/installed-packages/

Vagrant
Instalação
● Acessar a página do Vagrant e baixar a versão de acordo
com o seu sistema operacional:
○ https://www.vagrantup.com/downloads.html
● Requer um software de virtualização:
○ VirtualBox
○ VMware
○ Docker
○ Hyper-V
○ Outros

Vagrant
Como funciona?
Criando um novo ambiente Vagrant:
$ mkdir my-wp-plugin
$ cd my-wp-plugin
$ vagrant init ubuntu/xenial64
Ligando a máquina virtual:
$ vagrant up
Acessando a máquina virtual:
$ vagrant ssh
Desligando a máquina virtual:
$ vagrant halt
Ao desligar, todos os dados são preservados.
Destruindo a máquina virtual:
$ vagrant destroy
Ao destruir, todos os dados serão apagados.

Composer
● Ferramenta para gerenciamento de dependências em PHP
● Permite a declaração e gerenciamento de bibliotecas que seu o projeto depende para funcionar
○ https://packagist.org/
● Conceito similar ao de outros gerenciadores de dependências:
○ npm (Node.js)
○ bundler (Ruby)
○ pip (Python)
○ apt-get (Debian/Ubuntu)

Composer
Instalação
● Bash (Linux, Unix, Mac):
○ curl -sS https://getcomposer.org/installer | php
○ sudo mv composer.phar /usr/local/bin/composer
● Pacote PHAR:
○ https://getcomposer.org/composer.phar
● Windows:
○ https://getcomposer.org/Composer-Setup.exe

Composer
Como funciona?
● Caso queira instalar a biblioteca bootstrap no seu projeto:
$ composer require twbs/bootstrap
● Ao rodar esse comando em um novo projeto:
○ O arquivo composer.json será criado incluindo o nome da biblioteca que você está instalando.
○ O arquivo composer.lock será criado com detalhes da versão sendo instalada atualmente no projeto.
○ O diretório vendor/ será criado e o bootstrap será instalado dentro dele.
● Commitar os arquivos composer.json e composer.lock junto com seu projeto.
● O diretório vendor/ nunca deve ser commitado (adicionar ao .gitignore).
https://github.com/tiagohillebrandt/wordcamp-example-plugin/blob/master/composer.json

Composer
Como funciona?
● Se você baixar qualquer projeto cujo arquivo composer.json já exista, basta acessar o diretório
onde o arquivo se encontra e rodar:
$ composer install
● O Composer irá ler os arquivos .json e .lock e instalar as dependências listadas neles dentro do
diretório vendor/.

PHP Code Sniffer
● Permite a definição e validação de padrões de desenvolvimento (coding standards) para seu projeto
● Importante para manter a consistência do código
● Coding standards do WordPress:
○ https://make.wordpress.org/core/handbook/best-practices/coding-standards/php/
● Extensões:
○ Para verificar se seu código é compatível com os coding standards do WordPress:
■ https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards
○ Para verificar se seu código é compatível com uma determinada versão do PHP:
■ https://github.com/wimg/PHPCompatibility

PHP Code Sniffer
Instalação
● Instalando o PHPCS:
$ composer require squizlabs/php_codesniffer --dev
● Instalando a extensão WPCS:
$ composer require wp-coding-standards/wpcs --dev
● Instalando a extensão PHPCompatibility:
$ composer require wimg/php-compatibility --dev

PHP Code Sniffer
Instalação
● Habilitando as extensões no PHPCS:
$ ./vendor/bin/phpcs --config-set installed_paths
vendor/wp-coding-standards/wpcs/,vendor/wimg/php-compatibility/
● Outra opção carregar as extensões dentro do próprio composer.json:
"scripts": {
"post-update-cmd": [
"./vendor/bin/phpcs --config-set installed_paths
vendor/wp-coding-standards/wpcs/,vendor/wimg/php-compatibility/"
]
}

PHP Code Sniffer
Como funciona?
● Os padrões de desenvolvimento são definidos dentro do arquivo phpcs.xml.dist ou ruleset.xml
○ https://github.com/squizlabs/PHP_CodeSniffer/wiki/Annotated-ruleset.xml
● PHPCS oferece suporte nativo aos padrões PSR2, Zend, Squiz, PEAR e PSR1
● Se uma determinada regra (sniff code) do padrão não for necessária no seu projeto, você pode
desabilitá-la através da tag exclude
● Exemplo de configuração:
○ https://github.com/tiagohillebrandt/wordcamp-example-plugin/blob/master/phpcs.xml.dist

PHP Code Sniffer
Quem usa?
● WP-CLI
○ https://github.com/wp-cli/wp-cli/blob/master/phpcs.xml.dist
● WooCommerce
○ https://github.com/woocommerce/woocommerce/blob/master/phpcs.ruleset.xml
● Yoast SEO
○ https://github.com/Yoast/wordpress-seo/blob/trunk/phpcs.xml
● WP Healthcheck
○ https://github.com/wp-healthcheck/wp-healthcheck/blob/develop/phpcs.xml.dist
● Genesis Framework

npm
● Gerenciador de pacotes para Node.js
● Usado para gerenciar as dependências em JavaScript
● Ou seja, assim como o Composer, o npm permite a declaração e gerenciamento de bibliotecas que
o seu projeto necessita
○ https://www.npmjs.com/

npm
Instalação
● Ao instalar o Node.js em sua máquina, o npm já será instalado com ele
● Debian/Ubuntu:
$ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
$ sudo apt-get install -y nodejs
● Outras plataformas:
○ https://nodejs.org/en/download/

npm
Como funciona?
● O primeiro passo é acessar o seu projeto e rodar o seguinte comando:
$ npm init
● Ao rodar o comando acima, algumas informações serão solicitadas, e no fim o arquivo package.json
será criado no seu projeto.
● Agora estamos prontos pra usar o npm no nosso projeto.

npm
Como funciona?
● Caso queira instalar o Gulp no seu projeto:
$ npm install gulp --save-dev
● Ao rodar esse comando em um novo projeto:
○ O arquivo package.json será atualizado incluindo o nome da biblioteca que você está instalando.
○ O arquivo package-lock.json será criado com detalhes da versão sendo instalada atualmente no projeto.
○ O diretório node_modules/ será criado e o Gulp será instalado dentro dele.
● Commitar os arquivos package.json e package-lock.json junto com seu projeto.
● O diretório node_modules/ nunca deve ser commitado (adicionar ao .gitignore).
https://github.com/tiagohillebrandt/wordcamp-example-plugin/blob/master/package.json

Grunt
● Execução de tarefas em JavaScript pela linha de comando
● As tarefas são configuradas dentro de um arquivo JS, geralmente chamado Gruntfile.js
● Ao instalar certos plugins, você pode automatizar várias tarefas do seu projeto com o Grunt:
○ Gerar o catálogo de traduções do seu plugin (arquivo POT)
○ Verificar se as funções de localização (i18n) do WordPress foram usadas corretamente
○ Compilar Sass para CSS
○ Minificar os arquivos JavaScript e CSS
○ Averiguar a qualidade do seu código JavaScript (linting)
○ Criar um arquivo zip do seu plugin (build)
○ Dentre outras
● Página oficial com os plugins disponíveis:
○ https://gruntjs.com/plugins

Grunt
Instalação
● Primeiro precisamos criar um arquivo package.json para seu projeto:
$ npm init
● Ao rodar o comando acima, no campo entry point informe o nome Gruntfile.js
● Feito isso, para instalar o Grunt:
$ npm install grunt --save-dev
● Para executar o Grunt:
$ node_modules/grunt/bin/grunt

Grunt
Gruntfile.js
● Configuração das tarefas que serão executadas no seu projeto
● É possível criar custom tasks, que compreendem um conjunto de tarefas a serem executadas
● Se o nome da tarefa não for passado como parâmetro ao chamar o Grunt, a tarefa default será
executada automaticamente
● Exemplo de configuração:
○ https://github.com/tiagohillebrandt/wordcamp-example-plugin/blob/master/Gruntfile.js

Grunt
Quem usa?
● jQuery
○ https://github.com/jquery/jquery/blob/master/Gruntfile.js
● WordPress
○ https://develop.svn.wordpress.org/trunk/Gruntfile.js
● WooCommerce
○ https://github.com/woocommerce/woocommerce/blob/master/Gruntfile.js
● Yoast SEO
○ https://github.com/Yoast/wordpress-seo/blob/trunk/Gruntfile.js
● Bootstrap
○ https://github.com/twbs/bootstrap/blob/master/Gruntfile.js
● WP Healthcheck
○ https://github.com/wp-healthcheck/wp-healthcheck/blob/develop/Gruntfile.js

EditorConfig
● Usado para definir e manter um estilo de codificação consistente entre diferentes editores e IDEs
● Você declara as propriedades (indentação, codificação, etc) no arquivo .editorconfig
○ https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties
● Ao abrir o editor ou IDE, ele lê o arquivo e adere ao estilo de codificação definido no .editorconfig
● É necessário baixar o plugin para seu editor ou IDE:
○ http://editorconfig.org/#download

EditorConfig
Quem usa?
● PHP
○ http://git.php.net/?p=php-src.git;a=blob_plain;f=.editorconfig;hb=HEAD
● WordPress
○ https://develop.svn.wordpress.org/trunk/.editorconfig
● WooCommerce
○ https://github.com/woocommerce/woocommerce/blob/master/.editorconfig
● jQuery
○ https://github.com/jquery/jquery/blob/master/.editorconfig
● WP-CLI
○ https://github.com/wp-cli/wp-cli/blob/master/.editorconfig
● Yoast SEO
○ https://github.com/Yoast/wordpress-seo/blob/trunk/.editorconfig

● Arquivo com informações sobre o plugin
● Pode conter a descrição, passos para instalação, perguntas frequentes, listagem de screenshots,
changelog, notas de upgrade, dentre outras coisas
● É usado para gerar a página do plugin no WordPress Plugin Directory:
○ https://developer.wordpress.org/plugins/wordpress-org/how-your-readme-txt-works/
● Oferece suporte a Markdown:
○ https://daringfireball.net/projects/markdown/syntax
● Diferente do README.md
● Requerido no processo de submissão de plugins para o WordPress Plugin Directory
readme.txt

Readme Validator
● Permite validar o conteúdo do seu readme.txt
○ https://wordpress.org/plugins/developers/readme-validator/
● No entanto, ele não permite que você pré-visualize o conteúdo do seu arquivo

WP Readme
● Assim como o Readme Validator, valida o
conteúdo do seu readme.txt
● Além de validar, você também consegue
pré-visualizar seu readme.txt
https://wpreadme.com/

Plugin: WP Healthcheck
● Plugin para verificar o estado da sua instalação WordPress
● Verifica o número e tamanho de Transients e Autoload Options
● Limpeza de Transients e desativação de Autoload Options
● Verifica a versão dos softwares instalados no servidor:
○ PHP
○ MySQL/MariaDB
○ WordPress
○ Servidor web
● Em breve: notificações quando o seu certificado SSL estiver próximo da data de expiração

Plugin: WP Healthcheck
Disponível gratuitamente para download.
● WordPress Plugin Directory:
○ https://wordpress.org/plugins/wp-healthcheck/
● WP-CLI:
○ wp plugin install wp-healthcheck

Ferramentas Essenciais para Desenvolvedores de Plugins WordPress

Mais conteúdo relacionado

Mais procurados

Semelhante a Ferramentas Essenciais para Desenvolvedores de Plugins WordPress

Ferramentas Essenciais para Desenvolvedores de Plugins WordPress