Este artigo prático aproveita a flexibilidade do WordPress e a poderosa interface de usuário (UI) do React para o desenvolvimento de temas. Ele demonstra como a integração entre WordPress e React eleva o nível de seus projetos WordPress, guiando você pelas etapas necessárias para criar um tema.
Pré-requisitos
Para acompanhar este artigo, você deve ter o seguinte:
- Um site WordPress. A Kinsta oferece várias opções de configuração, incluindo o desenvolvimento local com o DevKinsta, o painel MyKinsta, fácil de usar, ou de forma programática por meio da API da Kinsta.
- Node.js e npm (Node Package Manager) ou yarn instalados em seu computador
Crie uma estrutura básica de tema WordPress
A criação de uma estrutura básica de tema WordPress envolve a configuração de uma série de arquivos e diretórios que o WordPress usa para aplicar os estilos, as funcionalidades e os layouts do seu tema a um site WordPress.
- Em seu ambiente DevKinsta, acesse a pasta do seu site. Navegue até o diretório wp-content/themes.
- Crie uma nova pasta para o seu tema. O nome da pasta deve ser exclusivo e descritivo — por exemplo, my-basic-theme.
- Na pasta do tema, crie estes arquivos essenciais e deixe-os vazios:
- style.css — Esse é o principal arquivo de folha de estilo. Ele também contém as informações de cabeçalho do seu tema.
- functions.php — Esse arquivo define funções, classes, ações e filtros a serem usados pelo seu tema.
- index.php — Esse é o arquivo de template principal. É necessário para todos os temas.
Se não estiver usando o React, você também deverá criar os seguintes arquivos. Mas, com o React, podemos criar componentes para eles mais tarde.
- header.php — Contém a seção de cabeçalho do seu site.
- footer.php — Contém a seção de rodapé do seu site.
- sidebar.php — Para a seção da barra lateral, se o seu tema incluir barras laterais.
Em seguida, abra o arquivo style.css e adicione o seguinte à parte superior do arquivo:
/*
Theme Name: My Basic Theme
Theme URI: http://example.com/my-basic-theme/
Author: Your Name
Author URI: http://example.com
Description: A basic WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, custom-background
Text Domain: my-basic-theme
*/Esse snippet de código é a seção de cabeçalho do arquivo style.css de um tema WordPress, que contém metadados essenciais como o nome do tema, detalhes do autor, versão e licença. Ele ajuda o WordPress a reconhecer e exibir o tema no painel, incluindo sua descrição e tags para categorização.
Integre o React ao WordPress
A integração do React em um tema WordPress permite que você use a arquitetura baseada em componentes do React para criar interfaces de usuário dinâmicas e interativas em seu site WordPress. Para integrar o React, você usará o pacote @wordpress/scripts.
Essa é uma coleção de scripts reutilizáveis adaptados para o desenvolvimento WordPress. O WordPress o fornece para simplificar a configuração e o processo de build, especialmente quando você integra fluxos de trabalho JavaScript modernos, como o React, aos temas e plugins de WordPress.
Esse conjunto de ferramentas envolve tarefas comuns, facilitando o desenvolvimento com JavaScript no ecossistema WordPress.
Adapte seu tema
Agora que você tem uma estrutura básica de tema WordPress, pode adaptá-lo.
- No diretório do seu tema, cole o seguinte código no arquivo functions.php:
<?php function my_react_theme_scripts() { wp_enqueue_script('my-react-theme-app', get_template_directory_uri() . '/build/index.js', array('wp-element'), '1.0.0', true); wp_enqueue_style('my-react-theme-style', get_stylesheet_uri()); } add_action('wp_enqueue_scripts', 'my_react_theme_scripts');O arquivo functions.php integra o React ao seu tema WordPress. Ele usa as funções
wp_enqueue_scriptewp_enqueue_stylepara adicionar arquivos JavaScript e CSS (folha de estilo em cascata) ao seu tema.A função
wp_enqueue_scriptdo WordPress recebe vários argumentos:- O nome do identificador (
'my-react-theme-app'), que identifica o script de forma exclusiva - O caminho para o arquivo de script
- O array de dependências,
array('wp-element'), que indica que o script depende do wrapper do WordPress para React('wp-element'). - O número da versão
('1.0.0') - A posição
true, que especifica que o script deve ser carregado no rodapé do documento HTML para melhorar o desempenho do carregamento da página
A função
wp_enqueue_stylerecebe os seguintes argumentos:- O nome do identificador
'my-react-theme-style', que identifica a folha de estilo de forma exclusiva - A fonte
get_stylesheet_uri(), que retorna a URL da folha de estilo principal do tema (style.css) e garante que os estilos do tema sejam aplicados
- O elemento
add_action, que vincula uma função personalizada'my_react_theme_scripts'a uma ação específica ('wp_enqueue_scripts'). Isso garante que seus JavaScript e CSS sejam carregados corretamente quando o WordPress se prepara para renderizar a página.
Esse código garante que o arquivo JavaScript compilado do seu aplicativo React, localizado em <your-theme-directory>/build/index.js, e a folha de estilo principal do seu tema sejam carregados com o seu tema.
O diretório/build normalmente vem da construção do seu aplicativo React usando uma ferramenta como
create-react-appou webpack, que agrupa o código React em um arquivo JavaScript minificado e pronto para produção.Essa configuração é essencial para integrar a funcionalidade React ao seu tema WordPress, permitindo experiências de usuário dinâmicas e semelhantes a aplicativos em um site WordPress.
- O nome do identificador (
- Em seguida, atualize o conteúdo do arquivo index.php:
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="app"></div> <?php wp_footer(); ?> </body> </html> - O código no arquivo index.php define a estrutura HTML básica do tema WordPress. Ele inclui hooks para o WordPress inserir os cabeçalhos (
wp_head) e rodapés (wp_footer) necessários, além de umdivcom o IDapponde o aplicativo React é montado.
Configure o React com @wordpress/scripts
- Abra seu terminal e navegue até o diretório do seu tema:
cd wp-content/themes/my-basic-theme - Inicialize um novo projeto Node.js:
npm init -y - Instale
@wordpress/scriptse@wordpress/element:npm install @wordpress/scripts @wordpress/element --save-devObserve que essa etapa pode levar alguns minutos.
- Modifique o arquivo package.json para incluir os scripts
startebuild:"scripts": { "start": "wp-scripts start", "build": "wp-scripts build" },O
'@wordpress/scripts'é usado para iniciar um servidor de desenvolvimento com recarregamento automático para fins de desenvolvimento (start) e para compilar o aplicativo React em ativos estáticos para produção (build).
Crie um projeto React
- Crie um novo diretório chamado src para os arquivos de origem do React em seu tema.
- Dentro da pasta src, crie dois novos arquivos: index.js e App.js.
- Insira o seguinte código no index.js:
import { render } from '@wordpress/element'; import App from './App'; render(, document.getElementById('app'))O código acima importa a função
renderde@wordpress/elemente o componenteApp. Então monta o componenteAppno DOM (Document Object Model). - Em seguida, cole este código no arquivo App.js:
import { Component } from '@wordpress/element'; export default class App extends Component { render() { return ( <div> <h1>Hello, WordPress and React!</h1> {/* Your React components will go here */} </div> ); } }
Finalize e ative o tema
Para ativar seu tema:
- Execute o servidor de desenvolvimento com
npm start. - Ative o novo tema no painel do WordPress navegando até Appearance > Themes, localizando o tema e clicando em Activate.
- Certifique-se de que o processo de build do seu projeto React esteja configurado adequadamente para gerar a saída para o diretório de tema correto, permitindo que o WordPress renderize seus componentes React.
- Visite o frontend do seu site WordPress para ver as alterações em tempo real.
Desenvolva componentes React para o tema
Em seguida, siga uma abordagem baseada em componentes para estender a configuração básica do React em seu tema WordPress com componentes específicos, como um cabeçalho.
Crie o componente de cabeçalho
No diretório src do seu tema, crie um novo arquivo para o componente de cabeçalho. Dê a ele um nome, como Header.js, e adicione o seguinte código:
import { Component } from '@wordpress/element';
class Header extends Component {
render() {
const { toggleTheme, darkTheme } = this.props;
const headerStyle = {
backgroundColor: darkTheme ? '#333' : '#EEE',
color: darkTheme ? 'white' : '#333',
padding: '10px 20px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
};
return (
<header style={headerStyle}>
<div>My WP Theme</div>
<button onClick={toggleTheme}>{darkTheme ? 'Light Mode' : 'Dark Mode'}</button>
</header>
);
}
}
export default Header;Esse código define um componente de cabeçalho usando '@wordpress/element' que estiliza dinamicamente o cabeçalho com base em darkTheme prop. Ele inclui um botão para alternar entre os temas claro e escuro, invocando o comando toggleTheme method passed as a prop.
Crie o componente de rodapé
No diretório src do seu tema, crie um novo arquivo para o componente de rodapé. Dê a ele um nome — por exemplo, Footer.js — e adicione o seguinte código:
import { Component } from '@wordpress/element';
class Footer extends Component {
render() {
const { darkTheme } = this.props;
const footerStyle = {
backgroundColor: darkTheme ? '#333' : '#EEE',
color: darkTheme ? 'white' : '#333',
padding: '20px',
textAlign: 'center',
};
return (
<footer> style={footerStyle}>
© {new Date().getFullYear()} My WP Theme
</footer>
);
}
}
export default Footer;Esse código define um componente de rodapé que renderiza um rodapé com estilo dinâmico com base na propriedade darkTheme e exibe o ano atual.
Atualize o arquivo App.js
Para usar os novos cabeçalho e rodapé, substitua o conteúdo do arquivo App.js pelo seguinte código:
import { Component } from '@wordpress/element';
import Header from './Header';
import Footer from './Footer';
export default class App extends Component {
state = {
darkTheme: true,
};
toggleTheme = () => {
this.setState(prevState => ({
darkTheme: !prevState.darkTheme,
}));
};
render() {
const { darkTheme } = this.state;
return (
<div>
<Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} />
<main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}>
</main>
<Footer darkTheme={darkTheme} />
</div>
);
}
}O processo de build de desenvolvimento, que observa as alterações e recompila seu código, ainda deve estar ativo. Portanto, sua última versão do template deve ser semelhante a esta:
Como lidar com dados de WordPress no React
A integração do conteúdo WordPress nos aplicativos React oferece uma ponte perfeita entre os recursos robustos de gerenciamento de conteúdo do WordPress e o design dinâmico da interface do usuário do React. Isso é possível com a API REST do WordPress.
Para acessar a API REST do WordPress, ative-a atualizando as configurações de permalink. No painel do WordPress, navegue até Settings > Permalinks. Selecione a opção Post name ou qualquer outra opção diferente de Plain e salve suas alterações.
No diretório src do seu tema, crie um novo arquivo chamado Posts.js e adicione este código:
import { Component } from '@wordpress/element';
class Posts extends Component {
state = {
posts: [],
isLoading: true,
error: null,
};
componentDidMount() {
fetch('http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts')
.then(response => {
if (!response.ok) {
throw new Error('Something went wrong');
}
return response.json();
})
.then(posts => this.setState({ posts, isLoading: false }))
.catch(error => this.setState({ error, isLoading: false }));
}
render() {
const { posts, isLoading, error } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
}
if (isLoading) {
return <div>Loading...</div>;
}
return (
<div>
{posts.map(post => (
<article key={post.id}>
<h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
<div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
</article>
))}
</div>
);
}
}
export default Posts;A URL fetch('http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts') pode ser ligeiramente diferente, dependendo do nome de implantação do WP, ou seja, a pasta onde você instalou o WP. Como alternativa, você pode pegar o hostname do site no painel DevKinsta e adicionar o sufixo /wp-json/wp/v2/posts.
O componente Posts é um excelente exemplo dessa integração, demonstrando o processo de obtenção e gerenciamento de dados do WordPress — especificamente artigos — usando a API REST do WordPress.
Ao iniciar uma solicitação de rede no método de ciclo de vida do componente, componentDidMount, o componente recupera com eficiência os artigos de um site WordPress e as armazena em seu estado. Esse método destaca um padrão para incorporar dinamicamente dados do WordPress, como páginas ou tipos de artigos personalizadas, em componentes React.
Para usar um novo componente, substitua o conteúdo do arquivo App.js pelo código a seguir:
import { Component } from '@wordpress/element';
import Header from './Header';
import Footer from './Footer';
import Posts from './Posts'; // Import the Posts component
export default class App extends Component {
state = {
darkTheme: true,
};
toggleTheme = () => {
this.setState(prevState => ({
darkTheme: !prevState.darkTheme,
}));
};
render() {
const { darkTheme } = this.state;
return (
<div>
<Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} />
<main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}>
<Posts /> {/* Render the Posts component */}
</main>
<Footer darkTheme={darkTheme} />
</div>
);
}
}Agora você pode verificar a versão mais recente e final do seu tema. Além do cabeçalho e do rodapé, ele consiste em uma área de conteúdo dinâmico que apresenta os artigos.
Use o tema WordPress do React em um projeto WordPress
A integração de um tema baseado em React em um projeto WordPress começa com a transformação do código React em um formato compatível com o WordPress, aproveitando pacotes como @wordpress/scripts. Essa ferramenta simplifica o processo de build, permitindo que você compile aplicativos React em ativos estáticos que o WordPress pode enfileirar.
A criação do tema é simples com os comandos npm fornecidos por @wordpress/scripts. Executar npm run build no diretório do tema compila o código React em arquivos JavaScript e CSS estáticos.
Em seguida, você coloca esses ativos compilados no diretório apropriado dentro do tema, garantindo que o WordPress possa carregar e renderizar corretamente os componentes React como parte do tema. Uma vez integrado, você pode ativar o tema WordPress do React como qualquer outro, trazendo instantaneamente uma experiência de usuário moderna e semelhante a um aplicativo para o site do WordPress.
Resumo
Ao criar e integrar um tema no WordPress usando os poderosos recursos de interface do usuário do React, você pode liberar o potencial de criação de experiências na web flexíveis, altamente interativas e centradas no usuário.
Se você estiver pronto para colocar seus temas WordPress do React no ar, a Kinsta oferece um serviço de hospedagem gerenciada de WordPress, com infraestrutura segura, Edge Caching e outros recursos que aumentam a velocidade e o desempenho do seu site.
Você está pensando em criar um tema WordPress com React? Por favor, compartilhe algumas dicas sobre por que você acha que isso é melhor, e como fazê-lo.
Deixe um comentário