WordPress Playground expliqué : comment nous l'utilisons chez Wpmet

Voulez-vous exécuter WordPress dans votre navigateur ? Généralement, vous avez besoin d’un serveur d’hébergement et suivez plusieurs étapes pour installer un site WordPress. Cependant, WordPress Playground installe WordPress en un seul clic.

Il n’y a pas d’étapes fastidieuses, de difficultés techniques, d’hébergement ou d’appareil requis pour créer un site Web WordPress. Vous pouvez accéder WordPress Playground à tout moment et sans aucun argent. Ainsi, il permet aux utilisateurs d’effectuer diverses tâches telles que les tests, l’expérimentation, le débogage et bien plus facilement.

Sachons qu'est-ce que WordPress Playground et comment utiliser WordPress Playground. Nous partagerons notre réelle expérience d’utilisation de cet outil sur Wpmet. Vous apprendrez comment nos développeurs, concepteurs et rédacteurs utilisent cet outil à différentes fins.

Qu’est-ce que WordPress Playground ?

WordPress Playground est comme une zone de quarantaine numérique temporaire pour les utilisateurs de WordPress. Ce projet open source leur permet de expérimenter, pratiquer et apprendre cette plateforme CMS sans affecter leurs sites Web d'origine. 

Vous n'avez pas besoin de vous connecter à un serveur PHP ou à une base de données et vous n'avez pas non plus besoin de vous connecter. WordPress Playground est plutôt une solution instantanée et unique qui peut fournir une expérience auto-hébergée sur votre navigateur depuis n'importe quel appareil. 

Et vous pouvez installer et utiliser n’importe quel plugin et thème comme vous le faites régulièrement. Cependant, un inconvénient est toute la personnalisation que vous avez effectuée sur WordPress Playground. disparaît lorsque vous rechargez ou actualisez l'onglet du navigateur. Mais vous pouvez également importer et exporter ces personnalisations vers votre vrai site Web.

Ensuite, nous partagerons nos cas d'utilisation de WordPress Playground sur Wpmet. 

Les nombreux cas d’utilisation de WordPress Playground !

WordPress Playground crée un environnement sandbox pour les développeurs pour effectuer des tâches utiles et polyvalentes telles que tester des extraits de code, examiner des plugins ou des thèmes, présenter une démo de projet, l'intégrer à des sites en direct et bien d'autres encore. 

Voyons quelques domaines clés :

Testez la dernière version de WordPress

Cette fonctionnalité pratique de WordPress Playground svous préserve de tout conflit potentiel car vous avez la possibilité de faire des tests de compatibilité de tous les plugins et thèmes que vous utilisez. En outre, il vous aide à explorer tous les nouveaux paramètres et fonctionnalités de la dernière version.

Pour le développement de plugins et de thèmes

Quelle est la condition initiale pour un développeur de thème ou de plugin après avoir terminé un projet ? Il est évident qu'ils ont besoin de tester leur nouveau produit sur un site Web en direct et WordPress Playground répond à cette demande absolue. en hébergeant un environnement WordPress réaliste directement depuis votre navigateur.

Problèmes de débogage et de résolution

Identifier et résoudre les problèmes de plugins et de thèmes n'est pas idéal pour un site Web en direct. Par conséquent, WordPress Playground peut être l’endroit idéal pour cela. Vous pouvez aussi comprendre les conflits entre différents thèmes et plugins car il n'y a aucune restriction sur l'installation et l'activation d'autres outils.

Apprentissage et formation

Habituellement, les nouveaux apprenants ne peuvent pas initialement posséder ou accéder à un site Web en direct. Et lorsqu’ils en ont un, il peut être risqué de travailler sur un site Web en direct sans aucune expérience. Ainsi, les débutants peuvent facilement s’entraîner à utiliser WordPress Playground car il simule de vrais sites WordPress.

Développement personnalisé et prototypage

Un autre avantage technique de l'utilisation de WordPress Playground est la possibilité de déployer et de tester des scripts, des fonctions ou des extraits de code personnalisés dans un environnement de type Sandbox.

La technologie derrière WP Playground

WordPress Playground configure instantanément un nouvel environnement WordPress sans aucune assistance des serveurs Web et des bases de données. Pour ce faire, cela dépend principalement de trois technologies :

WebAssembly (Wasm): Le WordPress Playground fonctionne sur un navigateur avec le support de WebAssembly (Wasm). Cette technologie fonctionne grâce à une instruction binaire entre les fichiers PHP et JavaScript. Ainsi, les sites WordPress peuvent être hébergés sans serveur traditionnel et être compatibles avec un navigateur.

Base de données SQLite : WordPress utilise MySQL comme système de gestion de base de données (SGBD). Il ne peut pas être exécuté sans serveur. En raison de ce WordPress Playground utilise SQLite, un moteur de base de données SQL autonome et sans serveur. au lieu de MySQL. Il permet aux instances WordPress de fonctionner dans un navigateur.

API Service Worker et Worker Threads: Ces outils Web vous permettent de modifier les requêtes et réponses Web pour exécuter des applications PHP sans interruption dans votre navigateur. 

Comment utiliser l'aire de jeu WordPress

Accéder au WordPress Playground est simple. Depuis votre navigateur Web, dirigez-vous vers ce lien de domaine https://playground.wordpress.net/ 

Le chargement sur votre écran prendra quelques secondes. Une fois cela fait, vous verrez le front-end d’un site Web prêt à l’emploi construit avec un thème WordPress par défaut.

Cependant, il existe d’autres façons de démarrer avec le terrain de jeu WordPress.

Essayez différents liens de terrain de jeu

Outre les liens ci-dessus, vous pouvez commencer en utilisant divers liens pour accéder à différents environnements. Pour essayer une spécificité version de WordPress et version PHP, vous pouvez naviguer avec une URL :

Ici, notez les paramètres (php & wp) et modifiez-les ou éditez-les pour définir l'environnement souhaité du terrain de jeu WordPress sans vous soucier d'ajuster des paramètres supplémentaires. 

À consulter nouvelles fonctionnalités et paramètres WordPress, suivez cette URL :

Il lancera un Playground avec la version bêta ou de développement de WordPress.

Utiliser WordPress Playground depuis GitHub

Une bonne chose est que WordPress Playground est un projet open source et vous pouvez apporter votre expertise à son développement depuis GitHub. Vérifiez son dépôt.

Courir WordPress Playground sur un terminal depuis votre environnement local, utilisez la ligne de commande ci-dessous pour cloner le référentiel :

Ou bien, vous pouvez diriger vers le dernière version sur GitHub, via cette ligne de commande :

Une fois que vous avez bien fait, le package WordPress Playground sera disponible dans votre environnement local. Installez-le simplement :

Maintenant, lorsque notre serveur local est opérationnel, vérifiez le terminal. Il y aura une URL du terminal. Comme l'image ci-dessous :

Copiez et collez le lien pour visiter une nouvelle instance Playground. 

De plus, vous pouvez déterminer les versions de WordPress et PHP pour créer votre environnement préféré en insérant quelques instructions dans la commande. Voici un exemple :

Utiliser WordPress Playground à partir de Visual Studio Code

Une autre façon d’utiliser WordPress Playground est à l'aide de l'éditeur Visual Studio Code. Cela ne prend que quelques étapes :

• Connectez-vous à VS Code.
• Recherchez le «Aire de jeux WordPress" extension.

• L'installer montrera une icône WordPress dans votre barre d'activité VS Code.
• Ouvrez un dossier de projet et cliquez sur le bouton Icône WP.
• Ensuite, frappez le « Démarrez le serveur WordPress" bouton.

C'est ça! Vous verrez un nouveau site WordPress sur votre navigateur par défaut. L'extension vous permet également de définir la version de WordPress et PHP.

Aperçu de l’interface utilisateur de WordPress Playground ?

En plus du site Web de test WordPress, la barre supérieure de WordPress Playground comportera quelques paramètres simulant une barre d'outils de navigateur. Voyons-les :

1. Trois points: Sur le côté gauche de la barre supérieure, vous verrez trois points, cliquer sur le vert vous permettra pour zoomer ou dézoomer de l’écran du terrain de jeu.
2. Option de recherche: Il imite la barre de recherche traditionnelle d'un moteur de recherche et vous pouvez voir la page ou publier ici.
3. PHP, version WP, stockage: L'utilisation de cette option vous permettra de modifier le Version PHP, version WordPress et stockage du terrain de jeu.
4. Icône de menu: Une icône de menu en forme de hamburger est située à l'extrémité droite, cliquer dessus révélera une gamme d'options comme Réinitialiser le site, signaler une erreur, télécharger, importer/exporter, afficher les journaux, etc.

Configuration de WordPress Playground

Ensuite, vous devrez configurer WordPress Playground. Votre objectif d’utiliser cet outil déterminera l’environnement. Voyons comment préparer le WordPress Playground en fonction de vos besoins.

Commencez par cliquer sur ceci "PHP 8.0 WP 6.4 – ⚠️Stockage : Aucun"option de menu dans la barre supérieure. Cela ouvrira les paramètres pour Type de stockage, version PHP, et Version WordPress.

En haut, il y aura des paramètres pour Type de stockage:

• Aucun: Sélectionnez cette option tout en effectuant test simple ou vérification d'une fonctionnalité d'un plugin ou d'un thème. Vous perdez tout lorsque vous actualisez ou rechargez cette page.
• Navigateur: En le choisissant, votre travail sera conservé jusqu'à ce que vous fermiez l'onglet de votre navigateur ou vidiez le cache. Et vous aurez la possibilité de supprimer votre travail existant et de commencer à terminer.
• Appareil: C'est comme un hôte local, vous pouvez stocker toutes les données sur votre appareil. Ici, vous devez synchroniser WP Playground avec un répertoire local. (Toujours en version bêta)

Après cela, nous sélectionnerons le Version PHP. Dans la liste déroulante, vous sélectionnerez la version PHP préférée. Ensuite, cochez la case si vous souhaitez charger des extensions comme libxml, openssl, mbsting, etc. 

Et nous vous recommandons de vérifier le L'accès au réseau boîte, il vous donnera accès au plugin de l’organisation WordPress et au répertoire de thèmes.

Ensuite, configurez la version WordPress en sélectionnant votre version préférée. Cependant, WP Playground ne se charge qu'avec la version la plus récente et la version bêta. Donc, si vous souhaitez une ancienne version, cliquez sur le bouton «Besoin d'une ancienne version ?" option.

Une fois que vous avez terminé, appuyez sur le bouton "Appliquer les modifications" et le Playground se chargera avec un site WordPress de test mis à jour.

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

Vous pouvez télécharger un thème ou un plugin dans Playground comme vous le faites régulièrement sur n’importe quel site WordPress.

Pour installer et activer un plugin, rendez-vous sur la page plugin de WordPress.org. Vous verrez un Télécharger bouton, cliquez dessus et votre navigateur commencera à télécharger le fichier du plugin.

Pour un plugin WordPress premium, vous pouvez télécharger le fichier du plugin depuis le zone d'adhésion aux plugins.

Ensuite, revenez sur WordPress Playground et cliquez sur le bouton Icône WordPress comme indiqué dans l'image ci-dessus.

Cela vous mènera au tableau de bord. De là, accédez à Plugin > Ajouter un nouveau. Sur la page suivante, cliquez sur le bouton Télécharger le plugin et vous verrez la zone pour insérer le fichier du plugin téléchargé. 

Ensuite, cliquez sur le bouton Installer maintenant. Et vous trouverez également l’option d’activation. C'est ainsi que vous pouvez installer et activer un plugin dans WordPress Playground.
Si vous êtes je vérifie juste un seul plugin, il existe un moyen simple. Vous pouvez utiliser une URL pour installer et activer un plugin, par exemple, l'URL ci-dessous préparera un site avec le Kit de courrier électronique brancher.

Lorsqu'il s'agit d'un thème, le Playground se charge par défaut avec un thème basé sur des blocs Twenty Twenty-Four. Pour le changer, vous devez télécharger le fichier de thème comme nous l'avons montré pour un fichier de plugin.

Ensuite, depuis votre tableau de bord WordPress, accédez à Apparence > Thèmes. Ensuite, cliquez sur le «Ajouter un nouveau thème" bouton en haut de la page. 

Ensuite, appuyez sur le bouton «Télécharger le thème" et joignez le fichier de thème de la même manière que la méthode du plugin.

Comment accéder au répertoire de thèmes et de plugins WordPress depuis WordPress Playground ?

Auparavant, les utilisateurs ne pouvaient pas accéder au répertoire de thèmes et de plugins WordPress à partir de WordPress Playground. Mais c’est possible maintenant. 

Pour cela, vous devez cliquer sur l'option de menu « PHP 8.0 WP 6.4 – ⚠️Storage : Aucun », puis aller sous les paramètres PHP.

Et cochez la case à côté de L'accès au réseau. Par défaut, vous le trouverez décoché. Ce sera activer le plugin WordPress et le répertoire de thèmes à votre aire de jeux WordPress.

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

Souhaitez-vous conserver vos instances Playground pour une utilisation future ? Étant donné que toutes vos personnalisations de terrain de jeu disparaissent lorsque vous actualisez la page ou fermez l'onglet, vous devriez essayer de stocker les données d'une manière ou d'une autre.

Et il existe une solution d'exportation intégrée dans WP Playground. Cliquez sur l'icône de menu à trois lignes à l'extrémité droite de la barre supérieure de WordPress Playground. Cela ouvrira diverses options. 

Ici, sélectionnez le "Télécharger comme ZIP" et les instances Playground commenceront à se télécharger sur votre appareil. 

De même, lorsque vous souhaitez importer un fichier précédemment téléchargé, naviguez dans le menu comme vous le faisiez auparavant. Ensuite, cliquez sur le "Restaurer à partir de .zip" option et vous verrez une fenêtre contextuelle pour joindre votre fichier. Choisissez votre fichier et cliquez sur le bouton «Importer" bouton.

Une fenêtre contextuelle de notification de réussite apparaîtra sur votre écran et mettra à jour WordPress Playground avec votre instance donnée. Frapper D'ACCORD pour fermer la fenêtre contextuelle de notification et continuer.

Comment intégrer WordPress Playground sur votre site Web

L’intégration de WordPress Playground sur votre site Web est simple. Il vous suffit d'utiliser ce HTML étiqueter:

N'oubliez pas quelques points en suivant ce processus :

• Comme vous ajouterez le code HTML ci-dessus tag vers votre éditeur de blocs WordPress, votre écran WordPress Playground peut ne pas avoir la forme et la taille appropriées. Par conséquent, vous pouvez ajouter du code supplémentaire avec ceci HTML étiqueter. 

Vous pouvez l'envelopper avec des balises div et ajouter un remplissage et une marge au conteneur, comme celui-ci :

Une autre chose est que lorsque vous travaillez avec WordPress Playground intégré à un vrai site Web, le le site Web peut subir des temps d'arrêt lorsque le trafic augmente. Pour éviter cela, hébergez Playground sur votre domaine au lieu de Playground.wordpress.net

Inconvénients de l’utilisation de WordPress Playground ?

Malgré ses fonctions et avantages puissants, WordPress Playground présente également certaines limites. Le plus gros inconvénient de WordPress Playground est qu’il ne peut être utilisé que pour des utilisations temporaires. Vous perdrez tout votre travail une fois que vous fermerez l’onglet ou la page du navigateur.

De plus, il existe certaines restrictions quant à l'utilisation de fonctions spécifiques telles que fonctions pcntl_ et XDebug. Il présente également d'autres défauts, comme le manque de gérer l'attribut HTML target=_top" dans les liens et affichant les fenêtres contextuelles JavaScript créées par iFrame.

Emballer!

WordPress Playground est un nouveau projet. Auparavant, il ne prenait pas en charge le répertoire des plugins en raison d'un problème d'accès au réseau. Cependant, ces derniers temps, cette limitation a été surmontée. De plus, le fonctionnalité d'hôte local basée sur le périphérique est déjà en version bêta. 

Il semble donc que ce projet open source s’améliore constamment. Cet outil est alimenté par des technologies puissantes telles que SQLite, Service Worker API, Worker Threads AP et WebAssembly, etc. Et ce qui est bien, c'est que vous profitez de cet excellent outil sur votre navigateur absolument gratuitement. 

FAQ sur le terrain de jeu WordPress