WordPress Playground – Come utilizzare WordPress nel browser

Volete utilizzare WordPress nel vostro browser a scopo di test?

Ecco WordPress Playground, una piattaforma che consente di provare WordPress.org open-source in un browser senza dover prima acquistare un piano di hosting. Potete anche usarla per testare plugin e temi senza influenzare il vostro sito WordPress dal vivo.

In questo articolo spiegheremo cos’è WordPress Playground e come utilizzarlo.

Cos’è e come funziona WordPress Playground?

WordPress Playground è un’istanza temporanea di WordPress all’interno del browser, dove è possibile sperimentare e imparare di più sul sistema di gestione dei contenuti.

È come una sandbox online in cui è possibile effettuare qualsiasi tipo di sviluppo di WordPress senza influire sul sito web reale.

Tutto ciò che dovete fare è andare sul sito web di WordPress Playground per aprirlo. A quel punto, potrete utilizzare WordPress come fareste normalmente: installare nuovi plugin, provare nuovi temi, aggiungere nuove pagine e così via.

Se aggiornate la pagina di WordPress Playground, tutte le personalizzazioni scompariranno. Tuttavia, potete anche scaricare la vostra istanza di WordPress e caricarla nuovamente su WordPress Playground.

Come funziona WordPress Playground?

WordPress Playground si basa su alcune tecnologie interessanti che consentono di utilizzare WordPress senza la consueta configurazione del server web e del database:

1. WebAssembly binary (Wasm): Consente di eseguire il codice PHP direttamente nel browser web, facendo funzionare WordPress senza un server tradizionale. Inoltre, rende la piattaforma compatibile con tutti i browser, da Chrome ed Edge a Firefox e Safari.
2. Database SQLite: Invece di MySQL, WordPress Playground utilizza un sistema di database basato su file più leggero, chiamato SQLite, che viene eseguito direttamente nel browser.
3. API Service Worker e Worker Threads: Questi strumenti web aiutano a gestire le richieste e a eseguire gli script JavaScript in background, consentendo a WordPress Playground di eseguire le applicazioni PHP senza problemi nel browser.

Queste tecnologie consentono inoltre agli sviluppatori di integrare WordPress Playground con node.js, Visual Studio Code e uno strumento CLI chiamato wp-now.

Con questi strumenti, gli sviluppatori possono anche utilizzare WordPress Playground su una piattaforma di sviluppo per scopi di test o di staging.

Quali sono le limitazioni di WordPress Playground?

Nonostante i suoi vantaggi, WordPress Playground presenta diverse limitazioni, come ad esempio:

• Nessun accesso diretto alla directory dei temi e dei plugin – Dovrete installare temi e plugin scaricandoli e caricandoli manualmente. Una funzione beta di accesso alla rete mira a risolvere questo problema.
• Lepersonalizzazioni in WordPress Playground sono temporanee : se decidete di non salvare le modifiche nel browser, dovrete fare attenzione a non aggiornare accidentalmente la pagina per evitare di perdere i vostri progressi.
• Iproblemi diiFrame sono comuni – Se incorporate un’istanza di WordPress Playground nella vostra pagina web, potreste aspettarvi alcuni problemi, dal refresh accidentale all’iFrame non funzionante.
• Si tratta diuna funzione relativamente nuova : non tutto funzionerà correttamente, quindi ci si può aspettare qualche intoppo qua e là durante l’esplorazione dell’ambiente.

Detto questo, Playground è un progetto WordPress relativamente nuovo. Quindi ci si può aspettare che il team rilasci nuove funzionalità e correzioni di bug per migliorare l’esperienza dell’utente.

Ora che sapete cos’è WordPress Playground, vediamo come utilizzarlo. Per navigare nel nostro tutorial, potete utilizzare i collegamenti rapidi riportati di seguito:

Come utilizzare WordPress Playground

Per utilizzare WordPress Playground, potete accedere direttamente a questo nome di dominio nel vostro browser web: https://playground.wordpress.net

Una volta entrati nel sito, attendere qualche istante affinché Playground si configuri. A questo punto, si vedrà la parte anteriore del sito utilizzando un tema predefinito di WordPress.

Se state usando WordPress Playground per i test, potreste voler configurare l’ambiente in modo che rifletta il software WordPress del vostro sito web reale.

Per farlo, fare clic sul menu che dice ‘PHP 8.0 WP 6.4 – Storage: Nessuno”.

La prima impostazione da configurare è il tipo di archiviazione. Sono disponibili tre opzioni.

Nessuno” significa che tutte le modifiche andranno perse all’aggiornamento della pagina. Con “Browser”, invece, le modifiche vengono memorizzate nel browser, ma scompaiono se si chiude la scheda del browser o si cancella la cache.

Potete anche salvare le modifiche sul vostro computer selezionando “Dispositivo”. Questa opzione vi consentirà di selezionare una cartella nel vostro computer per memorizzare i file di WordPress Playground, in modo simile alla creazione di un sito WordPress localhost.

La prossima cosa da configurare è la versione di PHP.

Si consiglia di impostare la stessa versione di PHP utilizzata per il proprio sito web. Detto questo, non è possibile trovare qui versioni di PHP più vecchie di 7.0.

In seguito, è possibile attivare facoltativamente le impostazioni “Carica estensioni: libxml, openssl, mbstring, iconv, gd” e “Accesso alla rete (ad esempio, per i plugin di navigazione)”.

La prima impostazione caricherà le estensioni PHP specifiche (libxml, openssl, mbstring, iconv e gd) per migliorare il vostro WordPress Playground. Ma non sono necessarie.

La seconda impostazione si chiama “Accesso alla rete”. Si tratta di una funzione beta che collega WordPress Playground alla directory ufficiale dei plugin, in modo da poter installare temi e plugin di WordPress direttamente dall’ambiente.

Infine, è possibile selezionare una versione di WordPress per il parco giochi. Dovreste scegliere la versione che utilizzate attualmente per il vostro blog o sito web WordPress.

WordPress rende disponibile anche la versione “WordPress Nightly”. Si tratta della versione di sviluppo di WordPress che include le ultime modifiche apportate dal team di sviluppo di WordPress.

Potete usarlo se siete sviluppatori di plugin o temi e volete testare la compatibilità con il prossimo aggiornamento di WordPress.

Una volta terminata la configurazione di queste impostazioni, fare clic su “Applica modifiche”.

Questo è tutto per le impostazioni. Ora si può andare nell’area di amministrazione per iniziare a testare la sandbox.

Per aprire l’area di amministrazione, passare il mouse sul menu del titolo del sito e fare clic su “Dashboard”. In alternativa, è possibile accedere all’editor completo del sito facendo clic su “Modifica sito”.

Come installare temi e plugin in WordPress Playground

Ci sono due modi per installare un plugin o un tema di WordPress in WordPress Playground. Uno è quello di andare alla pagina del plugin o del tema su WordPress.org e fare clic sul pulsante “Download”.

In questo modo si salverà il file zip del plugin o del tema sul computer.

Poi potete continuare con la consueta installazione manuale di WordPress per i plugin e i temi. Per ulteriori istruzioni, potete leggere le nostre guide:

• Come installare un plugin di WordPress (passo dopo passo per i principianti)
• Come installare un tema WordPress (Guida per principianti)

Questo metodo funziona anche per testare i plugin WordPress premium e i temi WordPress premium.

Per i plugin, basta andare nella dashboard di WordPress Playground e navigare su Plugin ” Aggiungi nuovo plugin.

Quindi, fare clic sul pulsante “Carica plugin” e selezionare “Scegli file” per caricare il file zip del plugin scaricato in precedenza. Infine, fare clic su “Installa ora”.

Per quanto riguarda i temi, quando si utilizza Playground per la prima volta, WordPress ne installa uno predefinito.

Ma se volete utilizzare un nuovo tema gratuito per WordPress, potete scaricarlo manualmente dalla directory dei temi di WordPress. Poi, in Playground, andate su Aspetto ” Temi e fate clic su “Aggiungi nuovo tema”.

Nella schermata successiva, fare clic sul pulsante “Carica tema”.

Quindi, scegliere il file del tema scaricato in precedenza e fare clic su “Installa ora”.

Se questo processo sembra un po’ noioso, non preoccupatevi. WordPress sta lavorando a una funzione beta che consente a Playground di connettersi con la directory dei plugin o dei temi. Questa funzione dovrebbe essere abilitata se si sceglie “Accesso alla rete” durante la configurazione.

In questo modo, il Playground funziona come una tipica dashboard di WordPress e si possono installare temi e plugin gratuiti senza doverli prima salvare sul computer.

Un altro modo per installare temi e plugin nella dashboard di WordPress è utilizzare la Query API di WordPress Playground. Funziona richiedendo di aggiungere alcuni parametri di query all’URL di WordPress Playground.

Quindi, ad esempio, se volete installare e testare la versione gratuita di AIOSEO in WordPress Playground, potete andare alla pagina WordPress.org di AIOSEO. Quindi, prendete nota dello slug dell’URL di AIOSEO.

Ora, in una nuova scheda del browser, digitate l’URL di WordPress Playground con lo slug di AIOSEO, in questo modo:

https://playground.wordpress.net/?plugin=all-in-one-seo-pack

Premendo il tasto “Invio”, WordPress Playground creerà automaticamente un nuovo ambiente con il plugin AIOSEO installato.

Se si vuole installare il tema, basta sostituire il parametro del plugin con quello del tema, in questo modo:

https://playground.wordpress.net/?theme=astra

Potete anche combinare più parametri di query se volete installare più plugin o temi in aggiunta al nucleo di WordPress. Assicuratevi solo di separare ogni parametro con il segno ampersand &.

Ecco come apparirà l’URL se si installano i plugin AIOSEO e MonsterInsights e il tema Astra:

https://playground.wordpress.net/?theme=astra&plugin=all-in-one-seo-pack&plugin=google-analytics-for-wordpress

Se siete utenti di Chrome, potete anche installare l’estensione Open in WordPress Playground. In questo modo, ogni volta che andrete alla pagina di un plugin o di un tema su WordPress.org, vedrete il pulsante “Playground”.

Facendo clic su di esso si aprirà un nuovo ambiente di WordPress Playground con il plugin o il tema installato. Semplifica il metodo dei parametri di query.

Come esportare/importare un sito realizzato con WordPress Playground

Supponiamo che abbiate giocato con WordPress Playground, aggiunto alcuni nuovi post utilizzando l’editor Gutenberg e magari creato un intero sito web. Sarebbe uno spreco chiudere la scheda e perdere per sempre tutti i vostri progressi.

Fortunatamente, potete esportare il vostro sito da WordPress Playground e salvarlo sul vostro computer. Ogni volta che riaprirete Playground, potrete sempre caricare il file zip esportato per continuare da dove avevate interrotto.

A tale scopo, spostarsi nel menu superiore del Parco giochi e fare clic sul menu a tre righe nell’angolo in alto a destra. Quindi, fare clic su “Scarica come .zip”.

Il browser inizierà quindi a scaricare il file sul computer.

Per caricare il file su WordPress Playground, basta aprire il sito Playground e fare nuovamente clic sul menu a tre linee. Dopodiché, fate clic su “Ripristina da .zip”.

A questo punto, un popup chiederà di scegliere il file esportato in precedenza.

Una volta selezionato il file, è sufficiente fare clic su “Importa”.

Se il file è valido, viene visualizzato un popup che notifica che l’importazione è avvenuta con successo e il Playground viene aggiornato con la nuova istanza.

Fare clic su “OK” per chiudere il popup.

Importare/esportare WordPress Playground su GitHub

Se avete un account GitHub, potete anche esportare e importare il vostro sito da WordPress Playground. GitHub è un’ottima piattaforma che vi permette di tenere traccia delle modifiche al vostro sito web, di eseguire il backup dei vostri file e di collaborare con altri utenti.

Per esportare un sito da WordPress Playground a GitHub, fate clic sul menu a tre righe e selezionate “Esporta richiesta di pull su GitHub”.

Nel popup successivo, si vedrà che WordPress invita a salvare il sito web sul computer come backup. Una volta fatto ciò, si può spuntare la casella “Ho esportato il mio Playground come zip”.

Quindi, fare clic sul pulsante “Connetti al tuo account GitHub”.

Successivamente, dovete confermare che state autorizzando WordPress Playground ad accedere ai vostri repository.

Fare clic su “Autorizza adamziel” per continuare.

A questo punto, selezionare il tipo di file da esportare: plugin, temi o directory wp-content. Se volete esportare plugin, temi, file multimediali, widget, menu e font, selezionate l’ultima opzione.

È inoltre necessario specificare l’URL del repository GitHub in cui si desidera esportare il sito. Quindi, fare clic sul pulsante “Passo successivo”.

Una volta fatto questo, bisogna scegliere se creare una nuova richiesta di pull o aggiornarne una esistente. A scopo dimostrativo, sceglieremo la prima opzione.

Quindi, inserire il percorso del repository in cui le modifiche devono essere impegnate.

Sarà inoltre necessario inserire un messaggio di commit per specificare quali modifiche sono state apportate utilizzando WordPress Playground.

Una volta fatto tutto ciò, fare clic su “Crea richiesta di pull”.

Se l’esportazione ha successo, WordPress mostrerà un popup con un link alla nuova richiesta di pull.

Fate clic sul link per vederlo in azione.

Ora, se volete importare un sito da GitHub in WordPress Playground, basta fare di nuovo clic sul menu a tre linee.

Quindi, selezionare “Importa da GitHub”.

Se si sta aprendo un ambiente WordPress Playground completamente nuovo, potrebbe essere necessario eseguire nuovamente l’intero processo di autorizzazione di GitHub Playground.

Dopodiché, basta fare clic sull’URL del repository GitHub da cui si desidera importare. WordPress fornisce alcuni esempi se non si è sicuri.

Successivamente, è necessario specificare quali file importare: temi, plugin o l’intera cartella wp-content.

Si può anche inserire il percorso del repository da cui si sta importando. Una volta fatto, è sufficiente fare clic su “Importa”.

Se l’importazione funziona, verrà visualizzato un messaggio di successo che conferma che WordPress Playground verrà aggiornato con la nuova istanza.

Come incorporare il parco giochi di WordPress nel vostro sito web

Se state scrivendo un tutorial su WordPress, probabilmente includerete delle schermate della dashboard di WordPress per guidare gli utenti attraverso le vostre istruzioni. Tuttavia, a volte le schermate non illustrano con precisione le azioni che state descrivendo.

È qui che WordPress Playground può essere utile. Potete incorporarlo nella vostra pagina o nel vostro post, offrendo agli utenti un’esperienza di lettura più interattiva. Possono seguire le vostre istruzioni utilizzando Playground.

Per prima cosa, è necessario aprire l’editor di blocchi di Gutenberg per una pagina o un post. Una volta lì, fare clic sul pulsante “+” per aggiungere un blocco e selezionare il blocco HTML personalizzato.

Ora, copiate il codice sottostante e incollatelo nel blocco HTML:

<iframe src="https://playground.wordpress.net/"></iframe>

Se si vuole, si possono anche aggiungere alcuni parametri di query a questo URL, come abbiamo mostrato in precedenza.

Quindi, fare clic su “Pubblica” o “Aggiorna” per rendere effettive le modifiche.

Il parco giochi di WordPress può avere un aspetto diverso a seconda del tema utilizzato.

Nel nostro caso, non sembrava allineato con i blocchi sovrastanti e l’elemento stesso era troppo piccolo per interagire.

Per evitarlo, è possibile utilizzare questo codice:

<div class="iframe-container"><iframe src="https://playground.wordpress.net/" style="width: 100%; height: 500px"></iframe></div>

In questo caso, il tag iFrame è avvolto da tag div per far sì che l’embed di Playground segua il padding e il margine del contenitore.

Abbiamo anche aggiunto l’attributo style per impostare la larghezza dell’iFrame al 100% del suo contenitore e l’altezza a 500 pixel.

Ecco come si presenta la parte anteriore:

Domande frequenti su WordPress Playground

Vediamo alcune domande frequenti su WordPress Playground.

Potete utilizzare WordPress nel vostro browser?

Sì, WordPress Playground consente di utilizzare WordPress direttamente nel browser. Potete creare siti web e provare temi e plugin prima di installarli sul vostro sito reale.

Posso installare temi e plugin personalizzati in WordPress Playground?

Sì, è possibile installare temi e plugin personalizzati in WordPress Playground per verificare se funzionano nell’area di amministrazione e se sono compatibili con determinate versioni di WordPress.

Posso caricare un sito realizzato con WordPress Playground sul mio account di hosting?

Tecnicamente, potete esportare il vostro sito da WordPress Playground e importarlo nel vostro account di hosting WordPress. Tuttavia, poiché WordPress Playground utilizza il database SQLite, potrebbe essere necessario convertire il database in MySQL per far funzionare il sito su un server web.

Come posso eseguire i plugin e i temi di WordPress in locale?

Se volete eseguire plugin e temi di WordPress in un ambiente di sviluppo locale, dovete prima creare un sito WordPress locale. Potete leggere il nostro tutorial su come creare un sito WordPress locale per avere istruzioni passo dopo passo.

Speriamo che questo articolo vi abbia aiutato a capire cos’è WordPress Playground e come utilizzarlo nel vostro browser. Potreste anche dare un’occhiata al nostro articolo su come creare facilmente un sito di staging per WordPress e al nostro elenco dei migliori plugin WordPress per clonare o duplicare un sito.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.