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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Ferramentas Essenciais para Desenvolvedores de Plugins WordPress

Ähnlich wie Ferramentas Essenciais para Desenvolvedores de Plugins WordPress (20)

Ferramentas Essenciais para Desenvolvedores de Plugins WordPress