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

När vi skapar handledningar för våra läsare behöver vi ofta snabba sätt att testa WordPress-funktioner, plugins och teman. När allt kommer omkring skulle det inte vara särskilt hjälpsamt att rekommendera lösningar utan att testa dem noggrant först, eller hur?

Introducerar WordPress Playground: ett praktiskt verktyg som låter dig utforska WordPress direkt i din webbläsare. Ingen komplicerad installation krävs, och viktigast av allt, ingen risk för din befintliga webbplats.

Vi har funnit WordPress Playground otroligt användbart i vår egen testprocess, och vi har upptäckt flera smarta sätt att få ut det mesta av dess funktioner. Oavsett om du precis har börjat med WordPress, vill prova nya verktyg säkert, eller behöver en snabb testmiljö, kan detta verktyg göra ditt liv mycket enklare.

I den här guiden går vi igenom allt du behöver veta för att använda WordPress Playground effektivt.

Vad är WordPress Playground?

WordPress Playground är en tillfällig WordPress-instans i webbläsaren där du kan experimentera och lära dig mer om innehållshanteringssystemet.

Det är som en testmiljö där du kan göra alla möjliga WordPress-utvecklingar utan att sätta upp en faktisk, live-webbplats.

Allt du behöver göra är att gå till webbplatsen WordPress Playground för att öppna den. Sedan kan du använda WordPress som du normalt skulle göra: lägga till nya sidor, installera nya plugins, prova nya teman, och så vidare.

Om du uppdaterar WordPress Playground-sidan kommer alla anpassningar att försvinna. Du kan dock också ladda ner din WordPress-instans och ladda upp den igen till WordPress Playground.

Hur fungerar WordPress Lekplats?

WordPress Playground körs på några coola teknologier som låter dig testa WordPress utan den vanliga webbservern och databasinställningen:

1. WebAssembly-binärfil (Wasm): Den låter dig köra PHP-kod direkt i din webbläsare, 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. Service Worker och Worker Threads API:er: Dessa webbverktyg hjälper till att hantera förfrågningar och köra bakgrunds- JavaScript-skript, vilket gör det möjligt för WordPress Playground att köra PHP-appar smidigt i din webbläsare.

Dessa teknologier gör det också möjligt för utvecklare att integrera WordPress Playground med node.js, Visual Studio Code, CLI-appar och till och med OpenAI.

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

Vilka är begränsningarna med WordPress Playground?

Trots sina fördelar har WordPress Playground flera begränsningar, som:

• Anpassningar 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 av misstag uppdaterar sidan för att undvika att förlora dina framsteg.
• Det kan vara felbenäget – Baserat på vår erfarenhet av att testa plugins med WordPress Playground fungerar inte allt korrekt. Så du kan förvänta dig en del problem här och där, men du kan ge feedback till WordPress för att förbättra plattformen.
• 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 att iFrame inte fungerar.

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 nedan för att navigera genom vår handledning:

• Hur ställer man in WordPress Playground
• Hur man använder WordPress Playground Blueprints
• Hur man installerar teman och plugins i WordPress Playground
• Hur du sparar en WordPress Lekplats-instans i din webbläsare
• Hur man laddar ner/återställer en WordPress Playground-webbplats
• Hur man importerar/exporterar WordPress Playground till GitHub
• Hur man bäddar in WordPress Playground på din webbplats
• Hur du rapporterar ett fel i WordPress Lekplats
• Vanliga frågor om WordPress Playground

Hur ställer man in WordPress Playground

För att använda WordPress Playground kan du direkt gå till detta domännamn i din webbläsare: https://playground.wordpress.net

När du är på webbplatsen, vänta några ögonblick tills Playground har konfigurerats. Sedan kommer du att se webbplatsens frontend med ett standard WordPress-tema.

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 webbplats.

För att göra detta, klicka på kugghjulsikonen ‘Settings’ i det övre högra hörnet.

Det första du behöver göra är att välja en WordPress-version för Playground. Du kan välja den version du redan använder eller planerar att använda för din WordPress-webbplats.

WordPress gör även versionen 'WordPress Nightly' tillgänglig. Detta är utvecklingsversionen av WordPress som innehåller de senaste ändringarna som gjorts av WordPress-utvecklingsteamet.

Du kan använda detta om du är en plugin- eller temautvecklare och vill testa kompatibiliteten med nästa WordPress-uppdatering.

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

Vi rekommenderar att du gör den samma som den PHP-version du använder för din webbplats. Med det sagt kanske du inte hittar PHP-versioner äldre än 7.0 här.

En annan sak du kan göra i WordPress Playground är att välja språket för ditt adminområde.

Det finns dussintals att välja mellan, men för demonstrationens skull använder vi 'English (United States)'.

Nedanför det kan du aktivera inställningarna 'Tillåt nätverksåtkomst' och 'Skapa ett multisite-nätverk'.

Vi rekommenderar att du tillåter nätverksåtkomstfunktionen eftersom du kommer att kunna installera WordPress-teman och plugins direkt från miljön. På så sätt behöver du inte konfigurera dem manuellt.

Om du vill skapa ett testnätverk för WordPress multisite, föreslår vi att du aktiverar den andra inställningen.

När du är klar, klicka bara på ‘Apply Settings & Reset Playground.’

För att öppna adminområdet, för muspekaren över webbplatsens titellmeny och klicka på ‘Dashboard.’

Eller så kan du också gå till Full Site Editor genom att klicka på 'Redigera webbplats'.

Den grundläggande WordPress Playground-konfigurationen är nu klar, men låt oss utforska några ytterligare inställningar som kan förbättra din upplevelse.

Hur man använder WordPress Playground Blueprints

I WordPress är en ritning en enkel JSON-fil som hjälper dig att snabbt och enkelt konfigurera 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 till och med vilka WordPress-designelemnt som ska finnas.

Detta är ett utmärkt alternativ om du ofta skapar testmiljöer men behöver ställa in dem snabbt. Eller om du behöver dela specifika WordPress-konfigurationer med andra.

För att komma åt ritningar, klicka på den lilla fyrkantiga ikonen längst upp till vänster.

Navigera sedan till fliken 'Blueprints Gallery'.

Här hittar du offentliga ritningar som delas av andra användare. Det finns många alternativ att välja mellan. Du kan använda alternativet 'Skapa blocktema' för att bygga ett anpassat blocktema med hjälp av pluginet Create Block Theme eller prova 'Stylish Press' för att sätta upp en demo WooCommerce-webbplats.

Vi älskar särskilt Stylish Press eftersom det är riktigt användbart för att testa WooCommerce-plugins och teman för våra handledningar.

För att använda en mall, klicka bara på knappen 'Förhandsgranska' för att ladda den i din WordPress Playground.

Du kan också förvandla din egen WordPress Playground-instans till en mall.

Byt bara till fliken ‘Temporary Playground’, klicka på trepunktsknappen bredvid ‘Homepage’ och välj ‘View Blueprint’.

Detta visar din instans som en ritning .json-fil.

Om du vill spara blueprint-filen till din dator klickar du bara på diskettikonen 'Spara'.

Att spara din blueprint är användbart för framtida referens, eller så kan du dela den i blueprintgalleriet genom att följa riktlinjerna för bidrag.

För att ladda en sparad ritning, klicka på ikonen för öppen mapp bredvid diskettknappen.

Välj helt enkelt din blueprint.json-fil, så konfigurerar WordPress automatiskt din miljö baserat på den konfigurationen.

Hur man installerar teman och plugins i WordPress Playground

Det finns flera sätt att installera WordPress-plugins och teman i WordPress Playground. Om du aktiverade nätverksåtkomstfunktionen under installationen kan du installera dem direkt från WordPress-instrumentpanelen, precis som du skulle göra på en vanlig WordPress-webbplats.

För steg-för-steg-instruktioner om standardinstallationsprocessen, kolla in våra detaljerade guider:

• Hur man installerar ett WordPress-plugin (steg för steg för nybörjare)
• Hur man installerar ett WordPress-tema (nybörjarguide)

Om du inte har aktiverat nätverksåtkomst eller installerar premium WordPress-plugins eller teman, måste du följa den manuella installationsmetoden.

Ladda först ner tema- eller pluginfilen. För gratisalternativ, gå till WordPress.org, hitta ditt önskade plugin eller tema och klicka på knappen 'Ladda ner'. Detta sparar en zip-fil till din dator.

För plugins, gå helt enkelt till instrumentpanelen i WordPress Playground och navigera till Plugins » Lägg till nytt plugin.

Klicka sedan på knappen ‘Upload Plugin’ och välj ‘Choose File’ för att ladda upp plugin-zipfilen du laddade ner tidigare. Klicka slutligen på ‘Install Now’.

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

Men om du vill använda ett annat gratis eller till och med ett premium WordPress-tema, kan du ladda ner det manuellt från din källa. Gå sedan i Lekplatsen till Utseende » Teman och klicka på ‘Lägg till nytt tema’.

På nästa skärm klickar du på knappen ‘Ladda upp tema’.

Välj därefter temafilen du laddade ner tidigare och klicka på 'Installera nu'.

Ett annat sätt att installera teman och plugins är att använda WordPress Playgrounds Query API. Denna metod kräver att du lägger till några frågeparametrar till WordPress Playground-URL:en.

Så, till exempel, om du vill installera och testa AIOSEO:s gratisversion i WordPress Playground, kan du gå till AIOSEO:s WordPress.org-sida. Därefter, notera AIOSEO:s URL-slug.

Öppna nu en ny flik i webbläsaren och skriv in WordPress Playgrounds URL med AIOSEOs slug, så här:

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

När du trycker på 'Enter'-tangenten kommer WordPress Playground automatiskt att skapa en ny miljö med AIOSEO-pluginet installerat.

Om du vill installera temat, ersätt bara parametern plugin med theme, så här:

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

Du kan till och med kombinera flera frågeparametrar om du vill installera flera plugins eller teman ovanpå WordPress-kärnan. Se bara till att separera varje parameter med tecknet et-tecken &.

Här är hur URL:en kommer att se ut om du installerar AIOSEO och MonsterInsights plugins samt Neve-temat:

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

Om du är en Chrome-användare kan du också installera tillägget Open in WordPress Playground. Med detta, när du besöker en plugin- eller temasida på WordPress.org, kommer du att se knappen ‘Playground’.

Att klicka på den öppnar en ny WordPress Playground-miljö med plugin-programmet eller temat installerat. Det förenklar metoden med frågeparametrar.

Hur du sparar en WordPress Lekplats-instans i din webbläsare

Låt oss säga att du har lekt med WordPress Playground och skapat en hel väntelista-landningssida eller till och med en webbplats. Det vore slöseri att bara stänga fliken och förlora all din framgång för alltid.

Lyckligtvis låter WordPress Playground dig spara din instans i din webbläsare. För att göra detta, klicka på den lilla fyrkantiga ikonen längst upp till vänster.

Se till att du är på fliken 'Tillfällig lekplats'.

Klicka sedan på knappen 'Spara' och välj 'Spara i den här webbläsaren'.

Vänta nu på att WordPress ska lagra denna lekplats i din webbläsare. Enligt vår erfarenhet tar detta några minuter.

När du är klar ser du en ny sektion som heter 'Sparade Playgrounds'. WordPress kommer automatiskt att namnge din playground med ett kreativt namn, som 'Happy Sunny Country' eller 'Calm Classic Forest'.

Du kan fortfarande konfigurera miljöinställningarna här, precis som i föregående avsnitt. Du är dock begränsad till att ändra PHP-versionen och inställningarna för nätverksåtkomst.

Efter att ha gjort några ändringar, klicka på ‘Spara & Ladda om’ för att öppna instansen.

Nu kommer WordPress att spara varje ändring du gör i Playground-instansen, även om du stänger webbläsarfliken.

WordPress låter dig också ‘Spara i en lokal katalog.’ Klicka bara på samma ‘Spara’-knapp som tidigare och välj ‘Spara i en lokal katalog.’

Vad vi fann är att detta alternativ laddar ner alla Playground-filer ozippade, precis som en vanlig WordPress-installation. Du får vanliga WordPress-mappar som wp-content, wp-admin och andra.

Vi rekommenderar att du använder det här alternativet om du vill ladda upp dessa filer till en staging-miljö eller en tom webbplats hos en hostingtjänst.

Det är särskilt användbart när du vill bygga i WordPress Playground först och sedan arbeta med det utanför Playground-miljön.

Hur man laddar ner/återställer en WordPress Playground-webbplats

Även om det är bekvämt att spara din lekplats i webbläsaren för snabb åtkomst, och att spara uppackade filer fungerar bra för live-webbplatser, behöver du ibland något däremellan.

Att ladda ner din WordPress Playground som en zip-fil ger dig en portabel säkerhetskopia som är lätt att lagra och dela. Du kan också återställa den till vilken WordPress Playground-instans som helst.

För att börja, klicka på den lilla fyrkantiga ikonen i det övre vänstra hörnet.

Se till att du är på fliken ‘Temporary Playground’ eller i en sparad lekplats. Klicka sedan på menyn med tre punkter i det övre högra hörnet bredvid knappen ‘Homepage’.

Klicka på ‘Ladda ner som .zip’ och din webbläsare börjar ladda ner filen till din dator.

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

För att återställa din nedladdade playground, klicka på menyn med tre punkter ovanför 'Tillfällig Playground' och välj 'Importera från .zip.'

En popup-ruta visas och frågar dig att välja din exporterade fil.

Välj den och klicka på 'Importera'.

Om filen är giltig ser du ett framgångsmeddelande och Playgrounden kommer att uppdateras med din återställda konfiguration.

Klicka bara på ‘OK’ för att stänga popup-fönstret och börja arbeta med din återställda webbplats.

En cool sak med WordPress Playgrounds zip-export är att du kan använda dem med Studio by WordPress.com, som är WordPress.com:s lokala utvecklingsverktyg. Detta låter dig fortsätta arbeta med din webbplats i en riktig lokal miljö.

Gå först till webbplatsen Studio by WordPress.com och klicka antingen på ‘Download for Windows’ eller ‘Download for Mac,’ beroende på din dator.

Öppna den nedladdade filen för att påbörja installationen.

Du kommer att se ett popup-fönster som visar installationsförloppet.

Efter att installationen är klar är du redo att lägga till din första webbplats.

Dra helt enkelt din WordPress Playground zip-fil till fältet 'Importera en säkerhetskopia'. Du kan ge din webbplats vilket namn som helst som hjälper dig att identifiera den enkelt.

När det är importerat ser du instrumentpanelen för din lokala WordPress-webbplats.

För att börja arbeta på din webbplats, klicka på knappen 'Starta' längst upp till höger. Detta gör din lokala webbplats aktiv på din dator.

Vänta tills knappen 'Start' ändras till 'Körs' och klicka sedan på länken 'WP Admin' i det övre vänstra hörnet.

Detta öppnar din lokala WordPress-administratörssida, där du kan fortsätta att utveckla din webbplats.

Hur man importerar/exporterar WordPress Playground till GitHub

Om du har ett GitHub-konto kan du också exportera och importera din webbplats från WordPress Playground. GitHub är en utmärkt plattform som låter dig spåra ändringar på din webbplats, säkerhetskopiera dina filer och samarbeta med andra användare.

Börja med att klicka på den lilla fyrkantiga ikonen längst upp till vänster.

För att exportera en webbplats från WordPress Playground till GitHub, klicka på menyn med tre punkter bredvid knappen ‘Homepage’.

Därefter väljer du 'Exportera till GitHub'.

I nästa popup ser du att WordPress uppmuntrar dig att spara din webbplats på din dator som en säkerhetskopia. När du har gjort det kan du kryssa i rutan 'Jag exporterade min lekplats som zip'.

Klicka sedan på knappen ‘Anslut ditt GitHub-konto’.

Därefter måste du bekräfta att du godkänner att WordPress Playground får åtkomst till dina arkiv.

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

I det här skedet, fortsätt och välj vilken typ av filer du exporterar: plugins, teman, wp-content-katalogen eller specifika sökvägar.

Om du vill exportera alla dina plugins, teman, mediefiler, widgets, menyer och typsnitt, välj då det sista alternativet.

Du måste också ange URL:en till det offentliga GitHub-arkivet där du vill exportera webbplatsen.

Klicka sedan på knappen 'Nästa steg'.

När du har gjort det måste du välja om du vill skapa en ny pull-begäran eller uppdatera en befintlig. För demonstrationsändamål väljer vi det första alternativet.

Därefter anger du sökvägen i arkivet där ändringarna ska committas.

Du kommer också att behöva ange ett commit-meddelande för att specificera de ändringar som gjorts med WordPress Playground.

När allt är klart, klicka på 'Skapa Pull Request'.

Om exporten lyckas visar WordPress ett popup-fönster med en länk till den nya pull-begäran.

Klicka bara på länken för att se det i aktion.

Nu, om du vill importera en webbplats från GitHub till WordPress Playground, klickar du bara på menyn med tre punkter ovanför ‘Temporary Playground.’

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

Om du öppnar en helt ny WordPress Playground-miljö, kan du behöva genomgå hela GitHub Playground-auktoriseringsprocessen igen.

Därefter anger du bara GitHub-arkivet eller sökvägs-URL:en du vill importera från.

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

Du kan också ange sökvägen till arkivet som du importerar från igen om det behövs. Annars kommer WordPress automatiskt att fylla i detta fält om det redan vet vilken sökväg som ska importeras från.

När det är klart, klicka bara på ‘Importera’.

Om importen fungerar ser du ett popup-fönster med ett lyckat meddelande.

Klicka bara på ‘OK’ för att stänga det.

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.

Observera att den här funktionen vid skrivande stund endast fungerar för att förhandsgranska pull-förfrågningar från arkiven WordPress Develop eller Gutenberg.

För att göra detta kan du klicka på trepunktsmenyn igen och välja 'Förhandsgranska en WordPress PR' eller 'Förhandsgranska en Gutenberg PR'.

Därefter kan du ange URL:en eller ID:t för pull-begäran i lämpligt fält.

Efter det, klicka på 'Gå'.

Hur man bäddar in WordPress Playground på din webbplats

Om du skriver en WordPress-handledning, kommer du troligen att inkludera skärmdumpar från WordPress-instrumentpanelen för att guida användarna genom dina instruktioner. Ibland illustrerar dock skärmdumpar inte exakt de åtgärder du beskriver.

Det är här WordPress Playground kan vara användbart. Du kan bädda in det på din sida eller ditt inlägg, vilket ger användarna en mer interaktiv läsupplevelse. De kan följa dina instruktioner med hjälp av Playground.

Först måste du öppna Gutenberg blockredigerare för en sida eller ett inlägg. Väl där klickar du på knappen ‘+’ för att lägga till ett block och väljer blocket ‘Custom HTML’.

Kopiera nu koden nedan och klistra in den i HTML-blocket:

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

Om du vill kan du också lägga till några frågeparametrar till denna URL, som vi visade dig tidigare.

Klicka sedan på ‘Spara’ eller ‘Publicera’ för att göra ändringarna live.

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

I vårt fall såg det inte ut att stämma överens 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-taggar för att få Playground-inbäddningen att följa behållarens utfyllnad och marginal.

Vi lade också till attributet style för att ställa in iFramens bredd till 100 % av dess behållare, och höjden till 500 pixlar.

Så här ser det ut på framsidan:

Hur du rapporterar ett fel i WordPress Lekplats

Om du upplever några problem i WordPress Playground kan du rapportera dem till WordPress-teamet för att få felen åtgärdade.

För att göra det, klicka på den lilla fyrkantiga ikonen i det övre vänstra hörnet.

Därefter kan du klicka på menyn med tre punkter i det övre högra hörnet av sidan.

Klicka sedan på alternativet ‘Rapportera fel’.

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

När du är klar klickar du bara på 'Rapportera fel'.

Dessutom låter WordPress Playground dig visa din miljöns felloggar.

Du kan göra detta genom att navigera till avsnittet 'Loggar' på fliken 'Tillfällig lekplats' eller i en av de lekplatser du har sparat.

Vanliga frågor om WordPress Playground

Låt oss gå igenom några vanliga frågor om WordPress Playground.

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

Ja, WordPress Playground låter dig använda WordPress direkt i din webbläsare. Du kan bygga webbplatser och prova teman och plugins innan du installerar dem på din live-webbplats.

Kan jag installera anpassade teman och plugins i WordPress Playground?

Ja, du kan installera och byta 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 ladda upp en webbplats gjord med WordPress Playground till mitt hostingkonto?

Ja, du kan exportera din webbplats från WordPress Playground och importera den till ditt WordPress-värdkonto. Spara bara dina WordPress Playground-filer i en lokal katalog och ladda sedan upp dem till en tom webbplats på ditt värdkonto.

Hur kör jag WordPress-plugins och teman lokalt?

Om du vill köra WordPress-plugins och teman i en lokal utvecklingsmiljö måste du först skapa en lokal WordPress-webbplats. Du kan läsa vår handledning om hur man bygger en lokal WordPress-webbplats 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 för WordPress och vår guide om hur man lägger till dynamiskt innehåll i WordPress.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.