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

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ért használd?

• Telepítés nélkül - Azonnal használható
• Izolált környezet - Nem befolyásol semmit
• Plugin/theme tesztelés - Kipróbálás vásárlás előtt
• Oktatás - WordPress tanuláshoz ideális

---

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:

1. Kattints a Live Preview gombra
2. A Playground betölti a WordPress-t a kiválasztott bővítménnyel
3. 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

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

Témák telepítése

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

Adatok exportálása

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

Adatok importálása

1. Kattints az Import gombra
2. Válaszd ki a korábban exportált .zip-et
3. 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:

1. Telepítsd a "WordPress Playground" extensiont
2. Cmd/Ctrl + Shift + P → "WordPress Playground: Start"
3. 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

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

Hibajelentés reprodukálás

1. Készíts blueprint-et a problémával
2. Oszd meg a linket a fejlesztővel
3. Ő 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

---

Kapcsolódó linkek

• WordPress Playground
• Playground GitHub
• Playground dokumentáció
• Blueprint Builder