Tutoriels WordPress de confiance, quand vous en avez le plus besoin.
Guide du débutant pour WordPress
WPB Cup
25 millions+
Sites web utilisant nos plugins
16+
Années d'expérience WordPress
3000+
Tutoriels WordPress par des experts

WordPress Playground – Comment utiliser WordPress dans votre navigateur

Lorsque nous créons des tutoriels pour nos lecteurs, nous avons souvent besoin de moyens rapides pour tester les fonctionnalités, les plugins et les thèmes de WordPress. Après tout, recommander des solutions sans les avoir testées au préalable ne serait pas très utile, n'est-ce pas ?

Voici WordPress Playground : un outil pratique qui vous permet d'explorer WordPress directement dans votre navigateur. Aucune configuration complexe n'est requise, et surtout, aucun risque pour votre site web existant.

Nous avons trouvé WordPress Playground incroyablement utile dans notre propre processus de test, et nous avons découvert plusieurs façons intelligentes de tirer le meilleur parti de ses fonctionnalités. Que vous débutiez avec WordPress, que vous souhaitiez essayer de nouveaux outils en toute sécurité, ou que vous ayez besoin d'un environnement de test rapide, cet outil peut vous faciliter la vie.

Dans ce guide, nous vous expliquerons tout ce que vous devez savoir sur l'utilisation efficace de WordPress Playground.

WordPress PlayGround - Comment utiliser WordPress dans votre navigateur

Qu'est-ce que WordPress Playground ?

WordPress Playground est une instance WordPress temporaire dans le navigateur où vous pouvez expérimenter et en apprendre davantage sur le système de gestion de contenu.

C'est comme un environnement de test où vous pouvez faire toutes sortes de développement WordPress sans configurer un site réel et en ligne.

La page d'accueil de WordPress Playground

Tout ce que vous avez à faire est de vous rendre sur le site web WordPress Playground pour l'ouvrir. Ensuite, vous pouvez utiliser WordPress comme vous le feriez normalement : ajouter de nouvelles pages, installer de nouveaux plugins, essayer de nouveaux thèmes, etc.

Si vous actualisez la page WordPress Playground, toutes les personnalisations disparaîtront. Cependant, vous pouvez également télécharger votre instance WordPress et la téléverser à nouveau sur WordPress Playground.

Comment fonctionne WordPress Playground ?

WordPress Playground repose sur des technologies intéressantes qui vous permettent de tester WordPress sans la configuration habituelle de serveur web et de base de données :

  1. Binaire WebAssembly (Wasm) : Il vous permet d'exécuter du code PHP directement dans votre navigateur web, ce qui permet à WordPress de fonctionner sans serveur traditionnel. Il rend également la plateforme compatible avec tous les navigateurs, de Chrome et Edge à Firefox et Safari.
  2. Base de données SQLite : Au lieu de MySQL, WordPress Playground utilise un système de base de données plus léger basé sur des fichiers appelé SQLite, qui s'exécute directement dans votre navigateur.
  3. APIs Service Worker et Worker Threads : Ces outils web aident à gérer les requêtes et à exécuter des scripts JavaScript en arrière-plan, ce qui permet à WordPress Playground d'exécuter des applications PHP de manière fluide dans votre navigateur.

Ces technologies permettent également aux développeurs d'intégrer WordPress Playground avec node.js, Visual Studio Code, des applications CLI, et même OpenAI.

Avec ces outils, les développeurs peuvent également utiliser WordPress Playground sur une plateforme de développement à des fins de test ou de staging.

Quelles sont les limitations de WordPress Playground ?

Malgré ses avantages, WordPress Playground présente plusieurs limitations, telles que :

  • Les personnalisations dans WordPress Playground sont temporaires – Si vous décidez de ne pas enregistrer les modifications dans le navigateur, vous devrez faire attention à ne pas actualiser la page par inadvertance pour éviter de perdre votre progression.
  • Il peut être sujet aux erreurs – D'après notre expérience de test de plugins avec WordPress Playground, tout ne fonctionnera pas correctement. Vous pouvez donc vous attendre à quelques problèmes ici et là, mais vous pouvez faire part de vos commentaires à WordPress pour améliorer la plateforme.
  • Les problèmes d'iFrame sont courants – Si vous intégrez une instance de WordPress Playground sur votre page Web, vous pouvez vous attendre à quelques problèmes, des actualisations accidentelles à l'iFrame qui ne fonctionne pas.

Maintenant que vous savez ce qu'est WordPress Playground, voyons comment vous pouvez l'utiliser. Vous pouvez utiliser les liens rapides ci-dessous pour naviguer dans notre tutoriel :

Comment configurer WordPress Playground

Pour utiliser WordPress Playground, vous pouvez vous rendre directement sur ce nom de domaine dans votre navigateur web : https://playground.wordpress.net

Une fois sur le site, attendez quelques instants que le Playground se configure. Ensuite, vous verrez le front-end du site utilisant un thème WordPress par défaut.

Si vous utilisez WordPress Playground pour des tests, vous voudrez peut-être configurer l'environnement pour qu'il reflète le logiciel WordPress de votre site web actuel.

Pour ce faire, cliquez sur l'icône d'engrenage « Paramètres » dans le coin supérieur droit.

Ouverture des paramètres de WordPress Playground

La première chose à faire est de sélectionner une version de WordPress pour le Playground. Vous pouvez choisir la version que vous utilisez déjà ou que vous prévoyez d'utiliser pour votre site web WordPress.

WordPress met également à disposition la version « WordPress Nightly ». Il s'agit de la version de développement de WordPress qui inclut les derniers changements apportés par l'équipe de développement de WordPress.

Vous pouvez l'utiliser si vous êtes un développeur de plugins ou de thèmes et que vous souhaitez tester la compatibilité avec la prochaine mise à jour WordPress.

Choix d'une version de WordPress dans Playground

La prochaine chose que vous voudrez configurer est la version PHP.

Nous vous recommandons de la faire correspondre à la version PHP que vous utilisez pour votre site web. Cela dit, vous ne trouverez peut-être pas ici de versions PHP antérieures à 7.0.

Choix d'une version de PHP dans WordPress Playground

Une autre chose que vous pouvez faire dans WordPress Playground est de choisir la langue de votre zone d'administration.

Il y en a des dizaines parmi lesquelles choisir, mais pour des raisons de démonstration, nous utiliserons « Anglais (États-Unis) ».

Choix d'une langue d'administration dans WordPress Playground

En dessous, vous pouvez activer les paramètres « Autoriser l'accès réseau » et « Créer un réseau multisite ».

Nous recommandons d'activer la fonctionnalité d'accès réseau car vous pourrez installer des thèmes et des plugins WordPress directement depuis l'environnement. De cette façon, vous n'aurez pas à les configurer manuellement.

Si vous souhaitez créer un réseau multisite WordPress de test, nous vous suggérons d'activer le deuxième paramètre.

Une fois terminé, cliquez simplement sur « Appliquer les paramètres et réinitialiser le Playground ».

Activation de l'accès réseau dans WordPress Playground

Pour ouvrir la zone d'administration, survolez le menu du titre du site et cliquez sur « Tableau de bord ».

Ou, vous pouvez également accéder à l'Éditeur de site complet en cliquant sur « Modifier le site ».

Ouverture de l'éditeur d'administration ou de l'éditeur de site complet dans WordPress Playground

La configuration de base de WordPress Playground est maintenant terminée, mais explorons quelques paramètres supplémentaires qui peuvent améliorer votre expérience.

Comment utiliser les Blueprints de WordPress Playground

Dans WordPress, un blueprint est un simple fichier JSON qui vous aide à configurer rapidement et facilement un environnement WordPress personnalisé. Cela inclut des paramètres tels que la version de WordPress et de PHP à utiliser, quels plugins et thèmes installer, et même quels éléments de conception WordPress avoir.

C'est une excellente option si vous créez fréquemment des environnements de test mais que vous devez les configurer rapidement. Ou si vous avez besoin de partager des configurations WordPress spécifiques avec d'autres.

Pour accéder aux blueprints, cliquez sur la petite icône carrée dans le coin supérieur gauche.

Cliquer sur le bouton des quatre petits carrés dans WordPress Playground

Ensuite, naviguez vers l'onglet « Galerie de blueprints ».

Vous y trouverez des blueprints publics partagés par d'autres utilisateurs. Il existe de nombreuses options parmi lesquelles choisir. Vous pouvez utiliser l'option « Créer un thème de blocs » pour créer un thème de blocs personnalisé à l'aide du plugin Create Block Theme ou essayer « Stylish Press » pour configurer un site web WooCommerce de démonstration.

Nous aimons particulièrement le Stylish Press car il est très utile pour tester les plugins et thèmes WooCommerce pour nos tutoriels.

Pour utiliser n'importe quel blueprint, cliquez simplement sur le bouton « Aperçu » pour le charger dans votre WordPress Playground.

Galerie des Blueprints de WordPress Playground

Vous pouvez également transformer votre propre instance WordPress Playground en blueprint.

Basculez simplement vers l'onglet « Playground temporaire », cliquez sur le bouton à trois points à côté de « Page d'accueil », et sélectionnez « Afficher le blueprint ».

Visualiser une instance de WordPress Playground comme un blueprint

Cela affichera votre instance sous forme de fichier .json de blueprint.

Si vous souhaitez enregistrer le fichier blueprint sur votre ordinateur, cliquez simplement sur l'icône « Enregistrer » en forme de disquette.

Enregistrer une instance de WordPress Playground comme un blueprint

Enregistrer votre blueprint est utile pour référence future, ou vous pouvez le partager dans la galerie de blueprints en suivant les lignes directrices de contribution.

Pour charger un blueprint enregistré, cliquez sur l'icône de dossier ouvert à côté du bouton de disquette.

Sélectionnez simplement votre fichier blueprint.json, et WordPress configurera automatiquement votre environnement en fonction de cette configuration.

Charger un blueprint existant dans WordPress Playground

Comment installer des thèmes et des plugins dans WordPress Playground

Il existe plusieurs façons d'installer des plugins et des thèmes WordPress dans WordPress Playground. Si vous avez activé la fonctionnalité d'accès réseau pendant la configuration, vous pouvez les installer directement depuis le tableau de bord WordPress, tout comme vous le feriez sur un site WordPress ordinaire.

Pour des instructions étape par étape sur le processus d'installation standard, consultez nos guides détaillés :

Si vous n'avez pas activé l'accès réseau ou si vous installez des plugins WordPress premium ou des thèmes, vous devrez suivre la méthode d'installation manuelle.

Tout d'abord, téléchargez le fichier du thème ou du plugin. Pour les options gratuites, allez sur WordPress.org, trouvez le plugin ou le thème souhaité, et cliquez sur le bouton « Télécharger ». Cela enregistre un fichier zip sur votre ordinateur.

Télécharger le plugin gratuit MonsterInsights

Pour les extensions, allez simplement dans le tableau de bord de WordPress Playground et naviguez vers Extensions » Ajouter une nouvelle extension.

Après cela, cliquez sur le bouton « Téléverser une extension » et sélectionnez « Choisir un fichier » pour téléverser le fichier zip de l'extension que vous avez téléchargé précédemment. Enfin, cliquez sur « Installer maintenant ».

Installer un plugin WordPress dans WordPress Playground

Quant aux thèmes, WordPress aura un thème par défaut installé pour vous lorsque vous utiliserez le Playground pour la première fois.

Mais si vous souhaitez utiliser un thème WordPress gratuit ou même premium différent, vous pouvez le télécharger manuellement depuis votre source. Ensuite, dans le Playground, allez dans Apparence » Thèmes et cliquez sur « Ajouter un nouveau thème ».

Ajouter un nouveau thème dans WordPress Playground

Sur l'écran suivant, cliquez sur le bouton « Téléverser un thème ».

Après cela, choisissez le fichier du thème que vous avez téléchargé précédemment et cliquez sur « Installer maintenant ».

Installer un nouveau thème dans WordPress Playground

Une autre façon d'installer des thèmes et des extensions est d'utiliser l'API de requête de WordPress Playground. Cette méthode vous oblige à ajouter des paramètres de requête à l'URL de WordPress Playground.

Ainsi, par exemple, si vous souhaitez installer et tester la version gratuite d'AIOSEO dans WordPress Playground, vous pouvez alors aller sur la page WordPress.org d'AIOSEO. Après cela, notez le slug d'URL d'AIOSEO.

L'URL du plugin gratuit AIOSEO

Maintenant, dans un nouvel onglet de navigateur, tapez l'URL de WordPress Playground avec le slug d'AIOSEO, comme ceci :

https://playground.wordpress.net/?plugin=all-in-one-seo-pack

Lorsque vous appuyez sur la touche « Entrée », WordPress Playground créera automatiquement un nouvel environnement avec le plugin AIOSEO installé.

Si vous souhaitez installer le thème, remplacez simplement le paramètre plugin par theme, comme ceci :

https://playground.wordpress.net/?theme=neve

Vous pouvez même combiner plusieurs paramètres de requête si vous souhaitez installer plusieurs plugins ou thèmes en plus du cœur de WordPress. Assurez-vous simplement de séparer chaque paramètre par le signe esperluette &.

Voici à quoi ressemblera l'URL si vous installez les plugins AIOSEO et MonsterInsights ainsi que le thème Neve :

https://playground.wordpress.net/?theme=neve&plugin=all-in-one-seo-pack&plugin=google-analytics-for-wordpress

Si vous êtes un utilisateur de Chrome, vous pouvez également installer l'extension Open in WordPress Playground. Avec cela, chaque fois que vous accédez à une page de plugin ou de thème sur WordPress.org, vous verrez le bouton ‘Playground’.

Cliquer dessus ouvrira un nouvel environnement WordPress Playground avec le plugin ou le thème installé. Cela simplifie la méthode des paramètres de requête.

Ouvrir le plugin WPForms dans WordPress Playground

Comment sauvegarder une instance de WordPress Playground dans votre navigateur

Disons que vous avez joué avec WordPress Playground et créé une page de destination pour une liste d'attente entière ou même un site web. Ce serait du gâchis de simplement fermer l'onglet et de perdre tout votre travail à jamais.

Heureusement, WordPress Playground vous permet de sauvegarder votre instance dans votre navigateur. Pour ce faire, cliquez sur la petite icône carrée en haut à gauche.

Cliquer sur le bouton des quatre petits carrés dans WordPress Playground

Assurez-vous d'être sur l'onglet ‘Temporary Playground’.

Ensuite, cliquez sur le bouton ‘Save’ et choisissez ‘Save in this browser.’

Enregistrer une instance de Playground dans le navigateur

Maintenant, attendez que WordPress stocke ce playground dans votre navigateur. D'après notre expérience, cela prendra quelques minutes.

Une fois terminé, vous verrez une nouvelle section appelée ‘Saved Playgrounds.’ WordPress nommera automatiquement votre playground avec un nom créatif, comme ‘Happy Sunny Country’ ou ‘Calm Classic Forest.’

Vous pouvez toujours configurer les paramètres de l'environnement ici, comme dans la section précédente. Cependant, vous êtes limité à la modification de la version PHP et des paramètres d'accès réseau.

Après avoir effectué des modifications, cliquez sur ‘Save & Reload’ pour ouvrir l'instance.

Visualiser les instances de WordPress Playground enregistrées

Maintenant, WordPress sauvegardera chaque modification que vous apportez à l'instance Playground, même si vous fermez l'onglet du navigateur.

WordPress vous permet également de ‘Save in a local directory.’ Cliquez simplement sur le même bouton ‘Save’ qu'auparavant et sélectionnez ‘Save in a local directory.’

Ce que nous avons constaté, c'est que cette option télécharge tous les fichiers du Playground décompressés, tout comme une installation WordPress normale. Vous obtiendrez des dossiers WordPress standard comme wp-content, wp-admin, et d'autres.

Enregistrer une instance de WordPress Playground dans le répertoire local

Nous recommandons d'utiliser cette option si vous souhaitez téléverser ces fichiers sur un environnement de staging ou un site web vide sur un service d'hébergement.

C'est particulièrement utile lorsque vous souhaitez d'abord construire dans le Playground WordPress, puis travailler dessus en dehors de l'environnement du Playground.

Comment télécharger/restaurer un site WordPress Playground

Bien que sauvegarder votre playground dans le navigateur soit pratique pour un accès rapide, et que sauvegarder des fichiers décompressés fonctionne bien pour les sites en ligne, vous avez parfois besoin d'une solution intermédiaire.

Télécharger votre Playground WordPress sous forme de fichier zip vous donne une sauvegarde portable facile à stocker et à partager. Vous pouvez également la restaurer sur n'importe quelle instance du Playground WordPress.

Pour commencer, cliquez sur la petite icône carrée en haut à gauche.

Cliquer sur le bouton des quatre petits carrés dans WordPress Playground

Assurez-vous d'être sur l'onglet « Playground temporaire » ou dans un playground sauvegardé. Ensuite, cliquez sur le menu à trois points en haut à droite, à côté du bouton « Page d'accueil ».

Cliquez sur « Télécharger en .zip » et votre navigateur commencera à télécharger le fichier sur votre ordinateur.

Télécharger une instance de WordPress Playground dans un fichier zip

Votre navigateur commencera alors à télécharger le fichier sur votre ordinateur.

Pour restaurer votre playground téléchargé, cliquez sur le menu à trois points au-dessus de « Playground temporaire » et sélectionnez « Importer depuis .zip ».

Importer une instance de WordPress Playground

Une fenêtre contextuelle apparaîtra et vous demandera de choisir votre fichier exporté.

Sélectionnez-le et cliquez sur « Importer ».

Téléverser un fichier zip de WordPress Playground

Si le fichier est valide, vous verrez un message de succès, et le Playground se rafraîchira avec votre configuration restaurée.

Cliquez simplement sur « OK » pour fermer la fenêtre contextuelle et commencer à travailler avec votre site restauré.

Un message popup indiquant que l'importation du fichier WordPress Playground a réussi

Une chose intéressante à propos des exportations zip de WordPress Playground est que vous pouvez les utiliser avec Studio by WordPress.com, qui est l'outil de développement local de WordPress.com. Cela vous permet de continuer à travailler sur votre site dans un environnement local approprié.

Tout d'abord, rendez-vous sur le site Studio by WordPress.com et cliquez sur « Télécharger pour Windows » ou « Télécharger pour Mac », selon votre ordinateur.

Téléchargement de Studio par WordPress.com

Ouvrez le fichier téléchargé pour commencer l'installation.

Vous verrez une fenêtre contextuelle indiquant la progression de l'installation.

En attente de l'installation de Studio par WordPress.com

Une fois l'installation terminée, vous êtes prêt à ajouter votre premier site.

Faites simplement glisser votre fichier zip WordPress Playground dans le champ « Importer une sauvegarde ». Vous pouvez donner à votre site le nom qui vous aidera à l'identifier facilement.

Déposer un fichier zip de Playground dans Studio by WordPress.com

Une fois importé, vous verrez le tableau de bord de votre site WordPress local.

Pour commencer à travailler sur votre site, cliquez sur le bouton « Démarrer » dans le coin supérieur droit. Cela rendra votre site web local actif sur votre ordinateur.

Lancement d'un site web local Studio par WordPress.com

Attendez que le bouton « Démarrer » devienne « En cours d'exécution », puis cliquez sur le lien « WP Admin » dans le coin supérieur gauche.

Cela ouvrira votre page d'administration WordPress locale, où vous pourrez continuer à développer votre site.

Connexion à l'administration WordPress d'un site web local Studio par WordPress.com

Comment Importer/Exporter WordPress Playground vers GitHub

Si vous avez un compte GitHub, vous pouvez également exporter et importer votre site depuis WordPress Playground. GitHub est une excellente plateforme qui vous permet de suivre les modifications de votre site web, de sauvegarder vos fichiers et de collaborer avec d'autres utilisateurs.

Commencez par cliquer sur la petite icône carrée dans le coin supérieur gauche.

Cliquer sur le bouton des quatre petits carrés dans WordPress Playground

Pour exporter un site de WordPress Playground vers GitHub, cliquez sur le menu à trois points à côté du bouton « Page d'accueil ».

Ensuite, sélectionnez « Exporter vers GitHub ».

Exporter une instance de WordPress Playground vers GitHub

Dans la fenêtre contextuelle suivante, vous verrez que WordPress vous encourage à enregistrer votre site web sur votre ordinateur comme sauvegarde. Une fois que vous l'avez fait, vous pouvez cocher la case « J'ai exporté mon Playground en zip ».

Ensuite, cliquez sur le bouton « Connecter votre compte GitHub ».

Connecter WordPress Playground à GitHub

Ensuite, vous devez confirmer que vous autorisez WordPress Playground à accéder à vos dépôts.

Cliquez simplement sur « Autoriser adamziel » pour continuer.

Autoriser WordPress Playground dans GitHub

À ce stade, sélectionnez le type de fichiers que vous exportez : plugins, thèmes, répertoire wp-content, ou chemins spécifiques.

Si vous souhaitez exporter tous vos plugins, thèmes, fichiers multimédias, widgets, menus et polices, sélectionnez la dernière option.

Choisir le type de fichier à exporter vers GitHub dans WordPress Playground

Vous devrez également spécifier l'URL du dépôt GitHub public où vous souhaitez exporter le site.

Ensuite, cliquez sur le bouton « Étape suivante ».

Choisir le dépôt public GitHub cible dans WordPress Playground

Une fois que vous avez fait cela, vous devez choisir s'il faut créer une nouvelle demande d'extraction ou mettre à jour une demande existante. À des fins de démonstration, nous choisirons la première option.

Après cela, entrez le chemin dans le dépôt où les modifications doivent être validées.

Vous devrez également insérer un message de validation pour spécifier les modifications apportées à l'aide du terrain de jeu WordPress.

Une fois tout cela terminé, cliquez sur « Créer une demande d'extraction ».

Créer une pull request GitHub dans WordPress Playground

Si l'exportation réussit, WordPress affichera une fenêtre contextuelle avec un lien vers la nouvelle demande d'extraction.

Cliquez simplement sur le lien pour le voir en action.

Lien Nouvelle Pull Request dans WordPress Playground

Maintenant, si vous souhaitez importer un site depuis GitHub dans le terrain de jeu WordPress, cliquez simplement sur le menu à trois points au-dessus de « Terrain de jeu temporaire ».

Ensuite, sélectionnez « Importer depuis GitHub ».

Importer une pull request GitHub dans WordPress Playground

Si vous ouvrez un environnement de terrain de jeu WordPress entièrement nouveau, vous devrez peut-être refaire tout le processus d'autorisation du terrain de jeu GitHub.

Après cela, entrez simplement l'URL du dépôt ou du chemin GitHub que vous souhaitez importer.

Entrer le dépôt ou le chemin GitHub à importer dans WordPress Playground

Ensuite, vous devez spécifier quels fichiers vous importez : thèmes, plugins ou l'intégralité du répertoire wp-content.

Vous pouvez également insérer le chemin du dépôt à partir duquel vous importez à nouveau si nécessaire. Sinon, WordPress remplira automatiquement ce champ lui-même s'il connaît déjà le chemin à importer.

Une fois terminé, cliquez simplement sur « Importer ».

Spécifier les fichiers à importer depuis GitHub dans WordPress Playground

Si l'importation fonctionne, un message de succès s'affichera.

Cliquez simplement sur « OK » pour le fermer.

Importation réussie d'un dépôt ou chemin GitHub dans WordPress Playground

Une autre chose que vous pouvez faire avec WordPress Playground et GitHub est de prévisualiser une requête de tirage GitHub existante du projet WordPress. De cette façon, vous pouvez voir quelles améliorations et développements sont apportés à WordPress et les tester.

Notez qu'au moment de la rédaction, cette fonctionnalité ne fonctionne que pour la prévisualisation des requêtes de tirage des dépôts WordPress Develop ou Gutenberg.

Pour ce faire, vous pouvez cliquer à nouveau sur le bouton du menu à trois points et sélectionner « Prévisualiser une PR WordPress » ou « Prévisualiser une PR Gutenberg ».

Aperçu d'une Pull Request WordPress ou Gutenberg dans Playground

Ensuite, vous pouvez insérer l'URL ou l'ID de la requête de tirage dans le champ approprié.

Après cela, cliquez sur « Go ».

Saisie de l'URL ou du numéro de pull request GitHub WordPress dans WordPress Playground

Comment intégrer WordPress Playground sur votre site web

Si vous rédigez un tutoriel WordPress, vous inclurez probablement des captures d'écran du tableau de bord WordPress pour guider les utilisateurs à travers vos instructions. Cependant, parfois, les captures d'écran n'illustrent pas fidèlement les actions que vous décrivez.

C'est là que WordPress Playground peut s'avérer utile. Vous pouvez l'intégrer sur votre page ou article, offrant aux utilisateurs une expérience de lecture plus interactive. Ils peuvent suivre vos instructions en utilisant Playground.

Tout d'abord, vous devez ouvrir l'éditeur de blocs Gutenberg pour une page ou un article. Une fois là, cliquez sur le bouton d'ajout de bloc '+' et sélectionnez le bloc 'HTML personnalisé'.

Ajout du bloc HTML personnalisé dans l'éditeur de blocs

Maintenant, copiez le code ci-dessous et collez-le dans le bloc HTML :

<iframe src="https://playground.wordpress.net/"></iframe>

Si vous le souhaitez, vous pouvez également ajouter des paramètres de requête à cette URL, comme nous vous l'avons montré précédemment.

Après cela, cliquez sur 'Enregistrer' ou 'Publier' pour rendre les modifications effectives.

Collage du code d'intégration iFrame pour WordPress Playground dans l'éditeur de blocs

WordPress Playground peut avoir un aspect différent selon votre thème.

Dans notre cas, il n'était pas aligné avec les blocs au-dessus, et l'élément lui-même était trop petit pour interagir.

Un exemple de WordPress Playground trop petit lorsqu'il est intégré

Pour éviter cela, vous pouvez utiliser ce code à la place :

<div class="iframe-container"><iframe src="https://playground.wordpress.net/" style="width: 100%; height: 500px"></iframe></div>

Ici, la balise iFrame est encapsulée dans des balises div pour que l'intégration de Playground respecte le remplissage et la marge du conteneur.

Nous avons également ajouté l'attribut style pour définir la largeur de l'iFrame à 100 % de son conteneur, et la hauteur à 500 pixels.

Voici à quoi cela ressemble sur le front-end :

Un exemple de WordPress Playground intégré lorsqu'il est aligné

Comment signaler une erreur dans WordPress Playground

Si vous rencontrez des problèmes avec WordPress Playground, vous pouvez les signaler à l'équipe WordPress pour qu'ils corrigent ces erreurs.

Pour ce faire, cliquez sur la petite icône carrée en haut à gauche.

Cliquer sur le bouton des quatre petits carrés dans WordPress Playground

Après cela, vous pouvez cliquer sur le menu à trois points dans le coin supérieur droit de la page.

Ensuite, cliquez sur l'option 'Signaler une erreur'.

Signalement d'une erreur dans WordPress Playground

Vous devriez maintenant voir une fenêtre contextuelle où vous pouvez décrire comment l'erreur se produit. Vous devriez également insérer l'URL de votre environnement WordPress Playground afin que l'équipe puisse voir ce qui s'est passé exactement.

Une fois terminé, cliquez simplement sur « Signaler l'erreur ».

Description de l'erreur dans WordPress Playground

De plus, WordPress Playground vous permet de consulter les journaux d'erreurs de votre environnement.

Vous pouvez le faire en naviguant vers la section « Journaux » dans l'onglet « Playground temporaire » ou dans l'un des playgrounds que vous avez enregistrés.

Affichage des journaux d'erreurs de WordPress Playground

Foire aux questions sur WordPress Playground

Couvrons quelques questions fréquemment posées sur WordPress Playground.

Pouvez-vous utiliser WordPress dans votre navigateur ?

Oui, WordPress Playground vous permet d'utiliser WordPress directement dans votre navigateur. Vous pouvez créer des sites Web et essayer des thèmes et des plugins avant de les installer sur votre site en ligne.

Puis-je installer des thèmes et des plugins personnalisés dans WordPress Playground ?

Oui, vous pouvez installer et changer de thèmes ou de plugins dans WordPress Playground pour voir s'ils fonctionnent dans la zone d'administration et s'ils sont compatibles avec certaines versions de WordPress.

Puis-je télécharger un site créé avec WordPress Playground sur mon compte d'hébergement ?

Oui, vous pouvez exporter votre site depuis WordPress Playground et l'importer sur votre compte d'hébergement WordPress. Il suffit de sauvegarder vos fichiers WordPress Playground dans un répertoire local, puis de les télécharger sur un site Web vide dans votre compte d'hébergement.

Comment puis-je exécuter des plugins et des thèmes WordPress localement ?

Si vous souhaitez exécuter des plugins et des thèmes WordPress dans un environnement de développement local, vous devez d'abord créer un site WordPress local. Vous pouvez lire notre tutoriel sur comment créer un site WordPress local pour des instructions étape par étape.

Nous espérons que cet article vous a aidé à comprendre ce qu'est WordPress Playground et comment l'utiliser dans votre navigateur. Vous voudrez peut-être aussi consulter notre article sur les meilleurs constructeurs de pages WordPress par glisser-déposer et notre guide sur comment ajouter du contenu dynamique dans WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.

Avis : Notre contenu est financé par nos lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons percevoir une commission. Voir comment WPBeginner est financé, pourquoi c'est important et comment vous pouvez nous soutenir. Voici notre processus éditorial.

La boîte à outils WordPress ultime

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tout professionnel devrait posséder !

Interactions des lecteurs

6 CommentsLeave a Reply

  1. L'outil WordPress Playground est parfait pour tester les mises à jour en toute sécurité.
    Voici ce qui fonctionne très bien pour moi :
    – J'utilise des blueprints pour différents types de sites (par exemple, e-commerce, portfolios)
    – Cela rend les tests super rationalisés
    Un conseil supplémentaire : je recommande de prendre des captures d'écran de vos configurations Playground avant de tester des changements majeurs, car cela aide à suivre quelles combinaisons ont le mieux fonctionné pour des scénarios spécifiques.

  2. J'utilise WordPress depuis un certain temps maintenant, mais je ne connaissais pas WordPress Playground. Ce tutoriel est très utile pour comprendre comment l'utiliser. Je vais le partager avec mes collègues utilisateurs de WordPress. Merci.

  3. Wow, c'est génial. Je n'avais aucune idée qu'il existait quelque chose comme WordPress Playground. Merci d'avoir élargi mes connaissances. Grâce à wpbeginner, je découvre chaque jour de nouveaux sujets et des choses que j'ignorais auparavant. Je vais certainement essayer aussi le WordPress playground.

  4. C'est fantastique et j'adore ça.
    Je vous dis que WordPress continue de proposer de nouvelles fonctionnalités géniales, WordPress est l'avenir.
    J'aimerais essayer WordPress Playground, l'explorer et découvrir comment il fonctionne en réalité.

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. N'oubliez pas que tous les commentaires sont modérés conformément à notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.