WordPress Playground - Böngészőben futó WordPress

WordPress Playground használata - WordPress telepítés nélkül, közvetlenül a böngészőben futtatva.

A WordPress Playground egy hivatalos WordPress projekt, amely lehetővé teszi a WordPress futtatását közvetlenül a böngészőben - telepítés, szerver vagy adatbázis nélkül. WebAssembly (WASM) technológiát használ.

Mi az a WordPress Playground?

A WordPress Playground egy teljes WordPress telepítés, amely:

Böngészőben fut - Chrome, Firefox, Edge, Safari
WASM alapú - PHP és SQLite WebAssembly-ben
Ideiglenes - Tab bezárásával törlődik (vagy exportálható)
Offline képes - Egyszer betöltve net nélkül is működik

Használati módok

1. Azonnali kipróbálás

Látogass el: playground.wordpress.net

Azonnal betölt egy friss WordPress telepítés.

2. WordPress.org plugin/téma demó

A WordPress.org-on minden plugin és téma oldalán:

Kattints a Live Preview gombra
A Playground betölti a WordPress-t a kiválasztott bővítménnyel
Teszteld a funkciókat

3. Egyedi konfiguráció

URL paraméterekkel:

https://playground.wordpress.net/?php=8.2&wp=6.4&plugin=query-monitor

4. Blueprint-ek

JSON konfigurációval előre beállított környezet:

{
  "landingPage": "/wp-admin/",
  "phpVersion": "8.2",
  "wordPressVersion": "latest",
  "steps": [
    {
      "step": "installPlugin",
      "pluginZipFile": {
        "resource": "wordpress.org/plugins",
        "slug": "query-monitor"
      },
      "options": {
        "activate": true
      }
    },
    {
      "step": "installTheme",
      "themeZipFile": {
        "resource": "wordpress.org/themes",
        "slug": "developer"
      }
    },
    {
      "step": "login",
      "username": "admin",
      "password": "password"
    }
  ]
}

Főbb funkciók

PHP és WordPress verziók

PHP verziók	WordPress verziók
7.4	5.9+
8.0	6.0+
8.1	6.1+
8.2	6.2+
8.3	latest

Bővítmények telepítése

Playground-ban: Plugins → Add New
Keress és telepíts (WordPress.org-ról)
Vagy tölts fel .zip fájlt

Témák telepítése

Appearance → Themes → Add New
Válassz és aktiválj

Adatok exportálása

Kattints az Export gombra
Letöltődik egy .zip fájl
Tartalmazza:
- wp-content mappa
- Adatbázis
- Beállítások

Adatok importálása

Kattints az Import gombra
Válaszd ki a korábban exportált .zip-et
A Playground betölti az állapotot

URL paraméterek

Alapvető paraméterek

Paraméter	Példa	Leírás
`php`	`?php=8.2`	PHP verzió
`wp`	`?wp=6.4`	WordPress verzió
`plugin`	`?plugin=woocommerce`	Plugin telepítése
`theme`	`?theme=developer`	Téma telepítése
`url`	`?url=/wp-admin/`	Kezdő URL

Kombinált példák

# WooCommerce tesztelés
https://playground.wordpress.net/?plugin=woocommerce&url=/wp-admin/admin.php?page=wc-admin

# Gutenberg fejlesztés
https://playground.wordpress.net/?plugin=developer&url=/wp-admin/post-new.php

# Multisite
https://playground.wordpress.net/?networking=yes

Blueprint példák

Developer környezet

{
  "phpVersion": "8.2",
  "wordPressVersion": "latest",
  "steps": [
    {
      "step": "installPlugin",
      "pluginZipFile": {
        "resource": "wordpress.org/plugins",
        "slug": "query-monitor"
      },
      "options": { "activate": true }
    },
    {
      "step": "installPlugin",
      "pluginZipFile": {
        "resource": "wordpress.org/plugins",
        "slug": "developer"
      },
      "options": { "activate": true }
    },
    {
      "step": "defineWpConfigConsts",
      "consts": {
        "WP_DEBUG": true,
        "WP_DEBUG_LOG": true,
        "SCRIPT_DEBUG": true
      }
    },
    {
      "step": "login"
    }
  ]
}

WooCommerce demo

{
  "landingPage": "/shop/",
  "steps": [
    {
      "step": "installPlugin",
      "pluginZipFile": {
        "resource": "wordpress.org/plugins",
        "slug": "woocommerce"
      },
      "options": { "activate": true }
    },
    {
      "step": "importFile",
      "file": {
        "resource": "url",
        "url": "https://example.com/woo-sample-data.xml"
      }
    }
  ]
}

Fejlesztői használat

Lokális Playground

# npm-mel
npm install -g @wp-playground/cli
wp-playground start

# Vagy Docker-rel
docker run -p 8000:80 playground

VS Code integráció

A WordPress Playground VS Code extension:

Telepítsd a “WordPress Playground” extensiont
Cmd/Ctrl + Shift + P → “WordPress Playground: Start”
Nyílik egy WordPress a VS Code-ban

Programozási használat

import { startPlayground } from '@wp-playground/client';

const client = await startPlayground({
  iframe: document.getElementById('wp-playground'),
  remoteUrl: 'https://playground.wordpress.net/remote.html',
  blueprint: {
    phpVersion: '8.2',
    steps: [
      { step: 'login' }
    ]
  }
});

// WP-CLI parancs futtatása
await client.run({
  code: `<?php
    require '/wordpress/wp-load.php';
    echo get_bloginfo('name');
  ?>`
});

Korlátozások

Ami nem működik

Funkció	Ok
Email küldés	Nincs mail szerver
Külső API hívások	CORS korlátozások
Cron jobs	Nincs háttérfolyamat
Perzisztencia	Tab bezárásakor törlődik*
Nagy fájlok	Memória korlát

*Export/Import funkcióval menthető

Teljesítmény

Böngésző memória korlátja érvényes
Lassabb mint natív PHP
Nem production használatra való

Felhasználási területek

Plugin/téma tesztelés

Töltsd fel a .zip fájlt
Aktiváld
Teszteld a funkciókat
Ha tetszik, vásárolj

Hibajelentés reprodukálás

Készíts blueprint-et a problémával
Oszd meg a linket a fejlesztővel
Ő azonnal látja ugyanazt

Oktatás

WordPress tanfolyamokhoz
Dokumentációs példákhoz
Videós tutorialokhoz

Prototípusok

Gyors ötlet kipróbálás
Koncepció bemutatás
MVP tesztelés

Beágyazás weboldalba

<iframe
  src="https://playground.wordpress.net/?plugin=developer&url=/wp-admin/"
  style="width: 100%; height: 600px; border: none;">
</iframe>

Blueprint beágyazással

<iframe
  src="https://playground.wordpress.net/#blueprint-url:https://example.com/my-blueprint.json"
  style="width: 100%; height: 600px;">
</iframe>

Playground vs Local Development

Szempont	Playground	Local WP/DDEV
Telepítés	Nincs	Szükséges
Sebesség	Közepes	Gyors
Perzisztencia	Nem*	Igen
Email	Nem	Igen
Cron	Nem	Igen
Debugging	Korlátozott	Teljes
Offline	Részben	Igen