WordPress Playground – Cách sử dụng WordPress trong trình duyệt của bạn

Mục lục

Bạn có muốn sử dụng WordPress trên trình duyệt của mình để thử nghiệm không?

Hãy làm quen với WordPress Playground, một nền tảng nơi bạn có thể dùng thử WordPress.org code nguồn mở trong trình duyệt mà không cần mua gói lưu trữ trước. Bạn cũng có thể sử dụng nó để kiểm tra plugin và theme mà không ảnh hưởng đến website WordPress trực tiếp của bạn.

Trong bài viết này, WPBeginner Việt Nam sẽ giải thích WordPress Playground là gì và cách sử dụng nó.

WordPress PlayGround - Cách sử dụng WordPress trong trình duyệt của bạn

WordPress Playground là gì và nó hoạt động như thế nào?

Sân chơi WordPress là phiên bản WordPress tạm thời trong trình duyệt, nơi bạn có thể thử nghiệm và tìm hiểu thêm về hệ thống quản lý content.

Nó giống như một hộp cát trực tuyến nơi bạn có thể thực hiện mọi loại phát triển WordPress mà không ảnh hưởng đến website thực tế của bạn.

WordPress Playground trông như thế nào

Tất cả những gì bạn cần làm là vào website WordPress Playground để mở nó. Sau đó, bạn có thể sử dụng WordPress như bình thường: cài đặt plugin mới, thử các theme mới, thêm trang mới, v.v.

Nếu bạn làm mới trang WordPress Playground, tất cả các custom sẽ biến mất. Tuy nhiên, bạn cũng có thể download phiên bản WordPress của mình và tải lại lên WordPress Playground.

WordPress Playground hoạt động như thế nào?

WordPress Playground chạy trên một số công nghệ thú vị cho phép bạn sử dụng WordPress mà không cần thiết lập server web và cơ sở dữ liệu thông thường:

  1. WebAssembly nhị phân (Wasm): Nó cho phép bạn chạy code PHP trực tiếp trong trình duyệt web của mình, giúp WordPress hoạt động mà không cần server truyền thống. Nó cũng giúp nền tảng tương thích với tất cả các trình duyệt, từ Chrome và Edge đến Firefox và Safari.
  2. Cơ sở dữ liệu SQLite: Thay vì MySQL, WordPress Playground sử dụng hệ thống cơ sở dữ liệu nhẹ hơn dựa trên file có tên là SQLite, chạy trực tiếp trên trình duyệt của bạn.
  3. API Service Worker và Worker Threads: Các công cụ web này giúp xử lý các yêu cầu và chạy các tập lệnh JavaScript nền, giúp WordPress Playground có thể chạy các ứng dụng PHP một cách mượt mà trên trình duyệt của bạn.

Các công nghệ này cũng cho phép các developer tích hợp WordPress Playground với node.js, Visual Studio Code và công cụ CLI có tên là wp-now.

Với các công cụ này, các developer cũng có thể sử dụng WordPress Playground trên nền tảng phát triển cho mục đích thử nghiệm hoặc dàn dựng.

Những hạn chế của WordPress Playground là gì?

Mặc dù có nhiều lợi ích, WordPress Playground vẫn có một số hạn chế như:

  • Không có quyền truy cập trực tiếp vào folder theme và plugin Bạn sẽ phải cài đặt các theme và plugin bằng cách download và upload thủ công. Tuy nhiên, tính năng beta truy cập mạng nhằm mục đích giải quyết vấn đề này.
  • Các custom trong WordPress Playground chỉ là tạm thời – Nếu bạn quyết định không lưu các thay đổi trên trình duyệt, bạn sẽ phải cẩn thận không vô tình làm mới trang để tránh mất tiến trình.
  • Các vấn đề về iFrame rất phổ biến – Nếu bạn nhúng một phiên bản WordPress Playground vào website của mình, bạn có thể gặp một số vấn đề, từ việc làm mới vô tình đến việc iFrame không hoạt động.
  • Đây là một tính năng tương đối mới – Không phải mọi thứ đều hoạt động bình thường, vì vậy bạn có thể gặp một số trục trặc ở đây và ở đó khi khám phá môi trường.

Nói như vậy, Playground là một dự án WordPress tương đối mới. Vì vậy, bạn có thể mong đợi nhóm phát hành các tính năng mới và sửa lỗi để cải thiện trải nghiệm của người dùng.

Bây giờ bạn đã biết WordPress Playground là gì, hãy cùng xem cách bạn có thể sử dụng nó. Bạn có thể sử dụng các link nhanh bên dưới để điều hướng qua hướng dẫn của WPBeginner Việt Nam:

Cách sử dụng WordPress Playground

Để sử dụng WordPress Playground, bạn có thể trực tiếp truy cập vào tên miền này trong trình duyệt web của mình:

Khi bạn đã vào website, hãy đợi một vài phút để Playground thiết lập. Sau đó, bạn sẽ thấy giao diện của website sử dụng theme WordPress mặc định.

Nếu bạn đang sử dụng WordPress Playground để thử nghiệm, thì bạn có thể muốn cấu hình môi trường để phản ánh phần mềm WordPress cho website thực tế của bạn.

Để thực hiện việc này, hãy nhấp vào menu có content ‘PHP 8.0 WP 6.4 – Lưu trữ: Không có’.

Cấu hình phiên bản WordPress Playground

Thiết lập đầu tiên bạn phải cấu hình là loại lưu trữ. Có ba option.

‘None’ có nghĩa là tất cả các thay đổi sẽ bị mất khi làm mới trang. Trong khi đó, ‘Browser’ có nghĩa là các thay đổi sẽ được lưu trữ trong trình duyệt nhưng sẽ biến mất nếu bạn đóng tab trình duyệt hoặc xóa cache.

Bạn cũng có thể lưu các thay đổi trên máy tính bằng cách chọn ‘Thiết bị’. Tùy chọn này sẽ cho phép bạn chọn một folder trên máy tính để lưu trữ các file WordPress Playground, tương tự như khi tạo một website WordPress cục bộ.

Tùy chỉnh cài đặt WordPress Playground

Điều tiếp theo bạn muốn cấu hình là phiên bản PHP.

Chúng tôi khuyên bạn nên sử dụng phiên bản PHP giống với phiên bản PHP bạn sử dụng cho website của mình. Tuy nhiên, bạn có thể không tìm thấy phiên bản PHP cũ hơn 7.0 ở đây.

Các phiên bản PHP có sẵn trong WordPress Playground

Bên dưới, bạn có thể option bật các cài đặt ‘Tải tiện ích mở rộng: libxml, openssl, mbstring, iconv, gd’ và ‘Truy cập mạng (ví dụ: để duyệt plugin)’.

Cài đặt đầu tiên sẽ tải các tiện ích mở rộng PHP cụ thể đó (libxml, openssl, mbstring, iconv và gd) để nâng cao WordPress Playground của bạn. Nhưng chúng không cần thiết.

Thiết lập thứ hai được gọi là ‘Truy cập mạng’. Đây là tính năng beta và sẽ kết nối WordPress Playground của bạn với folder plugin chính thức để bạn có thể cài đặt theme và plugin WordPress ngay từ môi trường đó.

Cài đặt PHP của WordPress Playground

Cuối cùng, bạn có thể chọn phiên bản WordPress cho Playground. Bạn nên chọn phiên bản hiện đang sử dụng cho blog hoặc website WordPress của mình.

WordPress cũng cung cấp phiên bản ‘WordPress Nightly’. Đây là phiên bản phát triển của WordPress bao gồm những thay đổi mới nhất do nhóm phát triển WordPress thực hiện.

Bạn có thể sử dụng tính năng này nếu bạn là developer plugin hoặc theme và muốn kiểm tra khả năng tương thích với bản cập nhật WordPress tiếp theo.

Sau khi hoàn tất việc cấu hình các thiết lập này, hãy nhấp vào “Áp dụng thay đổi”.

Chọn phiên bản phần mềm WordPress trong WordPress Playground

Và đó là tất cả các thiết lập. Bây giờ, bạn có thể đến khu vực quản trị để bắt đầu thử nghiệm hộp cát.

Để mở khu vực quản trị, hãy di chuột qua menu tiêu đề website và nhấp vào ‘Bảng điều khiển’. Hoặc, bạn cũng có thể vào Trình chỉnh sửa toàn bộ website bằng cách nhấp vào ‘Chỉnh sửa website’.

Đi đến dashboard WordPress Playground hoặc trình chỉnh sửa website đầy đủ

Cách cài đặt Theme và Plugin trong WordPress Playground

Có hai cách để cài đặt plugin hoặc theme WordPress trong WordPress Playground. Một là vào trang plugin hoặc theme trên WordPress.org và nhấp vào nút ‘Tải xuống’.

Thao tác này sẽ lưu file zip của plugin hoặc theme vào máy tính của bạn.

Tải xuống plugin WPForms theo cách thủ công

Sau đó, bạn có thể tiếp tục cài đặt WordPress thủ công thông thường cho plugin và theme. Bạn có thể đọc hướng dẫn của WPBeginner Việt Nam để biết thêm hướng dẫn:

Phương pháp này cũng có thể áp dụng để kiểm tra các plugin và theme WordPress cao cấp.

Đối với các plugin, chỉ cần vào dashboard của WordPress Playground và điều hướng đến Plugin » Thêm Plugin Mới.

Sau đó, nhấp vào nút ‘Tải lên Plugin’ và chọn ‘Chọn file’ để upload file zip plugin mà bạn đã download trước đó. Cuối cùng, nhấp vào ‘Cài đặt ngay’.

Cài đặt plugin WordPress trong WordPress Playground

Về theme, WordPress sẽ cài đặt sẵn theme mặc định cho bạn khi bạn sử dụng Playground lần đầu tiên.

Nhưng nếu bạn muốn sử dụng một theme WordPress miễn phí mới, bạn có thể download thủ công từ folder theme WordPress. Sau đó, trong Sân chơi, hãy đi tới Giao diện » Chủ đề và nhấp vào ‘Thêm theme mới’.

Thêm theme mới vào WordPress Playground

Ở màn hình tiếp theo, nhấp vào nút ‘Tải theme lên’.

Sau đó, chọn file theme bạn đã download trước đó và nhấp vào ‘Cài đặt ngay’.

Cài đặt theme mới trong WordPress Playground

Nếu quá trình này có vẻ hơi tẻ nhạt, đừng lo lắng. WordPress đã và đang phát triển tính năng beta cho phép Playground kết nối với folder plugin hoặc theme. Tính năng này sẽ được bật nếu bạn chọn ‘Truy cập mạng’ trong quá trình thiết lập trước đó.

Theo cách này, Playground hoạt động giống như bất kỳ dashboard WordPress thông thường nào và bạn có thể cài đặt các theme và plugin miễn phí mà không cần lưu chúng vào máy tính trước.

Một cách khác để cài đặt theme và plugin trong dashboard WordPress là sử dụng API truy vấn của WordPress Playground. Nó hoạt động bằng cách yêu cầu bạn thêm một số tham số truy vấn vào URL WordPress Playground.

Vì vậy, ví dụ, nếu bạn muốn cài đặt và thử nghiệm Phiên bản miễn phí của AIOSEO trong WordPress Playground, sau đó bạn có thể vào trang WordPress.org của AIOSEO. Sau đó, hãy lưu ý đến slug URL của AIOSEO.

Làm nổi bật URL slug của AIOSEO trong folder plugin của WordPress.org

Bây giờ, trên một tab trình duyệt mới, hãy nhập URL của WordPress Playground với slug của AIOSEO như sau:

/?plugin=all-in-one-seo-pack

Khi bạn nhấn phím ‘Enter’, WordPress Playground sẽ tự động tạo một môi trường mới với AIOSEO plugin đã được cài đặt.

Nếu bạn muốn cài đặt theme, thì chỉ cần thay thế plugin tham số với themenhư thế này:

/?theme=astra

Bạn thậm chí có thể kết hợp nhiều tham số truy vấn nếu bạn muốn cài đặt nhiều plugin hoặc theme trên lõi WordPress. Chỉ cần đảm bảo phân tách từng tham số bằng dấu thăng & dấu hiệu.

Đây là URL sẽ trông như thế nào nếu bạn đang cài đặt AIOSEO và Thông tin chi tiết về quái vật plugin cũng như theme Astra:

/?theme=astra&plugin=all-in-one-seo-pack&plugin=google-analytics-for-wordpress

Nếu bạn là người dùng Chrome, bạn cũng có thể cài đặt Mở trong WordPress Playground tiện ích mở rộng. Với tiện ích này, bất cứ khi nào bạn truy cập vào trang plugin hoặc theme trên WordPress.org, bạn sẽ thấy nút ‘Sân chơi’.

Nhấp vào đó sẽ mở ra một môi trường WordPress Playground mới với plugin hoặc theme đã cài đặt. Nó đơn giản hóa phương pháp tham số truy vấn.

Sử dụng tiện ích mở rộng Open in WordPress Playground Chrome

Cách Xuất/Nhập một Trang web được Tạo bằng WordPress Playground

Giả sử bạn đã thử nghiệm với WordPress Playground, thêm một số bài đăng mới bằng trình chỉnh sửa Gutenberg và thậm chí có thể tạo toàn bộ website. Sẽ thật lãng phí nếu chỉ đóng tab và mất toàn bộ tiến trình của bạn codei codei.

May mắn thay, bạn có thể xuất website của mình từ WordPress Playground và lưu vào máy tính. Bất cứ khi nào bạn mở lại Playground, bạn luôn có thể tải file zip đã xuất đó lên để tiếp tục nơi bạn đã dừng lại.

Để thực hiện việc này, hãy điều hướng đến menu trên cùng của Sân chơi và nhấp vào menu ba dòng ở góc trên bên phải. Sau đó, nhấp vào ‘Tải xuống dưới dạng .zip’.

Tải xuống file WordPress Playground

Sau đó, trình duyệt của bạn sẽ bắt đầu tải file xuống máy tính.

Để tải file lên WordPress Playground, chỉ cần mở trang Playground và nhấp vào menu ba dòng một lần nữa. Sau đó, nhấp vào ‘Khôi phục từ .zip’.

Khôi phục file zip WordPress Playground

Một popup sẽ yêu cầu bạn chọn file mà bạn đã xuất trước đó.

Sau khi đã chọn file, chỉ cần nhấp vào ‘Nhập’.

Nhập file zip WordPress Playground

Nếu file hợp lệ, bạn sẽ thấy một popup thông báo rằng quá trình nhập đã thành công và Playground sẽ được làm mới bằng phiên bản mới.

Chỉ cần nhấp vào ‘OK’ để đóng popup.

Một thông báo bật lên cho biết quá trình nhập file WordPress Playground đã thành công

Nhập/Xuất WordPress Playground sang GitHub

Nếu bạn có tài khoản GitHub, bạn cũng có thể xuất và nhập website của mình từ WordPress Playground. GitHub là một nền tảng tuyệt vời cho phép bạn theo dõi các thay đổi trên website, backup file và cộng tác với những người dùng khác.

Để xuất một website từ WordPress Playground sang GitHub, hãy nhấp vào menu ba dòng và chọn ‘Xuất yêu cầu kéo sang GitHub’.

Xuất một phiên bản WordPress Playground dưới dạng yêu cầu kéo tới GitHub

Trong popup tiếp theo, bạn sẽ thấy WordPress khuyến khích lưu website của bạn vào máy tính dưới dạng bản backup. Sau khi thực hiện, bạn có thể tích vào ô ‘Tôi đã xuất Sân chơi của mình dưới dạng zip’.

Sau đó, nhấp vào nút ‘Kết nối với tài khoản GitHub của bạn’.

Kết nối GitHub với WordPress Playground

Tiếp theo, bạn phải xác nhận rằng bạn đang cho phép WordPress Playground truy cập vào kho lưu trữ của bạn.

Chỉ cần nhấp vào ‘Ủy quyền adamziel’ để tiếp tục.

Cho phép WordPress Playground có quyền truy cập vào GitHub của bạn

Ở giai đoạn này, hãy tiếp tục và chọn loại file bạn đang xuất: plugin, theme hoặc folder wp-content. Nếu bạn muốn xuất plugin, theme, file phương tiện, tiện ích, menu và font, hãy chọn option cuối cùng.

Bạn cũng cần chỉ định URL kho lưu trữ GitHub mà bạn muốn xuất website. Sau đó, nhấp vào nút ‘Bước tiếp theo’.

Chọn kho lưu trữ GitHub để xuất WordPress Playground sang

Sau khi thực hiện xong, bạn cần chọn xem bạn đang tạo yêu cầu kéo mới hay cập nhật yêu cầu kéo hiện có. Để minh họa, WPBeginner Việt Nam sẽ chọn option đầu tiên.

Sau đó, nhập đường dẫn vào kho lưu trữ nơi những thay đổi sẽ được cam kết.

Bạn cũng cần phải chèn một thông báo xác nhận để chỉ rõ những thay đổi nào đã được thực hiện bằng WordPress Playground.

Sau khi hoàn tất, hãy nhấp vào ‘Tạo yêu cầu kéo’.

Tạo yêu cầu kéo mới trong GitHub cho phiên bản WordPress Playground

Nếu xuất thành công, WordPress sẽ hiển thị một popup có link đến yêu cầu kéo mới.

Chỉ cần nhấp vào link để xem cách hoạt động.

Nhấp vào link đến yêu cầu kéo mới được tạo của phiên bản WordPress Playground

Bây giờ, nếu bạn muốn nhập một website từ GitHub vào WordPress Playground, chỉ cần nhấp vào menu ba dòng một lần nữa.

Sau đó, chọn ‘Nhập từ GitHub’.

Nhập phiên bản WordPress Playground từ GitHub

Nếu bạn đang mở một môi trường WordPress Playground hoàn toàn mới thì bạn có thể cần phải thực hiện lại toàn bộ quy trình cấp phép GitHub Playground.

Sau đó, chỉ cần nhấp vào URL kho lưu trữ GitHub mà bạn muốn nhập. WordPress cung cấp một số ví dụ nếu bạn không chắc chắn.

Chọn kho lưu trữ GitHub để nhập từ WordPress Playground

Tiếp theo, bạn phải chỉ định những tập tin bạn đang nhập: theme, plugin hay toàn bộ folder wp-content.

Bạn cũng có thể chèn đường dẫn của kho lưu trữ mà bạn đang nhập từ đó. Khi hoàn tất, chỉ cần nhấp vào ‘Nhập’.

Chọn loại file nào để nhập từ GitHub vào WordPress Playground

Nếu quá trình nhập thành công, bạn sẽ thấy thông báo bật lên thành công, xác nhận rằng WordPress Playground sẽ được làm mới bằng phiên bản mới.

Cách nhúng WordPress Playground vào website của bạn

Nếu bạn đang viết hướng dẫn WordPress, thì có khả năng bạn sẽ bao gồm ảnh chụp màn hình từ dashboard WordPress để hướng dẫn người dùng thực hiện theo hướng dẫn của bạn. Tuy nhiên, đôi khi ảnh chụp màn hình không minh họa chính xác các hành động bạn đang mô tả.

Đây là nơi WordPress Playground có thể hữu ích. Bạn có thể nhúng nó vào trang hoặc bài đăng của mình, mang đến cho người dùng trải nghiệm đọc tương tác hơn. Họ có thể làm theo hướng dẫn của bạn bằng Playground.

Đầu tiên, bạn cần mở trình chỉnh sửa block Gutenberg cho một trang hoặc bài đăng. Khi vào đó, hãy nhấp vào nút ‘+’ thêm block và chọn block HTML custom.

Chọn block HTML custom trong trình chỉnh sửa block

Bây giờ, hãy sao chép code bên dưới và dán vào block HTML:

Nếu muốn, bạn cũng có thể thêm một số tham số truy vấn vào URL này như WPBeginner Việt Nam đã hướng dẫn trước đó.

Sau đó, nhấp vào ‘Xuất bản’ hoặc ‘Cập nhật’ để áp dụng thay đổi.

Thêm code WordPress Playground iFrame vào trình chỉnh sửa block

WordPress Playground có thể trông khác nhau tùy thuộc vào theme của bạn.

Trong trường hợp của WPBeginner Việt Nam, nó trông không thẳng hàng với các block phía trên và bản thân phần tử cũng quá nhỏ để có thể tương tác.

Phần tử iFrame của WordPress Playground trông không thẳng hàng với các block còn lại

Để tránh điều này, bạn có thể sử dụng code này thay thế:

Ở đây, tag iFrame được gói trong div tag để nhúng Sân chơi theo phần đệm và lề của vùng chứa.

Chúng tôi cũng đã thêm style thuộc tính để đặt chiều rộng của iFrame thành 100% của vùng chứa và chiều cao là 500 pixel.

Đây là giao diện ở phía trước:

Mã iFrame của WordPress Playground trông như thế nào ở giao diện khi được căn chỉnh

Những câu hỏi thường gặp về WordPress Playground

Chúng ta hãy cùng giải đáp một số câu hỏi thường gặp về WordPress Playground.

Bạn có thể sử dụng WordPress trên trình duyệt của mình không?

Có, WordPress Playground cho phép bạn sử dụng WordPress trực tiếp trong trình duyệt của mình. Bạn có thể xây dựng website và dùng thử các theme và plugin trước khi cài đặt chúng trên website trực tiếp của mình.

Tôi có thể cài đặt theme và plugin custom trong WordPress Playground không?

Có, bạn có thể cài đặt các theme và plugin custom trong WordPress Playground để xem chúng có hoạt động trong khu vực quản trị và tương thích với các phiên bản WordPress nhất định hay không.

Tôi có thể tải một website được tạo bằng WordPress Playground lên tài khoản lưu trữ của mình không?

Về mặt kỹ thuật, bạn có thể xuất website của mình từ WordPress Playground và nhập vào tài khoản hosting WordPress của bạn. Tuy nhiên, vì WordPress Playground sử dụng cơ sở dữ liệu SQLite, bạn có thể cần phải chuyển đổi cơ sở dữ liệu sang MySQL để website chạy trên server web.

Làm thế nào để chạy plugin và theme WordPress cục bộ?

Nếu bạn muốn chạy plugin và theme WordPress trong môi trường phát triển cục bộ, thì trước tiên bạn phải tạo một trang WordPress cục bộ. Bạn có thể đọc hướng dẫn của WPBeginner Việt Nam về cách xây dựng một trang WordPress cục bộ để biết hướng dẫn từng bước.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu WordPress Playground là gì và cách sử dụng nó trong trình duyệt của bạn. Bạn cũng có thể muốn xem bài viết của WPBeginner Việt Nam về cách dễ dàng tạo website dàn dựng cho WordPress và danh sách các plugin WordPress tốt nhất để sao chép hoặc nhân bản một website.

Nếu bạn thích bài viết này, vui lòng đăng ký theo dõi WPBeginner Việt Nam Kênh Youtube cho các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy WPBeginner Việt Nam trên TwitterFacebook.

5/5 - (178 bình chọn)
Facebook
Twitter
LinkedIn
Telegram
Email
Đội Ngũ Biên Tập
WordPress

Cách Thêm Schema FAQ vào WordPress (2 Phương pháp)

Bạn có muốn thêm schema FAQ vào WordPress không? Việc thêm schema FAQ có thể giúp tăng thứ hạng SEO và tỷ lệ nhấp chuột tự nhiên bằng cách hiển thị trực tiếp các câu hỏi thường gặp trong kết quả tìm kiếm của Google. Trong bài viết này, WPBeginner

Đọc tiếp »
WordPress

Cách tạo Banner cho website (3 cách dễ dàng)

Bạn đang tìm cách dễ dàng để tạo banner website trên WordPress? Banner có thể làm nổi bật các sản phẩm, dịch vụ hoặc tin tức cập nhật được cung cấp bởi website của bạn theo cách bắt mắt. Nó có thể tăng sự tương tác của người dùng, tăng

Đọc tiếp »