WordPress Playground – vaš poligon za testiranje WordPress-a

Verovatno ste već bili u situaciji da želite da brzo testirate neku novu WordPress temu ili plugin, bez da prethodno morate da radite novu instalaciju WordPress-a.

Ili možda samo želite da brzo napravite dizajn svog novog WordPress sajta i pokažete ga prijateljima ili klijentima, bez da gubite vreme na postavljanje celog WordPress okruženja.

Ovo su samo neke od situacija u kojima vam alat pod nazivom WordPress Playground može biti od koristi, ali sa njim možete raditi razne vrste testiranja WordPress-a.

U ovom tekstu ćemo vam predstaviti WordPress Playground i objasniti kako možete da ga koristite u svom svakodnevnom radu.

Šta je WordPress Playground?

WordPress Playground je privremeno WordPress okruženje koje funkcioniše u vašem browser-u, a u kojem možete eksperimentisati sa WordPress-om bez potrebe da ga prethodno instalirate.

U pitanju je testno okruženje u kojem se možete baviti raznim izmenama, bez uticaja na vaš postojeći WordPress sajt.

Sve što treba da uradite da biste koristili WordPress Playground je da odete na njegov web sajt i kliknete da dugme Explore Playground.

Otvoriće vam se okruženje identično bilo kojoj novoj instalaciju WordPress-a, sa preview-em tek instaliranog WordPress web sajta i pristupom WordPress admin dashboard-u.

Nakon toga možete instalirati nove plugin-e, teme, instalirati nove stranice i raditi sve ostalo što biste inače radili nakon instalacije nove kopije WordPress-a.

Glavna razlika je što se sva podešavanja koja radite samo privremeno čuvaju u vašem browser-u i što će nestati prilikom prvog osvežavanja stranice. Ipak, imate opciju da preuzmete vaš sajt sa podešavanjima koja napravite, a naknadno ga upload-ujete u Playground i nastavite sa radom.

Kako radi WordPress Playground?

WordPress Playground funkcioniše zahvaljujući tehnologijama koje omogućavaju pokretanje WordPress-a bez standardnih web servera i baza podataka:

WebAssembly (Wasm)

WebAssembly je ključna tehnologija koja omogućava pokretanje PHP koda direktno u browser-u. Umesto da se oslanja na tradicionalni server, WebAssembly prevodi PHP kod u formu koju browser može da pokreće lokalno. Ova tehnologija omogućava WordPress-u da radi bez potrebe za korišćenjem posebnog servera.

SQLite baza podataka

Umesto standardne MySQL baze podataka koju WordPress podrazumevano koristi nakog regularne instalacije, Playground koristi SQLite bazu podataka koja se pokreće unutar browser-a.

Service Worker i Worker Threads API

Service Worker i Worker Threads su web tehnologije koje omogućavaju bolje upravljanje pozadinskim procesima u browser-u. U pitanju su tehnologije koje upravljanju zahtevima i izvršavanjem skripti, omogućavajući na taj način WordPress-u da radi u browser-u.

Podrška za Node.js i CLI alate

WordPress Playground se lako integriše sa alatima poput node.js, Visual Studio Code i CLI alatom pod nazivom wp-now. Ukoliko ste developer, ova podrška vam omogućava da koriste WordPress Playground za testove i razvoj, bez potrebe za lokalnim podešavanjima.

Lokalno čuvanje podataka

Kada radite u Playground-u, imate nekoliko opcija za čuvanje podataka. Možete izabrati da se izmene čuvaju u browser-u ili čak na vašem računaru, pa da ih naknadno ponovo upload-ujete i nastavite sa radom.

Ograničenja WordPress Playground-a

Iako je Playground odličan alat za brzo testiranje i eksperimentisanje, ima nekoliko ograničenja koja bi trebalo da imate u vidu pre nego što se odlučite da ga koristite u svom svakodnevnom radu:

Nema direktan pristup temama i plugin-ovima

U Playground-u ne možete da pretražujete i instalirate teme i plugin-ove direktno iz WordPress repozitorijuma, kao što biste to radili u standardnoj WordPress instalaciji.

Umesto toga, potrebno je da idete u repozitorijum koji se nalazi na WordPress.org web sajtu, preuzmete željenu temu ili plugin u .zip formatu, a zatim ga ručno upload-ujete u Playground.

Dobra vest je da WordPress tim radi na razvoju funkcionalnosti koja će omogućiti direktnu instalaciju tema i plugin-ova iz samog Playground-a.

Sve izmene su privremene

Sve izmene koje napravite u Playground-u su privremene, što znači da će nestati čim osvežite stranicu ili zatvorite tab u svom browser-u. Ukoliko želite da sačuvate svoj rad, možete preuzeti svoju WordPress instancu kao .zip fajl i kasnije je ponovo učitati. Međutim, ako zaboravite da to uradite pre osvežavanja stranice, sve izmene koje ste u međuvremenu uradili će biti izgubljene.

Problemi sa embed-ovanjem putem iFrame-a

Kada embed-ujete Playground u svoju web stranicu putem iFrame-a, možete se susresti sa određenim problemima. Na primer, može doći do slučajnog osvežavanja stranice ili problema sa prikazivanjem samog okruženja, što u nekim situacijama može otežati korišćenje alata.

Alat je još uvek u fazi razvoja

Iako je WordPress Playground veoma koristan alat, važno je da imate u vidu da je on još uvek u ranoj fazi razvoja. Zbog toga možete naići na određene greške ili nedostatke u funkcionalnostima.

WordPress tim aktivno radi na unapređenju ovog alata, pa se u budućnosti može očekivati da većina tih problema bude otklonjena i da će rad u WordPress Playground-u vremenom biti stabilniji.

Kako da koristite WordPress Playground

Da biste koristili WordPress Playground otvorite svoj browser i u adress bar kopirajte ili kucajte ovu adresu https://wordpress.org/playground/. Kada vam se otvori web sajt kliknite na dugme Explore Playground i već u sledećem prozoru bićete unutar Playground-a.

Možete i preskočiti otvaranje WordPress Playground web sajta, tako što ćete u address bar browser-a direktno ukucati ili kopirati adresu: https://playground.wordpress.net/

Na ovaj način će vam se odmah otvoriti Playground i odmah ćete moći da radite u njemu.

Nakon otvaranja, odmah ćete videti preview najnovije teme koja je u tom trenutku podrazumevana.

Dostupan vam je i admin dashboard, kao i kod svake regularne WordPress instalacije.

Kako da podesite WordPress Playground?

Sada kada znate kako da pristupite WordPress Playground-u, hajde da vidimo kako da ga podesite za rad.

Da biste pristupili podešavanjima, kliknite na dugme u gornjem desnom uglu koje u trenutku pisanja ovog teksta ima oznaku PHP 8.0 – WP 6.6 – Storage:None. Zapravo ova oznaka predstavlja trenutnu verziju PHP-a i WordPress-a podržanu/instaliranu u WordPress Playground-u.

Nakon klika na ovo dugme otvoriće vam se pop-up prozor za podešavanje.

Prva stvar koju možete da podesite je Storage type. Ovo se odnosi na način na koji će WordPress Playground čuvati izmene koje napravite. Postoje tri opcije za čuvanje:

• None: Ova opcija znači da se sve izmene koje napravite gube čim osvežite stranicu. Ova opcija je korisna za kratke, brze testove gde ne želite da zadržite nikakve promene.
• Browser: Ova opcija čuva izmene lokalno u vašem browser-u. To znači da će podaci biti sačuvani sve dok ne zatvorite tab u browser-u ili dok ne obrišete keš. Ovo je dobra opcija ukoliko planirate da radite duže vreme, ali ne želite da sačuvate podatke na svoj uređaj.
• Device: Ova opcija omogućava da sačuvate sve promene na svom računaru, slično kao što biste radili sa lokalno instaliranim WordPress-om. Možete da odaberete folder na svom uređaju u kojem će se čuvati svi fajlovi i podaci sa WordPress Playground-a.

Sledeće je podešavanje verzije PHP-a (PHP version). Preporučujemo da izaberete istu verziju PHP-a koju koristi vaš glavni sajt, kako biste osigurali kompatibilnost u slučaju da koristite Playground za testiranje svog sajta.

Dostupne su PHP verzije od 7.0 pa naviše, a ovo podešavanje je posebno korisno ako razvijate plugin-ove ili teme koje želite da testirate na različitim PHP verzijama.

Takođe, možete omogućiti određene PHP ekstenzije kao što su libxml, openssl, mbstring, iconv, i gd. Ove ekstenzije nisu neophodne za osnovne WordPress funkcionalnosti, ali mogu biti potrebne za specifične plugin-ove ili teme koje koriste napredne funkcije.

Sledeća opcija koju možete podesiti je Network Access ili mrežni pristup. Ovo je beta funkcija koja omogućava da se povežete sa WordPress-ovim direktorijumom plugin-ova i tema direktno iz Playground-a, bez potrebe za preuzimanjem fajlova na računar i ručnim upload-om.

Ovo značajno olakšava instalaciju plugin-a i tema, jer možete da ih pretražujete i injtalirate kao što biste to radili na pravom WordPress sajtu.

Na kraju, tu je opcija za podešavanje verzije WordPress-a (WordPress Version) koju želite da koristite. Možete da izaberete trenutnu stabilnu verziju, koja je ista kao ona koja je dostupna za standardne WordPress sajtove, ili eksperimentalnu verziju poznatu kao WordPress Nightly.

Ova verzija sadrži najnovija ažuriranja i promene koje razvijaju WordPress timovi, a korisna je za testiranje novih funkcionalnosti i kompatibilnosti plugin-ova i tema sa budućim verzijama WordPress-a.

Kada završite sa podešavanjima, kliknite na dugme Apply Changes da biste primenili sve izmene.

Nakon podešavanja možete da uđete na svoj admin dashboard i počnete sa radom na back-end-u vaše WordPress Playground instance.

U admin dashboard ulazite isto kao i kod regularnog WordPress sajta, s tom razlikom što ovde nema logovanja, već u gornjem levom uglu birate opciju My WordPress Website i iz menija izabrete opciju Dashboard. Na taj način odmah ulazite u admin dashboard.

Kako da instalirate teme i plugin-e u WordPress Playground-u

Kao što ste videli, WordPress Playground omogućava jednostavno testiranje tema i plugin-a, ali postupak instalacije je malo drugačiji nego kod standardne WordPress instalacije.

Postoji nekoliko načina na koje možete instalirati teme i plugin-ove u ovom okruženju:

Ručna instalacija tema i plugin-a

Kako smo već objasnili, WordPress Playground za sada ne podržava direktan pristup WordPress-ovom direktorijumu tema i plugin-a, tako da ćete morati da ih prvo preuzmete, a zatim i upload-ujete u Playground. Evo kako to možete da uradite:

Preuzimanje teme/plugin-a: Prvo, posetite sajt WordPress.org, pronađite željenu temu ili plugin, i kliknite na dugme Preuzmi (Download). Ovo će sačuvati .zip fajl teme ili plugin-a na vaš računar.

Upload u WordPress Playground: Nakon što imate preuzetu datoteku, idite u admin dashboard WordPress Playground-a. Da biste upload-ovali plugin, idite na Plugins > Add New > Upload Plugin.

Zatim izaberite Choose File i odaberite .zip fajl koji ste preuzeli. Kliknite na Install Now da biste instalirali plugin, a zatim i na Activate kako biste ga aktivirali.

Za teme, idite na Appearance > Themes > Add New, a zatim kliknite na Upload Theme. Upload-ujte preuzeti .zip fajl i instalirajte temu.

Instalacija preko Query API-ja

WordPress Playground podržava instalaciju tema i plugin-a pomoću dodavanja parametara u URL adresu, što čini proces jednostavnijim.

Da biste to uradili, posetite WordPress.org i pronađite plugin ili temu koju želite da instalirate. U URL-u za plugin, pronađite slug (naziv plugin-a ili teme).

Na primer, ako želite da instalirate plugin All in One SEO, slug će biti all-in-one-seo-pack.

Otvorite novi tab u browser-u i idite na URL:

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

Za teme, promenite parametar u theme. Na primer:

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

WordPress Playground će automatski kreirati novu instancu sa instaliranim plugin-om ili temom.

Omogućavanje mrežnog pristupa (beta funkcija)

Ako želite da izbegnete ručno preuzimanje i upload .zip fajlova, možete omogućiti Network Access tokom početne konfiguracije WordPress Playground-a. Ovo će vam omogućiti direktan pristup WordPress-ovom direktorijumu tema i plugin-ova unutar WordPress administracije.

Kada pokrenete WordPress Playground, kliknite na meni u gornjem desnom uglu gde možete da konfigurišete opcije. Tu omogućite Network Access (mrežni pristup).

Nakon toga, idite u admin dashboard i sada ćete u sekciji Plugins ili Themes moći direktno da pretražujete i instalirate plugin-e i teme, baš onako kako biste to inače radili na standardnom WordPress sajtu.

Korišćenje Chrome ekstenzije Open in WordPress Playground

Za korisnike Google Chrome-a, postoji ekstenzija koja omogućava još bržu instalaciju plugin-a i tema u WordPress Playground-u. Nakon instalacije ekstenzije, na stranicama plugin-a i tema na WordPress.org sajtu pojaviće se dugme Playground.

Klikom na to dugme, WordPress Playground će automatski otvoriti okruženje sa željenim plugin-om ili temom.

Kako da izvezete i uvezete web sajt napravljen u WordPress Playground-u?

Recimo da ste se igrali sa WordPress Playground-om, dodali neke postove putem Gutneberg editora, a možda čak napravili i ceo web sajt. Bilo bi šteta da u tom slučaju ne postoiji neki način da sačuvate svoj rad.

Srećom postoji način i jednostavno je da se uradi. Možete da izvezete ceo sajt koji ste napravili u WordPress Playground-u i da ga sačuvate na svom računaru.

Nakon toga, kada god ponovo otvorite WordPress Playground, možete da upload-ujete zip fajl koji ste prošli put izvezli i da nastavite gde ste stali sa uređivanjem sajta.

Da biste ovo uradili, u gornjem desnom uglu WordPress Playground-a kliknite na meni, a zatim izaberite opciju Download as .zip.

Vaš browser će početi da preuzima zip fajl na vaš računar.

Da biste upload-ovali ovaj zip fajl na WordPress Playground, otvorite Playground web site i kliknite ponovo na meni u gornjem desnom uglu. Sada iz padajućeg menija izaberite opciju Restore from .zip.

Pojaviće se pop-up prozor koji će vas upitati da izaberete željeni zip fajl.

Kada ste ga izabrali kliknite na dugme Import.

Ukoliko ste izabrali odgovorajući fajl, otvoriće vam se notifikacija unutar vašeg browser-a sa porukom da je uvoz fajla u Playground bio uspešan i da je Playground instanca ažurirana. Kliknite na dugme OK da biste zatvorili notifikaciju.

Uvoz i izvoz WordPress Playground web sajta u GitHub

Ukoliko imate GitHub nalog, takođe možete izvesti i uvesti svoj web sajt iz WordPress Playground-a.

Da biste izvezli svoj web sajt iz Playground-a u GitHub ponovo kliknite na meni u gornjem desnom uglu WordPress Playground-a i izaberite opciju Export Pull Request to GitHub.

Pojaviće vam se pop-up prozor sa porukom u kojoj vas WordPress podseća da sačuvate svoj web sajt na svoj računar kao backup. Kada ste to uradili, možete da čekirate box I exported my Playground as zip box.

Zatim, kliknite na dugme Connect to your GitHub account.

Sada treba da potvrdite da ste autorizovali Playground da pristupi vašim repozitorijumima.

Nakon toga treba da izaberete koje tipove fajlova želite da izvezete: plugine, teme ili sadržaj wp-content direktorijuma. Ukoliko želite da izvezete plugin-e, teme, medijske fajlove, widget-e, menije i fontove, onda odaberite posednju opciju.

Takođe, biće potrebno da navedete URL GitHub repozitorijuma u koji želite da izvezete svoj WordPress Playground web sajt.

Nakon što ste sve to završili, kliknite na dugme Next step.

Sada treba da izabrete da li želite da kreirate novi pull request ili ažurirate postojeći. Za potrebe ovog teksta, mi smo odabrali prvu opciju.

Sada treba da unesete putanju svog repozitorijuma gde izmene treba da budu commit-ovane.

Biće potrebno da ubacite commit poruku da navedete koje izmene su urađene korišćenjem WordPress Playground-a.

Kada ste sve ovo završili, kliknite na dugme Create Pull Request.

Ukoliko je izvoz prošao kako treba, WordPress će prikazati pop-up prozor sa linkom do novog pull request-a.

Kliknite na link da biste ga otvorili.

Ukoliko sada želite da uvezete svoj web sajt iz GitHub-a u WordPress Playground, opet kliknite na meni u gornjem desnom uglu, a zatim izaberite opciju pod nazivom Import from GitHub.

Ukoliko otvarate potpuno novo WordPress Playground okruženje, možda će biti potrebno da ispočetka prođete autorizaciju između GitHub-a i WordPress Playground-a.

Nakon toga samo kliknite na URL GitHub repozitorijuma iz kojeg želite da uvezete svoj web sajt.

U sledećem koraku će biti potrebno da navedete koje fajlove želite da uvezete: teme, plugin-e ili ceo wp-content direktorijum.

Takođe, možete da unesete putanju repozitorijuma iz kojeg želite da uvezete web sajt. Kada ste to završili, samo kliknite na dugme Import.

Ukoliko je sve prošlo kako treba, videćete ponovo pop-up notifikaciju sa informacijom da će Playground biti osvežen sa novom instancom.

Još jedna stvar koju možete da uradite sa Playground-om i GitHub-om je preview postojećeg GitHub pull request-a. Na ovaj način možete da vidite koja su poboljšanja i izmene rađene na sajtu i testirati ih po potrebi.

Da biste ovo uradili, kliknite ponovo na meni u gornjem desnom uglu WordPress Playground-a i izaberite opciju Preview WordPress Pull Request.

Sledeće, možete da u odgovarajuće polje ubacite URL ili ID pull request-a. Nakon toga samo kliknite na dugme Go.

Kako da koristite WordPress Playground blueprint

U WordPress-u, blueprint je jednostavan JSON fajl koji vam pomaže da brzo i lako podesite prilagođeno WordPress okruženje. To uključuje podešavanja poput koju verziju WordPress-a i PHP-a da koristite, koje plugin-e i teme da instalirate i koja bi trebalo da bude staging stranica.

Kao i u svim porethodnim podešavanjima, potrebno je da prvo kliknete na meni u gornjem desnom uglu Playground-a, a zatim izaberite opciju Edit the Blueprint, kako biste izmenili verziju koda vašeg okruženja.

Evo kako izgleda Blueprint stranica.

Sada možete da izmenite kod, sačuvate ga na svom računaru za kasnije deljenje, ili čak pokrenete Blueprint drugog korisnika. Imajte samo u vidu da je za izmenu Blueprint-a potrebno da imate osnovno poznavanje koda, kako biste ispravno izmenili kod.

Kako da embedujete WordPress Playground na svom web sajtu

Playground možete biti embedovan u vaš post ili stranicu, ostvarujući na taj način veću interakciju između korisnika i vašeg sajta.

Da biste ovo uradili, prvo otvorite Gutenberg blok editor za stranicu ili post. Kada ste u njemu, kliknite na znak + i izaberite opciju Custom HTML block.

Sada kopirajte kod ispod i zalepite ga u HTML blok.

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

Ukoliko želite možete da dodate i neke query parametre uz ovaj URL, onako kako smo pokazali ranije u ovom tekstu.

Nakon toga kliknite na Publish ili Update, da bi vaše izmene bile vidljive i na živom sajtu.

Naravno, Playground može izgledati drugačije, u zavisnosti od teme koju koristite.

Kako da prijavite grešku u WordPress Playground-u

Ukoliko prilikom rada iskusite bilo kakvu grešku u radu WordPress Playground-a, možete to odmah prijaviti WordPress timu, kako bi je ispravili. Da biste prijavili grešku, kliknite na meni u gornjem desnom uglu, a zatim izaberite opciju Report error.

Sada bi trebalo da vidite pop-up prozor u koji možete da upišete opis greške i na koji način se ona kod vas desila. Takođe, trebalo bi da unesete URL vašeg WordPress Playground okruženja, kako bi WordPress tim mogao da vidi šta se zapravo dešava na vašem sajtu.

Kada ste završili, kliknite na duge Report error.

Dodatno, Playground vam omogućava da vidite error logove vašeg okruženja.

Logove možete da vidite tako što ćete opet kliknuti meni u gornjem desnom uglu WordPress Playground-a i izaberite View logs.

Pojaviće se pop-up prozor i prikazati vam listu grešaka.

Zaključak

Kao što ste videli, WordPress Playground je koristan alat za brzo testiranje WordPress tema, plugin-a, i drugih funkcionalnosti, bez potrebe za lokalnim instalacijama ili serverima.

Iako ima određena ograničenja, poput privremenog čuvanja podataka i manuelne instalacije pluginova, omogućava korisnicima, posebno developerima, da lako eksperimentišu i unapređuju svoje sajtove u kontrolisanom okruženju.

Takođe, ovaj alat je odličan za brzo i jednostavno testiranje, kao i za prezentaciju izrade sajta potencijalnim klijentima, bez potrebe za domenom i hostingom.

Ipak, za ozbiljniji rad ili naprednije testiranje, preporučujemo korišćenje development okruženja na poddomenu, kao i brzo kloniranje postojećeg sajta pomoću alata kao što je Installatron.

Ukoliko niste sigurni kako ovo da uradite, u jednom od narednih tekstova ćemo objasniti kako da brzo i jednostavno uradite ovo kloniranje pomoću Installatron-a.

Nenad Mihajlović