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.
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
}
}
]
}
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 pamamagitan ng themeData property ng installTheme blueprint step, maaari mong tukuyin ang git:directory resource na bubuo ng theme mula sa mga file mula sa isang repository sa Playground instance.
Sa mga nakaraang buwan, ang GitHub proxy ay isang napaka-kapaki-pakinabang na tool upang mag-load ng mga theme mula sa mga GitHub repository, dahil pinapayagan kang mag-load 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 theme mula sa isang GitHub repository:
{
"steps": [
{
"step": "installTheme",
"themeData": {
"resource": "git:directory",
"url": "https://github.com/Automattic/themes",
"ref": "trunk",
"path": "assembler"
},
"options": {
"activate": true
}
}
]
}
Kung ang iyong theme 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.
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.
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.
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"
}
]
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(); } );"
}
]
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
}
]
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
}
}
]
Mayroon ding siteOptions shorthand na maaaring gamitin sa halip na setSiteOptions step.
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"]
Maaari mo ring gamitin ang installPlugin step upang i-install at i-activate ang mga plugins para sa iyong Playground instance ngunit inirerekomenda ang shorthand na paraan.
login
Gamit ang shorthand na login, maaari mong ilunsad ang iyong Playground instance na naka-log in na sa admin user.
"login": true
Maaari mo ring gamitin ang login step upang ilunsad ang iyong Playground instance na naka-log in sa anumang partikular na user.
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-playground/cli 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-playground/cli server --auto-mount
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.