WordPress Playground – Jak korzystać z WordPressa w twojej przeglądarce

Wielu czytelników pytało nas, czy mogliby wypróbować WordPressa, przetestować wtyczki lub pobawić się motywami bez konfigurowania pełnej witryny internetowej lub bałaganu w witrynie na żywo. Dobra wiadomość: istnieje WordPress Playground, narzędzie, które pozwala robić to wszystko bezpośrednio w twojej przeglądarce.

WordPress Playground jest dość łatwy w użyciu, ale wciąż otrzymujemy wiele pytań na jego temat. Zauważyliśmy również, że wiele osób nie korzysta ze wszystkich jego fajnych funkcji.

Właśnie dlatego stworzyliśmy ten przewodnik. Nie ma znaczenia, czy dopiero zaczynasz korzystać z WordPressa, jeśli chcesz bezpiecznie wypróbować nowe wtyczki lub motywy na twojej witrynie, czy też jesteś programistą, który potrzebuje szybkiego miejsca do testowania rzeczy. Ten artykuł pokaże ci, jak korzystać z WordPress Playground jak profesjonalista.

Czym jest i jak działa WordPress Playground?

WordPress Playground to tymczasowa instancja WordPress w przeglądarce, w której można eksperymentować i dowiedzieć się więcej o systemie zarządzania treścią.

Jest to jak piaskownica online, w której można wykonywać wszelkiego rodzaju prace rozwojowe WordPressa, nie mając wpływu na twoją prawdziwą witrynę internetową.

Wszystko, co musisz zrobić, to przejść do witryny internetowej WordPress Playground, aby ją otworzyć. Następnie możesz korzystać z WordPressa w normalny sposób: instalować nowe wtyczki, wypróbowywać nowe motywy, utwórz nowe strony i tak dalej.

Jeśli odświeżysz stronę WordPress Playground, wszystkie konfiguratory znikną. Możesz jednak również pobrać twoją instancję WordPress i przesłać ją ponownie na WordPress Playground.

Jak działa WordPress Playground?

WordPress Playground działa w oparciu o kilka fajnych technologii, które pozwalają korzystać z WordPressa bez zwykłej konfiguracji serwera WWW i bazy danych:

1. WebAssembly binary (Wasm): Umożliwia uruchamianie kodu PHP bezpośrednio w twojej przeglądarce internetowej, dzięki czemu WordPress działa bez tradycyjnego serwera WWW. Sprawia również, że platforma jest zgodna ze wszystkimi przeglądarkami, od Chrome i Edge po Firefox i Safari.
2. Baza danych SQLite: Zamiast MySQL, WordPress Playground używa lżejszego systemu bazy danych opartego na plikach o nazwie SQLite, który działa bezpośrednio w twojej przeglądarce.
3. Interfejsy API Service Worker i Worker Threads: Te narzędzia internetowe pomagają obsługiwać żądania i uruchamiać skrypty JavaScript w tle, umożliwiając WordPress Playground płynne uruchamianie aplikacji PHP w twojej przeglądarce.

Technologie te włączają również deweloperów do integracji WordPress Playground z node.js, Visual Studio Code i narzędziem CLI o nazwie wp-now.

Dzięki tym narzędziom programiści mogą również korzystać z WordPress Playground na platformie programistycznej do celów testowych lub przejściowych.

Jakie są ograniczenia WordPress Playground?

Pomimo swoich zalet, WordPress Playground ma kilka ograniczeń, takich jak

• Brak bezpośredniego dostępu do katalogu motywów i wtyczek – Będziesz musiał instalować motywy i wtyczki, ręcznie je pobierając i wgrywając. Funkcja dostępu sieciowego w wersji beta ma rozwiązać ten problem.
• Konfiguratory własne w WordPress Playground są tymczasowe – jeśli zdecydujesz się nie zapisywać zmian w przeglądarce, będziesz musiał uważać, aby przypadkowo nie odświeżyć strony, aby uniknąć utraty twoich postępów.
• Problemy z iFrame są powszechne – jeśli osadzasz instancję WordPress Playground na twojej stronie, możesz spodziewać się pewnych problemów, od przypadkowych odświeżeń po niedziałające iFrame.
• Jest to stosunkowo nowa funkcja – nie wszystko będzie działać poprawnie, więc możesz spodziewać się pewnych czkawek tu i tam podczas eksploracji środowiska.

Biorąc to wszystko pod uwagę, Playground jest stosunkowo nowym projektem WordPress. Można więc oczekiwać, że zespół wyda nowe funkcje i poprawki błędów, aby poprawić komfort użytkowania.

Teraz, gdy już wiesz, czym jest WordPress Playground, zobaczmy, jak możesz z niego korzystać. Możesz skorzystać z poniższych odnośników, aby poruszać się po naszym poradniku:

Jak korzystać z WordPress Playground

Aby korzystać z WordPress Playground, możesz bezpośrednio przejść do tej domeny w twojej przeglądarce internetowej: https: //playground.wordpress.net

Po wejściu na witrynę internetową należy odczekać kilka chwil na skonfigurowanie Placu Zabaw. Następnie zobaczysz front-end witryny internetowej przy użyciu domyślnego motywu WordPress.

Jeśli używasz WordPress Playground do testowania, możesz skonfigurować środowisko tak, aby miało wpływ na oprogramowanie WordPress dla twojej rzeczywistej witryny internetowej.

Aby to zrobić, kliknij menu z napisem „PHP X WP X – Storage: Brak”.

Pierwszym ustawieniem, które należy skonfigurować, jest rodzaj pamięci masowej. Dostępne są trzy opcje.

„Brak” oznacza, że wszystkie zmiany zostaną utracone po odświeżeniu strony. Natomiast „Przeglądarka” oznacza, że zmiany zostaną zapisane w przeglądarce, ale znikną po zamknięciu karty przeglądarki lub wyczyszczeniu pamięci podręcznej.

Możesz również zapisać zmiany na twoim komputerze, wybierając opcję „Urządzenie”. Ta opcja pozwoli ci wybrać katalog na twoim komputerze do przechowywania plików WordPress Playground, podobnie jak w przypadku tworzenia witryny WordPress na hostingu lokalnym.

Następną rzeczą, którą należy skonfigurować, jest wersja PHP.

Zalecamy, aby była to ta sama wersja PHP, której używasz na swojej witrynie internetowej. To powiedziawszy, możesz nie znaleźć tutaj wersji PHP starszych niż 7.0.

Poniżej można opcjonalnie włączyć ustawienia „Wczytywanie rozszerzeń: libxml, openssl, mbstring, iconv, gd” i „Dostęp do sieci (np. w celu przeglądania wtyczek)”.

Pierwsze ustawienie będzie wczytywać te konkretne rozszerzenia PHP (libxml, openssl, mbstring, iconv i gd), aby ulepszyć twój WordPress Playground. Nie są one jednak konieczne.

Drugie ustawienie nosi nazwę „Dostęp do sieci”. Jest to funkcja w wersji beta i połączy twój WordPress Playground z oficjalnym katalogiem wtyczek, dzięki czemu będziesz mógł instalować motywy i wtyczki WordPress bezpośrednio ze środowiska.

Na koniec możesz wybrać wersję WordPress dla Placu Zabaw. Powinieneś wybrać wersję, której obecnie używasz na swoim blogu lub witrynie internetowej WordPress.

WordPress udostępnia również wersję „WordPress Nightly”. Jest to wersja rozwojowa WordPress, która zawiera najnowsze zmiany wprowadzone przez zespół programistów WordPress.

Możesz tego użyć, jeśli jesteś twórcą wtyczek lub motywów i chcesz przetestować zgodność z następną aktualizacją WordPressa.

Po skonfigurowaniu tych ustawień kliknij przycisk „Zastosuj zmiany”.

To wszystko, jeśli chodzi o ustawienia. Teraz możesz przejść do obszaru administracyjnego, aby rozpocząć testowanie piaskownicy.

Aby otworzyć obszar administracyjny, najedź kursorem na menu tytułu witryny i kliknij „Kokpit”. Możesz też przejść do pełnego edytora witryny, klikając „Edytuj witrynę”.

Jak zainstalować motywy i wtyczki w WordPress Playground?

Istnieją dwa sposoby instalacji wtyczki lub motywu WordPress w WordPress Playground. Jednym z nich jest przejście do strony wtyczki lub motywu na WordPress.org i kliknięcie przycisku „Pobierz”.

Spowoduje to zapisanie pliku zip wtyczki lub motywu na twoim komputerze.

Następnie możesz kontynuować zwykłą, ręczną instalację WordPressa dla wtyczek i motywów. Możesz przeczytać nasze przewodniki, aby uzyskać więcej instrukcji:

• Jak zainstalować wtyczkę WordPress (krok po kroku dla początkujących)
• Jak zainstalować motyw WordPress (przewodnik dla początkujących)

Metoda ta sprawdza się również w przypadku testowania wtyczek i motywów WordPress premium.

W przypadku wtyczek wystarczy przejść do kokpitu WordPress Playground i przejść do Wtyczki ” Utwórz nową wtyczkę.

Następnie kliknij przycisk „Prześlij wtyczkę” i wybierz „Wybierz plik”, aby przesłać pobrany wcześniej plik zip z wtyczką. Na koniec kliknij „Zainstaluj teraz”.

Jeśli chodzi o motywy, WordPress zainstaluje domyślny motyw podczas pierwszego użycia Placu Zabaw.

Jeśli jednak chcesz użyć nowego darmowego motywu WordPress, możesz pobrać go ręcznie z katalogu motywów WordPress. Następnie w Placu Zabaw przejdź do Wygląd ” Motywy i kliknij „Utwórz nowy motyw”.

Na następnym ekranie kliknij przycisk „Prześlij motyw”.

Następnie wybierz pobrany wcześniej plik motywu i kliknij „Zainstaluj teraz”.

Jeśli ten proces wydaje się nieco żmudny, nie martw się. WordPress pracuje nad funkcją beta umożliwiającą Playground połączenie się z katalogiem wtyczek lub motywów. Powinno to być włączone, jeśli wcześniej wybierzesz opcję „Dostęp do sieci” podczas konfiguracji.

W ten sposób Plac Zabaw działa jak każdy typowy kokpit WordPress i możesz instalować darmowe motywy i wtyczki bez zapisywania ich wcześniej na twoim komputerze.

Innym sposobem instalacji motywów i wtyczek w kokpicie WordPress jest użycie interfejsu API zapytań WordPress Playground. Działa to poprzez dodanie pewnych parametrów zapytania do adresu URL WordPress Playground.

Na przykład, jeśli chcesz zainstalować i przetestować darmową wersję AIOSEO w WordPress Playground, możesz przejść do strony AIOSEO na WordPress.org. Następnie należy zwrócić uwagę na uproszczoną nazwę adresu URL AIOSEO.

Teraz, na nowej karcie przeglądarki, wpisz adres URL WordPress Playground z uproszczoną nazwą AIOSEO, w taki sposób:

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

Po naciśnięciu klawisza „Enter” WordPress Playground automatycznie utworzy nowe środowisko z zainstalowaną wtyczką AIOSEO.

Jeśli chcesz zainstalować motyw, po prostu zamień parametr wtyczki na motyw, w ten sposób:

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

Możesz nawet połączyć wiele parametrów zapytania, jeśli chcesz zainstalować wiele wtyczek lub motywów na rdzeniu WordPress. Wystarczy oddzielić każdy parametr znakiem ampersand &.

Oto jak będzie wyglądał adres URL po zainstalowaniu wtyczek AIOSEO i MonsterInsights oraz motywu Astra:

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

Jeśli jesteś użytkownikiem Chrome, możesz również zainstalować rozszerzenie Open in WordPress Playground. Dzięki temu za każdym razem, gdy przejdziesz do strony wtyczki lub motywu na WordPress.org, zobaczysz przycisk „Plac zabaw”.

Kliknięcie go spowoduje otwarcie nowego środowiska WordPress Playground z zainstalowaną wtyczką lub motywem. Upraszcza to metodę parametru zapytania.

Jak eksportować/importować witrynę utworzoną za pomocą WordPress Playground

Powiedzmy, że bawiłeś się z WordPress Playground, utworzyłeś kilka nowych wpisów za pomocą edytora Gutenberg, a może nawet stworzyłeś całą witrynę internetową. Byłoby marnotrawstwem po prostu zamknąć kartę i stracić wszystkie twoje postępy na zawsze.

Na szczęście możesz wyeksportować twoją witrynę z WordPress Playground i zapisać ją na swoim komputerze. Za każdym razem, gdy ponownie otworzysz Plac Zabaw, zawsze możesz przesłać wyeksportowany plik zip, aby kontynuować od miejsca, w którym skończyłeś.

Aby to zrobić, przejdź do górnego menu Placu Zabaw i kliknij trzywierszowe menu w prawym górnym rogu. Następnie kliknij „Pobierz jako .zip”.

Przeglądarka rozpocznie pobieranie pliku na twój komputer.

Aby przesłać plik do WordPress Playground, wystarczy otworzyć witrynę Playground i ponownie kliknąć menu z trzema liniami. Następnie kliknij „Przywróć z .zip”.

Zostanie wyświetlone wyskakujące okienko z prośbą o wybranie wyeksportowanego wcześniej pliku.

Po wybraniu pliku wystarczy kliknąć „Importuj”.

Jeśli plik jest prawidłowy, pojawi się wyskakujące okienko z informacją, że importowanie powiodło się, a plac zabaw zostanie odświeżony o nową instancję.

Wystarczy kliknąć „OK”, aby zamknąć wyskakujące okienko.

Importowanie/eksportowanie WordPress Playground do GitHub

Jeśli masz konto GitHub, możesz również eksportować i importować twoją witrynę z WordPress Playground. GitHub to świetna platforma, która pozwala śledzić zmiany w twojej witrynie internetowej, tworzyć kopie zapasowe plików i współpracować z innymi użytkownikami.

Aby wyeksportować witrynę z WordPress Playground do GitHub, kliknij menu z trzema liniami i wybierz „Export Pull Request to GitHub”.

W następnym wyskakującym okienku zobaczysz, że WordPress zachęca do zapisania twojej witryny internetowej na komputerze jako kopii zapasowej. Gdy to zrobisz, możesz zaznaczyć pole „Wyeksportowałem mój Playground jako zip”.

Następnie kliknij przycisk „Połącz z Twoim kontem GitHub”.

Następnie musisz potwierdzić, że autoryzujesz WordPress Playground, aby uzyskać dostęp do twoich repozytoriów.

Wystarczy kliknąć „Autoryzuj adamziel”, aby kontynuować.

Na tym etapie należy wybrać rodzaj eksportowanych plików: wtyczki, motywy lub katalog wp-content. Jeśli chcesz wyeksportować wtyczki, motywy, pliki multimedialne, widżety, menu i czcionki, wybierz ostatnią opcję.

Należy również podać adres URL repozytorium GitHub, do którego ma zostać wyeksportowana witryna. Następnie kliknij przycisk „Następny krok”.

Gdy już to zrobisz, musisz wybrać, czy tworzysz nowy pull request, czy aktualizujesz istniejący. Dla celów demonstracyjnych wybierzemy pierwszą opcję.

Następnie wpisz ścieżkę w repozytorium, gdzie zmiany powinny zostać zatwierdzone.

Konieczne będzie również wstawienie komunikatu commit, aby określić, jakie zmiany zostały wprowadzone za pomocą WordPress Playground.

Po wykonaniu wszystkich czynności kliknij „Utwórz żądanie ściągnięcia”.

Jeśli eksport się powiedzie, WordPress wyświetli wyskakujące okienko z odnośnikiem do nowego pull requestu.

Wystarczy kliknąć odnośnik, aby zobaczyć go w działaniu.

Teraz, jeśli chcesz importować witrynę z GitHub do WordPress Playground, po prostu kliknij ponownie menu z trzema liniami.

Następnie wybierz opcję „Importuj z GitHub”.

Jeśli otwierasz zupełnie nowe środowisko WordPress Playground, może być konieczne ponowne przeprowadzenie całego procesu autoryzacji GitHub Playground.

Następnie wystarczy kliknąć adres URL repozytorium GitHub, z którego chcesz importować. WordPress udostępnia kilka przykładów, jeśli nie masz pewności.

Następnie należy określić, jakie pliki są importowane: motywy, wtyczki lub cały katalog wp-content.

Możesz również wstawić ścieżkę repozytorium, z którego importujesz. Po zakończeniu wystarczy kliknąć „Importuj”.

Jeśli import się powiedzie, pojawi się komunikat o powodzeniu, potwierdzający, że WordPress Playground zostanie odświeżony o nową instancję.

Inną rzeczą, którą można zrobić za pomocą WordPress Playground i GitHub, jest podgląd istniejącego żądania ściągnięcia GitHub z projektu WordPress. W ten sposób możesz zobaczyć, jakie ulepszenia i zmiany są wprowadzane w WordPress i przetestować je.

Aby to zrobić, możesz ponownie kliknąć przycisk menu z trzema liniami i wybrać „Podgląd WordPress Pull Request”.

Następnie można wstawić adres URL lub identyfikator żądania ściągnięcia w odpowiednim polu.

Następnie kliknij przycisk „Dalej”.

Jak korzystać z WordPress Playground Blueprints

W WordPressie blueprint to prosty plik JSON, który pomaga szybko i łatwo skonfigurować własne środowisko WordPress. Obejmuje to ustawienia, takie jak wersja WordPressa i PHP do użycia, jakie wtyczki i motywy zainstalować oraz jaka powinna być strona początkowa.

Jeśli klikniesz na trzywierszowe menu na górze strony WordPress Playground, możesz wybrać „Edit the Blueprint”, aby zmodyfikować wersję kodu twojego środowiska.

Oto jak wygląda strona Blueprint.

Z tego miejsca możesz zmodyfikować kod, zapisać go na swoim komputerze w celu późniejszego udostępnienia, a nawet uruchomić Blueprint innego użytkownika. Upewnij się tylko, że znasz podstawy kodowania w WordPress, aby Blueprint działał poprawnie.

Możesz sprawdzić przykłady innych osób w galerii WordPres Blueprints.

Jak osadzać WordPress Playground na twojej witrynie internetowej?

Jeśli piszesz poradnik WordPress, to prawdopodobnie dołączysz zrzuty ekranu z kokpitu WordPress, aby poprowadzić użytkowników przez twoje instrukcje. Czasami jednak zrzuty ekranu po prostu nie ilustrują dokładnie opisywanych działań.

To właśnie tutaj WordPress Playground może się przydać. Możesz osadzać go na swojej stronie lub wpisie, dając użytkownikom bardziej interaktywne wrażenia z czytania. Mogą oni postępować zgodnie z twoimi instrukcjami za pomocą Playground.

Najpierw należy otworzyć edytor bloków Gutenberg dla strony lub wpisu. Następnie kliknij przycisk dodawania bloku „+” i wybierz własny blok HTML.

Teraz skopiuj poniższy kod i wklej go do bloku HTML:

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

Jeśli chcesz, możesz również dodać parametry zapytania do tego adresu URL, jak pokazaliśmy wcześniej.

Następnie kliknij „Opublikuj” lub „Aktualizuj”, aby wprowadzić zmiany.

WordPress Playground może wyglądać inaczej w zależności od twojego motywu.

W naszym przypadku nie wyglądał na wyrównany z blokami nad nim, a sam element był zbyt mały, aby można było z nim wchodzić w interakcje.

Aby tego uniknąć, można zamiast tego użyć tego kodu:

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

W tym przypadku tag iFrame jest osadzany w tagach div, dzięki czemu Playground dostosowuje się do dopełnienia i marginesu kontenera.

Dodaliśmy również atrybut stylu, aby ustawić szerokość iFrame na 100% jego kontenera, a wysokość na 500 pikseli.

Oto jak to wygląda na front-endzie:

Jak zgłosić błąd w WordPress Playground?

Jeśli napotkasz jakiekolwiek problemy w WordPress Playground, możesz zgłosić je zespołowi WordPress, aby uzyskać poprawkę tych błędów. W tym celu należy kliknąć trzywierszowe menu w górnej części strony i wybrać opcję „Zgłoś błąd”.

Powinieneś teraz zobaczyć wyskakujące okienko, w którym możesz opisać, w jaki sposób wystąpił błąd. Powinieneś również wstawić adres URL twojego środowiska WordPress Playground, aby zespół mógł zobaczyć, co dokładnie się stało.

Po zakończeniu kliknij „Zgłoś błąd”.

Dodatkowo, WordPress Playground pozwala zobaczyć logi błędów twojego środowiska.

Można to zrobić, klikając ponownie menu z trzema liniami i wybierając „Zobacz logi”.

Pojawi się teraz wyskakujące okienko z listą błędów.

Oto jak to wygląda:

Często zadawane pytania dotyczące WordPress Playground

Omówmy kilka często zadawanych pytań dotyczących WordPress Playground.

Czy możesz używać WordPressa w twojej przeglądarce?

Tak, WordPress Playground umożliwia korzystanie z WordPressa bezpośrednio w twojej przeglądarce. Możesz tworzyć witryny internetowe i wypróbowywać motywy i wtyczki przed zainstalowaniem ich na twojej witrynie.

Czy mogę zainstalować własne motywy i wtyczki w WordPress Playground?

Tak, możesz zainstalować i zmienić motywy lub wtyczki w WordPress Playground, aby sprawdzić, czy działają one w obszarze administracyjnym i są zgodne [mogą być też „kompatybilne”] z określonymi wersjami WordPress.

Czy mogę przesłać witrynę utworzoną za pomocą WordPress Playground na moje konto hostingowe?

Technicznie rzecz biorąc, możesz wyeksportować swoją witrynę z WordPress Playground i importować ją na swoje konto hostingowe WordPress. Ponieważ jednak WordPress Playground korzysta z bazy danych SQLite, może być konieczne przekonwertowanie bazy danych na MySQL, aby witryna działała na serwerze WWW.

Jak uruchomić wtyczki i motywy WordPress lokalnie?

Jeśli chcesz uruchamiać wtyczki i motywy WordPress w lokalnym środowisku programistycznym, musisz najpierw utworzyć lokalną witrynę WordPress. Możesz przeczytać nasz poradnik na temat tworzenia lokalnej witryny WordPress, aby uzyskać instrukcje krok po kroku.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, czym jest WordPress Playground i jak z niego korzystać w twojej przeglądarce. Możesz również zapoznać się z naszym artykułem na temat najlepszych kreatorów stron WordPress typu „przeciągnij i upuść” oraz naszym przewodnikiem na temat dodawania dynamicznych treści w 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.