WordPress Playground – Comment utiliser WordPress dans votre navigateur

De nombreux Lecteurs nous ont demandé s’ils pouvaient essayer WordPress, tester des extensions ou jouer avec des thèmes sans avoir à configurer un site complet ou à perturber leur site en direct. Bonne nouvelle : il existe WordPress Playground, un outil qui vous permet de faire tout cela directement dans votre navigateur.

Le terrain de jeu WordPress est assez facile à utiliser, mais nous recevons encore beaucoup de questions à son sujet. Nous avons également notifié que de nombreuses personnes n’utilisent pas toutes ses mis en avant fonctionnalités.

C’est pourquoi nous avons créé ce guide. Peu importe si vous débutez avec WordPress, si vous voulez essayer en toute sécurité de nouvelles extensions ou de nouveaux thèmes sur votre site, ou si vous êtes un développeur/développeuses qui a besoin d’un endroit rapide pour tester des choses. Cet article vous affichera comment utiliser WordPress Playground comme un pro.

Qu’est-ce que le terrain de jeu WordPress et comment fonctionne-t-il ?

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

Il s’agit d’une sorte de bac à sable en ligne où vous pouvez effectuer toutes sortes de développements WordPress sans affecter votre site réel.

Il vous suffit de vous rendre sur le site de WordPress Playground pour l’ouvrir. Ensuite, vous pouvez utiliser WordPress comme vous le feriez normalement : installer de nouvelles extensions, essayer de nouveaux thèmes, ajouter de nouvelles pages, etc.

Si vous actualisez la page du terrain de jeu WordPress, 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 le terrain de jeu WordPress ?

WordPress Playground s’appuie sur des technologies intéressantes qui vous permettent d’utiliser WordPress sans la configuration habituelle d’un serveur web et d’une base de données :

1. WebAssembly binaire (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 fonctionne directement dans votre navigateur.
3. APIs Service Worker et Worker Threads : Ces outils web aident à traiter les demandes 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éveloppeuses d’intégrer WordPress Playground avec node.js, Visual Studio Code et un outil CLI appelé wp-now.

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

Quelles sont les limites de WordPress Playground ?

Malgré ses avantages, WordPress Playground a plusieurs limites, comme par exemple :

• Aucun accès direct au répertoire des thèmes et des plugins – Vous devrez installer les thèmes et les extensions en les téléchargeant et en les téléversant manuellement. Cela dit, une fonctionnalité bêta d’accès au réseau vise à résoudre ce problème.
• Lespersonnalisations dans l’Outil de personnalisation WordPress sont temporaires – Si vous décidez de ne pas enregistrer les modifications dans le navigateur, vous devrez veiller à ne pas actualiser accidentellement la page pour éviter de perdre vos progrès.
• Les problèmes liés aux iFrames sont fréquents – Si vous embarquez une instance du terrain de jeu WordPress sur votre page web, vous pouvez vous attendre à quelques problèmes, allant des actualisations accidentelles aux iFrames qui ne fonctionnent pas.
• Il s’agit d’une mis en fonctionnalité relativement nouvelle . Tout ne fonctionnera pas correctement, vous pouvez donc vous attendre à quelques problèmes ici et là lors de l’exploration de l’environnement.

Cela étant dit, le terrain de jeu est un projet WordPress relativement nouveau. Vous pouvez donc vous attendre à ce que l’équipe publie de nouvelles fonctionnalités et corrige les bogues afin d’améliorer l’expérience des utilisateurs.

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

Comment utiliser le terrain de jeu de WordPress

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

Une fois sur le site, attendez quelques instants pour que le Réglages se configure. Vous verrez ensuite l’interface publique du site utilisant un thème WordPress par défaut.

Si vous utilisez WordPress Playground à des fins de test, vous souhaiterez peut-être configurer l’environnement de manière à ce qu’il corresponde au logiciel WordPress de votre site réel.

Pour ce faire, cliquez sur le menu ‘PHP X WP X – Storage : Aucun ».

Le premier réglage que vous devez définir est le type de stockage. Il y a trois options.

L’option « Aucune » signifie que toutes les modifications seront perdues lorsque la page sera actualisée. En revanche, « Navigateur » signifie que les modifications seront stockées dans le navigateur mais disparaîtront si vous fermez l’onglet du navigateur ou si vous videz votre cache.

Vous pouvez également enregistrer les modifications sur votre ordinateur en sélectionnant « Appareil ». Cette option vous permettra de sélectionner un dossier sur votre ordinateur pour y stocker vos fichiers WordPress Playground, comme pour la création d’un site WordPress en local.

La prochaine chose à configurer est la version de PHP.

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

En dessous, vous pouvez facultativement activer les réglages « Charger les compléments : libxml, openssl, mbstring, iconv, gd » et « Accès au réseau (par exemple, pour les extensions de navigation) ».

Le premier Réglage chargera ces Compléments PHP spécifiques (libxml, openssl, mbstring, iconv, et gd) pour améliorer votre terrain de jeu WordPress. Mais elles ne sont pas nécessaires.

Le second réglage est appelé « Accès au réseau ». Il s’agit d’une fonctionnalité bêta qui connectera votre terrain de jeu WordPress au répertoire officiel des plugins afin que vous puissiez installer des thèmes et des extensions WordPress directement à partir de l’environnement.

Enfin, vous pouvez sélectionner une version de WordPress pour l’aire de jeux. Vous devriez choisir la version que vous utilisez actuellement pour votre blog ou site WordPress.

WordPress met également à disposition la Version du jour de WordPress. Il s’agit de la version de développement/développeuses de WordPress qui inclut les dernières modifications apportées par l’équipe de développement de WordPress.

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

Une fois ces réglages définis, cliquez sur « Appliquer les modifications ».

Et c’est tout pour les Réglages. Vous pouvez maintenant vous rendre dans la zone d’administration pour commencer à tester le bac à sable.

Pour ouvrir la zone d’administration, survolez le menu du titre du site et cliquez sur « Tableau de bord ». Vous pouvez également accéder à l’éditeur de site complet en cliquant sur « Modifier le site ».

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

Il y a deux façons d’installer une extension ou un thème WordPress dans le terrain de jeu WordPress. La première consiste à se rendre sur la page d’un thème ou d’une extension sur WordPress.org et à cliquer sur le bouton « Télécharger ».

Cette opération permet d’enregistrer le fichier zip de l’extension ou du thème sur votre ordinateur.

Ensuite, vous pouvez continuer avec l’installation habituelle et manuelle de WordPress pour les extensions et les thèmes. Vous pouvez lire nos guides pour plus d’instructions :

• Comment installer une extension WordPress (étape par étape pour les débutants)
• Comment installer un thème WordPress (Guide du débutant)

Cette méthode fonctionne également pour tester les extensions WordPress premium et les thèmes WordPress premium.

Pour les plugins, il suffit de se rendre dans le tableau de bord du bord WordPress et de naviguer vers Plugins  » Add New Plugin.

Ensuite, cliquez sur le bouton  » Téléverser l’extension  » et sélectionnez  » Choisir un fichier  » pour téléverser le fichier zip de l’extension que vous avez téléchargé plus tôt. Enfin, cliquez sur « Installer maintenant ».

En ce qui concerne les thèmes, WordPress installera un thème par défaut lors de votre première utilisation de l’aire de jeux.

Mais si vous souhaitez utiliser un nouveau thème WordPress gratuit, vous pouvez le télécharger manuellement à partir du répertoire des thèmes WordPress. Ensuite, dans le terrain de jeu, allez dans Apparence  » Thèmes et cliquez sur  » Ajouter un nouveau thème « .

Dans l’écran suivant, cliquez sur le bouton « Téléverser le thème ».

Ensuite, choisissez le fichier de thème que vous avez téléchargé plus tôt et cliquez sur  » Installer maintenant « .

Si ce processus vous semble un peu fastidieux, ne vous inquiétez pas. WordPress a travaillé sur une fonctionnalité bêta permettant à Playground de se connecter au répertoire des extensions ou des thèmes. Cette fonctionnalité devrait être activée si vous choisissez l’option « Accès au réseau » lors de la configuration.

De cette façon, le terrain de jeu fonctionne comme n’importe quel Tableau de bord WordPress classique et vous pouvez installer des thèmes et des extensions gratuits sans les enregistrer au préalable sur votre ordinateur.

Une autre façon d’installer des thèmes et des extensions dans le tableau de bord WordPress consiste à utiliser l’API de requête de WordPress Playground. Il est nécessaire d’ajouter quelques 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 vous rendre sur la page WordPress.org d’AIOSEO. Ensuite, prenez note du slug de l’URL d‘AIOSEO.

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

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

Lorsque vous appuyez sur la touche « Entrée », WordPress Playground crée automatiquement un nouvel environnement dans lequel l’extension AIOSEO est installée.

Si vous souhaitez installer le thème, il vous suffit de remplacer le paramètre de l’extension par celui du thème, comme suit :

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

Vous pouvez même combiner plusieurs paramètres de requête si vous souhaitez installer plusieurs extensions ou thèmes en plus du cœur de WordPress. Confirmez simplement que vous séparez chaque paramètre avec le signe & de l’esperluette.

Voici à quoi ressemblera l’URL si vous installez les extensions AIOSEO et MonsterInsights ainsi que le thème Astra:

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

Si vous êtes un utilisateur/utilisatrice de Chrome, vous pouvez également installer l’extension Open in WordPress Playground. Grâce à cette extension, chaque fois que vous vous rendrez sur une page de thème ou d’extension sur WordPress.org, vous verrez apparaître le bouton « Playground ».

En cliquant dessus, vous ouvrirez un nouvel environnement WordPress Playground avec l’extension ou le thème installé. Il simplifie la méthode des paramètres de requête.

Comment exporter/importer un site créé avec WordPress Playground

Disons que vous avez joué avec WordPress Playground, ajouté quelques nouvelles publicités à l’aide de l’éditeur Gutenberg, et peut-être même créé un site entier. Ce serait un gâchis de simplement fermer l’onglet et de perdre tous vos progrès pour toujours.

Heureusement, vous pouvez exporter votre site depuis le terrain de jeu WordPress et l’enregistrer sur votre ordinateur. Chaque fois que vous ouvrirez à nouveau le Terrain de jeux, vous pourrez toujours téléverser ce fichier zip exporté pour reprendre là où vous vous étiez arrêté.

Pour ce faire, naviguez vers le menu supérieur de l’aire de jeu et cliquez sur le menu à trois lignes dans le coin supérieur droit. Cliquez ensuite sur « Télécharger au format .zip ».

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

Pour téléverser le fichier dans le terrain de jeu WordPress, il suffit d’ouvrir le site du terrain de jeu et de cliquer à nouveau sur le menu à trois lignes. Cliquez ensuite sur « Restaurer à partir d’un fichier .zip ».

Une fenêtre surgissante vous demande de choisir un fichier que vous avez exporté précédemment.

Une fois le fichier sélectionné, il suffit de cliquer sur « Importation ».

Si le fichier est valide, une fenêtre surgissante vous informera que l’importation a bien eu lieu et le terrain de jeu sera actualisé avec la nouvelle instance.

Il suffit de cliquer sur « OK » pour fermer la fenêtre surgissante.

Importation/Exportation du terrain de jeu WordPress 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 apportées à votre site, de sauvegarder vos fichiers et de collaborer avec d’autres utilisateurs/utilisatrices.

Pour exporter un site de WordPress Playground vers GitHub, cliquez sur le menu à trois lignes et sélectionnez  » Export Pull Request to GitHub « .

Dans la fenêtre surgissante suivante, vous verrez que WordPress vous encourage à enregistrer votre site sur votre ordinateur à titre de sauvegarde. Une fois que vous l’avez fait, vous pouvez cocher la case « J’ai exporté mon terrain de jeu au format zip ».

Ensuite, cliquez sur le bouton  » Se connecter à votre compte GitHub « .

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

Il suffit de cliquer sur « Autoriser adamziel » pour continuer.

À ce stade, allez-y et sélectionnez le type de fichiers que vous exportez : extensions, thèmes ou répertoire wp-content. Si vous souhaitez exporter des extensions, des thèmes, des fichiers multimédias, des widgets, des menus et des polices, sélectionnez la dernière option.

Vous devrez également indiquer l’URL du dépôt GitHub vers lequel vous souhaitez exporter le site. Cliquez ensuite sur le bouton  » Étape par étape « .

Une fois que vous avez fait cela, vous devez choisir si vous créez une nouvelle demande d’extraction ou si vous mettez à jour une demande existante. À des fins de démonstration, nous choisirons la première option.

Saisissez ensuite le chemin d’accès au Dépôt où les modifications doivent être commitées/commises.

Vous devrez également insérer un message de commiteurs/commiteuses pour préciser quelles modifications ont été apportées à l’aide du terrain de jeu de WordPress.

Une fois tout cela fait, cliquez sur « Créer une demande de retrait ».

Si l’exportation est bien réussie, WordPress affichera une fenêtre surgissante avec un lien vers la nouvelle demande.

Il suffit de cliquer sur le lien pour le voir à l’œuvre.

Maintenant, si vous voulez importer un site de GitHub dans WordPress Playground, il suffit de cliquer à nouveau sur le menu à trois lignes.

Ensuite, sélectionnez  » Importation depuis GitHub « .

Si vous ouvrez un tout nouvel environnement WordPress Playground, il se peut que vous deviez refaire tout le processus d’autorisation GitHub Playground.

Après cela, il suffit de cliquer sur l’URL du dépôt GitHub à partir duquel vous souhaitez effectuer l’importation. WordPress fournit quelques exemples si vous n’êtes pas sûr de vous.

Ensuite, vous devez spécifier quels fichiers vous importez : thèmes, extensions ou l’ensemble du répertoire wp-content.

Vous pouvez également insérer le chemin du dépôt à partir duquel vous effectuez l’importation. Une fois cela fait, cliquez simplement sur « Importation ».

Si l’importation fonctionne, un message de réussite surgit, confirmant que le terrain de jeu WordPress sera actualisé avec la nouvelle instance.

Une autre chose que vous pouvez faire avec WordPress Playground et GitHub est de prévisualiser une demande d’extraction GitHub existante du projet WordPress. De cette façon, vous pouvez voir quelles sont les améliorations et les développeurs/développeuses apportées à WordPress et les tester.

Pour ce faire, vous pouvez cliquer à nouveau sur le bouton de menu à trois lignes et sélectionner  » Prévisualisation de la demande de Pull WordPress « .

Ensuite, vous pouvez insérer l’URL ou l’ID de la demande d’extraction dans le champ approprié.

Cliquez ensuite sur « Go ».

Comment utiliser les Blueprints de WordPress Playground

Dans WordPress, le blueprint est un simple fichier JSON qui vous aide à configurer un environnement WordPress personnalisé rapidement et facilement. Il comprend des réglages tels que la version de WordPress et de PHP à utiliser, les extensions et les thèmes à installer, ainsi que la page de démarrage.

Si vous cliquez sur le menu à trois lignes en haut de la page WordPress Playground, vous pouvez sélectionner « Edit the Blueprint » pour modifier la version du code de votre environnement.

Voici à quoi ressemble la page « Blueprint ».

À partir de là, vous pouvez modifier le code, l’enregistrer sur votre ordinateur pour le partager ultérieurement, ou même exécuter le Blueprint d’un autre utilisateur/utilisatrice. Confirmez simplement que vous connaissez les bases du codage avec WordPress pour que le Blueprint fonctionne correctement.

Vous pouvez consulter les exemples d’autres personnes dans la galerie WordPres Blueprints.

Comment embarquer le terrain de jeu WordPress sur votre site

Si vous écrivez un tutoriel WordPress, vous inclurez probablement des captures d’écran du Tableau de bord WordPress pour guider les utilisateurs/utilisatrices à travers vos instructions. Cependant, il arrive que les captures d’écran n’illustrent pas correctement les actions que vous décrivez.

C’est là que le terrain de jeu de WordPress peut s’avérer utile. Vous pouvez l’embarquer sur votre page ou votre publication, offrant ainsi aux utilisateurs/utilisatrices une expérience de lecture plus interactive. Ils peuvent suivre vos instructions à l’aide de Playground.

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

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 l’avons affiché précédemment.

Cliquez ensuite sur « Publier » ou « Mettre à jour » pour que les modifications soient directes.

Le terrain de jeu WordPress peut avoir un aspect différent en fonction de votre thème.

Dans notre cas, il n’était pas aligné avec les blocs situés au-dessus de lui, et l’élément lui-même était trop petit pour qu’on puisse interagir avec lui.

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 identifiée par des balises div pour que l’intégration dans l’aire de jeu suive les marges externes et la marge interne du conteneur.

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

Voici à quoi ressemble l’interface publique :

Comment signaler une erreur dans le terrain de jeu de WordPress

Si vous rencontrez des problèmes dans WordPress Playground, vous pouvez les signaler à l’équipe de WordPress afin que ces erreurs soient corrigées. Pour ce faire, vous pouvez cliquer sur le menu à trois lignes en haut de la page et cliquer sur l’option  » Signaler une erreur « .

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

Une fois cela fait, il suffit de cliquer sur « Signaler une erreur ».

En outre, WordPress Playground vous permet de voir les journaux des erreurs de votre environnement.

Pour ce faire, cliquez à nouveau sur le menu à trois lignes et sélectionnez « Voir les connexions ».

Une fenêtre surgissante s’affiche et affiche la liste des erreurs.

Voici à quoi cela ressemble :

Foire aux questions sur le terrain de jeu WordPress

Nous allons aborder les questions les plus fréquemment posées sur le terrain de jeu WordPress.

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 et essayer des thèmes et des extensions avant de les installer sur votre site direct.

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

Oui, vous pouvez installer et modifier des thèmes ou des extensions 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éverser un site réalisé avec WordPress Playground sur mon compte d’hébergement ?

Techniquement, vous pouvez exporter votre site depuis WordPress Playground et l’importer dans votre compte d’hébergeur WordPress. Cependant, comme WordPress Playground utilise la base de données SQLite, vous devrez peut-être convertir la base de données en MySQL pour que le site puisse fonctionner sur un serveur web.

Comment faire fonctionner les extensions et les thèmes WordPress localement ?

Si vous souhaitez exécuter des extensions 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 la création d’un site WordPress local pour obtenir des instructions étape par étape.

Nous espérons que cet article vous a aidé à découvrir ce qu’est WordPress Playground et comment l’utiliser dans votre navigateur. Vous pouvez également consulter notre article sur les meilleurs constructeurs de pages WordPress par glisser-déposer et notre guide sur l ‘ajout de contenu dynamique dans WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.