Base de Conhecimento

Introdução

O WordPress é um sistema popular de gerenciamento de conteúdo que, de acordo com a W3Techs (Web Technology Surveys), administra mais de 33% dos sites na Internet . Um motivo pelo qual é tão popular é que é fácil configurar com documentação clara e direta. Além disso, existem muitos recursos da comunidade que dão suporte aos desenvolvedores do WordPress. O WordPress pode resolver muitos casos de uso com uma solução pronta a usar, barata ou até gratuita. Por fim, o WordPress vem com um sistema de plug-ins bem definido, que permite aos desenvolvedores escrever código personalizado para adicionar sua própria funcionalidade. Esse sistema de plug-ins está bem documentado, funciona bem e, como você verá mais adiante neste tutorial, é fácil de usar.

Os desenvolvedores que desejam oferecer as experiências mais ricas e interativas podem usar JavaScript , suportado por estruturas como o React . O React é uma biblioteca JavaScript projetada para facilitar a criação de UIs interativas e dinâmicas que vão além de uma página ou formulário estático típico. Criado pelo Facebook e, portanto, bem mantido para segurança, estabilidade e facilidade de uso, o React é popular porque possui boa documentação e um ecossistema de documentação e plug-ins bem estabelecido e orientado pela comunidade.

Este tutorial o guiará pelas práticas recomendadas para incorporar um aplicativo React em um site WordPress. Por exemplo, ele usará um caso de uso comum: criar um widget destinado a ser incorporado em várias páginas e, às vezes, várias vezes em uma página. No lado do servidor, ele será implementado como um código de acesso do WordPress . Um código curto é como uma tag HTML, mas usa colchetes ( [...]) em vez de colchetes ( <...>). Em vez de renderizar um elemento HTML diretamente, ele chama uma função PHP, que por sua vez renderiza HTML, interpolado com dados do banco de dados.

No final deste tutorial, você terá criado seu próprio código de acesso, inserido em uma página no WP Admin e publicado essa página. Nessa página, você poderá ver o widget React exibido pelo navegador.

Pré-requisitos

Para seguir este tutorial, você deve ter:

• Um servidor Ubuntu 18.04 configurado com o tutorial Initial Server Setup with Ubuntu 18.04 para configurar um firewall para o servidor junto com um novo usuário que tenha privilégios de root.
• Um nome de domínio totalmente registrado. Este tutorial será usado your_domaincomo um exemplo. Você pode comprar um nome de domínio na Namecheap , obter um gratuitamente na Freenom ou usar o registro de domínio de sua escolha.

• Os dois registros DNS a seguir configurados para o seu servidor. Você pode seguir esta introdução ao DNS do DigitalOcean para obter detalhes sobre como adicioná-los.

  • Um registro A your_domainapontando para o endereço IP público do seu servidor.
  • Um registro A apontando para o endereço IP público do seu servidor.www.your_domain

• Instalações do Apache, MySQL e PHP no seu servidor. Você pode obter isso seguindo Como instalar a pilha Linux, Apache, MySQL, PHP (LAMP) no Ubuntu 18.04 .

• Apache seguro com o Let's Encrypt , seguindo Como proteger o Apache com o Let's Encrypt no Ubuntu 18.04 para gerar um certificado SSL gratuito.

• Uma instalação do WordPress, que você pode obter seguindo Como instalar o WordPress com LAMP no Ubuntu 18.04 e seus pré-requisitos.

• Instalação do Node.js seguindo a opção "Instalando usando um PPA" em Como instalar o Node.js no Ubuntu 18.04 . Este tutorial usará a versão 11.15.0; portanto, ao usar o curldownload do script de instalação, substitua 10.xpor 11.xpara seguir o procedimento neste tutorial.

Etapa 1 - Atualizando e configurando permissões do sistema de arquivos

Ao fazer login como usuário não raiz criado no pré-requisito Configuração inicial do servidor com Ubuntu 18.04 , você não terá acesso para exibir ou editar nenhum arquivo no diretório WordPress. Este é um problema, pois você adicionará e modificará os arquivos posteriormente para criar seu plugin WordPress e seu aplicativo React. Para corrigir esse problema, nesta etapa, você atualizará sua configuração do WordPress para ter acesso para editar seus arquivos do WordPress.

Execute o comando a seguir, substituindo sammyo nome do usuário não raiz e o caminho para o diretório do WordPress (que é a pasta raiz do documento Apache que você criou no pré-requisito):/var/www/wordpress

• sudo chown -R sammy:www-data /var/www/wordpress

Vamos dividir este comando:

• sudo- Isso permite que você execute este comando como root, uma vez que você está modificando arquivos sammynão tem acesso.
• chown - Este comando altera a propriedade do arquivo.
• -R - Esse sinalizador altera a propriedade recursivamente, incluindo todas as subpastas e arquivos.
• sammy:www-data- Isso define o proprietário como seu usuário não raiz ( sammy) e mantém o grupo www-datapara que o Apache ainda possa acessar os arquivos para servi-los.
• /var/www/wordpress- Isso especifica o caminho para o diretório do WordPress. Este é o diretório no qual a propriedade será alterada.

Para verificar se esse comando foi bem-sucedido, liste o conteúdo do diretório WordPress:

• ls -la /var/www/wordpress

Você verá uma lista do conteúdo do diretório:

total 216
drwxr-x---  5 sammy www-data  4096 Apr 13 15:42 .
drwxr-xr-x  4 root  root      4096 Apr 13 15:39 ..
-rw-r-----  1 sammy www-data   235 Apr 13 15:54 .htaccess
-rw-r-----  1 sammy www-data   420 Nov 30  2017 index.php
-rw-r-----  1 sammy www-data 19935 Jan  1 20:37 license.txt
-rw-r-----  1 sammy www-data  7425 Jan  9 02:56 readme.html
-rw-r-----  1 sammy www-data  6919 Jan 12 06:41 wp-activate.php
drwxr-x---  9 sammy www-data  4096 Mar 13 00:18 wp-admin
-rw-r-----  1 sammy www-data   369 Nov 30  2017 wp-blog-header.php
-rw-r-----  1 sammy www-data  2283 Jan 21 01:34 wp-comments-post.php
-rw-r-----  1 sammy www-data  2898 Jan  8 04:30 wp-config-sample.php
-rw-r-----  1 sammy www-data  3214 Apr 13 15:42 wp-config.php
drwxr-x---  6 sammy www-data  4096 Apr 13 15:54 wp-content
-rw-r-----  1 sammy www-data  3847 Jan  9 08:37 wp-cron.php
drwxr-x--- 19 sammy www-data 12288 Mar 13 00:18 wp-includes
-rw-r-----  1 sammy www-data  2502 Jan 16 05:29 wp-links-opml.php
-rw-r-----  1 sammy www-data  3306 Nov 30  2017 wp-load.php
-rw-r-----  1 sammy www-data 38883 Jan 12 06:41 wp-login.php
-rw-r-----  1 sammy www-data  8403 Nov 30  2017 wp-mail.php
-rw-r-----  1 sammy www-data 17947 Jan 30 11:01 wp-settings.php
-rw-r-----  1 sammy www-data 31085 Jan 16 16:51 wp-signup.php
-rw-r-----  1 sammy www-data  4764 Nov 30  2017 wp-trackback.php
-rw-r-----  1 sammy www-data  3068 Aug 17  2018 xmlrpc.php

Esses arquivos são os incluídos no núcleo do WordPress no arquivo latest.tar.gzcujo download você fez wordpress.orgno pré-requisito Como instalar o WordPress com LAMP no Ubuntu 18.04 . Se as permissões aparecerem como na saída anterior, isso significa que seus arquivos e diretórios foram atualizados corretamente.

Nesta etapa, você atualizou sua instalação do WordPress para ter acesso a editar seus arquivos. Na próxima etapa, você usará esse acesso para criar arquivos que comporão um plugin do WordPress.

Etapa 2 - Criando um plug-in básico do WordPress

Agora que você tem acesso para modificar arquivos no diretório WordPress, criará um plug-in básico do WordPress e o adicionará à instalação. Isso permitirá que o React interaja com o WordPress posteriormente no tutorial.

Um plugin do WordPress pode ser tão simples quanto:

1. Um diretório dentro wp-content/plugins.
2. Um arquivo dentro desse diretório com o mesmo nome e uma .phpextensão de arquivo.
3. Um comentário especial na parte superior desse arquivo que fornece ao WordPress importantes metadados do plug-in.

Para criar um plugin para o código React, você escreverá mais tarde, comece criando um diretório para o plugin WordPress. Para simplificar, este tutorial nomeará o plugin react-wordpress. Execute o seguinte comando, substituindo wordpresspela raiz do documento Apache:

• mkdir /var/www/wordpress/wp-content/plugins/react-wordpress

Em seguida, navegue para o diretório recém-criado. Comandos subsequentes serão executados a partir daqui.

• cd /var/www/wordpress/wp-content/plugins/react-wordpress

Vamos criar o arquivo do plugin agora. Este tutorial usará o nano, chamado com o comando nano, como o editor de texto da linha de comandos para todos os arquivos. Você também pode usar qualquer outro editor de texto de sua escolha, como Pico , Vim ou Emacs .

Abra react-wordpress.phppara edição:

• nano react-wordpress.php

Adicione as seguintes linhas ao seu arquivo para criar o início do plug-in:

<?php
/**
 * @wordpress-plugin
 * Plugin Name:       Embedding React In Wordpress
 */

defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );

A seção comentada na parte superior fornece metadados para o plug-in, e a linha que verifica a ABSPATHconstante impede que um agente incorreto acesse esse script diretamente por sua URL. ABSPATHé o caminho absoluto para o diretório raiz do WordPress; portanto, se ABSPATHestiver definido, você pode ter certeza de que o arquivo foi carregado no ambiente do WordPress.

Nota: Muitos campos estão disponíveis para um comentário de metadados do plug-in, mas Plugin Namesão obrigatórios. Consulte a página Requisitos do cabeçalho na documentação do WordPress para obter mais detalhes.

Em seguida, abra um navegador da web e navegue até a página Plugins do seu domínio ( ). Você verá seu plug-in listado junto com os plug-ins padrão do WordPress:https://your_domain/wp-admin/plugins.php

Clique em Ativar para ativar seu plug-in.

Depois de ativar o plug-in, a linha que contém o plug-in será destacada em azul, com uma borda azul à esquerda e, em vez de um link abaixo que diz Ativar , haverá uma que diz Desativar :

Em seguida, você estabelecerá a estrutura do seu plugin.

Volte ao seu terminal para abrir react-wordpress.php:

• nano react-wordpress.php

Atualize-o para adicionar as seguintes linhas destacadas, que definem constantes úteis:

<?php
/**
 * @wordpress-plugin
 * Plugin Name:       Embedding React In Wordpress
 */

defined( 'ABSPATH' ) or die( 'Direct script access diallowed.' );

define( 'ERW_WIDGET_PATH', plugin_dir_path( __FILE__ ) . '/widget' );
define( 'ERW_ASSET_MANIFEST', ERW_WIDGET_PATH . '/build/asset-manifest.json' );
define( 'ERW_INCLUDES', plugin_dir_path( __FILE__ ) . '/includes' );

Nas linhas recém-adicionadas, você definiu três constantes:

1. ERW_WIDGET_PATH - Este será o caminho para o aplicativo React.
2. ERW_ASSET_MANIFEST - Esse é o caminho para o manifesto do recurso React, um arquivo que contém a lista de arquivos JavaScript e CSS que precisam ser incluídos na página para que seu aplicativo funcione.
3. ERW_INCLUDES - Este subdiretório conterá todos os arquivos PHP.

Observe que cada um define()se refere a plugin_dir_path( __FILE__ ). Isso significa o caminho do diretório para esse arquivo.

Depois de adicionar as definições constantes, salve o arquivo e saia do editor.

Nota: É importante colocar no namespace suas constantes. Nesse caso, estamos usando o namespace ERW_, que significa Embedding React no WordPress . O prefixo de variáveis ​​com esse espaço de nome garante que elas sejam exclusivas, para que não entrem em conflito com as constantes definidas em outros plugins.

Para criar a includes/pasta, que conterá os outros arquivos PHP, inicie no nível superior do diretório do plugin ,. Em seguida, crie a pasta:/var/www/your_domain/wp-content/plugins/react-wordpress

• mkdir includes

Agora que você estruturou os arquivos e pastas relacionados ao PHP necessários para criar um plug-in do WordPress, criará os arquivos e as pastas iniciais do React.

Etapa 3 - Inicializando o aplicativo React

Nesta etapa, você usará o Create React App para inicializar o aplicativo React.

Este tutorial foi testado usando a versão Create React App 3.0.1. A versão 3.0.0fez alterações recentes na estrutura de asset-manifest.json, portanto, esta versão anterior não é compatível com este tutorial sem modificações. Para garantir que você esteja usando a versão esperada aqui, execute este comando para instalar o Create React App:

• sudo npm install --global [email protected]

Este comando instalará a versão 3.0.1do Create React App. O --globalsinalizador o instalará em todo o sistema. A instalação em todo o sistema garante que, quando você executar create-react-app(ou npx create-react-app) sem nenhum caminho especificado, usará a versão que você acabou de instalar.

Depois de instalar o Create React App, use-o para criar o aplicativo React. Este tutorial irá nomear o aplicativo widget:

• sudo create-react-app widget

Este comando usa npx , que é um binário fornecido com o NPM . Ele foi projetado para facilitar o uso das ferramentas da CLI e de outros executáveis ​​hospedados no NPM. Ele instalará essas ferramentas se elas não forem encontradas localmente.

O create-react-appcomando gerará uma pasta do projeto e todos os arquivos necessários para um aplicativo React básico. Isso inclui um index.htmlarquivo, iniciando JavaScript, CSS e arquivos de teste, e um package.jsonpara definir seu projeto e dependências. Ele inclui pré-dependências e scripts que permitem construir seu aplicativo para produção sem precisar instalar e configurar nenhuma ferramenta de construção adicional.

Depois de configurar o widgetaplicativo, a saída no terminal será mais ou menos assim:

...
Success! Created widget at /var/www/wordpress/wp-content/plugins/react-wordpress/widget
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd widget
  npm start

Happy hacking!

Em seguida, navegue até o diretório recém-criado:

• cd widget

Agora você vai ser capaz de construir seu aplicativo usando o comando padrão de construção , npm run build. Este buildcomando examina o arquivo package.jsonsob a chave scriptspara um script chamado build:

{
  "name": "widget",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "3.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Isso chama o react-scripts.jsexecutável fornecido pelo react-scriptsmódulo do nó, que é um dos principais componentes fornecidos pelo create-react-app. Isso, por sua vez, chama o script de construção, que usa o webpack para compilar seus arquivos de projeto em arquivos de ativos estáticos que seu navegador entende. Faz isso da seguinte maneira:

• Resolvendo dependências.
• Compilação de arquivos SASS em CSS e JSX ou TypeScript em JavaScript.
• Transformando a sintaxe do ES6 em sintaxe do ES5 com melhor compatibilidade entre navegadores.

Agora que você já sabe um pouco mais build, execute o comando no seu terminal:

• sudo npm run build

Depois que o comando for concluído, você receberá uma saída semelhante à seguinte:

> widget@0.1.0 build /var/www/wordpress/wp-content/plugins/react-wordpress/widget
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  36.83 KB (+43 B)  build/static/js/2.6efc73d3.chunk.js
  762 B (+44 B)     build/static/js/runtime~main.a8a9905a.js
  710 B (+38 B)     build/static/js/main.2d1d08c1.chunk.js
  539 B (+44 B)     build/static/css/main.30ddb8d4.chunk.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://bit.ly/CRA-deploy

Agora seu projeto foi criado, mas antes de passar para a próxima etapa, é uma prática recomendada garantir que seu aplicativo seja carregado apenas se estiver presente.

O React usa um elemento HTML no DOM dentro do qual ele processa o aplicativo. Isso é chamado de targetelemento. Por padrão, este elemento tem o ID root. Para garantir que este rootnó seja o aplicativo que você está criando, altere src/index.jspara verificar o ID do targetespaço de nomes erw-root. Para fazer isso, primeiro abra src/index.js:

• sudo nano src/index.js

Modifique e adicione as linhas destacadas:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

const target = document.getElementById('erw-root');
if (target) { ReactDOM.render(<App />, target); }

serviceWorker.unregister();

Por fim, salve e saia do arquivo quando terminar de editar.

Nesse arquivo, você fez duas alterações importantes no index.jsarquivo padrão :

1. Você alterou o elemento de destino de <div id="root"></div>para <div id="erw-root"></div>para que fique no namespace do seu aplicativo.
2. Você encerrou a chamada ReactDOM.render()em uma if (...)declaração para que o aplicativo seja carregado apenas se estiver presente.

Nota: Se você espera que o widget esteja presente em todas as páginas, também pode adicionar uma linha de tratamento de erros, que imprime uma mensagem no console se um elemento com ID erw-rootnão for encontrado. No entanto, este tutorial omitirá esta etapa. Uma linha como essa produziria um erro do console em todas as páginas que não possuem o elemento, incluindo aquelas nas quais você não planeja incluir o elemento. Esses vários erros do console JavaScript podem arriscar a redução da classificação do mecanismo de pesquisa para o seu site.

Após alterar qualquer arquivo JavaScript ou CSS em seu src/diretório, é importante recompilar seu aplicativo para que suas alterações sejam incorporadas. Para reconstruir seu aplicativo, execute:

• sudo npm run build

Agora seu build/diretório contém um aplicativo React em funcionamento na forma de arquivos JavaScript e CSS. A próxima etapa envolve a configuração de alguns arquivos PHP que enfileiram seu JavaScript e CSS na página.

Etapa 4 - Enfileirando os arquivos JavaScript e CSS

Nesta etapa, você usará ações e filtros do WordPress para:

1. Envie o código de enfileiramento de scripts no momento apropriado no ciclo de carregamento da página do WordPress.
2. Enfileire seus arquivos JavaScript e CSS de uma maneira que menos afete a velocidade de carregamento da página.

O WordPress usa ações e filtros como ganchos principais. As ações possibilitam a execução do código em um horário especificado no ciclo de carregamento da página e os filtros modificam o comportamento específico alterando o valor de retorno das funções que você não possui de outra forma.

Para usar esses ganchos, você criará um arquivo PHP que conterá o código que analisa o manifesto do ativo. Esse é o mesmo arquivo que você usará posteriormente para enfileirar todos os ativos, para que os scripts sejam gravados na <head>tag.

Antes de criar o arquivo, use o seguinte comando para navegar para fora do diretório que contém o aplicativo React e para o react-wordpressdiretório de plug - ins de nível superior :

• cd /var/www/wordpress/wp-content/plugins/react-wordpress

Crie o enqueue.phparquivo dentro da includes/pasta:

• nano includes/enqueue.php

Comece colocando a <?phptag de abertura na parte superior do arquivo. Adicione também a linha que procura ABSPATH, que, como discutido anteriormente, é uma prática recomendada em todos os arquivos PHP:

<?php
// This file enqueues scripts and styles

defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );

Salve e saia deste arquivo.

Em seguida, atualize react-wordpress.phppara exigir enqueue.phpdo projeto. Primeiro, abra o arquivo para edição:

• nano react-wordpress.php

Adicione a seguinte linha destacada:

<?php
/**
 * @wordpress-plugin
 * Plugin Name:       Embedding React In Wordpress
 */

defined( 'ABSPATH' ) or die( 'Direct script access diallowed.' );

define( 'ERW_WIDGET_PATH', plugin_dir_path( __FILE__ ) . '/widget' );
define( 'ERW_ASSET_MANIFEST', ERW_WIDGET_PATH . '/build/asset-manifest.json' );
define( 'ERW_INCLUDES', plugin_dir_path( __FILE__ ) . '/includes' );

require_once( ERW_INCLUDES . '/enqueue.php' );

É um padrão comum nos plug-ins do WordPress exigir outros arquivos PHP do includes/diretório para dividir tarefas importantes em partes. A require_once()função analisa o conteúdo do arquivo passado como argumento, como se o código PHP desse arquivo estivesse escrito ali mesmo, em linha. Ao contrário do comando semelhante include, requiregerará uma exceção se o arquivo que você está tentando exigir não puder ser encontrado. Usar require_once()(ao contrário de just require()) garante que enqueue.phpnão será analisado várias vezes se a diretiva require_once( ERW_INCLUDES . '/enqueue.php' );for fornecida várias vezes.

Salve e saia do arquivo.

Agora reabra includes/enqueue.php:

• nano includes/enqueue.php

Em seguida, adicione o seguinte código destacado:

<?php
// This file enqueues scripts and styles

defined( 'ABSPATH' ) or die( 'Direct script access diallowed.' );

add_action( 'init', function() {

  add_filter( 'script_loader_tag', function( $tag, $handle ) {
    if ( ! preg_match( '/^erw-/', $handle ) ) { return $tag; }
    return str_replace( ' src', ' async defer src', $tag );
  }, 10, 2 );

  add_action( 'wp_enqueue_scripts', function() {

  });
});

Adicionar uma função à initação significa que esse código será executado durante a initfase do processo de carregamento, após o carregamento do tema e de outros plugins.

A configuração dos atributos asynce defernas <script>tags usando o script_loader_tagfiltro informa ao navegador para carregar os scripts de forma assíncrona, em vez de bloquear a construção do DOM e a renderização da página.

A wp_enqueue_scriptsação enfileira itens de front-end. Veja esta página para mais detalhes.

Certifique-se de escrever o arquivo e sair.

Você já disse ao WordPress para escrever tags de script e folha de estilo na página. Nesta próxima etapa, você analisará um arquivo chamado manifesto do ativo. Isso fornecerá os caminhos para todos os arquivos que você precisará enfileirar.

Etapa 5 - Analisando o manifesto de ativos

Nesta etapa, você analisará o manifesto do ativo gerado pela compilação React em uma lista de arquivos JavaScript e CSS.

Quando você cria o aplicativo, o script de construção React cria seu projeto em vários arquivos JavaScript e CSS. A quantidade e os nomes dos arquivos variam de uma compilação para a próxima, pois cada um inclui um hash do conteúdo do arquivo. O manifesto do ativo fornece o nome de cada arquivo gerado na última construção, juntamente com o caminho para esse arquivo. Ao analisá-lo programaticamente, você garante que as tags de script e folha de estilo que você escreve na página sempre apontam para os arquivos corretos, mesmo quando os nomes mudam.

Primeiro, examine o asset-manifest.jsoncom o catcomando:

• cat widget/build/asset-manifest.json

Vai parecer algo assim:

{
  "files": {
    "main.css": "/static/css/main.2cce8147.chunk.css",
    "main.js": "/static/js/main.a284ff71.chunk.js",
    "main.js.map": "/static/js/main.a284ff71.chunk.js.map",
    "runtime~main.js": "/static/js/runtime~main.fa565546.js",
    "runtime~main.js.map": "/static/js/runtime~main.fa565546.js.map",
    "static/js/2.9ca06fd6.chunk.js": "/static/js/2.9ca06fd6.chunk.js",
    "static/js/2.9ca06fd6.chunk.js.map": "/static/js/2.9ca06fd6.chunk.js.map",
    "index.html": "/index.html",
    "precache-manifest.e40c3c7a647ca45e36eb20f8e1a654ee.js": "/precache-manifest.e40c3c7a647ca45e36eb20f8e1a654ee.js",
    "service-worker.js": "/service-worker.js",
    "static/css/main.2cce8147.chunk.css.map": "/static/css/main.2cce8147.chunk.css.map",
    "static/media/logo.svg": "/static/media/logo.5d5d9eef.svg"
  }
}

Para analisá-lo, seu código procurará chaves de objetos que terminem com .jse .css.

Abra seu enqueue.phparquivo:

• nano includes/enqueue.php

Adicione o trecho destacado:

<?php
// This file enqueues scripts and styles

defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );

add_action( 'init', function() {

  add_filter( 'script_loader_tag', function( $tag, $handle ) {
    if ( ! preg_match( '/^erw-/', $handle ) ) { return $tag; }
    return str_replace( ' src', ' async defer src', $tag );
  }, 10, 2 );

  add_action( 'wp_enqueue_scripts', function() {

    $asset_manifest = json_decode( file_get_contents( ERW_ASSET_MANIFEST ), true )['files'];

    if ( isset( $asset_manifest[ 'main.css' ] ) ) {
      wp_enqueue_style( 'erw', get_site_url() . $asset_manifest[ 'main.css' ] );
    }

    wp_enqueue_script( 'erw-runtime', get_site_url() . $asset_manifest[ 'runtime~main.js' ], array(), null, true );

    wp_enqueue_script( 'erw-main', get_site_url() . $asset_manifest[ 'main.js' ], array('erw-runtime'), null, true );

    foreach ( $asset_manifest as $key => $value ) {
      if ( preg_match( '@static/js/(.*)\.chunk\.js@', $key, $matches ) ) {
        if ( $matches && is_array( $matches ) && count( $matches ) === 2 ) {
          $name = "erw-" . preg_replace( '/[^A-Za-z0-9_]/', '-', $matches[1] );
          wp_enqueue_script( $name, get_site_url() . $value, array( 'erw-main' ), null, true );
        }
      }

      if ( preg_match( '@static/css/(.*)\.chunk\.css@', $key, $matches ) ) {
        if ( $matches && is_array( $matches ) && count( $matches ) == 2 ) {
          $name = "erw-" . preg_replace( '/[^A-Za-z0-9_]/', '-', $matches[1] );
          wp_enqueue_style( $name, get_site_url() . $value, array( 'erw' ), null );
        }
      }
    }

  });
});

Quando terminar, escreva e saia do arquivo.

O código destacado faz o seguinte:

1. Lê o arquivo de manifesto do ativo e o analisa como um arquivo JSON. Ele acessa o conteúdo armazenado na chave 'files'e o armazena na $asset_manifestvariável.
2. Enfileira o arquivo CSS principal, se existir.
3. Enfileire primeiro o tempo de execução do React, depois o arquivo JavaScript principal, configurando o tempo de execução como uma dependência para garantir que ele seja carregado primeiro na página.
4. Analisa a lista de arquivos de manifesto do ativo em busca de arquivos JavaScript nomeados static/js/<hash>.chunk.jse os enfileira na página após o arquivo principal.
5. Analisa a lista de arquivos de manifesto do ativo em busca de arquivos CSS nomeados static/css/<hash>.chunk.csse os enfileira na página após o arquivo CSS principal.

Nota: Usando wp_enqueue_script()e wp_enqueue_stylefará <script>e <link>tags para os arquivos enfileirados para aparecer em cada página. O último argumento truediz ao WordPress para colocar o arquivo abaixo do rodapé do conteúdo da página, em vez de na parte inferior do <head>elemento. Isso é importante para que o carregamento dos arquivos JavaScript não desacelere o restante da página.

Nesta etapa, você isolou os caminhos de arquivo dos scripts e estilos usados ​​pelo seu aplicativo. Na próxima etapa, você garantirá que esses caminhos de arquivo aponte para o builddiretório do aplicativo React e que nenhum dos arquivos de origem esteja acessível no navegador.

Etapa 6 - Servindo e protegendo arquivos estáticos

Neste ponto, você informou ao WordPress quais arquivos JavaScript e CSS carregar e onde encontrá-los. No entanto, se você visitar o navegador e olhar para o console do JavaScript, verá erros de HTTP 404. (Confira este artigo para obter mais informações sobre como usar o console JavaScript.)https://your_domain

Isso ocorre porque a rota da URL para o arquivo (por exemplo, /static/js/main.2d1d08c1.chunk.js) não corresponde ao caminho real para o arquivo (por exemplo, )./wp-content/plugins/react-wordpress/widget/build/static/js/main.2d1d08c1.chunk.js

Nesta etapa, você corrigirá esse problema informando ao React onde o diretório de construção está localizado. Você também adicionará uma regra de reescrita do Apache ao .htaccessarquivo para proteger seus arquivos de origem contra exibição no navegador.

Para dar ao React o caminho correto para o seu aplicativo, abra package.jsondentro do diretório do seu aplicativo React:

• sudo nano widget/package.json

Em seguida, adicione a homepagelinha destacada :

{
  "name": "widget",
  "version": "0.1.0",
  "private": true,
  "homepage": "/wp-content/plugins/react-wordpress/widget/build",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "3.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Escreva e feche o arquivo. Em seguida, recrie seu aplicativo React. Mover para o nível superior de widget/:

• cd widget

Em seguida, execute o buildcomando:

• sudo npm run build

Após a conclusão do comando build, inspecione o manifesto do ativo, enviando seu conteúdo para o terminal:

• cat build/asset-manifest.json

Você verá que todos os caminhos dos arquivos foram alterados:

{
  "files": {
    "main.css": "/wp-content/plugins/react-wordpress/widget/build/static/css/main.2cce8147.chunk.css",
    "main.js": "/wp-content/plugins/react-wordpress/widget/build/static/js/main.a28d856a.chunk.js",
    "main.js.map": "/wp-content/plugins/react-wordpress/widget/build/static/js/main.a28d856a.chunk.js.map",
    "runtime~main.js": "/wp-content/plugins/react-wordpress/widget/build/static/js/runtime~main.2df87c4b.js",
    "runtime~main.js.map": "/wp-content/plugins/react-wordpress/widget/build/static/js/runtime~main.2df87c4b.js.map",
    "static/js/2.9ca06fd6.chunk.js": "/wp-content/plugins/react-wordpress/widget/build/static/js/2.9ca06fd6.chunk.js",
    "static/js/2.9ca06fd6.chunk.js.map": "/wp-content/plugins/react-wordpress/widget/build/static/js/2.9ca06fd6.chunk.js.map",
    "index.html": "/wp-content/plugins/react-wordpress/widget/build/index.html",
    "precache-manifest.233e0a9875cf4d2df27d6280d12b780d.js": "/wp-content/plugins/react-wordpress/widget/build/precache-manifest.233e0a9875cf4d2df27d6280d12b780d.js",
    "service-worker.js": "/wp-content/plugins/react-wordpress/widget/build/service-worker.js",
    "static/css/main.2cce8147.chunk.css.map": "/wp-content/plugins/react-wordpress/widget/build/static/css/main.2cce8147.chunk.css.map",
    "static/media/logo.svg": "/wp-content/plugins/react-wordpress/widget/build/static/media/logo.5d5d9eef.svg"
  }
}

Isso indica ao seu aplicativo onde encontrar os arquivos corretos, mas também apresenta um problema: expõe o caminho para o srcdiretório do seu aplicativo , e alguém familiarizado create-react-apppode visitar e começar a explorar os arquivos de origem do seu aplicativo. Tente você mesmo!https://your_domain/wp-content/plugins/react-wordpress/widget/src/index.js

Para proteger os caminhos que você não deseja que os usuários acessem, adicione uma regra de reescrita do Apache ao .htaccessarquivo do WordPress .

• nano /var/www/wordpress/.htaccess

Adicione as quatro linhas destacadas:

<IfModule mod_rewrite.c>
RewriteRule ^wp-content/plugins/react-wordpress/widget/(build|public)/(.*) - [L]
RewriteRule ^wp-content/plugins/react-wordpress/widget/* totally-bogus-erw.php [L]
</IfModule>

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

Isso diz ao Apache para permitir solicitações do navegador para qualquer coisa em ou . Qualquer outra coisa será redirecionada para . A menos que você tenha um arquivo nomeado em seu nível superior, essa solicitação será tratada pelo WordPress, que gerará um erro 404.wp-content/plugins/react-wordpress/widget/build/wp-content/react-wordpress/widget/public/totally-bogus-erw.phptotally-bogus-erw.php

Existem plugins do WordPress, como o Stream , que monitoram a atividade de solicitação e registram 404s. Nos logs, a solicitação mostrará o endereço IP e a página solicitada quando o usuário recebeu o 404. A observação totally-bogus-erw.phpinformará se um endereço IP específico está tentando rastrear o srcdiretório do aplicativo React .

Certifique-se de escrever e sair do arquivo.

Agora que você estabeleceu o roteamento necessário para carregar seus arquivos JavaScript e CSS na página, é hora de usar um código de acesso para adicionar elementos HTML à página com a qual o JavaScript irá interagir para renderizar seu aplicativo.

Etapa 7 - Criando um código curto

Os códigos de acesso tornam possível inserir blocos HTML complexos interpolados com dados do servidor, com uma sintaxe in-page muito simples. Nesta etapa, você criará e registrará um código de acesso do WordPress e o utilizará para incorporar seu aplicativo na página.

Navegue para o nível superior do seu plug-in:

• cd /var/www/wordpress/wp-content/plugins/react-wordpress/

Crie um novo arquivo PHP que conterá o código de acesso:

• touch includes/shortcode.php

Em seguida, edite seu arquivo PHP principal para que includes/shortcode.phpseja necessário quando o plug-in for carregado. Primeira abertura react-wordpress.php:

• nano react-wordpress.php

Em seguida, adicione a seguinte linha destacada:

<?php
/**
 * @wordpress-plugin
 * Plugin Name:       Embedding React In Wordpress
 */

defined( 'ABSPATH' ) or die( 'Direct script access diallowed.' );

define( 'ERW_WIDGET_PATH', plugin_dir_path( __FILE__ ) . '/widget' );
define( 'ERW_ASSET_MANIFEST', ERW_WIDGET_PATH . '/build/asset-manifest.json' );
define( 'ERW_INCLUDES', plugin_dir_path( __FILE__ ) . '/includes' );

require_once( ERW_INCLUDES . '/enqueue.php' );
require_once( ERW_INCLUDES . '/shortcode.php' );

Escreva e feche o arquivo.

Agora, abra o arquivo shortcode recém-criado:

• nano includes/shortcode.php

Adicione o seguinte código:

<?php
// This file enqueues a shortcode.

defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );

add_shortcode( 'erw_widget', function( $atts ) {
  $default_atts = array();
  $args = shortcode_atts( $default_atts, $atts );

  return "<div id='erw-root'></div>";
});

Este código contém principalmente clichê. Ele registra um código de acesso nomeado erw_widgetque, quando chamado, imprime <div id="erw-root"></div>, o elemento raiz do aplicativo React, na página.

Salve e saia shortcode.php.

Para ver o aplicativo React em ação, você precisará criar uma nova página do WordPress e adicionar o código curto a ela.

Navegue para em um navegador da web. Na parte superior da página, você verá uma barra preta com o logotipo do WordPress à esquerda, seguida por um ícone de casa, o nome do seu site, um ícone e número de comentários e um outro link que indica + Novo . Passe o mouse sobre o botão + Novo e um menu será suspenso. Clique no item de menu que diz Página .https://your_domain/wp-admin

Quando a tela carregar, seu cursor será focado na caixa de texto que diz Adicionar título . Clique lá e comece a digitar para atribuir à nova página um título relevante. Este tutorial usará o My React App :

Supondo que você esteja usando o editor WordPress Gutenberg , você verá uma