Lumaktaw patungo sa pangunahing content

Playground para sa Mga Theme Developer

Ang WordPress Playground ay isang makabagong tool na nagpapahintulot sa mga theme developer na magtayo, mag-test, at magpakita ng kanilang mga theme 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 theme, lumikha ng live na demo para ipakita ang iyong theme, at pasimplehin ang proseso ng review ng theme.

info

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

Paglunsad ng Playground instance gamit ang theme​

Theme sa WordPress Themes Directory​

Sa WordPress Playground, maaari kang mabilis maglunsad ng WordPress installation gamit ang anumang theme mula sa WordPress Themes Directory. Idagdag lamang ang theme query parameter sa Playground URL tulad nito: https://playground.wordpress.net/?theme=disco.

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

{
	"steps": [
		{
			"step": "installTheme",
			"themeData": {
				"resource": "wordpress.org/themes",
				"slug": "twentytwenty"
			},
			"options": {
				"activate": true,
				"importStarterContent": true
			}
		}
	]
}

   Patakbuhin ang Blueprint   

Theme mula sa GitHub Repository​

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

Sa themeData property ng installTheme blueprint step, maaari mong tukuyin ang url resource na tumuturo sa lokasyon ng .zip file na naglalaman ng theme na nais mong i-load sa Playground instance.

Upang maiwasan ang mga isyu sa CORS, nag-aalok ang proyekto ng GitHub proxy na maaari kang gumamit upang bumuo ng .zip mula sa isang repository (o kahit isang folder sa loob nito) na naglalaman ng theme.

tip

Ang GitHub proxy ay napaka-kapaki-pakinabang na tool upang mag-load ng themes mula sa mga GitHub repository dahil pinapayagan kang mag-load mula sa isang partikular na branch, direktoryo, commit, o PR.

Halimbawa, ang sumusunod na blueprint.json ay nag-i-install ng theme mula sa isang GitHub repository gamit ang https://github-proxy.com tool:

{
	"steps": [
		{
			"step": "installTheme",
			"themeData": {
				"resource": "url",
				"url": "https://github-proxy.com/proxy/?repo=Automattic/themes&branch=trunk&directory=assembler"
			},
			"options": {
				"activate": true
			}
		}
	]
}

   Patakbuhin ang Blueprint   

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

Pag-set up ng demo theme gamit ang Blueprints​

Kapag nagbibigay ng link sa isang WordPress Playground instance na may naka-activate na tema, maaaring gusto mo ring i-customize ang paunang setup ng iyon theme. Sa pamamagitan ng Blueprints, maaari mong i-load, i-activate, at i-configure ang theme.

tip

Ilang kapaki-pakinabang na tool at resources mula sa proyekto ng Playground para magtrabaho sa blueprints:

  • Suriin ang Blueprints Gallery upang tuklasin ang mga totoong halimbawa ng kodigo ng paggamit ng WordPress Playground upang maglunsad ng WordPress site na may iba't ibang setup.
  • Ang WordPress Playground Step Library ay nagbibigay ng visual na interface upang i-drag o i-click ang mga step upang lumikha ng blueprint. Maaari ka ring gumawa ng sarili mong step!
  • Ang Blueprints builder tool ay nagpapahintulot sa iyo na i-edit ang iyong blueprint online at patakbuhin ito nang direkta sa isang Playground instance.

Sa pamamagitan ng properties at steps sa blueprint, maaari mong i-configure ang paunang setup ng iyong theme sa Playground instance.

info

Upang magbigay ng mahusay na demo ng iyong theme gamit ang Playground, maaaring gusto mong i-load ito kasama ang default na content na nagpapakita ng mga feature ng iyong theme. Tingnan ang Pagbibigay ng Nilalaman para sa Iyong Demo na gabay para matuto pa.

resetData​

Gamit ang resetData step, maaari mong alisin ang default na content ng isang WordPress installation upang mag-import ng sarili mong content.

"steps": [
	{
		"step": "resetData"
	}
]

   Patakbuhin ang Blueprint   

writeFile​

Gamit ang writeFile step, maaari kang magsulat ng data sa isang file sa tinukoy na path. Maaari mong gamitin ito upang magsulat ng custom PHP code sa isang PHP file sa loob ng mu-plugins folder ng Playground WordPress instance, kaya ang code ay awtomatikong na-eexecute kapag na-load ang WordPress instance.

"steps": [
	{
		"step": "writeFile",
		"path": "/wordpress/wp-content/mu-plugins/rewrite.php",
		"data": "<?php /* Use pretty permalinks */ add_action( 'after_setup_theme', function() { global $wp_rewrite; $wp_rewrite->set_permalink_structure('/%postname%/'); $wp_rewrite->flush_rules(); } );"
	}
]

   Patakbuhin ang Blueprint   

updateUserMeta​

Gamit ang updateUserMeta step, maaari mong i-update ang anumang user metadata. Halimbawa, maaari mong i-update ang metadata ng default na admin user ng anumang WordPress installation:

"steps": [
	{
		"step": "updateUserMeta",
		"meta": {
			"first_name": "John",
			"last_name": "Doe",
			"admin_color": "modern"
		},
		"userId": 1
	}
]

   Patakbuhin ang Blueprint   

setSiteOptions​

Gamit ang setSiteOptions step, maaari mong itakda ang site options gaya ng site name, description, o page na gamitin para sa posts.

"steps": [
	{
		"step": "setSiteOptions",
		"options": {
			"blogname": "Rich Tabor",
			"blogdescription": "Multidisciplinary maker specializing in the intersection of product, design and engineering. Making WordPress.",
			"show_on_front": "page",
			"page_on_front": 6,
			"page_for_posts": 2
		}
	}
]

   Patakbuhin ang Blueprint   

plugins​

Gamit ang shorthand na plugins, maaari mong itakda ang listahan ng mga plugin na nais mong i-install at i-activate kasama ng iyong theme sa Playground instance.

"plugins": ["todo-list-block", "markdown-comment-block"]

   Patakbuhin ang Blueprint   

login​

Gamit ang shorthand na login, maaari mong ilunsad ang iyong Playground instance na naka-log in na sa admin user.

"login": true

   Patakbuhin ang Blueprint   

Maaari mo ring gamitin ang login step upang ilunsad ang iyong Playground instance na naka-log in sa anumang partikular na user.

tip

Ang "Stylish Press" at "Loading, activating, and configuring a theme from a GitHub repository" na halimbawa mula sa Blueprints Gallery ay mahusay na sanggunian para sa pag-load, pag-activate, pag-import ng content, at pag-configure ng block theme sa isang Playground instance.

Pag-develop ng Theme​

Lokal na pag-develop at testing ng theme gamit ang Playground​

Mula sa root folder ng code ng isang block theme, maaari mong mabilis i-load sa lokal ang isang Playground instance na may theme na iyon na naka-load at naka-activate. Gawin ito sa pamamagitan ng paglulunsad, sa loob ng theme directory, ng wp-now command mula sa iyong paboritong command line program o ang Visual Studio Code extension mula sa IDE na Visual Studio Code.

Halimbawa:

git clone git@github.com:WordPress/community-themes.git
cd community-themes/blue-note
npx @wp-now/wp-now start

Idisenyo ang iyong theme gamit ang WordPress UI at i-save ang iyong mga pagbabago bilang Pull Requests​

Maaari mong ikonekta ang iyong Playground instance sa isang GitHub repository at gumawa ng Pull Request na naglalaman ng mga pagbabagong ginawa mo sa pamamagitan ng WordPress UI sa Playground instance, gamit ang plugin na Create Block Theme. Maaari ka ring gumawa ng mga pagbabago sa theme na iyon at i-export bilang zip.

Tandaan na kakailanganin mong may naka-install at naka-activate na plugin na Create Block Theme sa Playground instance upang magamit ang workflow na ito.

tip

Check About Playground > Build > Save changes done on a Block Theme and create GitHub Pull Requests for more info.