Como este \u00e9 um conte\u00fado para membros, n\u00e3o me importo que seja um pouco mais longo do que o normal, mas tamb\u00e9m n\u00e3o quero que seja t\u00e3o longo que seja dif\u00edcil de seguir. Prefiro que seja uma leitura curta com algo pr\u00e1tico que voc\u00ea possa implementar depois de ler cada post.<\/p>\n
E uma das coisas que ajuda muito a escrever melhor c\u00f3digo WordPress \u00e9 o Composer.<\/p>\n
Melhor c\u00f3digo WordPress com o Composer<\/h2>\n
Se voc\u00ea l\u00ea este blog h\u00e1 algum tempo, ent\u00e3o sabe que sou f\u00e3 do Composer (no entanto, estou longe de ser a \u00fanica pessoa que trabalha no WordPress que \u00e9).<\/p>\n
E embora eu tenha escrito algum material sobre isso, n\u00e3o escrevi algo com o objetivo espec\u00edfico de coloc\u00e1-lo em funcionamento at\u00e9 o final da leitura de um \u00fanico artigo curto.<\/p>\n
Para esse ponto, precisaremos fazer alguns compromissos: a saber, fornecerei um arquivo de configura\u00e7\u00e3o de amostra junto com uma maneira de organizar o diret\u00f3rio do seu plug-in. Ent\u00e3o, no pr\u00f3ximo post, explicarei alguns dos recursos do Composer.<\/p>\n
O que \u00e9 Compositor?<\/h3>\n
Primeiro, \u00e9 importante entender o que \u00e9 o Composer. E \u00e9 f\u00e1cil recitar a defini\u00e7\u00e3o conforme consta no site, n\u00e3o \u00e9? \u00c9 um gerenciador de depend\u00eancias para PHP.<\/p>\n
Mas primeiro, o que \u00e9 uma depend\u00eancia?<\/h4>\n
Para alguns, por\u00e9m, isso levanta algumas quest\u00f5es:<\/p>\n
- \n
- O que \u00e9 uma depend\u00eancia?<\/li>\n
- Por que preciso gerenci\u00e1-los?<\/li>\n<\/ul>\n
E se voc\u00ea se aprofundar um pouco mais, poder\u00e1 descobrir que \u00e9 um gerenciador de pacotes, e isso simplesmente levanta as mesmas quest\u00f5es, exceto que voc\u00ea substitui “dependency" por “package” e volta ao ponto de partida.<\/p>\n
Ent\u00e3o, farei o que puder para deixar isso o mais claro poss\u00edvel:<\/p>\n
Uma depend\u00eancia, ou um pacote, um peda\u00e7o de software que seu c\u00f3digo usa. Pode ser algo no qual ele depende de funcionalidade durante o tempo de execu\u00e7\u00e3o, como uma maneira de fazer solicita\u00e7\u00f5es HTTP<\/a>, ou pode ser uma biblioteca para converter arrays em XML<\/a>.<\/p>\n
O Composer facilita a inclus\u00e3o desses pacotes espec\u00edficos em sua biblioteca, permitindo que voc\u00ea:<\/p>\n
- \n
- baixe e inclua o pacote em seu plugin,<\/li>\n
- carregar automaticamente seu plugin durante o tempo de execu\u00e7\u00e3o,<\/li>\n
- tornar mais f\u00e1cil para o seu plugin instanciar ou chamar o plugin conforme necess\u00e1rio.<\/li>\n<\/ul>\n
Isso significa que n\u00e3o precisamos encher os diret\u00f3rios de nossa base de c\u00f3digo com muitos arquivos adicionados manualmente e isso significa que n\u00e3o precisamos usar include<\/strong> ou require<\/strong> em todo lugar.<\/p>\n
Eles ter\u00e3o seu lugar, que discutirei no pr\u00f3ximo post, mas n\u00e3o precisar\u00e3o ser instalados automaticamente. Em vez disso, o Composer ir\u00e1 gerenci\u00e1-los. Portanto, o gerenciador de depend\u00eancias faz parte de seu prop\u00f3sito.<\/p>\n
Agora que voc\u00ea o instalou<\/a>, voc\u00ea tem algum contexto.<\/p>\n
Usando o Composer<\/h3>\n
Escrever esta se\u00e7\u00e3o em particular \u00e9 um pouco dif\u00edcil porque todos n\u00f3s temos necessidades diferentes, certo? Mas, pelo menos, todos podemos tirar proveito de um carregador autom\u00e1tico.<\/p>\n
Isso \u00e9 algo que todos n\u00f3s podemos usar.<\/p>\n
Ent\u00e3o aqui est\u00e1 o que vou fazer:<\/p>\n
- \n
- Vou configurar um diret\u00f3rio b\u00e1sico de plugins,<\/li>\n
- Crie os arquivos necess\u00e1rios para conduzir o plugin,<\/li>\n
- Configure um arquivo Composer simples,<\/li>\n
- Execute<\/li>\n<\/ol>\n
E ent\u00e3o eu vou deixar voc\u00ea ver os resultados. Podemos entrar em bibliotecas de terceiros ou outros recursos em um post futuro (ou s\u00e9ries futuras, na verdade).<\/p>\n
Mas se nada mais, isso mostrar\u00e1 como usar o Composer para definir um autoloader para que voc\u00ea possa se concentrar em escrever c\u00f3digo e n\u00e3o em se perguntar se as classes est\u00e3o inclu\u00eddas.<\/p>\n
O diret\u00f3rio de plug-ins<\/h4>\n
Eu geralmente estruturo meus plugins assim:<\/p>\n
- \n
- h\u00e1 um arquivo bootstrap lido pelo WordPress,<\/li>\n
- existe um\u00a0 diret\u00f3rio src<\/strong> no qual todos os diret\u00f3rios e arquivos PHP s\u00e3o mantidos,<\/li>\n
- h\u00e1 um\u00a0 diret\u00f3rio de ativos<\/strong> de n\u00edvel superior onde imagens, arquivos JavaScript e arquivos Sass s\u00e3o mantidos,<\/li>\n
- e h\u00e1 uma\u00a0 pasta de fornecedor<\/strong> criada pelo Composer para abrigar as depend\u00eancias e o autoloader.<\/li>\n<\/ul>\n
Ocasionalmente, pode haver alguma outra pasta estranha, como uma pasta inc<\/strong> ou lib<\/strong>, mas isso \u00e9 altamente irregular neste ponto no tipo de trabalho que fa\u00e7o. E por causa disso, n\u00e3o vou me preocupar com isso para este post.<\/p>\n
Em vez disso, meu diret\u00f3rio se parece com isso.<\/p>\n
O\u00a0 diret\u00f3rio do fornecedor<\/strong> est\u00e1 ausente porque ainda n\u00e3o criei um arquivo do Composer que \u00e9 usado para execu\u00e7\u00e3o. Mas veremos isso antes do final do post.<\/p>\n
Arquivos de exemplo<\/h4>\n
Vamos obter um arquivo de amostra configurado no plugin. E quando digo amostra, tamb\u00e9m quero dizer simples.<\/p>\n
Este arquivo ter\u00e1 um \u00fanico prop\u00f3sito: imprimir uma mensagem no painel ao fazer login no WordPress.<\/p>\n
![\"Ferramentas](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160226-61e707e186b99.png\")
<\/a><\/p>\nLembre-se, por\u00e9m, que o objetivo disso n\u00e3o \u00e9 mostrar como escrever um plugin bem arquitetado. Em vez disso, \u00e9 mostrar como gerar um autoloader para que os arquivos do plugin sejam gerados automaticamente.<\/p>\n
Ent\u00e3o o bootstrap do plugin se parece com isso<\/a> :<\/p>\n
<?php\n\/**\n * The plugin bootstrap file\n *\n * This file is read by WordPress to generate the plugin information in the plugin\n * admin area. This file also includes all of the dependencies used by the plugin,\n * registers the activation and deactivation functions, and defines a function\n * that starts the plugin.\n *\n * @since 0.1.0\n * @package SamplePlugin\n *\n * @wordpress-plugin\n * Plugin Name: Sample Plugin\n * Description: A sample plugin used for a blog post.\n * Version: 0.1.0\n * Author: Tom McFarlin\n * Author URI: https:\/\/tommcfarlin.com\n * License: GPL-3.0+\n * License URI: http:\/\/www.gnu.org\/licenses\/gpl-3.0.txt\n *\/\n\nnamespace SamplePlugin;\n\nuse SamplePluginMessenger;\n\n\/\/ This file called directly.\ndefined('WPINC') || die;\n\n\/\/ Include the autoloader.\nrequire_once __DIR__. '\/vendor\/autoload.php';\n\n\/\/ Start the machine.\n(new Messenger())->start();\n<\/code><\/pre>\nE o arquivo especificamente respons\u00e1vel por exibir a mensagem se parece com isso<\/a> :<\/p>\n
<?php\n\nnamespace SamplePlugin;\n\nclass Messenger\n{\n \/**\n * Subscribers the `adminNotices` function to the admin_notices hook in WordPress.\n *\/\n public function start()\n {\n add_action('admin_notices', [$this, 'adminNotices']);\n }\n\n \/**\n * Displays the contents of the `message.html` file into the adminitrative notices\n * area on the dashboard whenever the plugin is active.\n *\/\n public function adminNotices()\n {\n if ('dashboard' !== get_current_screen()->id) {\n return;\n }\n\n include_once dirname(__FILE__). '\/Admin\/Views\/message.html';\n }\n}\n<\/code><\/pre>\nE se voc\u00ea est\u00e1 curioso sobre o arquivo HTML, tamb\u00e9m \u00e9 simples<\/a> :<\/p>\n
<div class=\"notice notice-success is-dismissible\">\n <p>This is a message from the <strong>Sample Plugin<\/strong><\/p>\n<\/div>\n<\/code><\/pre>\nEu disse que era simples.<\/p>\n
O arquivo de configura\u00e7\u00e3o do compositor<\/h4>\n
Este arquivo em particular pode ser t\u00e3o simples ou t\u00e3o complicado quanto necess\u00e1rio. Para este post, vamos simplificar. O objetivo, para este post, \u00e9 simplesmente dar um nome, descri\u00e7\u00e3o, licen\u00e7a, os autores e depois como configurar o autoloader.<\/p>\n
D\u00ea uma olhada aqui<\/a>, e depois vou explicar o que voc\u00ea v\u00ea logo abaixo:<\/p>\n
{\n \"name\": \"tommcfarlin\/sample-plugin\",\n \"description\": \"A sample plugin used for a blog post.\",\n \"type\": \"wordpress-plugin\",\n \"license\": \"GPL-3.0-or-later\",\n \"authors\": [\n {\n \"name\": \"Tom McFarlin\",\n \"email\": \"tom@tommcfarlin.com\",\n \"homepage\": \"https:\/\/tommcfarlin.com\"\n }\n ],\n \"autoload\": {\n \"psr-4\": {\n \"SamplePlugin\": \"src\/\"\n }\n }\n }<\/code><\/pre>\nPrimeiro, o nome, a descri\u00e7\u00e3o, o tipo e a licen\u00e7a devem ser f\u00e1ceis de seguir. A \u00e1rea do autor tamb\u00e9m \u00e9 direta.<\/p>\n
O carregamento autom\u00e1tico \u00e9 a \u00e1rea com a qual estamos preocupados agora. Deve ficar bem claro.<\/p>\n
Resumindo, temos uma diretiva para PSR4<\/strong> sobre a \u00a0qual voc\u00ea pode ler mais e onde um namespace est\u00e1 localizado. Portanto, no exemplo acima, qualquer coisa no namespace SamplePlugin<\/strong> est\u00e1 localizada em src.\u00a0<\/strong><\/p>\n
Isto \u00e9 o que diz ao autoloader onde procurar certos arquivos. E no nosso caso, ser\u00e1 apenas procurar a\u00a0 classe Messenger<\/strong>.<\/p>\n
Compositor em execu\u00e7\u00e3o<\/h4>\n
Agora que cobrimos o b\u00e1sico do arquivo de configura\u00e7\u00e3o do Composer, \u00e9 hora de execut\u00e1-lo. Lembre-se de que seu diret\u00f3rio de plugins deve se parecer com isto:<\/p>\n
![\"Ferramentas](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160226-61e707e55e20b.png\")
<\/a><\/p>\nNo seu terminal, digite o seguinte comando<\/a> :<\/p>\n
E voc\u00ea deve ver algo assim:<\/p>\n
![\"Ferramentas](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160226-61e707e92efb9.png\")
<\/a><\/p>\nSupondo que tudo tenha corrido bem, voc\u00ea poder\u00e1 fazer login no WordPress e ativar o plug-in.<\/p>\n
Vendo tudo junto<\/h4>\n
Depois que o plug-in for ativado, voc\u00ea poder\u00e1 navegar at\u00e9 o painel do seu site. L\u00e1, voc\u00ea deve ver um aviso descart\u00e1vel que se parece exatamente com o que vimos no in\u00edcio do post:<\/p>\n
<\/a><\/p>\nSe voc\u00ea chegou at\u00e9 aqui, ent\u00e3o voc\u00ea est\u00e1 pronto para ir! Caso contr\u00e1rio, verifique novamente sua sintaxe para garantir que tudo esteja bem. Se algo estiver errado, \u00e9 prov\u00e1vel que voc\u00ea n\u00e3o tenha conseguido chegar t\u00e3o longe e, supondo que tenha as constantes de depura\u00e7\u00e3o b\u00e1sicas definidas<\/a>, provavelmente ver\u00e1 onde existe o problema.<\/p>\n
Isso n\u00e3o \u00e9 tudo<\/h2>\n
H\u00e1 muito mais no Composer, e eu recomendo ler a documenta\u00e7\u00e3o dele. Algumas dessas coisas ser\u00e3o abordadas ao examinar as ferramentas que pretendo abordar posteriormente nesta s\u00e9rie, mas, por enquanto, recomendo familiarizar-se com algumas das conven\u00e7\u00f5es.<\/p>\n
Oh! E eu n\u00e3o recomendo verificar o diret\u00f3rio do fornecedor em seu reposit\u00f3rio. Isso pode se tornar um diret\u00f3rio enorme mais tarde, e pode minar todo o prop\u00f3sito do Composer.<\/p>\n
No pr\u00f3ximo post, falarei sobre o porqu\u00ea. Algumas pessoas fazem isso, e tudo bem, e eu j\u00e1 fiz isso antes, mas \u00e9 importante ser criterioso sobre quando voc\u00ea faz.<\/p>\n
Errar do lado de n\u00e3o faz\u00ea-lo. E explicarei o porqu\u00ea no pr\u00f3ximo post.<\/p>\n
- h\u00e1 um\u00a0 diret\u00f3rio de ativos<\/strong> de n\u00edvel superior onde imagens, arquivos JavaScript e arquivos Sass s\u00e3o mantidos,<\/li>\n