WordPress Hosting

blueprint json wordpress

Cómo crear vistas previas con instalaciones completas en directo a plugins y temas WordPress: blueprint.json

Por / 15-10-2025 / Avanzado, Blueprint, Experto, JSON / 25 minutos de lectura

Hace ya tiempo que se introdujo la funcionalidad de Vista previa de plugins y temas, que permite que los usuarios prueben tu desarrollo directamente desde el directorio de WordPress.org o desde tu propia web, sin instalarlo en ningún sitio.

boton vista previa plugin wordpress

Este sistema utiliza WordPress Playground para crear una instalación temporal de WordPress directamente accesible desde el navegador, donde tu plugin y/o tema se instala y configura automáticamente, y el usuario, o tú, puede probarlo, ver lo que hace en la web, probar ajustes, todo igual que si lo hubiese instalado en un sitio de pruebas.

Lo mejor de todo es que puedes personalizar esta instalación automática, añadiendo plugins, eligiendo tema, versión de WordPress, PHP, montones de posibilidades.

¿A que he captado tu atención? 😉

Índice de contenidos

¿Para quién es esta guía?

Esta guía cubre dos casos de uso principales:

Programadores que publican plugins o temas en WordPress.org

  • Proceso oficial para añadir el botón «Vista previa«
  • Integración con el repositorio SVN
  • Activación pública de la vista previa

Agencias y desarrolladores independientes

  • Crear demos interactivos de plugins o temas propios
  • Alojar instalaciones demo en tu propia infraestructura
  • Integrar demos en páginas de ventas

Todo lo que debes saber sobre el archivo blueprint.json

El archivo blueprint.json es el corazón del sistema, por eso he recopilado toda la información disponible y la he ordenado para que tengas una guía rápida de su funcionamiento, así como de todas las propiedades disponibles con sus pasos (steps) y ejemplos:

Propiedades principales del blueprint.json

$schema (obligatorio)

Qué hace: Define el esquema JSON para validación y autocompletado en editores.

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json"
}

landingPage

Qué hace: URL donde llegará el usuario después de ejecutar todos los steps.

Ejemplos de uso:

{
  "landingPage": "/wp-admin/options-general.php?page=mi-plugin"
}

Casos típicos:

  • /wp-admin/options-general.php?page=mi-plugin – Página de configuración del plugin
  • /wp-admin/edit.php – Lista de entradas
  • /demo/ – Página frontend con el demo
  • /wp-admin/post.php?post=5&action=edit – Editor de una entrada específica
  • /tienda/ – Página de WooCommerce
  • / – Homepage del sitio

preferredVersions

Qué hace: Especifica las versiones de WordPress y PHP a usar.

{
  "preferredVersions": {
    "php": "8.1",
    "wp": "latest"
  }
}

Opciones disponibles:

  • PHP: "7.4", "8.0", "8.1", "8.2", "8.3", "latest"
  • WordPress: "6.0", "6.1", "6.2", "6.3", "6.4", "6.5", "latest"

Recomendación: Usa "latest" para WordPress para evitar actualizaciones constantes.

phpExtensionBundles

Qué hace: Define qué extensiones PHP estarán disponibles.

{
  "phpExtensionBundles": ["kitchen-sink"]
}

Opciones:

  • "kitchen-sink" – Incluye la mayoría de extensiones comunes (recomendado)
  • Array específico: ["gd", "curl", "zip"] – Solo extensiones específicas

features

Qué hace: Habilita características especiales del entorno.

{
  "features": {
    "networking": true
  }
}

Propiedades disponibles:

  • "networking": true – Esencial para descargar plugins, temas y contenido externo

siteOptions (sintaxis abreviada)

Qué hace: Configura opciones de WordPress directamente.

{
  "siteOptions": {
    "blogname": "Demo de Mi Plugin",
    "admin_email": "[email protected]",
    "permalink_structure": "/%postname%/"
  }
}

login (sintaxis abreviada)

Qué hace: Inicia sesión automáticamente.

{
  "login": true
}

Equivale a:

{
  "steps": [
    {
      "step": "login",
      "username": "admin", 
      "password": "password"
    }
  ]
}

plugins (sintaxis abreviada)

Qué hace: Lista de plugins a instalar y activar.

{
  "plugins": [
    "hello-dolly",
    "woocommerce", 
    "https://mi-servidor.com/mi-plugin.zip"
  ]
}

themes (sintaxis abreviada)

Qué hace: Lista de temas a instalar.

{
  "themes": ["twentytwentyfour", "astra"]
}

Steps (pasos) disponibles – Referencia completa

Los steps son acciones que se ejecutan secuencialmente para configurar el entorno.

login – Iniciar sesión

Qué hace: Autentica automáticamente al usuario como administrador.

{
  "step": "login",
  "username": "admin",
  "password": "password"
}

Parámetros:

  • username (opcional): Por defecto «admin»
  • password (opcional): Por defecto «password»

installPlugin – Instalar plugin

Qué hace: Descarga, instala y opcionalmente activa un plugin.

Desde WordPress.org:

{
  "step": "installPlugin",
  "pluginData": {
    "resource": "wordpress.org/plugins",
    "slug": "woocommerce"
  },
  "options": {
    "activate": true
  }
}

Desde URL externa:

{
  "step": "installPlugin", 
  "pluginData": {
    "resource": "url",
    "url": "https://mi-servidor.com/mi-plugin.zip"
  },
  "options": {
    "activate": true
  }
}

Parámetros:

  • pluginData.resource: "wordpress.org/plugins" o "url"
  • pluginData.slug: Slug del plugin en WordPress.org
  • pluginData.url: URL directa al archivo ZIP
  • options.activate: true para activar tras instalar

installTheme – Instalar tema

Qué hace: Descarga, instala y opcionalmente activa un tema.

{
  "step": "installTheme",
  "themeZipFile": {
    "resource": "wordpress.org/themes", 
    "slug": "astra"
  },
  "options": {
    "activate": true
  }
}

activatePlugin – Activar plugin

Qué hace: Activa un plugin ya instalado.

{
  "step": "activatePlugin",
  "pluginPath": "mi-plugin/mi-plugin.php"
}

activateTheme – Activar tema

Qué hace: Activa un tema ya instalado.

{
  "step": "activateTheme", 
  "themeFolderName": "astra"
}

setSiteOptions – Configurar opciones

Qué hace: Establece opciones de WordPress usando update_option().

{
  "step": "setSiteOptions",
  "options": {
    "blogname": "Mi Demo",
    "admin_email": "[email protected]",
    "permalink_structure": "/%postname%/",
    "users_can_register": "0",
    "show_on_front": "page",
    "page_on_front": 8,
    "woocommerce_currency": "EUR"
  }
}

Opciones comunes:

  • blogname – Título del sitio
  • blogdescription – Descripción del sitio
  • admin_email – Email del administrador
  • permalink_structure – Estructura de permalinks
  • show_on_front – "posts" o "page"
  • page_on_front – ID de página de inicio
  • page_for_posts – ID de página de blog

setSiteLanguage – Definir el idioma activo

Qué hace: Establece el idioma de WordPress por defecto a activar en la instalación

{
"step": "setSiteLanguage",
"language": "es_ES"
}

runPHP – Ejecutar código PHP

Qué hace: Ejecuta código PHP personalizado. Muy potente para configuraciones avanzadas.

{
  "step": "runPHP",
  "code": "<?php require_once 'wordpress/wp-load.php'; update_option('mi_plugin_configurado', true);"
}

Casos de uso típicos

Crear entradas/páginas:

{
  "step": "runPHP",
  "code": "<?php require_once 'wordpress/wp-load.php'; wp_insert_post(array('post_title' => 'Demo Page', 'post_content' => '[mi_shortcode]', 'post_status' => 'publish', 'post_type' => 'page'));"
}

Configurar opciones serializadas:

{
  "step": "runPHP", 
  "code": "<?php require_once 'wordpress/wp-load.php'; update_option('mi_plugin_options', array('opcion1' => 'valor1', 'activo' => true));"
}

Crear menús:

{
  "step": "runPHP",
  "code": "<?php require_once 'wordpress/wp-load.php'; $menu_id = wp_create_nav_menu('Primary Menu'); wp_update_nav_menu_item($menu_id, 0, array('menu-item-title' => 'Inicio', 'menu-item-url' => home_url('/')));"
}

importWxr – Importar contenido

Qué hace: Importa contenido desde un archivo WXR (WordPress eXtended RSS).

{
  "step": "importWxr",
  "file": {
    "resource": "url",
    "url": "https://raw.githubusercontent.com/mi-usuario/mi-plugin/main/demo-content.xml"
  }
}

Cómo generar el archivo WXR:

  1. En tu WordPress local: Herramientas > Exportar
  2. Selecciona «Todo el contenido»
  3. Sube el XML a GitHub o tu servidor
  4. Usa la URL «raw» del archivo

importFile – Importar archivo

Qué hace: Alias de importWxr, funciona igual.

{
  "step": "importFile",
  "file": {
    "resource": "url", 
    "url": "https://mi-servidor.com/contenido.xml"
  }
}

writeFile – Escribir archivo

Qué hace: Crea archivos en el sistema de archivos de Playground.

{
  "step": "writeFile",
  "path": "/wordpress/wp-content/mi-archivo.txt",
  "data": "Contenido del archivo"
}

cp – Copiar archivo

Qué hace: Copia archivos de una ubicación a otra.

{
  "step": "cp",
  "fromPath": "/wordpress/wp-config-sample.php",
  "toPath": "/wordpress/wp-config-backup.php" 
}

mv – Mover archivo

Qué hace: Mueve/renombra archivos.

{
  "step": "mv",
  "fromPath": "/wordpress/old-file.txt",
  "toPath": "/wordpress/new-file.txt"
}

rm – Eliminar archivo

Qué hace: Elimina archivos o directorios.

{
  "step": "rm",
  "path": "/wordpress/wp-content/plugins/hello.php"
}

defineWpConfigConsts – Definir constantes

Qué hace: Añade constantes al archivo wp-config.php.

{
  "step": "defineWpConfigConsts",
  "consts": {
    "WP_DEBUG": true,
    "WP_DEBUG_LOG": true,
    "SCRIPT_DEBUG": true
  }
}

Tablas de referencia rápida

Propiedades blueprint.json

Esta tabla te permite consultar rápidamente todas las propiedades disponibles para configurar tu blueprint.json sin tener que buscar en la documentación completa:

Propiedad Obligatorio Tipo Descripción Ejemplo
$schema SÍ String URL del esquema JSON para validación "https://playground.wordpress.net/blueprint-schema.json"
landingPage NO String URL donde llegará el usuario tras la configuración "/wp-admin/options-general.php?page=mi-plugin"
preferredVersions NO Object Versiones de WordPress y PHP a usar {"php": "8.1", "wp": "latest"}
phpExtensionBundles NO Array Extensiones PHP disponibles ["kitchen-sink"]
features NO Object Características especiales del entorno {"networking": true}
siteOptions NO Object Opciones de WordPress (sintaxis abreviada) {"blogname": "Mi Demo"}
login NO Boolean Iniciar sesión automáticamente (sintaxis abreviada) true
plugins NO Array Lista de plugins a instalar (sintaxis abreviada) ["hello-dolly", "woocommerce"]
themes NO Array Lista de temas a instalar (sintaxis abreviada) ["twentytwentyfour"]
steps NO Array Pasos a ejecutar secuencialmente [{"step": "login", "username": "admin"}]

Steps disponibles

Todos los steps (pasos) que puedes usar en tu blueprint para automatizar la configuración del entorno de demostración.

Step Función Parámetros principales Cuándo usarlo Ejemplo básico
login Acceso automático username, password Siempre (casi obligatorio) {"step": "login"}
installPlugin Instalar y activar plugin pluginData, options.activate Para tu plugin y dependencias {"step": "installPlugin", "pluginData": {"resource": "wordpress.org/plugins", "slug": "mi-plugin"}}
installTheme Instalar y activar tema themeZipFile, options.activate Cuando necesites tema específico {"step": "installTheme", "themeZipFile": {"resource": "wordpress.org/themes", "slug": "astra"}}
activatePlugin Activar plugin ya instalado pluginPath Plugin ya está pero inactivo {"step": "activatePlugin", "pluginPath": "mi-plugin/mi-plugin.php"}
activateTheme Activar tema ya instalado themeFolderName Tema ya está pero inactivo {"step": "activateTheme", "themeFolderName": "astra"}
setSiteOptions Configurar opciones WP options (objeto con opciones) Configurar título, permalinks, etc. {"step": "setSiteOptions", "options": {"blogname": "Mi Demo"}}
setSiteLanguage Definir idioma de WP language (código del idioma) Probar en distintos idiomas. {"step": "setSiteLanguage", "language": "es_ES"}
runPHP Ejecutar código PHP personalizado code Configuraciones complejas, crear entradas {"step": "runPHP", "code": "<?php wp_insert_post(...);"}
importWxr Importar contenido XML file.resource, file.url Añadir entradas/páginas de demo {"step": "importWxr", "file": {"resource": "url", "url": "..."}}
importFile Alias de importWxr file.resource, file.url Igual que importWxr {"step": "importFile", "file": {"resource": "url", "url": "..."}}
writeFile Escribir archivo en filesystem path, data Crear archivos de configuración {"step": "writeFile", "path": "/wordpress/mi-archivo.txt", "data": "contenido"}
cp Copiar archivo fromPath, toPath Duplicar archivos existentes {"step": "cp", "fromPath": "/wp-config-sample.php", "toPath": "/wp-config-backup.php"}
mv Mover/renombrar archivo fromPath, toPath Reorganizar archivos {"step": "mv", "fromPath": "/old.txt", "toPath": "/new.txt"}
rm Eliminar archivo/directorio path Limpiar archivos innecesarios {"step": "rm", "path": "/wordpress/readme.html"}
defineWpConfigConsts Definir constantes en wp-config.php consts Activar debug, definir constantes {"step": "defineWpConfigConsts", "consts": {"WP_DEBUG": true}}

Ejemplos prácticos de vista previa en Playground con plugins que ya conoces

Creo que, más que con ejemplos teóricos, lo vas a pillar mejor si te pongo algunos ejemplos de plugins que ya existen, conoces, y puedes probar directamente en el Blueprint Builder, una joya que desde ya deberías añadir a tus favoritos.

AI Share & Summarize

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "preferredVersions": {
    "php": "8.3",
    "wp": "latest"
  },
  "phpExtensionBundles": [
    "kitchen-sink"
  ],
  "features": {
    "networking": true
  },
  "steps": [
    {
      "step": "login",
      "username": "admin",
      "password": "password"
    },
    {
      "step": "installPlugin",
      "pluginData": {
        "resource": "wordpress.org/plugins",
        "slug": "ai-share-summarize"
    },
    "options": {
      "activate": true
    }
  }
 ],
 "landingPage": "/wp-admin/options-general.php?page=ai-share-summarize"
}

Contact Form 7

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/contacto/",
  "preferredVersions": {
    "php": "8.1", 
    "wp": "latest"
  },
  "features": {
    "networking": true
  },
  "login": true,
  "plugins": ["contact-form-7"],
  "steps": [
    {
      "step": "runPHP",
      "code": "<?php require_once 'wordpress/wp-load.php'; wp_insert_post(array('post_title' => 'Contacto', 'post_name' => 'contacto', 'post_content' => '
Error: Formulario de contacto no encontrado.
', 'post_status' => 'publish', 'post_type' => 'page'));"
    }
  ]
}

Elementor

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/wp-admin/edit.php?post_type=elementor_library",
  "preferredVersions": {
    "php": "8.1",
    "wp": "latest"
  }, 
  "features": {
    "networking": true
  },
  "login": true,
  "themes": ["hello-elementor"],
  "plugins": ["elementor"],
  "steps": [
    {
      "step": "setSiteOptions",
      "options": {
        "elementor_disable_color_schemes": "yes",
        "elementor_disable_typography_schemes": "yes"
      }
    }
  ]
}

Casos de uso para todos

Para que te hagas una idea, aquí tienes una guía rápida de cómo usar los archivos blueprint.json según para qué los vayas a utilizar, según tu necesidad, perfil u objetivo.

Desarrolladores de WordPress.org

Si eres desarrollador y has publicado un plugin o tema en WordPress.org puedes añadir a tu código un archivo blueprint.json y activar la vista previa, que por defecto, si cambias a la vista avanzada, un mensaje te dirá que no está o no es válido.

Así que tampoco verás aún el botón de vista previa al lado del de descarga. Es justo esto lo que vamos a corregir 🙂

Paso 1: Crear el Blueprint

Crea el archivo blueprint.json basándote en los ejemplos anteriores, por ejemplo:

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/wp-admin/options-general.php?page=mi-plugin",
  "preferredVersions": {
    "php": "8.1",
    "wp": "latest"
  },
  "features": {
    "networking": true
  },
  "login": true,
  "siteOptions": {
    "blogname": "Demo de Mi Plugin"
  },
  "steps": [
    {
      "step": "installPlugin",
      "pluginData": {
        "resource": "wordpress.org/plugins",
        "slug": "mi-plugin"
      },
      "options": {
        "activate": true
      }
    }
  ]
}

Paso 2: Probar el Blueprint

Antes de subirlo a SVN, pruébalo:

Opción A: Blueprint Builder (100% recomendado)

  1. Ve a playground.wordpress.net/builder/builder.html
  2. Pega tu JSON
  3. Haz clic en «RUN IT»
  4. ¡¡DISFRUTA!!

Opción B: URL directa

https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/mi-usuario/mi-plugin/main/blueprint.json

Paso 3: Subir blueprint.json al SVN de WordPress.org

El archivo blueprint.json debe ir en una ubicación específica dentro de tu repositorio SVN de WordPress.org.

Estructura de carpetas y archivos requerida para el SVN

tu-plugin/                          # Raíz de tu plugin en SVN
├── trunk/                          # Código actual del plugin
│   ├── tu-plugin.php
│   ├── readme.txt
│   └── includes/
├── tags/                           # Versiones publicadas
│   ├── 1.0.0/…
│   └── 1.0.1/…
└── assets/
    ├── blueprints/ # AQUÍ va el blueprint
    │   └── blueprint.json # Tu archivo blueprint
    ├── banner-1544x500.png
    ├── banner-772x250.png
    ├── icon-128x128.png
    ├── icon-256x256.png
    └── screenshot-1.png
Proceso paso a paso

1. Preparar tu blueprint.json en local

Crea y prueba tu blueprint.json localmente o en el Blueprint Builder hasta que funcione perfectamente.

2. Conectar con tu repositorio SVN

Si es la primera vez que subes un blueprint:

    • Clona tu repositorio completo (si no lo tienes)svn co https://plugins.svn.wordpress.org/tu-plugin-slug ./svn-tu-plugin
    • O actualízalo si ya existecd svn-tu-plugin svn up

3. Crear la estructura de carpetas

  • Ve a la carpeta assets
    cd assets
  • Crea la carpeta blueprints (si no existe)
    mkdir -p blueprints
  • Verifica la estructura
    ls -la
  • Deberías ver:
    banner-*, icon-*, screenshot-*, y ahora blueprints/

4. Copiar tu blueprint.json

  • Cópialo desde tu ubicación local
    cp /ruta/a/tu/blueprint.json blueprints/blueprint.json
  • Verifica que se copió correctamente
    cat blueprints/blueprint.json

5. Añadir al repositorio SVN

  • Añádelo a la carpeta blueprints (primera vez)
    svn add blueprints
  • O solo el archivo si la carpeta ya existía
    svn add blueprints/blueprint.json
  • Verifica qué se va a subir
    svn status
  • Debería mostrar:
    blueprints/blueprint.json

6. Hacer commit

  • Commit del blueprint
    svn ci -m "Add Live Preview blueprint for interactive demo" blueprints/
  • O si quieres incluir username y password
    svn ci -m "Add Live Preview blueprint" \
    --username tu-usuario-wp \
    --password tu-password \ blueprints/
Para actualizaciones del blueprint

Si ya tienes un blueprint y quieres actualizarlo:

  • Ve a tu repositorio SVN
    cd svn-tu-plugin/assets
  • Actualiza el archivo
    cp /ruta/al/nuevo/blueprint.json blueprints/blueprint.json
  • Verifica los cambios
    svn diff blueprints/blueprint.json
  • Haz commit de la actualización
    svn ci -m "Update Live Preview blueprint with new demo content" blueprints/
Verificación tras subir

Inmediatamente después del commit:

  1. Ve a tu plugin en WordPress.org
  2. Accede con la cuenta que uses para contribuir
  3. Haz clic en «Vista avanzada» (solo visible para contribuidores)
  4. Busca la sección de «Vista previa»

Deberías ver algo así abajo del todo de la página de tu plugin:

activar vista previa plugin wordpress

Y el botón para probar la vista previa en la parte superior, al lado del habitual de descarga:

boton probar vista previa plugin wordpress

Diagnóstico de errores en SVN

Error: «File already exists»

Solución: El archivo ya existe, solo actualizarlo:

svn up blueprints/blueprint.json
cp nuevo-blueprint.json blueprints/blueprint.json
svn ci -m "Update blueprint" blueprints/

Error: «Directory not found»

Solución: Crear toda la estructura

mkdir -p assets/blueprints
svn add assets/blueprints --depth empty
svn add assets/blueprints/blueprint.json
svn ci -m "Add blueprints directory and initial blueprint" assets/blueprints/

Error de permisos

Solución: Verificar que eres committer del plugin

svn info

Debe mostrar tu usuario en «Last Changed Author»

Verificar que se subió correctamente:
  • Ver el histórico:
svn log blueprints/blueprint.json
  • Ver contenido remoto
svn cat https://plugins.svn.wordpress.org/tu-plugin/assets/blueprints/blueprint.json
Script automatizado para subir blueprint
#!/bin/bash
# upload-blueprint.sh - Subir blueprint a WordPress.org

PLUGIN_SLUG="tu-plugin"
BLUEPRINT_LOCAL="./blueprint.json"
SVN_DIR="./svn-$PLUGIN_SLUG"

echo " Subiendo blueprint para $PLUGIN_SLUG"

# Validar blueprint local
if [ ! -f "$BLUEPRINT_LOCAL" ]; then
    echo "Error: No se encuentra $BLUEPRINT_LOCAL"
    exit 1
fi

# Validar JSON
if ! jq empty "$BLUEPRINT_LOCAL" 2>/dev/null; then
    echo "Error: Blueprint JSON no válido"
    exit 1
fi

echo "OK: Blueprint válido"

# Actualizar o clonar SVN
if [ -d "$SVN_DIR" ]; then
    echo " Actualizando SVN..."
    cd "$SVN_DIR" && svn up && cd ..
else
    echo " Clonando SVN..."
    svn co "https://plugins.svn.wordpress.org/$PLUGIN_SLUG" "$SVN_DIR"
fi

cd "$SVN_DIR/assets"

# Crear estructura
mkdir -p blueprints

# Copiar blueprint
cp "../../$BLUEPRINT_LOCAL" blueprints/blueprint.json

# Verificar cambios
if svn status | grep -q "blueprint.json"; then
    echo " Cambios detectados"
    
    # Añadir si es nuevo
    svn add blueprints/blueprint.json 2>/dev/null || true
    
    # Mostrar diferencias
    echo " Cambios en blueprint:"
    svn diff blueprints/blueprint.json
    
    # Commit
    svn ci -m "Update Live Preview blueprint" blueprints/
    echo "OK: Blueprint subido correctamente"
    echo " Revisa en: https://wordpress.org/plugins/$PLUGIN_SLUG/advanced/"
else
    echo "Info: No hay cambios en el blueprint"
fi

Uso del script:

chmod +x upload-blueprint.sh
./upload-blueprint.sh

Paso 4: Activar en WordPress.org

  1. Inicia sesión en WordPress.org
  2. Ve a tu plugin en el directorio
  3. Haz clic en «Avanzado» (solo visible para contribuidores)
  4. Prueba con «Probar la vista previa» – Solo tú puedes verlo inicialmente
  5. Haz clic en el botón de «Activa el enlace de la vista previa para NOMBRE DEL PLUGIN» cuando esté listo

Resultado: Aparecerá el botón «Vista previa» junto al botón «Descarga».

Agencias y desarrolladores independientes

Opción 1: Demo incrustada (embed) en tu web

Crea una página HTML que incluya Playground incrustado:

<!DOCTYPE html>
<html>
<head>
    <title>Demo de Mi Plugin</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }
        .container { max-width: 1200px; margin: 0 auto; }
        iframe { width: 100%; height: 800px; border: 2px solid #0073aa; border-radius: 8px; }
        .info { background: #f0f6fc; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="info">
            <h1> Demo interactivo de nuestro plugin</h1>
            <p>Prueba todas las funcionalidades en un entorno real de WordPress. No necesitas registrarte ni instalar nada.</p>
            <ul>
                <li>Entorno WordPress real</li>
                <li>Plugin pre-configurado</li>
                <li>Datos de demostración incluidos</li>
                <li>Completamente seguro</li>
            </ul>
        </div>
        
        <iframe id="wp-playground" title="Demo del Plugin"></iframe>
    </div>

    <script type="module">
        import { startPlaygroundWeb } from 'https://playground.wordpress.net/client/index.js';
        
        const client = await startPlaygroundWeb({
            iframe: document.getElementById('wp-playground'),
            remoteUrl: 'https://playground.wordpress.net/remote.html',
            blueprint: {
                "$schema": "https://playground.wordpress.net/blueprint-schema.json",
                "landingPage": "/wp-admin/options-general.php?page=mi-plugin",
                "preferredVersions": {
                    "php": "8.1",
                    "wp": "latest"
                },
                "features": {
                    "networking": true
                },
                "login": true,
                "siteOptions": {
                    "blogname": "Demo Mi Plugin"
                },
                "steps": [
                    {
                        "step": "installPlugin",
                        "pluginData": {
                            "resource": "url",
                            "url": "https://mi-servidor.com/mi-plugin.zip"
                        },
                        "options": {
                            "activate": true
                        }
                    },
                    {
                        "step": "runPHP",
                        "code": "<?php require_once 'wordpress/wp-load.php'; update_option('mi_plugin_demo_configurado', true); wp_insert_post(array('post_title' => 'Página Demo', 'post_content' => '[mi_shortcode]', 'post_status' => 'publish'));"
                    }
                ]
            }
        });
    </script>
</body>
</html>

Opción 2: Enlace directo con Blueprint alojado

Estructura de archivos:

mi-demo/
├── blueprint.json
├── mi-plugin.zip
├── demo-content.xml
└── README.md

blueprint.json para agencia:

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/",
  "preferredVersions": {
    "php": "8.1",
    "wp": "latest"
  },
  "features": {
    "networking": true
  },
  "login": true,
  "siteOptions": {
    "blogname": "Demo - Mi Plugin Premium",
    "blogdescription": "Descubre todas las funcionalidades"
  },
  "themes": ["astra"],
  "steps": [
    {
      "step": "installPlugin",
      "pluginData": {
        "resource": "url", 
        "url": "https://mi-agencia.com/demos/mi-plugin.zip"
      },
      "options": {
        "activate": true
      }
    },
    {
      "step": "importWxr",
      "file": {
        "resource": "url",
        "url": "https://mi-agencia.com/demos/demo-content.xml"
      }
    },
    {
      "step": "runPHP",
      "code": "<?php require_once 'wordpress/wp-load.php'; update_option('mi_plugin_licencia', 'demo_valida'); add_action('admin_notices', function() { echo '<div class=\"notice notice-info\"><p><strong> Demo activo:</strong> Este es un entorno de prueba con todas las características premium habilitadas. <a href=\"https://mi-agencia.com/comprar\" target=\"_blank\">¡Compra ahora!</a></p></div>'; });"
    }
  ]
}

Enlace final:

https://playground.wordpress.net/?blueprint-url=https://mi-agencia.com/demos/blueprint.json

Opción 3: GitHub Pages (gratuito)

  1. Crea un repositorio en GitHub llamado mi-plugin-demo
  2. Sube tus archivos:
    • blueprint.json
    • mi-plugin.zip
    • demo-content.xml
    • index.html (página de demo)
  3. Activa GitHub Pages en Settings > Pages
  4. Usa URLs raw en tu blueprint: 
    {
  "step": "installPlugin",
  "pluginData": {
    "resource": "url",
    "url": "https://raw.githubusercontent.com/mi-usuario/mi-plugin-demo/main/mi-plugin.zip"
  }
}
  5. Enlace final: 
    https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/mi-usuario/mi-plugin-demo/main/blueprint.json

Casos de uso avanzados

Plugin de bloques Gutenberg

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/wp-admin/post.php?post=5&action=edit",
  "preferredVersions": {
    "php": "8.1",
    "wp": "latest"
  },
  "features": {
    "networking": true
  },
  "login": true,
  "plugins": ["mi-bloque-plugin"],
  "steps": [
    {
      "step": "runPHP",
      "code": "<?php require_once 'wordpress/wp-load.php'; wp_insert_post(array('ID' => 5, 'post_title' => 'Demo de mis bloques personalizados', 'post_content' => '<!-- wp:paragraph --><p>Aquí tienes ejemplos de nuestros bloques:</p><!-- /wp:paragraph --><!-- wp:mi-plugin/mi-bloque {\"titulo\":\"Bloque Demo\",\"color\":\"#ff6900\"} --><!-- /wp:mi-plugin/mi-bloque -->', 'post_status' => 'publish'));"
    }
  ]
}

Plugin de formularios con datos pre-configurados

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/contacto/",
  "preferredVersions": {
    "php": "8.1",
    "wp": "latest"
  },
  "features": {
    "networking": true
  },
  "login": true,
  "plugins": ["mi-forms-plugin"],
  "steps": [
    {
      "step": "runPHP",
      "code": "<?php require_once 'wordpress/wp-load.php'; $form_config = array('fields' => array(array('type' => 'text', 'label' => 'Nombre', 'required' => true), array('type' => 'email', 'label' => 'Email', 'required' => true), array('type' => 'textarea', 'label' => 'Mensaje')), 'submit_text' => 'Enviar mensaje', 'success_message' => 'Gracias por contactarnos'); update_option('mi_forms_demo_config', $form_config); wp_insert_post(array('post_title' => 'Contacto', 'post_name' => 'contacto', 'post_content' => '[mi_form id=\"demo\"]', 'post_status' => 'publish', 'post_type' => 'page'));"
    }
  ]
}

WooCommerce con productos ya creados

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/tienda/",
  "preferredVersions": {
    "php": "8.1",
    "wp": "latest"
  },
  "features": {
    "networking": true
  },
  "login": true,
  "themes": ["storefront"],
  "plugins": ["woocommerce", "mi-woo-extension"],
  "steps": [
    {
      "step": "setSiteOptions",
      "options": {
        "woocommerce_currency": "EUR",
        "woocommerce_price_thousand_sep": ".",
        "woocommerce_price_decimal_sep": ","
      }
    },
    {
      "step": "runPHP",
      "code": "<?php require_once 'wordpress/wp-load.php'; $productos = array(array('nombre' => 'Camiseta Premium', 'precio' => 25.99, 'descripcion' => 'Camiseta de alta calidad'), array('nombre' => 'Pantalón Deportivo', 'precio' => 45.50, 'descripcion' => 'Perfecto para ejercicio')); foreach($productos as $prod) { $product = new WC_Product_Simple(); $product->set_name($prod['nombre']); $product->set_regular_price($prod['precio']); $product->set_description($prod['descripcion']); $product->set_status('publish'); $product_id = $product->save(); update_post_meta($product_id, '_mi_extension_configurado', true); } wp_insert_post(array('post_title' => 'Tienda', 'post_name' => 'tienda', 'post_content' => '[shop]', 'post_status' => 'publish', 'post_type' => 'page')); flush_rewrite_rules();"
    }
  ]
}

Herramientas avanzadas

Validador de Blueprint

#!/bin/bash
# validate-blueprint.sh

if [ $# -eq 0 ]; then
    echo "Uso: $0 <archivo-blueprint.json>"
    exit 1
fi

BLUEPRINT_FILE=$1

# Validar JSON
if ! jq empty "$BLUEPRINT_FILE" 2>/dev/null; then
    echo "Error: JSON inválido"
    exit 1
fi

# Validar schema
if ! jq -e '.$schema' "$BLUEPRINT_FILE" >/dev/null; then
    echo "Advertencia: Falta \$schema"
fi

# Validar steps
if jq -e '.steps' "$BLUEPRINT_FILE" >/dev/null; then
    if ! jq -e '.steps | type == "array"' "$BLUEPRINT_FILE" >/dev/null; then
        echo "Error: steps debe ser un array"
        exit 1
    fi
fi

echo "Blueprint válido"

Generador automático para WordPress local

<?php
// wp-content/mu-plugins/ayudawp-blueprint-generator.php

class ayudawp_Blueprint_Generator {
    
    public function ayudawp_generate_blueprint() {
        $blueprint = array(
            '$schema' => 'https://playground.wordpress.net/blueprint-schema.json',
            'landingPage' => $this->ayudawp_get_landing_page(),
            'preferredVersions' => array(
                'php' => '8.1',
                'wp' => 'latest'
            ),
            'features' => array('networking' => true),
            'login' => true,
            'siteOptions' => $this->ayudawp_get_site_options(),
            'steps' => $this->ayudawp_get_steps()
        );
        
        return wp_json_encode($blueprint, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES);
    }
    
    private function ayudawp_get_landing_page() {
        // Detectar página principal del plugin activo
        $active_plugins = get_option('active_plugins', array());
        
        foreach ($active_plugins as $plugin) {
            $plugin_data = get_plugin_data(WP_PLUGIN_DIR . '/' . $plugin);
            if (strpos(strtolower($plugin_data['Name']), 'mi plugin') !== false) {
                return '/wp-admin/options-general.php?page=' . dirname($plugin);
            }
        }
        
        return '/wp-admin/';
    }
    
    private function ayudawp_get_site_options() {
        return array(
            'blogname' => get_bloginfo('name') . ' - Demo',
            'admin_email' => get_option('admin_email'),
            'permalink_structure' => get_option('permalink_structure')
        );
    }
    
    private function ayudawp_get_steps() {
        $steps = array();
        
        // Añadir tema activo
        $current_theme = get_option('stylesheet');
        if ($current_theme !== 'twentytwentyfour') {
            $steps[] = array(
                'step' => 'installTheme',
                'themeZipFile' => array(
                    'resource' => 'wordpress.org/themes',
                    'slug' => $current_theme
                ),
                'options' => array('activate' => true)
            );
        }
        
        // Añadir plugins activos
        $active_plugins = get_option('active_plugins', array());
        foreach ($active_plugins as $plugin) {
            $plugin_slug = dirname($plugin);
            if ($plugin_slug && $plugin_slug !== '.') {
                $steps[] = array(
                    'step' => 'installPlugin',
                    'pluginData' => array(
                        'resource' => 'wordpress.org/plugins',
                        'slug' => $plugin_slug
                    ),
                    'options' => array('activate' => true)
                );
            }
        }
        
        // Añadir entradas/páginas existentes
        $posts = get_posts(array('numberposts' => 5, 'post_status' => 'publish'));
        if (!empty($posts)) {
            $insert_code = "<?php require_once 'wordpress/wp-load.php';";
            foreach ($posts as $post) {
                $post_data = array(
                    'post_title' => addslashes($post->post_title),
                    'post_content' => addslashes($post->post_content),
                    'post_status' => 'publish',
                    'post_type' => $post->post_type
                );
                $insert_code .= "wp_insert_post(" . var_export($post_data, true) . ");";
            }
            
            $steps[] = array(
                'step' => 'runPHP',
                'code' => $insert_code
            );
        }
        
        return $steps;
    }
}

// Comando WP-CLI
if (defined('WP_CLI') && WP_CLI) {
    WP_CLI::add_command('ayudawp blueprint', function() {
        $generator = new ayudawp_Blueprint_Generator();
        $blueprint = $generator->ayudawp_generate_blueprint();
        
        WP_CLI::log("OK: Blueprint generado:");
        WP_CLI::log($blueprint);
        
        file_put_contents(ABSPATH . 'blueprint.json', $blueprint);
        WP_CLI::success('Info: Blueprint guardado en blueprint.json');
    });
}

Uso del generador:

# Desde tu WordPress local
wp ayudawp blueprint

Script de deploy automático para SVN

#!/bin/bash
# deploy-blueprint.sh - Script para subir blueprint a WordPress.org

set -e

# Configuración - Modifica estas variables
PLUGIN_SLUG="mi-plugin"
SVN_URL="https://plugins.svn.wordpress.org/$PLUGIN_SLUG"
SVN_PATH="./svn-$PLUGIN_SLUG"
BLUEPRINT_FILE="./blueprint.json"

echo " Iniciando deploy de blueprint para $PLUGIN_SLUG"

# Validar que existe el blueprint
if [ ! -f "$BLUEPRINT_FILE" ]; then
    echo "Error: No se encuentra $BLUEPRINT_FILE"
    exit 1
fi

# Validar JSON
if ! jq empty "$BLUEPRINT_FILE" 2>/dev/null; then
    echo "Error: Blueprint JSON inválido"
    exit 1
fi

echo "Blueprint válido"

# Clonar o actualizar SVN
if [ -d "$SVN_PATH" ]; then
    echo " Actualizando repositorio SVN..."
    cd "$SVN_PATH"
    svn up
else
    echo " Clonando repositorio SVN..."
    svn co "$SVN_URL" "$SVN_PATH"
    cd "$SVN_PATH"
fi

# Crear carpeta blueprints si no existe
mkdir -p assets/blueprints

# Copiar blueprint
cp "../$BLUEPRINT_FILE" assets/blueprints/blueprint.json

# Verificar cambios
if svn status | grep -q "blueprint.json"; then
    echo "Advertencia: Cambios detectados en blueprint.json"
    
    # Añadir si es nuevo
    svn add assets/blueprints/blueprint.json 2>/dev/null || true
    
    # Mostrar diferencias
    echo " Cambios:"
    svn diff assets/blueprints/blueprint.json || true
    
    # Confirmar commit
    echo "¿Continuar con el commit? (y/n)"
    read -r confirm
    if [[ $confirm == [yY] ]]; then
        svn ci -m "Update Live Preview blueprint" assets/blueprints/
        echo "OK: Blueprint deployado correctamente"
        echo " Puedes probarlo en: https://wordpress.org/plugins/$PLUGIN_SLUG/"
    else
        echo "Error: Deploy cancelado"
    fi
else
    echo "Info: No hay cambios en el blueprint"
fi

cd ..

Automatización con GitHub Actions

# .github/workflows/deploy-blueprint.yml
name: Deploy Blueprint to WordPress.org

on:
  push:
    paths:
      - 'blueprint.json'
    branches:
      - main

jobs:
  deploy-blueprint:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout code
      uses: actions/checkout@v3
    
    - name: Validate Blueprint JSON
      run: |
        if ! jq empty blueprint.json; then
          echo "Error Invalid JSON in blueprint.json"
          exit 1
        fi
        echo "OK: Blueprint JSON is valid"
    
    - name: Check required fields
      run: |
        if ! jq -e '.steps' blueprint.json >/dev/null; then
          echo "Error: Missing required field: steps"
          exit 1
        fi
        
        if ! jq -e '."$schema"' blueprint.json >/dev/null; then
          echo "Warning: Missing $schema field"
        fi
        
        echo "OK: Required fields present"
    
    - name: Deploy to WordPress.org SVN
      env:
        SVN_USERNAME: ${{ secrets.SVN_USERNAME }}
        SVN_PASSWORD: ${{ secrets.SVN_PASSWORD }}
        PLUGIN_SLUG: ${{ secrets.PLUGIN_SLUG }}
      run: |
        # Configurar SVN
        svn co https://plugins.svn.wordpress.org/$PLUGIN_SLUG svn-repo
        cd svn-repo
        
        # Crear carpeta si no existe
        mkdir -p assets/blueprints
        
        # Copiar blueprint
        cp ../blueprint.json assets/blueprints/blueprint.json
        
        # Commit si hay cambios
        if svn status | grep -q "blueprint.json"; then
          svn add assets/blueprints/blueprint.json 2>/dev/null || true
          svn ci -m "Update Live Preview blueprint" \
                 --username $SVN_USERNAME \
                 --password $SVN_PASSWORD \
                 --non-interactive
          echo "Ok: Blueprint deployed successfully"
        else
          echo "Info: No changes to deploy"
        fi

Problemas habituales

Blueprint no se ejecuta

Síntoma: Playground carga pero el plugin no aparece instalado.

Causas y soluciones:

Error de sintaxis JSON = Validar JSON

cat blueprint.json | jq .

URL no accesible  = Probar el acceso directo

curl -I https://mi-servidor.com/mi-plugin.zip

Problemas de CORS = Verificar las cabeceras CORS

curl -H "Origin: https://playground.wordpress.net" -I https://mi-servidor.com/blueprint.json

Solución CORS para Apache:

Header always set Access-Control-Allow-Origin "https://playground.wordpress.net"
Header always set Access-Control-Allow-Methods "GET, OPTIONS"
Header always set Access-Control-Allow-Headers "Content-Type"

Solución CORS para Nginx:

add_header Access-Control-Allow-Origin "https://playground.wordpress.net";
add_header Access-Control-Allow-Methods "GET, OPTIONS";

El plugin se instala pero no funciona

Síntoma: Plugin aparece activado pero las características no funcionan.

Debugging con runPHP:

{
  "step": "runPHP",
  "code": "<?php require_once 'wordpress/wp-load.php'; if (function_exists('mi_plugin_funcion')) { error_log('OK: Plugin cargado correctamente'); } else { error_log('Error: Plugin no cargado'); } $plugins = get_option('active_plugins'); error_log('Plugins activos: ' . print_r($plugins, true));"
}

Solución para dependencias que faltan:

{
  "step": "runPHP",
  "code": "<?php require_once 'wordpress/wp-load.php'; if (!class_exists('WooCommerce')) { add_action('admin_notices', function() { echo '<div class=\"notice notice-error\"><p>Este plugin requiere WooCommerce para funcionar correctamente.</p></div>'; }); }"
}

Contenido que no se importa

Síntoma: Plugin funciona pero no hay entradas/páginas de demo.

Verificar importación:

{
  "step": "runPHP", 
  "code": "<?php require_once 'wordpress/wp-load.php'; $posts = get_posts(array('numberposts' => 1)); if (empty($posts)) { error_log('Error: No hay entradas importados'); wp_insert_post(array('post_title' => 'Post de emergencia', 'post_content' => 'Contenido creado por el blueprint', 'post_status' => 'publish')); } else { error_log('OK: Contenido importado correctamente'); }"
}

La configuración del plugin no se guarda

Síntoma: Plugin instalado pero sin configuración.

Configurar opciones manualmente:

{
  "step": "runPHP",
  "code": "<?php require_once 'wordpress/wp-load.php'; $opciones_demo = array('configurado' => true, 'api_key' => 'demo_key', 'activo' => true); update_option('mi_plugin_options', $opciones_demo); add_action('admin_notices', function() { echo '<div class=\"notice notice-success\"><p>Plugin configurado automáticamente para la demo.</p></div>'; });"
}

Problemas con temas

Síntoma: Tema no se aplica o rompe el diseño.

Forzar tema específico:

{
  "step": "runPHP",
  "code": "<?php require_once 'wordpress/wp-load.php'; switch_theme('twentytwentyfour'); update_option('stylesheet', 'twentytwentyfour'); update_option('template', 'twentytwentyfour');"
}

Tabla de diagnóstico rápido

Guía para identificar y solucionar los problemas más comunes al implementar la vista previa de un plugin o tema:

Síntoma Causa probable Solución rápida Código/comando
Playground carga pero el plugin no está Error de sintaxis JSON Validar JSON cat blueprint.json | jq .
El plugin no se instala desde URL Problemas de CORS o URL inaccesible Verificar acceso y CORS curl -I https://mi-servidor.com/plugin.zip
El blueprint no se ejecuta Falta networking: true Activar networking "features": {"networking": true}
Plugin instalado pero no funciona Faltan dependencias Verificar con runPHP "code": "<?php if(function_exists('mi_funcion')) echo 'OK';"
Contenido que no se importa URL del XML inaccesible Probar URL directamente curl -I https://mi-servidor.com/demo.xml
Configuración no persistente Opciones no se guardan bien Usar runPHP para forzar "code": "<?php update_option('mi_option', 'valor');"
Error «File already exists» en SVN El blueprint ya existe en el repositorio Actualizar en lugar de añadir svn up && cp blueprint.json assets/blueprints/
No aparece el botón «Vista previa» El blueprint no está en la ubicación correcta Verificar la ruta de SVN Debe estar en assets/blueprints/blueprint.json
La vista previa da error 404 Commit no completado Verificar el commit de SVN svn status y svn log
El tema no se aplica correctamente Conflictos con tema por defecto Forzar tema específico "code": "<?php switch_theme('mi-tema');"
Imágenes que no cargan URLs de imágenes no accesibles Usar servicios públicos Usar picsum.photos o similar
Error CORS en el navegador Servidor no permite cross-origin Configurar headers CORS Access-Control-Allow-Origin: https://playground.wordpress.net

Buenas prácticas

Optimización del tiempo de carga

Usar temas ligeros:

{
  "themes": ["twentytwentyfour"]
}

Evitar temas pesados:

{
  "themes": ["the7", "avada"]
}

Instalar solo plugins esenciales:

{
  "plugins": ["mi-plugin", "classic-editor"]
}

Contenido de demo mínimo pero efectivo:

  • Máximo 5 entradas/páginas
  • Imágenes optimizadas (< 100 KB cada una)
  • Usar servicios como Picsum para imágenes de muestra o marcador

Cómo mejorar la experiencia de la vista previa

Landing page estratégica:

{
  "landingPage": "/wp-admin/options-general.php?page=mi-plugin"
}

Mensajes de bienvenida:

{
  "step": "runPHP",
  "code": "<?php require_once 'wordpress/wp-load.php'; add_action('admin_notices', function() { echo '<div class=\"notice notice-info is-dismissible\"><p><strong> ¡Bienvenido a la demo!</strong><br>Este entorno está pre-configurado con nuestro plugin. <br> <a href=\"/wp-admin/options-general.php?page=mi-plugin\">Ver ajustes</a> |  <a href=\"/\" target=\"_blank\">Ver en la web</a></p></div>'; });"
}

Configuración robusta

Datos de demo realistas:

{
  "step": "runPHP",
  "code": "<?php require_once 'wordpress/wp-load.php'; $productos = array(array('nombre' => 'Smartphone Pro', 'precio' => 599.99, 'categoria' => 'Electrónicos'), array('nombre' => 'Auriculares Bluetooth', 'precio' => 89.99, 'categoria' => 'Audio')); foreach($productos as $prod) { $post_id = wp_insert_post(array('post_title' => $prod['nombre'], 'post_content' => 'Descripción detallada de ' . $prod['nombre'], 'post_status' => 'publish', 'meta_input' => array('precio' => $prod['precio'], 'categoria' => $prod['categoria']))); }"
}

Gestión de errores:

{
  "step": "runPHP",
  "code": "<?php require_once 'wordpress/wp-load.php'; try { if (class_exists('WooCommerce')) { $product = new WC_Product_Simple(); $product->set_name('Producto Demo'); $product->set_regular_price(29.99); $product->save(); } else { wp_insert_post(array('post_title' => 'Demo sin WooCommerce', 'post_content' => 'Este demo funciona sin WooCommerce también.', 'post_status' => 'publish')); } } catch (Exception $e) { error_log('Error en demo: ' . $e->getMessage()); }"
}

Plantillas de Blueprint listas para usar

Plantilla base para cualquier plugin

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/wp-admin/options-general.php?page=CAMBIAR_POR_TU_PLUGIN",
  "preferredVersions": {
    "php": "8.1",
    "wp": "latest"
  },
  "features": {
    "networking": true
  },
  "login": true,
  "siteOptions": {
    "blogname": "Demo de tu plugin"
  },
  "steps": [
    {
      "step": "installPlugin",
      "pluginData": {
        "resource": "wordpress.org/plugins",
        "slug": "SLUG-DE-TU-PLUGIN"
      },
      "options": {
        "activate": true
      }
    },
    {
      "step": "runPHP",
      "code": "<?php require_once 'wordpress/wp-load.php'; add_action('admin_notices', function() { echo '<div class=\"notice notice-success\"><p> Demo configurado correctamente. Tu plugin está listo para probar.</p></div>'; });"
    }
  ]
}

Plantilla para plugin con WooCommerce

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/tienda/",
  "preferredVersions": {
    "php": "8.1",
    "wp": "latest"
  },
  "features": {
    "networking": true
  },
  "login": true,
  "themes": ["storefront"],
  "siteOptions": {
    "blogname": "Tienda Demo"
  },
  "steps": [
    {
      "step": "installPlugin",
      "pluginData": {
        "resource": "wordpress.org/plugins",
        "slug": "woocommerce"
      },
      "options": {
        "activate": true
      }
    },
    {
      "step": "installPlugin",
      "pluginData": {
        "resource": "wordpress.org/plugins",
        "slug": "SLUG-DE-TU-PLUGIN"
      },
      "options": {
        "activate": true
      }
    },
    {
      "step": "setSiteOptions",
      "options": {
        "woocommerce_currency": "EUR",
        "woocommerce_price_thousand_sep": ".",
        "woocommerce_price_decimal_sep": ","
      }
    },
    {
      "step": "runPHP",
      "code": "<?php require_once 'wordpress/wp-load.php'; $product = new WC_Product_Simple(); $product->set_name('Producto Demo'); $product->set_regular_price(29.99); $product->set_description('Producto creado para mostrar las funciones de tu plugin'); $product->save(); wp_insert_post(array('post_title' => 'Tienda', 'post_name' => 'tienda', 'post_content' => '[shop]', 'post_status' => 'publish', 'post_type' => 'page')); flush_rewrite_rules();"
    }
  ]
}

Plantilla para plugin de formularios

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/contacto/",
  "preferredVersions": {
    "php": "8.1",
    "wp": "latest"
  },
  "features": {
    "networking": true
  },
  "login": true,
  "siteOptions": {
    "blogname": "Demo Formularios"
  },
  "steps": [
    {
      "step": "installPlugin",
      "pluginData": {
        "resource": "wordpress.org/plugins",
        "slug": "SLUG-DE-TU-PLUGIN"
      },
      "options": {
        "activate": true
      }
    },
    {
      "step": "runPHP",
      "code": "<?php require_once 'wordpress/wp-load.php'; wp_insert_post(array('post_title' => 'Contacto', 'post_name' => 'contacto', 'post_content' => '[shortcode-de-tu-formulario]<br><br><p><strong>Funcionalidades demo:</strong></p><ul><li>Validación en tiempo real</li><li>Múltiples tipos de campo</li><li>Integración con email</li><li>Respuesta automática</li></ul>', 'post_status' => 'publish', 'post_type' => 'page'));"
    }
  ]
}

Recursos adicionales y herramientas

Enlaces útiles

Comunidad y soporte

¿Merece la pena aprender esto?

La vista previa para plugins de WordPress es una herramienta realmente rompedora para desarrolladores de plugins, pues te abre un abanico enorme de cosas nuevas que ofrecer, da igual tu perfil, y te resumo ventajas:

Para desarrolladores de WordPress.org:

  • Aumentar instalaciones hasta un 40% según datos de plugins que lo han implementado
  • Reducir consultas de soporte porque los usuarios saben qué esperar
  • Diferenciarte de la competencia con una experiencia premium

Para agencias y desarrolladores independientes:

  • Crear demos impresionantes que vendan por sí solas
  • Cerrar más ventas con demostraciones interactivas
  • Reducir el embudo de ventas eliminando la barrera de instalación

Próximos pasos recomendados:

  1. Empieza simple: Usa una plantilla básica y personalízala
  2. Prueba exhaustivamente: Verifica en diferentes escenarios
  3. Itera y mejora: Recopila feedback y optimiza la experiencia
  4. Mantén actualizado: Revisa el blueprint cada pocas versiones del plugin

Recuerda:

  • Un buen blueprint vale más que mil capturas de pantalla
  • La primera impresión en el demo puede definir si un usuario instala tu plugin
  • Invierte tiempo en crear una experiencia de demo pulida y representativa

¡Tu plugin merece ser probado antes de instalado!

Compartir en redes
Resumir con IA

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en las estrellas para valorarlo!

Promedio de puntuación 5 / 5. Total de votos: 3

¡Todavía no hay votos! Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en las redes sociales!

Puede que también te interese…

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!


Sobre el autor

Apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y dos perritas. Vasco de nacimiento, español de corazón y ciudadano de donde me quieran. Mi último libro es WordPress - Web gratis para todos. Mi blog personal es este, donde hace años ofrezco mis visiones acerca de la Web. Sígueme en Twitter
Scroll al inicio

Utilizamos cookies para ofrecerte la mejor experiencia en la web. No se comparte tu información con nadie, simplemente queremos que navegues normalmente sin tener que rellenar formularios en cada visita.
Puedes aprender más sobre qué cookies utilizamos en este enlace, o simplemente rechazarlas.