Cet article pratique exploite la flexibilité de WordPress et la puissante interface utilisateur de React pour le développement de thèmes. Il démontre comment l’intégration de WordPress et de React élève vos projets WordPress en vous guidant à travers les étapes nécessaires à la création d’un thème.
Pré-requis
Pour suivre cet article, vous devez disposer des éléments suivants :
- Un site WordPress. Kinsta propose plusieurs options d’installation, y compris le développement local avec DevKinsta, un tableau de bord MyKinsta convivial, ou par programmation via l’API Kinsta.
- Node.js et npm (Node Package Manager) ou yarn installés sur votre ordinateur
Créer une structure de base pour un thème WordPress
La création d’une structure de base pour un thème WordPress implique la mise en place d’une série de fichiers et de répertoires que WordPress utilise pour appliquer les styles, les fonctionnalités et les mises en page de votre thème à un site WordPress.
- Dans votre environnement DevKinsta, accédez au dossier de votre site. Naviguez jusqu’au répertoire wp-content/themes.
- Créez un nouveau dossier pour votre thème. Le nom du dossier doit être unique et descriptif – par exemple, my-basic-theme.
- Dans le dossier du thème, créez ces fichiers essentiels et laissez-les vides :
- style.css – Il s’agit du principal fichier de feuille de style. Il contient également les informations d’en-tête de votre thème.
- functions.php – Ce fichier définit les fonctions, les classes, les actions et les filtres à utiliser par votre thème.
- index.php – Il s’agit du fichier de modèle principal. Il est nécessaire pour tous les thèmes.
Si vous n’utilisez pas React, vous devez également créer les fichiers suivants. Mais avec React, nous créerons des composants pour eux plus tard.
- header.php – Contient l’en-tête de votre site.
- footer.php – Contient la section de pied de page de votre site.
- sidebar.php – Pour la section de colonne latérale, si votre thème inclut des colonnes latérales.
Ensuite, ouvrez le fichier style.css et ajoutez les éléments suivants au début du fichier :
/*
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
*/Cet extrait de code est la section d’en-tête du fichier style.css d’un thème WordPress, contenant des métadonnées essentielles telles que le nom du thème, les détails de l’auteur, la version et la licence. Il aide WordPress à reconnaitre et à afficher le thème dans le tableau de bord, y compris sa description et ses étiquettes pour la catégorisation.
Intégrer React à WordPress
L’intégration de React dans un thème WordPress vous permet d’utiliser l’architecture basée sur les composants de React pour construire des interfaces dynamiques et interactives dans votre site WordPress. Pour intégrer React, vous utiliserez le paquet @wordpress/scripts.
Il s’agit d’une collection de scripts réutilisables adaptés au développement de WordPress. WordPress le fournit pour simplifier le processus de configuration et de construction, en particulier lors de l’intégration de flux de travail JavaScript modernes, tels que React, dans les thèmes et les extendsions WordPress.
Cet ensemble d’outils enveloppe les tâches courantes, ce qui facilite le développement avec JavaScript dans l’écosystème WordPress.
Adapter votre thème
Maintenant que vous avez une structure de base pour votre thème WordPress, vous pouvez l’adapter.
- Dans le répertoire de votre thème, collez le code suivant dans le fichier 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');Le fichier functions.php intègre React à votre thème WordPress. Il utilise les fonctions
wp_enqueue_scriptetwp_enqueue_stylepour ajouter des fichiers JavaScript et des feuilles de style en cascade (CSS) à votre thème.La fonction WordPress
wp_enqueue_scriptprend plusieurs arguments :- Le nom de la poignée (
'my-react-theme-app'), qui identifie le script de manière unique - Le chemin d’accès au fichier de script
- Le tableau des dépendances,
array('wp-element'), qui indique que le script dépend de l’enveloppe de WordPress pour React('wp-element'). - Le numéro de version
('1.0.0') - La position
true, qui indique que le script doit être chargé dans le pied de page du document HTML pour améliorer les performances de chargement de la page
La fonction
wp_enqueue_styleprend les arguments suivants :- Le nom de la poignée
'my-react-theme-style', qui identifie de manière unique la feuille de style - La source
get_stylesheet_uri(), qui renvoie l’URL de la feuille de style principale du thème (style.css) et garantit l’application des styles du thème
- L’élément
add_action, qui relie une fonction personnalisée'my_react_theme_scripts'à une action spécifique ('wp_enqueue_scripts'). Cela permet de s’assurer que votre JavaScript et votre CSS sont correctement chargés lorsque WordPress se prépare à rendre la page.
Ce code garantit que le fichier JavaScript compilé de votre application React, situé dans <votre répertoire-thème>/build/index.js, et la feuille de style principale de votre thème sont chargés avec votre thème.
Le répertoire /build provient généralement de la compilation de votre application React à l’aide d’un outil tel que
create-react-appou webpack, qui regroupe votre code React dans un fichier JavaScript minifié prêt pour la production.Cette configuration est essentielle pour intégrer les fonctionnalités React dans votre thème WordPress, ce qui permet de créer des expériences utilisateur dynamiques, semblables à celles d’une application, au sein d’un site WordPress.
- Le nom de la poignée (
- Ensuite, mettez à jour le contenu du fichier 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>Le code du fichier index.php définit la structure HTML de base du thème WordPress, y compris les crochets permettant à WordPress d’insérer les en-têtes (
wp_head) et les pieds de page (wp_footer) nécessaires, ainsi qu’undivavec l’IDappoù l’application React est montée.
Configurer React avec @wordpress/scripts
- Ouvrez votre terminal et naviguez jusqu’au répertoire de votre thème :
cd wp-content/themes/my-basic-theme - Initialisez un nouveau projet Node.js :
npm init -y - Installez
@wordpress/scriptset@wordpress/element:npm install @wordpress/scripts @wordpress/element --save-devNotez que cette étape peut prendre quelques minutes.
- Modifiez votre fichier package.json pour inclure un script
startet un scriptbuild:"scripts": { "start": "wp-scripts start", "build": "wp-scripts build" },Le script
'@wordpress/scripts'est utilisé pour démarrer un serveur de développement avec rechargement à chaud à des fins de développement (start) et pour compiler l’application React en ressources statiques pour la production (build).
Créer un projet React
- Créez un nouveau répertoire nommé src pour vos fichiers source React dans votre thème.
- Dans le dossier src, créez deux nouveaux fichiers : index.js et App.js.
- Placez le code suivant dans index.js:
import { render } from '@wordpress/element'; import App from './App'; render(, document.getElementById('app'))Le code ci-dessus importe la fonction
renderde@wordpress/elementet le composantApp. Il monte ensuite le composantAppdans le modèle d’objet du document (DOM). - Collez ensuite ce code dans le fichier 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> ); } }
Finaliser et activer votre thème
Pour activer votre thème :
- Exécutez le serveur de développement avec
npm start. - Activez votre nouveau thème dans le tableau de bord de WordPress en naviguant vers Apparence > Thèmes, en localisant votre thème et en cliquant sur Activer.
- Assurez-vous que le processus de construction de votre projet React est correctement configuré pour sortir dans le bon répertoire de thème, permettant à WordPress de rendre vos composants React.
- Visitez l’interface publique de votre site WordPress pour voir les changements en direct.
Développer des composants React pour le thème
Ensuite, suivez une approche basée sur les composants pour étendre la configuration React de base dans votre thème WordPress avec des composants spécifiques, comme un en-tête.
Créer le composant header
Dans le répertoire src de votre thème, créez un nouveau fichier pour le composant header. Donnez-lui un nom, par exemple Header.js, et ajoutez le code suivant :
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;Ce code définit un composant d’en-tête utilisant '@wordpress/element' qui stylise dynamiquement l’en-tête en fonction de darkTheme prop. Il inclut un bouton permettant de basculer entre les thèmes clair et foncé en invoquant la fonction toggleTheme method passed as a prop.
Créer le composant de pied de page
Dans le répertoire src de votre thème, créez un nouveau fichier pour le composant footer. Donnez-lui un nom – par exemple, Footer.js – et ajoutez le code suivant :
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;Ce code définit un composant de pied de page qui rend un pied de page avec un style dynamique basé sur le prop darkTheme et affiche l’année en cours.
Mettre à jour le fichier App.js
Pour utiliser les nouveaux en-tête et pied de page, remplacez le contenu du fichier App.js par le code suivant :
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>
);
}
}Le processus de développement, qui surveille les changements et recompile votre code, devrait toujours être actif. Ainsi, votre dernière version du modèle devrait ressembler à ceci :
Comment gérer les données de WordPress dans React
L’intégration du contenu de WordPress dans les applications React offre un pont transparent entre les capacités robustes de gestion de contenu de WordPress et le design dynamique de l’interface utilisateur de React. Ceci est possible grâce à l’API REST de WordPress.
Pour accéder à l’API REST de WordPress, activez-la en mettant à jour les réglages du permalien. Sur le tableau de bord d’administration de WordPress, naviguez vers Réglages > Permaliens. Sélectionnez l’option Titre de la publication ou toute autre option que Simple et enregistrez vos modifications.
Dans le répertoire src de votre thème, créez un nouveau fichier nommé Posts.js et ajoutez ce code :
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 fetch('http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts') peut être légèrement différente selon le nom de déploiement de WP – c’est-à-dire le dossier dans lequel vous avez installé WP. Vous pouvez également prendre le nom d’hôte du site dans le tableau de bord DevKinsta et ajouter le suffixe /wp-json/wp/v2/posts.
Le composant Posts est un excellent exemple de cette intégration, démontrant le processus de récupération et de gestion des données WordPress – en particulier les articles – en utilisant l’API REST de WordPress.
En lançant une requête réseau dans la méthode de cycle de vie du composant, componentDidMount, le composant récupère efficacement les articles d’un site WordPress et les stocke dans son état. Cette méthode met en évidence un modèle permettant d’incorporer dynamiquement des données WordPress, telles que des pages ou des types de publication personnalisés, dans des composants React.
Pour utiliser un nouveau composant, remplacez le contenu du fichier App.js par le code suivant :
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>
);
}
}Vous pouvez maintenant vérifier la dernière version finale de votre thème. En plus de l’en-tête et du pied de page, il se compose d’une zone de contenu dynamique qui présente les articles.
Utiliser le thème WordPress basé sur React dans un projet WordPress
L’intégration d’un thème basé sur React dans un projet WordPress commence par la transformation du code React dans un format compatible avec WordPress, en s’appuyant sur des paquets tels que @wordpress/scripts. Cet outil simplifie le processus de construction, vous permettant de compiler les applications React en ressources statiques que WordPress peut mettre en file d’attente.
La construction du thème est simple avec les commandes npm fournies par @wordpress/scripts. L’exécution de npm run build dans le répertoire du thème compile le code React en fichiers statiques JavaScript et CSS.
Vous placez ensuite ces fichiers compilés dans le répertoire approprié du thème, ce qui permet à WordPress de charger et de rendre correctement les composants React dans le cadre du thème. Une fois intégré, vous pouvez activer le thème WordPress React comme n’importe quel autre, apportant instantanément au site WordPress une expérience utilisateur moderne, semblable à celle d’une application.
En résumé
En construisant et en intégrant un thème dans WordPress en utilisant les puissantes capacités d’interface utilisateur de React, vous pouvez libérer le potentiel de création d’expériences web flexibles, hautement interactives et centrées sur l’utilisateur.
Si vous êtes prêt à mettre en ligne vos thèmes WordPress React, Kinsta propose un service d’hébergement WordPress infogéré avec une infrastructure sécurisée, une mise en cache de pointe et d’autres fonctionnalités qui augmentent la vitesse et la performance de votre site.
Envisagez-vous de créer un thème WordPress avec React ? N’hésitez pas à nous faire part de vos conseils sur les raisons pour lesquelles vous pensez que c’est la meilleure solution et sur la manière de procéder.
Laisser un commentaire