WordPress Playground – Så här använder du WordPress i din webbläsare

Många läsare har frågat oss om de kan prova WordPress, testa plugins eller leka med teman utan att skapa en fullständig webbplats eller förstöra sin live-webbplats. Goda nyheter: det finns WordPress Playground, ett verktyg som låter dig göra allt detta direkt i din webbläsare.

WordPress Playground är ganska lätt att använda, men vi får fortfarande många frågor om det. Vi har också märkt att många människor inte använder alla dess coola funktioner.

Det är därför vi har gjort den här guiden. Det spelar ingen roll om du precis har börjat med WordPress, om du vill prova nya plugins eller teman på din webbplats på ett säkert sätt, eller om du är en utvecklare som behöver en snabb plats att testa saker på. Den här artikeln visar dig hur du använder WordPress Playground som ett proffs.

Vad är WordPress Playground och hur fungerar det?

WordPress Playground är en tillfällig WordPress-instans i webbläsaren där du kan experimentera och lära dig mer om systemet för hantering av innehåll.

Det gillar en sandlåda online där du kan göra all slags WordPress utvecklare utan att påverka din riktiga website.

Allt du behöver göra är att gå till WordPress Playground website för att öppna den. Sedan kan du använda WordPress som vanligt: installera nya plugins, prova nya themes, lägga till pages och så vidare.

Om du uppdaterar WordPress Playground-sidan försvinner alla customizes. Men du kan också downloada din WordPress instance och uploada den igen till WordPress Playground.

Hur fungerar WordPress Playground?

WordPress Playground run på några coola tekniker som låter dig använda WordPress utan den vanliga installationen av web server och database:

1. WebAssembly binär (Wasm): Med den kan du run PHP-kod direkt i din web browser, vilket gör att WordPress fungerar utan en traditionell server. Det gör också plattformen kompatibel med alla webbläsare, från Chrome och Edge till Firefox och Safari.
2. SQLite databas: Istället för MySQL använder WordPress Playground ett lättare filbaserat databassystem som heter SQLite, som körs direkt i din webbläsare.
3. API:erna Service Worker och Worker Threads: Dessa web tools hjälper till att hantera requests och köra JavaScript-skript i bakgrunden, vilket gör det möjligt för WordPress Playground att köra PHP-appar smidigt i din webbläsare.

Dessa tekniker aktiverar också utvecklare att integrera WordPress Playground med node.js, Visual Studio Code och ett CLI-verktyg som heter wp-now.

Med dessa tools kan utvecklare också använda WordPress Playground på en utvecklingsplattform för test- eller stagingändamål.

Vilka är limiterna för WordPress Playground?

Trots sina fördelar har WordPress Playground flera limiter, gillar:

• Ingen direktåtkomst till tema- och plugin-katalogen – Du måste installera teman och plugins genom att ladda ner och ladda upp dem manuellt. En beta-funktion för nätverksåtkomst syftar dock till att lösa detta problem.
• Customizes i WordPress Playground är tillfälliga – Om du bestämmer dig för att inte spara ändringarna i webbläsaren måste du vara försiktig så att du inte uppdaterar sidan av misstag för att undvika att förlora dina framsteg.
• iFrame-problem är vanliga – Om du bäddar in en WordPress Playground-instans på din webbsida kan du förvänta dig vissa problem, från oavsiktliga uppdateringar till iFrame som inte fungerar.
• Det är en relativt utvald funktion – allt kommer ej att fungera som det ska, så du kan förvänta dig lite problem här och där när du utforskar miljön.

Med allt detta sagt är Playground ett relativt new WordPress-projekt. Så du kan förvänta dig att teamet släpper utvalda funktioner och buggar som fixas för att förbättra upplevelsen för användarna.

Nu när du vet vad WordPress Playground är, låt oss se hur du kan använda det. Du kan använda snabblänkarna under för att navigera genom vår tutorial:

Så här använder du WordPress Playground

För att använda WordPress Playground kan du direkt gå till detta domain name i din web browser: https: //playground.wordpress.net

När du väl är på website väntar du en stund på att Playground ska ställa in sig. Sedan kommer du att se front-enden av webbplatsen med ett standardtema från WordPress.

Om du använder WordPress Playground för testning, kanske du vill konfigurera miljön så att den återspeglar WordPress-programvaran för din faktiska website.

För att göra detta klickar du på menyn som säger ”PHP X WP X – Storage: Ingen.

Den första inställningen som du måste konfigurera är lagringstypen. Det finns tre alternativ.

”None” innebär att alla ändringar försvinner när page uppdateras. ”Browser” innebär att ändringarna lagras i webbläsaren, men försvinner om you closar tabben eller clearar your cache.

Du kan också save ändringarna på din dator genom att välja ”Device”. Detta alternativ låter dig välja en folder i din dator för att lagra dina WordPress Playground-filer, på samma sätt som när du skapar en WordPress site med lokalt webbhotell.

Nästa sak du vill konfigurera är PHP-versionen.

Vi rekommenderar att den är densamma som den PHP-version du använder för din website. Med detta sagt kanske du ej hittar PHP-versioner äldre än 7.0 här.

Under det kan du valfritt aktivera inställningarna ”Load extensions: libxml, openssl, mbstring, iconv, gd” och ”Network access (e.g., for browsing plugins)”.

Den första inställningen kommer att hämta de specifika PHP extensions (libxml, openssl, mbstring, iconv och gd) för att förbättra din WordPress Playground. Men de är inte nödvändiga.

Den andra inställningen är ett anrop till ”Network access”. Det är en utvald funktion som ansluter din WordPress Playground till den officiella plugin directory så att du kan installera WordPress themes och plugins direkt från miljön.

Slutligen kan du välja en WordPress-version för Playground. Du bör välja den version som du för närvarande använder för din WordPress blogg eller website.

WordPress gör också ”WordPress Nightly”-versionen tillgänglig. Detta är utvecklingsversionen av WordPress som innehåller de senaste ändringarna som gjorts av WordPress-utvecklingsgruppen.

Du kan använda detta om du är en plugin- eller theme-utvecklare och vill testa kompatibiliteten med nästa update av WordPress.

När du är klar med att konfigurera dessa Settings går du vidare och klickar på ”Tillämpa ändringar”.

Och det är all för settings. Nu kan du heada till admin area för att börja testa sandlådan.

För att öppna admin area, hovera över site title menu och click ’Dashpanel’. Du kan också gå till Full Site Editing genom att clicka på ”Edit site”.

Så här installerar du teman och tillägg i WordPress Playground

Det finns två sätt att installera ett WordPress plugin eller theme i WordPress Playground. Det ena är att gå till en plugin- eller tema-sida på WordPress.org och klicka på knappen ”Download”.

Detta kommer att save plugin eller temas zip-fil till din dator.

Sedan kan du fortsätta med den vanliga, manuella WordPress installationen för tillägg och themes. Du kan läsa våra guider för mer instruktioner:

• Så här installerar du ett tillägg till WordPress (Step-by-Step för Beginner)
• Så här installerar du ett WordPress Theme (Beginner’s Guide)

Denna metod fungerar också för att testa premium WordPress tillägg och premium WordPress teman.

För plugins, gå helt enkelt till instrumentpanelen på WordPress Playground och navigera till Plugins ” Add New Plugin.

Efter det klickar du på knappen ”Upload Plugin” och väljer ”Choose File” för att uploada zip-filen för plugin som du downloadade tidigare. Slutligen klickar du på ”Install Now”.

När det gäller teman kommer WordPress att ha ett standardtema installerat för dig när du först använder Playground.

Men om du vill använda ett new gratis WordPress theme kan du downloada det manuellt från WordPress theme directory. Gå sedan till Playground under Appearance ” Themes och klicka på ” Add New Theme”.

På nästa vy klickar du på knappen ”Upload Theme”.

Efter det väljer du filen med temat som du downloadade tidigare och klickar på ”Install Now”.

Om den här processen verkar lite tråkig, oroa dig inte. WordPress har arbetat på en beta-funktion som allow Playground att ansluta till plugin eller theme directory. Detta bör aktiveras om du väljer ”Nätverksåtkomst” under installationen tidigare.

På så sätt fungerar Playground precis som en vanlig WordPress dashboard och du kan installera gratis themes och plugins utan att först saved dem på din dator.

Ett annat sätt att installera themes och tillägg i WordPress dashboard är genom att använda WordPress Playgrounds API för sökning. Det fungerar genom att det är obligatoriskt för dig att add to några sökningsparametrar till WordPress Playground URL.

Så om du till exempel vill installera och testa AIOSEOs gratisversion i WordPress Playground, kan du gå till AIOSEOs WordPress.org page. Efter det, obs/observera AIOSEO:s URL-slug.

Nu, på en new webbläsare tab, skriv in WordPress Playgrounds URL med AIOSEO:s slug, gillar så:

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

När du trycker på ”Enter” kommer WordPress Playground automatiskt att skapa en new miljö med AIOSEO plugin installerat.

Om du vill installera temat, byt bara ut plugin-parametern mot theme, gillar så:

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

Du kan även kombinera flera sökningsparametrar om du vill installera flera tillägg eller teman högst upp på WordPress core. Se bara till att separera varje parameter med ampersand & - tecknet.

Så här kommer URL:en att gilla om du installerar tilläggen AIOSEO och MonsterInsights samt temat Astra:

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

Om du är Chrome-användare kan du också installera utökning Open in WordPress Playground. Med detta kommer du att se knappen ”Playground” när du går till en plugin- eller theme-sida på WordPress.org.

Om du klickar på den öppnas en new WordPress Playground-miljö med pluginet eller temat installerat. Det förenklar metoden för sökning av parametrar.

Så här exporterar/importerar du en webbplats som skapats med WordPress Playground

Låt oss säga att du har lekt med WordPress Playground, lagt till några nya posts med Gutenberg editor, och kanske till och med skapat en hel website. Det skulle vara slöseri att bara stänga tabben och förlora alla dina framsteg för alltid.

Som tur är kan du exportera din site från WordPress Playground och save den på din dator. När du öppnar Playground igen kan du alltid uploada den exporterade ZIP-filen för att fortsätta där du slutade.

För att göra detta, navigera till den övre menyn i Playground och clicka på den trelinjiga menyn i det övre högra hörnet. Klicka sedan på ”Download as .zip”.

Din webbläsare kommer då att börja downloada filen till din dator.

För att uploada filen till WordPress Playground öppnar du bara Playground-webbplatsen och klickar på menyn med tre rader igen. Efter det klickar du på ”Återställ från .ZIP”.

En popup kommer nu att be dig välja en fil som du exporterade tidigare.

När du har valt filen klickar du bara på ”Importera”.

Om filen är giltig kommer du att se en popup som meddelar dig att importen lyckades och Playground uppdateras med den nya instansen.

Klicka bara på ”OK” för att close popupen.

Importera/Exportera WordPress Playground till GitHub

Om du har ett GitHub account kan du också exportera och importera din site från WordPress Playground. GitHub är en fantastisk plattform som allow you att spåra ändringar på din website, säkerhetskopiera dina filer och samarbeta med andra användare.

För att exportera en site från WordPress Playground till GitHub, click the three-line menu and choose ”Export Pull Request to GitHub”.

I nästa popup ser du att WordPress uppmuntrar dig att saved din website till din dator som backup. När du har gjort det kan du kryssa i boxen ”Jag exporterade min Playground som zip”.

Klicka sedan på knappen ”Anslut till ditt GitHub account”.

Därefter måste du bekräfta att du auktoriserar WordPress Playground att komma åt dina repository.

Klicka bara på ”Authorize adamziel” för att fortsätta.

I det här skedet går du vidare och väljer vilken typ av filer du exporterar: plugins, teman eller wp-content-katalog. Om du vill exportera plugins, teman, mediefiler, widgetar, menyer och teckensnitt väljer du det sista alternativet.

Du måste också ange URL:en till det GitHub repository som du gillar att exportera site till. Klicka sedan på knappen ”Nästa steg”.

När du har gjort det måste du välja om du ska skapa en new pull request eller updating av en befintlig. För demonstrationsändamål väljer vi det första alternativet.

Därefter anger du sökvägen i repository där ändringarna ska överföras.

Du måste också infoga ett commit message för att ange vilka ändringar som har gjorts med hjälp av WordPress Playground.

När alltihop är klart klickar du på ”Create Pull Request”.

Om exporten lyckas kommer WordPress att visa en popup med en link till den nya pull request.

Klicka bara på länken för att se den i action.

Om du nu vill importera en site från GitHub till WordPress Playground klickar du bara på menyn med tre rader igen.

Välj sedan ”Importera från GitHub”.

Om du öppnar en helt new WordPress Playground-miljö kan du behöva göra hela processen med att auktorisera GitHub Playground igen.

Därefter klickar du bara på den GitHub repository URL som du gillar att importera från. WordPress ger några exempel om du är osäker.

Därefter måste du ange vilka filer du importerar: themes, plugins eller hela wp-content directory.

Du kan också infoga sökvägen till det repository som du importerar från. När du är klar klickar du bara på ”Import”.

Om importen fungerar kommer du att se ett success message popup, som bekräftar att WordPress Playground kommer att uppdateras med den nya instansen.

En annan sak du kan göra med WordPress Playground och GitHub är att förhandsgranska en befintlig GitHub pull request från WordPress-projektet. På så sätt kan du se vilka förbättringar och utvecklingar som görs i WordPress och testa dem.

För att göra detta kan du klicka på menyknappen med tre rader igen och välja ”Förhandsgranska WordPress Pull Request”.

Därefter kan du infoga URL:en eller ID:et för pull request i lämpligt fält.

Därefter klickar du på ”Go”.

Hur man använder WordPress Playground Blueprints

I WordPress är blueprint en enkel JSON-fil som hjälper dig att snabbt och enkelt ställa in en anpassad WordPress-miljö. Detta inkluderar inställningar som vilken version av WordPress och PHP som ska användas, vilka plugins och teman som ska installeras och hur startsidan ska se ut.

Om du klickar på menyn med tre rader längst upp på WordPress Playground-sidan kan du välja ”Edit the Blueprint” för att ändra kodversionen av din miljö.

Så här ser Blueprint-sidan ut.

Härifrån kan du ändra koden, spara den på din dator för att dela den senare eller till och med köra en annan användares Blueprint. Se bara till att du kan grunderna i kodning med WordPress så att Blueprint fungerar som den ska.

Du kan kolla in andras exempel i WordPres Blueprints Gallery.

Så här embedar du WordPress Playground på din website

Om du skriver en WordPress tutorial, kommer du sannolikt att inkludera screenshots från WordPress dashboard för att guida användare genom dina instruktioner. Men ibland illustrerar screenshots inte exakt de actions som du beskriver.

Det är här WordPress Playground kan komma till nytta. Du kan embedda den på din page eller post, vilket ger användarna en mer interaktiv läsupplevelse. De kan följa med i dina instruktioner med hjälp av Playground.

Först måste du öppna Gutenberg block editor för en page eller post. När du är där klickar du på knappen ”+” add block och väljer Custom HTML-blocket.

Nu går du vidare och kopierar koden under och klistrar in den i HTML-blocket:

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

Om du vill kan du också add to några query parameters till denna URL som vi har visat you tidigare.

Efter det klickar du på ”Publicera” eller ”Updated” för att få ändringarna att gälla.

WordPress Playground kan se annorlunda ut beroende på ditt theme.

I vårt fall såg det inte ut att vara i linje med blocken ovanför, och själva elementet var för litet för att interagera med.

För att undvika detta kan du använda den här koden istället:

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

Här är iFrame-taggen omsluten av div-tags för att Playground embed ska följa containerns padding och marginal.

Vi har också add to style-attributet för att ställa in iFrames bredd till 100% av dess container och höjden till 500 pixlar.

Så här ser det ut on the front end:

Så här rapporterar du ett fel i WordPress Playground

Om du upplever några problem i WordPress Playground kan du rapportera dem till WordPress-teamet för att få dessa fel åtgärdade. För att göra det kan du klicka på menyn med tre rader längst upp på sidan och klicka på alternativet ”Rapportera fel”.

Du bör nu se en popup där du kan beskriva hur felet uppstår. Du bör också infoga webbadressen till din WordPress Playground-miljö så att teamet kan se vad som exakt hände.

När du har gjort det klickar du bara på ”Rapportera fel”.

Med WordPress Playground kan du dessutom se din miljös felloggar.

Det gör du genom att klicka på menyn med tre rader igen och välja ”View logs”.

En popup-ruta visas nu och visar listan över fel.

Så här ser det ut:

Vanliga frågor om WordPress Playground

Låt oss täcka några vanliga frågor om WordPress Playground.

Kan du använda WordPress i din webbläsare?

Ja, med WordPress Playground kan du använda WordPress direkt i din webbläsare. You can build websites and try out themes and plugins before installing them on your live site.

Kan jag installera customizes teman och tillägg i WordPress Playground?

Ja, du kan installera och ändra teman eller plugins i WordPress Playground för att se om de fungerar i adminområdet och är kompatibla med vissa WordPress-versioner.

Kan jag uploada en site som är gjord med WordPress Playground till mitt webbhotell account?

Tekniskt sett kan du exportera din site från WordPress Playground och importera den till ditt WordPress webbhotell konto. Men eftersom WordPress Playground använder SQLite-databasen kan du behöva konvertera databasen till MySQL för att webbplatsen ska kunna runna på en web server.

Hur kör jag tillägg och themes till WordPress lokalt?

Om du vill runka tillägg och themes från WordPress i en lokal utvecklingsmiljö måste du först skapa en lokal site för WordPress. Du kan läsa vår tutorial om hur du bygger en lokal WordPress site för steg-för-steg instruktioner.

Vi hoppas att den här artikeln har hjälpt dig att lära dig vad WordPress Playground är och hur du använder det i din webbläsare. Du kanske också vill kolla in vår artikel om de bästa dra-och-släpp-sidbyggarna i WordPress och vår guide om hur du lägger till dynamiskt innehåll i WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.