Playground kan bygges ind i en webside. Praktisk med hensyn til demonstrationer og test.

• Læg playground i en iframe.
• Prøv at indlæse et design fra en zip med et blueprint.
• Iframen bliver for lille på en traditionel template. Jeg lavede en blank template hvor indholdsblokken gik til kant.
• Playground fungerer bedst, når den ikke kører i en iframe; men til demonstrationer kan det være praktisk.

Prøv også at køre Playground direkte i browseren:

Artikel: How to create custom blueprints

Knappen herunder linker til et blueprint, der indlæser en online fil med fuldt design. Zip-filen er eksporteret fra Playground og ligger på en server. Og så er mit kursus klar online:

Blueprintet ser sådan ud:

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/",
  "login": true,
  "preferredVersions": {
    "wp": "latest",
    "php": "8.3"
  },
  "features": {
    "networking": true
  },
  "steps": [
    {
      "step": "importWordPressFiles",
      "wordPressFilesZip": {
        "resource": "url",
        "url": "https://playground.thoth.dk/kursus2026.zip"
      }
    }
  ]
}

WordPress.org – dokumentation: https://developer.wordpress.com/docs/guides/how-to-create-custom-blueprints/

Hvad er bedst: iframe eller JavaScript location.href?

iframe

Når Playground ligger i en iframe kan man ikke “bryde ud i nye vinduer”, fx når man skal se, hvordan en side ser ud. Det virker lidt bøvlet; men løser faktisk et problem.

Når nye vinduer åbnes mister man Playgrounds muligheder for at arbejde med indstillinger.

Man kan heller ikke gemme indstillinger i en mappe på computeren. Løsningen er at eksportere arbejdet til en zip, der igen kan indlæses via et blueprint.

JavaScript location.href

Åbner simpelt hen en Playground instance i browseren.

location.href = 'https://playground.wordpress.net/'

Se koden på Github.

Her er alle muligheder åbne, og brugeren må gerne bryde ud af vinduerne, som WP går når man fx bruger “Vis indlæg”. Denne mulighed fungerer via location.href.

Om det ene er bedre end det andet? Det kommer an på, hvad du vil.

URL’en og blueprintet

Formatet ser sådan ud:

https://playground.wordpress.net/#{"preferredVersions.... etc. .... }

Json kan se sådan ud:

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/wp-admin/",
  "login": true,
  "preferredVersions": {
    "php": "8.3",
    "wp": "latest"
  },
  "steps": [
    {
      "step": "installPlugin",
      "pluginData": {
        "resource": "wordpress.org/plugins",
        "slug": "woocommerce"
      },
      "options": {
        "activate": true
      }
    },
    {
      "step": "installTheme",
      "themeData": {
        "resource": "wordpress.org/themes",
        "slug": "pendant"
      },
      "options": {
        "activate": true
      }
    },
    {
      "step": "updateUserMeta",
      "meta": {
        "admin_color": "modern"
      },
      "userId": 1
    }
  ]
}

En ældre version af WP (mellemrum osv. får url’en til at se lidt mærkelig ud; men det virker faktisk):

https://playground.wordpress.net/#{%20%22$schema%22:%20%22https://playground.wordpress.net/blueprint-schema.json%22,%20%22preferredVersions%22:%20{%20%22php%22:%20%228.3%22,%20%22wp%22:%20%226.5%22%20}%20}

Prøv det her.

Brug “landingpage” når en bestemt side skal åbnes, fx designmanualen. Man må kunne åbne WP direkte i designmanualen.

Man kan f.eks. åbne direkte i styles editoren:

Videre: zip-filer med design loades.