Questo articolo-tutorial sfrutta la flessibilità di WordPress e la potente interfaccia utente (UI) di React per lo sviluppo di temi. Dimostra come l’integrazione di WordPress e React possa elevare i vostri progetti WordPress, guidandovi attraverso i passaggi necessari per creare un tema.
Prerequisiti
Per seguire questo tutorial, servono:
- Un sito WordPress. Kinsta offre diverse opzioni di configurazione, tra cui: sviluppo locale con DevKinsta, tramite la dashboard MyKinsta, di facile utilizzo, o in modo programmatico tramite l’API Kinsta.
- Node.js e npm (Node Package Manager) o yarn installati sul computer
Creare una struttura di base per i temi di WordPress
La creazione di una struttura di base di un tema WordPress comporta l’impostazione di una serie di file e directory che WordPress utilizza per applicare gli stili, le funzionalità e i layout del tema a un sito WordPress.
- Nell’ambiente DevKinsta, accediamo alla cartella del sito. Andiamo alla cartella wp-content/themes.
- Creiamo una nuova cartella per il tema. Il nome della cartella deve essere unico e descrittivo, ad esempio my-basic-theme.
- Nella cartella del tema, creiamo questi file essenziali e lasciamoli vuoti:
- style.css: questo è il file principale del foglio di stile. Contiene anche le informazioni dell’header del tema.
- functions.php: questo file definisce le funzioni, le classi, le azioni e i filtri che verranno utilizzati dal tema.
- index.php: è il file principale del template. È necessario per tutti i temi.
Se decidete di non utilizzare React, dovrete creare anche i seguenti file. Ma con React creeremo i componenti per questi file in un secondo momento.
- header.php: contiene la sezione dell’header del sito.
- footer.php: contiene la sezione footer del sito.
- sidebar.php: per la sezione della barra laterale, se il tema include le barre laterali.
Quindi, apriamo style.css e aggiungiamo quanto segue all’inizio del file:
/*
Theme Name: Il mio tema base
Theme URI: http://esempio.com/mio-tema-base/
Author: Il vostro nome
Author URI: http://esempio.com
Description: Un tema WordPress di base.
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: mio-tema-base
*/Questo frammento di codice è la sezione di intestazione del file style.css di un tema WordPress e contiene metadati essenziali come il nome del tema, i dettagli dell’autore, la versione e la licenza. Aiuta WordPress a riconoscere e visualizzare il tema nella bacheca, includendo la sua descrizione e i tag per la categorizzazione.
Integrare React in WordPress
L’integrazione di React in un tema WordPress permette di utilizzare l’architettura basata su componenti di React per costruire interfacce utente dinamiche e interattive all’interno del sito WordPress. Per integrare React, sarà necessario utilizzare il pacchetto @wordpress/scripts.
Si tratta di una raccolta di script riutilizzabili, pensati per lo sviluppo di WordPress. WordPress lo fornisce per semplificare la configurazione e il processo di creazione, soprattutto quando si integrano i moderni flussi di lavoro JavaScript, come React, nei temi e nei plugin di WordPress.
Questo set di strumenti racchiude attività comuni, rendendo più semplice lo sviluppo con JavaScript nell’ecosistema WordPress.
Adattare il tema
Ora che abbiamo una struttura di base del tema WordPress, possiamo adattarlo.
- All’interno della cartella del tema, incolliamo il seguente codice nel file 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');Il file functions.php integra React con il tema WordPress. Utilizza le funzioni
wp_enqueue_scriptewp_enqueue_styleper aggiungere file JavaScript e fogli di stile a cascata (CSS) al tema.La funzione
wp_enqueue_scriptdi WordPress richiede diversi argomenti:- Il nome dell’handle (
'my-react-theme-app'), che identifica in modo univoco lo script - Il percorso del file dello script
- L’array di dipendenze,
array('wp-element'), che indica che lo script dipende dal wrapper di WordPress per React('wp-element'). - Il numero di versione
('1.0.0') - La posizione
true, che indica che lo script deve essere caricato nel footer del documento HTML per migliorare le prestazioni di caricamento della pagina
La funzione
wp_enqueue_styleaccetta i seguenti argomenti:- Il nome dell’handle
'my-react-theme-style', che identifica in modo univoco il foglio di stile - La fonte
get_stylesheet_uri(), che restituisce l’URL del foglio di stile principale del tema (style.css) e assicura che gli stili del tema vengano applicati
- L’elemento
add_action, che aggancia una funzione personalizzata'my_react_theme_scripts'a un’azione specifica ('wp_enqueue_scripts'). Questo assicura che il JavaScript e il CSS siano caricati correttamente quando WordPress prepara il rendering della pagina.
Questo codice assicura che il file JavaScript compilato dell’applicazione React, che si trova in <tua-directory-tema>/build/index.js, e il foglio di stile principale del tema siano caricati con il tema.
La directory /build deriva in genere dalla compilazione dell’applicazione React con uno strumento come
create-react-appo webpack, che raggruppa il codice React in un file JavaScript minificato pronto per la produzione.Questa configurazione è essenziale per integrare le funzionalità React nel tema WordPress, consentendo all’utente un’esperienza dinamica simile a quella di un’app all’interno di un sito WordPress.
- Il nome dell’handle (
- Successivamente, aggiorniamo il contenuto del file 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>Il codice del file index.php definisce la struttura HTML di base del tema WordPress, compresi gli hook per WordPress per inserire gli header (
wp_head) e i footer (wp_footer) necessari e undivcon l’IDappdove viene montata l’applicazione React.
Configurare React con @wordpress/scripts
- Apriamo il terminale e navighiamo nella directory del tema:
cd wp-content/themes/mio-tema-base - Inizializziamo un nuovo progetto Node.js:
npm init -y - Installiamo
@wordpress/scriptse@wordpress/element:npm install @wordpress/scripts @wordpress/element --save-devQuesto passaggio può richiedere alcuni minuti.
- Modifichiamo il file package.json per includere uno script
starte unobuild:"scripts": { "start": "wp-scripts start", "build": "wp-scripts build" },Lo script
'@wordpress/scripts'viene utilizzato per avviare un server di sviluppo con hot reloading per scopi di sviluppo (start) e per compilare l’applicazione React in risorse statiche per la produzione (build).
Creare un progetto React
- Creiamo una nuova cartella denominata src per i file sorgente di React all’interno del tema.
- All’interno della cartella src, creiamo due nuovi file: index.js e App.js.
- Inseriamo il seguente codice in index.js:
import { render } from '@wordpress/element'; import App from './App'; render(, document.getElementById('app'))Il codice precedente importa la funzione
renderda@wordpress/elemente il componenteApp. Poi, monta il componenteAppnel Document Object Model (DOM). - Successivamente, incolliamo questo codice nel file 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> ); } }
Finalizzare e attivare il tema
Per attivare il tema:
- Eseguiamo il server di sviluppo con
npm start. - Attiviamo il nuovo tema nella bacheca di WordPress andando su Aspetto > Temi e cliccando su Attiva.
- Assicuriamoci che il processo di build del progetto React sia configurato in modo corretto per inviare l’output alla directory corretta del tema, consentendo a WordPress di eseguire il rendering dei vostri componenti React.
- Visitiamo il frontend del sito WordPress per vedere le modifiche apportate.
Sviluppare i componenti React per il tema
Successivamente, seguiamo un approccio basato sui componenti per estendere la configurazione React di base del tema WordPress con componenti specifici, come l’header.
Creare il componente header
Nella cartella src del tema, creiamo un nuovo file per il componente header. Diamogli un nome, ad esempio Header.js, e aggiungiamo il seguente codice:
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;Questo codice definisce un componente header utilizzando '@wordpress/element' che stilizza dinamicamente l’header in base a darkTheme prop. Include un pulsante che permette di passare dal tema chiaro a quello scuro richiamando il metodo toggleTheme method passed as a prop.
Creare il componente footer
Nella cartella src del tema, creiamo un nuovo file per il componente footer. Diamogli un nome, ad esempio Footer.js, e aggiungiamo il seguente codice:
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;Questo codice definisce un componente del footer che rende un footer con uno stile dinamico basato sul prop darkTheme e visualizza l’anno corrente.
Aggiornare il file App.js
Per utilizzare il nuovo header e il nuovo footer, sostituiamo il contenuto del file App.js con il seguente codice:
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>
);
}
}Il processo di sviluppo, che controlla le modifiche e ricompila il codice, dovrebbe essere ancora attivo. Quindi, l’ultima versione del template dovrebbe essere simile a questa:
Come gestire i dati di WordPress in React
L’integrazione dei contenuti di WordPress all’interno delle applicazioni React offre un ponte perfetto tra le solide funzionalità di gestione dei contenuti di WordPress e il design dinamico dell’interfaccia utente di React. Questo è possibile grazie all’API REST di WordPress.
Per accedere all’API REST di WordPress, abilitiamola aggiornando le impostazioni dei permalink. Nella bacheca di amministrazione di WordPress, andiamo su Impostazioni > Permalink. Selezioniamo l’opzione Nome del post o qualsiasi altra opzione diversa da Semplice e salviamo le modifiche.
Nella directory src del tema, creiamo un nuovo file chiamato Posts.js e aggiungiamo questo codice:
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;L’URL di fetch('http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts') potrebbe essere leggermente diverso a seconda del nome della distribuzione di WP, cioè della cartella in cui abbiamo installato WP. In alternativa, possiamo prendere l’hostname del sito dalla dashboard di DevKinsta e aggiungere il suffisso /wp-json/wp/v2/posts.
Il componente Posts è un ottimo esempio di questa integrazione e dimostra il processo di acquisizione e gestione dei dati di WordPress, in particolare dei post, utilizzando l’API REST di WordPress.
Avviando una richiesta di rete all’interno del metodo del ciclo di vita del componente, componentDidMount, il componente recupera in modo efficiente i post da un sito WordPress e li memorizza nel suo stato. Questo metodo evidenzia un modello per incorporare dinamicamente i dati di WordPress, come le pagine o i tipi di post personalizzati, nei componenti React.
Per utilizzare il nuovo componente, sostituiamo il contenuto del file App.js con il seguente codice:
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>
);
}
}Ora possiamo controllare la versione più recente e definitiva del tema. Oltre all’header e al footer, consiste in un’area di contenuto dinamico che presenta i post.
Utilizzare il tema WordPress React in un progetto WordPress
L’integrazione di un tema basato su React in un progetto WordPress inizia con la trasformazione del codice React in un formato compatibile con WordPress, sfruttando pacchetti come @wordpress/scripts. Questo strumento semplifica il processo di creazione, permettendo di compilare le applicazioni React in risorse statiche che WordPress può richiedere.
Creare il tema è semplice grazie ai comandi npm forniti da @wordpress/scripts. L’esecuzione di npm run build nella directory del tema compila il codice React in file JavaScript e CSS statici.
Successivamente, questi file compilati vengono posizionati nella directory appropriata all’interno del tema, assicurando che WordPress possa caricare e renderizzare correttamente i componenti React come parte del tema. Una volta integrato, possiamo attivare il tema React per WordPress come attiviamo tutti gli altri, donando immediatamente al sito WordPress un’esperienza utente moderna e simile a quella di un’app.
Riepilogo
Costruendo e integrando un tema in WordPress utilizzando le potenti funzionalità UI di React, potrete sbloccare il potenziale di creazione di esperienze web flessibili, altamente interattive e incentrate sull’utente.
Se siete pronti a rendere operativi i vostri temi React per WordPress, Kinsta offre un servizio di hosting WordPress gestito con un’infrastruttura sicura, un edge caching e altre funzioni che aumentano la velocità e le prestazioni del sito.
State pensando di creare un tema WordPress con React? Condividete con noi i vostri consigli sul perché pensate che sia la soluzione migliore e su come procedere.
Lascia un commento