Lumaktaw patungo sa pangunahing content

Playground para sa Mga Plugin Developer

Ang WordPress Playground ay isang makabagong tool na nagpapahintulot sa mga plugin developer na magtayo, mag-test, at magpakita ng kanilang mga plugin nang direkta sa browser.

Ang gabay na ito ay magpapakita kung paano gamitin ang WordPress Playground upang pagandahin ang iyong workflow sa pag-develop ng plugin, lumikha ng live na demo para ipakita ang iyong plugin, at pasimplehin ang iyong plugin testing at review.

info

Tuklasin kung paano Mag-build, Mag-test, at Mag-launch ng iyong mga produkto gamit ang WordPress Playground sa About Playground na seksyon.

Paglunsad ng isang Playground instance gamit ang plugin​

Plugin sa WordPress Themes Directory​

Sa WordPress Playground, maaari kang mabilis maglunsad ng WordPress installation na may halos anumang plugin mula sa WordPress Plugins Directory na naka-install at naka-activate. Kailangan mo lamang idagdag ang plugin na query parameter sa Playground URL at gamitin ang slug ng plugin mula sa WordPress directory bilang halaga. Halimbawa: https://playground.wordpress.net/?plugin=create-block-theme

tip

Maaari kang mag-install at mag-activate ng maraming plugin sa pamamagitan ng pag-uulit ng plugin parameter para sa bawat plugin na nais mong i-install at i-activate sa Playground instance. Halimbawa: https://playground.wordpress.net/?plugin=gutenberg&plugin=akismet&plugin=wordpress-seo

Maaari mo ring i-load ang anumang plugin mula sa WordPress plugins directory sa pamamagitan ng pag-set ng installPlugin step ng isang Blueprint na ipapasa sa Playground instance.

{
	"landingPage": "/wp-admin/plugins.php",
	"login": true,
	"steps": [
		{
			"step": "installPlugin",
			"pluginData": {
				"resource": "wordpress.org/plugins",
				"slug": "gutenberg"
			}
		}
	]
}

   Patakbuhin ang Blueprint   

Ang mga Blueprint ay maaaring ipasa sa isang Playground instance sa iba't ibang paraan.

Plugin mula sa GitHub Repository​

Ang plugin na naka-imbak sa isang GitHub repository ay maaari ring i-load sa isang Playground instance gamit ang Blueprints.

Sa pamamagitan ng pluginData property ng installPlugin blueprint step, maaari mong tukuyin ang git:directory resource na bubuo ng plugin mula sa mga file mula sa isang repository sa Playground instance.

info

Sa mga nakaraang buwan, ang GitHub proxy ay isang napaka-kapaki-pakinabang na tool upang mag-load ng mga plugin mula sa mga GitHub repository, dahil pinapayagan kang mag-load ng plugin mula sa isang partikular na branch, direktoryo, commit, o PR. Ngunit sa mga kamakailang pagpapabuti sa Playground, ang feature na ito ay hindi na kailangan. Ang GitHub Proxy ay hindi na ipagpapatuloy sa lalong madaling panahon, mangyaring i-update ang iyong mga blueprint sa git:directory resource.

Halimbawa, ang sumusunod na blueprint.json ay nag-i-install ng plugin mula sa isang GitHub repository:

{
	"landingPage": "/wp-admin/admin.php?page=add-media-from-third-party-service",
	"login": true,
	"steps": [
		{
			"step": "installPlugin",
			"pluginData": {
				"resource": "git:directory",
				"url": "https://github.com/wptrainingteam/devblog-dataviews-plugin",
				"ref": "HEAD",
				"refType": "refname"
			}
		}
	]
}
tip

Kung ang iyong plugin ay naka-host sa GitHub, maaari kang awtomatikong magdagdag ng mga preview button sa iyong mga pull request gamit ang Playground PR Preview GitHub Action. Hinahayaan nito ang mga reviewer na subukan ang iyong mga pagbabago kaagad nang walang anumang setup. Tingnan ang Adding PR Preview Buttons with GitHub Actions para sa mga detalye.

   Patakbuhin ang Blueprint   

Plugin mula sa Code sa File o Gist sa GitHub​

Sa pamamagitan ng kombinasyon ng writeFile at activatePlugin na mga step, maaari ka ring maglunsad ng WP Playground instance na may plugin na binuo sa real-time mula sa code na naka-imbak sa isang gist o file sa GitHub:

{
	"landingPage": "/wp-admin/plugins.php",
	"login": true,
	"steps": [
		{
			"step": "login"
		},
		{
			"step": "writeFile",
			"path": "/wordpress/wp-content/plugins/cpt-books.php",
			"data": {
				"resource": "url",
				"url": "https://raw.githubusercontent.com/WordPress/blueprints/trunk/blueprints/custom-post/books.php"
			}
		},
		{
			"step": "activatePlugin",
			"pluginPath": "cpt-books.php"
		}
	]
}

   Patakbuhin ang Blueprint  

info

Ang Install plugin from a gist example sa Blueprints Gallery ay nagpapakita kung paano mag-load ng plugin mula sa code sa isang gist

Pagse-set up ng demo para sa iyong plugin gamit ang Blueprints​

Kapag nagbibigay ng link sa isang WordPress Playground instance na may ilang mga plugin na naka-activate, maaari mo ring i-customize ang paunang setup para sa Playground instance na iyon gamit ang mga plugin na iyon. Sa pamamagitan ng Blueprints ng Playground, maaari mong i-load/activate ang mga plugin at i-configure ang Playground instance.

tip

Narito ang ilang kapaki-pakinabang na tool at mapagkukunan na ibinigay ng proyekto ng Playground upang gumana sa mga blueprint:

  • Tingnan ang Blueprints Gallery upang galugarin ang mga halimbawa ng code sa totoong mundo ng paggamit ng WordPress Playground upang maglunsad ng site ng WordPress na may iba't ibang mga setup.
  • Ang WordPress Playground Step Library tool ay nagbibigay ng visual na interface upang i-drag o i-click ang mga hakbang upang lumikha ng isang blueprint para sa WordPress Playground. Maaari ka ring lumikha ng iyong sariling mga hakbang!
  • Ang Blueprints builder tool ay nagbibigay-daan sa iyong i-edit ang iyong blueprint online at patakbuhin ito nang direkta sa isang instance ng Playground.

Sa pamamagitan ng mga katangian at steps sa Blueprint, maaari mong i-configure ang paunang setup ng Playground instance, ibibigay ang iyong mga plugin ng kinakailangang content at configuration upang maipakita ang mga kapana-panabik na feature at functionality ng iyong plugin.

info

Isang mahusay na demo gamit ang WordPress Playground ay maaaring mangailangan na mag-load ka ng default na content para sa iyong plugin at theme, kabilang ang mga larawan at iba pang asset. Tingnan ang Pagbibigay ng nilalaman para sa iyong demo na gabay para matuto nang higit pa tungkol dito.

plugins​

Kung ang iyong plugin ay may dependencies sa ibang mga plugin, maaari mong gamitin ang shorthand na plugins upang i-install ang mga iyon kasama ang iyong plugin.

{
	"landingPage": "/wp-admin/plugins.php",
	"plugins": ["gutenberg", "sql-buddy", "create-block-theme"],
	"login": true
}

   Patakbuhin ang Blueprint   

landingPage​

Kung ang iyong plugin ay may settings view o onboarding wizard, maaari mong gamitin ang landingPage shorthand upang awtomatikong mag-redirect sa anumang page sa Playground instance sa pag-load.

{
	"landingPage": "/wp-admin/admin.php?page=my-custom-gutenberg-app",
	"login": true,
	"plugins": ["https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/data-basics-59c8f8.zip"]
}

   Patakbuhin ang Blueprint   

writeFile​

Gamit ang writeFile step, maaari kang lumikha ng anumang file ng plugin sa mabilisang paraan, na tumutukoy sa code mula sa isang *.php file na nakaimbak sa GitHub o Gist.

Narito ang isang halimbawa ng isang plugin na bumubuo ng Mga Uri ng Pasadyang Post, na inilagay sa folder na mu-plugins upang matiyak na awtomatikong tumatakbo ang code sa pag-load:

{
	"landingPage": "/wp-admin/",
	"login": true,
	"steps": [
		{
			"step": "writeFile",
			"path": "/wordpress/wp-content/mu-plugins/books.php",
			"data": {
				"resource": "url",
				"url": "https://raw.githubusercontent.com/wordpress/blueprints/trunk/blueprints/custom-post/books.php"
			}
		}
	]
}

Plugin Development​

Lokal na pag-develop ng plugin at pagsubok sa Playground​

Mula sa folder ng isang plugin sa iyong lokal na kapaligiran sa pag-develop, maaari mong mabilis na i-load nang lokal ang isang halimbawa ng Playground na na-load at na-activate ang plugin na iyon.

Gamitin ang @wp-playground/cli command mula sa root directory ng iyong plugin gamit ang iyong ginustong command line program.

Gamit ang Visual Studio Code IDE, maaari mo ring gamitin ang Visual Studio Code extension habang nagtatrabaho sa root directory ng iyong plugin.

Halimbawa:

git clone git@github.com:wptrainingteam/devblog-dataviews-plugin.git
cd devblog-dataviews-plugin
npx @wp-playground/cli server --auto-mount

Tingnan ang iyong mga lokal na pagbabago sa isang Playground instance at direktang gumawa ng mga PR sa isang GitHub repo kasama ang iyong mga pagbabago​

Sa Google Chrome, maaari mong i-synchronize ang isang Playground instance sa iyong local plugin code at GitHub repo ng iyong plugin. Sa koneksyong ito maaari mong:

  • Makita nang live (sa Playground instance) ang iyong mga lokal na pagbabago
  • Gumawa ng mga PR sa GitHub repo kasama ang iyong mga pagbabago

Narito ang isang maliit na demo ng workflow na ito sa aksyon:

info

Tingnan ang About Playground > Build > Synchronize your playground instance with a local folder and create GitHub Pull Requests para sa karagdagang impormasyon.