{"id":228895,"date":"2022-10-18T16:34:00","date_gmt":"2022-10-18T13:34:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228895"},"modified":"2022-11-09T04:42:14","modified_gmt":"2022-11-09T01:42:14","slug":"lisaeae-aloituspisteitae-wordpressin-luontilohkokomentosarjaan","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/lisaeae-aloituspisteitae-wordpressin-luontilohkokomentosarjaan\/","title":{"rendered":"Lis\u00e4\u00e4 aloituspisteit\u00e4 WordPressin luontilohkokomentosarjaan"},"content":{"rendered":"\n<p>Kun luot lohkon ensimm\u00e4isen kerran WordPressin luontilohkokomentosarjan avulla, <code>npm init @wordpress\/block<\/code>saat sis\u00e4\u00e4ntulopisteen osoitteeseen <code>\/src\/index.js<\/code>, jonka avulla voit k\u00e4\u00e4nt\u00e4\u00e4 kaikki lohkopohjaiset resurssit ja tyylit.<\/p>\n<p>Joskus haluat lis\u00e4t\u00e4 muita aloituskohtia, esimerkiksi haluat ehk\u00e4 k\u00e4ytt\u00e4\u00e4 WordPress Block Editor (Gutenberg) -lohkoja muualla editorissa, esimerkiksi <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">asetussivulla<\/a> tai mukauttajassa.<\/p>\n<p>T\u00e4m\u00e4 opas auttaa sinua laajentamaan WordPressin luontilohkokomentosarjaa <code>webpack.config<\/code>, jotta voit lis\u00e4t\u00e4 n\u00e4m\u00e4 lis\u00e4tulokohdat.<\/p>\n<h2>Edellytykset<\/h2>\n<ul>\n<li>Tutustu <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress Gutenbergin lis\u00e4osien luomiseen lohkokomentosarjan avulla<\/a><\/li>\n<\/ul>\n<h2>Luo tiedostosi<\/h2>\n<p>Lohkokomentosarjan <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">luontioppaan<\/a> j\u00e4lkeen aiomme luoda ratkaisussamme muutamia tiedostoja:<\/p>\n<h3>Luoda<code>\/src\/admin.js<\/code><\/h3>\n<p>T\u00e4m\u00e4 tiedosto on p\u00e4\u00e4sis\u00e4\u00e4ntulopiste mille tahansa Reactille, jonka haluamme lis\u00e4t\u00e4 WordPressin j\u00e4rjestelm\u00e4nvalvojan\u00e4ytt\u00f6\u00f6n (jos esimerkiksi halusimme <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">rakentaa asetussivun hallitaksemme asetuksiamme Gutenberg Componentsilla<\/a>.<\/p>\n<p>Luo tiedosto <code>\/src\/admin.js<\/code>ja liit\u00e4 siihen seuraava koodi:<\/p>\n<pre><code>import { __ } from '@wordpress\/i18n';\nimport api from '@wordpress\/api';\n\nimport '.\/admin.scss';\n<\/code><\/pre>\n<p>Emme tee t\u00e4ss\u00e4 tiedostossa juuri mit\u00e4\u00e4n, se on my\u00f6hemmin annettavien oppaiden aihe. Toistaiseksi lis\u00e4\u00e4mme vain koodia, jotta voimme testata ulostuloa.<\/p>\n<p>Se kuitenkin tuo <code>\/src\/admin.scss<\/code>tiedoston, joka k\u00e4\u00e4nnet\u00e4\u00e4n sis\u00e4lt\u00e4m\u00e4\u00e4n kaikki mukautetut CSS-tiedostomme WordPress-j\u00e4rjestelm\u00e4nvalvojalle.<\/p>\n<h3>Luoda<code>\/src\/admin.scss<\/code><\/h3>\n<p>Luo tiedosto <code>\/src\/admin.scss<\/code>ja lis\u00e4\u00e4 testi-SCSS:<\/p>\n<pre><code>body {\n  background: pink;\n}\n<\/code><\/pre>\n<p>J\u00e4lleen t\u00e4m\u00e4 koodi ei palvele muuta kuin testaamaan, k\u00e4\u00e4nnet\u00e4\u00e4nk\u00f6 SCSS.<\/p>\n<h3>Luoda<code>\/webpack.config.js<\/code><\/h3>\n<p>Luo laajennuksen juureen tiedosto, jonka nimi kerrotaan <code>webpack.config.js<\/code>pian, mit\u00e4 t\u00e4h\u00e4n tiedostoon laitetaan.<\/p>\n<h2>Muokkaa laajennuksen PHP-juuritiedostoa<\/h2>\n<p>Jos olet seurannut edellist\u00e4 opasta, kyseist\u00e4 laajennusta kutsutaan nimell\u00e4 <code>wholesome-plugin.php<\/code>.<\/p>\n<p>T\u00e4ss\u00e4 tiedostossa haluamme rekister\u00f6id\u00e4 komentosarjat admin-alueelle, jotka tulostetaan webpack-kokoonpanollamme. Lis\u00e4\u00e4 seuraava funktio tiedoston alaosaan:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_admin_scripts() {\n    $dir = __DIR__;\n\n    $script_asset_path = \"$dir\/build\/admin.asset.php\";\n    if (! file_exists( $script_asset_path)) {\n        throw new Error(\n            'You need to run `npm start` or `npm run build` for the \"wholesomecode\/wholesome-plugin\" block first.'\n        );\n    }\n    $admin_js     = 'build\/admin.js';\n    $script_asset = require( $script_asset_path );\n    wp_register_script(\n        'wholesomecode-wholesome-plugin-admin-editor',\n        plugins_url( $admin_js, __FILE__ ),\n        $script_asset['dependencies'],\n        $script_asset['version']\n    );\n    wp_set_script_translations( 'wholesomecode-wholesome-plugin-block-editor', 'wholesome-plugin' );\n\n    $admin_css = 'build\/admin.css';\n    wp_enqueue_style(\n        'wholesomecode-wholesome-plugin-admin',\n        plugins_url( $admin_css, __FILE__ ),\n        ['wp-components'],\n        filemtime( \"$dir\/$admin_css\") );\n}\nadd_action( 'admin_enqueue_scripts', 'wholesomecode_wholesome_plugin_admin_scripts', 10 );\n<\/code><\/pre>\n<p>Olemme melko pitk\u00e4lti kopioineet koodin edellisest\u00e4 jonolohkosta, mutta tehneet siit\u00e4 merkityksellisen odotetuille <code>\/build\/admin.js<\/code>ja tulostetuille tiedostoillemme <code>\/build\/admin.css<\/code>. Huomaa, ett\u00e4 lataamme my\u00f6s erityisesti luodun <code>\/build\/admin.asset.php<\/code>tiedoston, joka lis\u00e4\u00e4 automaattisesti kaikki WordPress-lohkoeditorin (Gutenberg) riippuvuudet j\u00e4rjestelm\u00e4nvalvojan komentosarjaamme.<\/p>\n<h2>Muokkaa<code>webPack.config<\/code><\/h2>\n<p>Vaiheessa 2 loimme tiedoston <code>webpack.config.js<\/code>, lis\u00e4\u00e4 t\u00e4h\u00e4n tiedostoon seuraava koodi:<\/p>\n<pre><code>const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\nconst path = require( 'path' );\n\nmodule.exports = {\n    ...defaultConfig,\n    entry: {\n        ...defaultConfig.entry,\n        admin: path.resolve( process.cwd(), 'src', 'admin.js' ),\n    }\n};\n<\/code><\/pre>\n<p>T\u00e4m\u00e4 koodi tuo <code>webpack.config<\/code>osoitteesta <code>@wordpress\/scripts<\/code>. T\u00e4m\u00e4 on koodi, joka suoritetaan aina, kun suoritat <code>npm start<\/code>ratkaisusi.<\/p>\n<p>Teemme vain t\u00e4m\u00e4n konfiguraation ja lis\u00e4\u00e4mme toisen aloituspisteen rivill\u00e4 <code>admin: path.resolve( process.cwd(), 'src', 'admin.js' ),<\/code>.<\/p>\n<p>Loppuosa koodista vain k\u00e4skee webpackia k\u00e4ytt\u00e4m\u00e4\u00e4n jo olemassa olevia asetuksia (esim <code>...defautConfig<\/code>. <code>...defaultConfig.entry<\/code>).<\/p>\n<h2>Kokoa koodi<\/h2>\n<p>K\u00e4\u00e4nn\u00e4 laajennus <code>npm start<\/code>komennolla ja katsotaan mit\u00e4 tapahtuu:<\/p>\n<p>Koodin k\u00e4\u00e4nt\u00e4minen uudella sis\u00e4\u00e4ntulopisteell\u00e4<\/p>\n<p>Skripti luo nyt meille uusia tiedostoja:<\/p>\n<ul>\n<li>\n<p><code>\/build\/admin.assets.php<\/code>\u2014 T\u00e4m\u00e4 PHP-tiedosto luodaan automaattisesti, kun <code>\/src<\/code>kansio k\u00e4\u00e4nnet\u00e4\u00e4n. Se sis\u00e4lt\u00e4\u00e4 joukon kaikkia WordPress Editorin (Gutenberg) JavaScript-syvyyksi\u00e4, joita uusi aloituspisteesi k\u00e4ytt\u00e4\u00e4. Se asetetaan jonoon p\u00e4\u00e4lataustiedoston kautta k\u00e4ytt\u00f6\u00f6nottamamme <code>wholesome-plugin.php<\/code>lis\u00e4toiminnon kautta.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.css<\/code>\u2014 T\u00e4m\u00e4 on j\u00e4rjestelm\u00e4nvalvojan CSS-tiedosto, ja se asetetaan jonoon p\u00e4\u00e4lataustiedoston kautta k\u00e4ytt\u00f6\u00f6nottamamme <code>wholesome-plugin.php<\/code>lis\u00e4toiminnon kautta.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.js<\/code>\u2014 T\u00e4m\u00e4 on t\u00e4rkein k\u00e4\u00e4nnetty JavaScript-tiedosto, ja se asetetaan jonoon p\u00e4\u00e4lataustiedoston kautta k\u00e4ytt\u00f6\u00f6nottamamme <code>wholesome-plugin.php<\/code>lis\u00e4toiminnon kautta.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.css.map<\/code>\u2014 T\u00e4m\u00e4 tiedosto luodaan vain, kun k\u00e4\u00e4nn\u00e4t resursseja kehitystilaa varten (IE k\u00e4yt\u00e4t, <code>npm start<\/code>etk\u00e4 <code>npm build<\/code>kun k\u00e4\u00e4nn\u00e4t resursseja. Se on hy\u00f6dyllinen tiedosto virheenkorjaajille, joka auttaa tunnistamaan tiedostojen nimet ja rivinumerot CSS:ss\u00e4, jos tapahtuu virheit\u00e4.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.js.map<\/code>\u2014 T\u00e4m\u00e4 tiedosto luodaan vain, kun k\u00e4\u00e4nn\u00e4t resursseja kehitystilaa varten (IE k\u00e4yt\u00e4t, <code>npm start<\/code>etk\u00e4 <code>npm build<\/code>kun k\u00e4\u00e4nn\u00e4t resursseja. Se on hy\u00f6dyllinen tiedosto JavaScript-virheenkorjaajille, joka auttaa tunnistamaan tiedostojen nimet ja rivinumerot virheiden sattuessa.<\/p>\n<\/li>\n<li>\n<p>Katso <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">post-metakenttien k\u00e4ytt\u00f6\u00e4 Gutenberg-lohkoissa<\/a><\/p>\n<\/li>\n<li>\n<p>Katso <a href=\"https:\/\/wholesomecode.ltd\/guides\/options-settings-data-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">vaihtoehtojen ja asetusten k\u00e4ytt\u00f6\u00e4 Gutenberg-lohkoissa<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-meta-boxes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Katso mukautettujen metalaatikoiden<\/a> luomista Gutenbergiss\u00e4<a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-meta-boxes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<\/li>\n<li>\n<p>Katso <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">vaihtoehto- ja asetussivun rakentaminen Gutenbergin komponenteilla<\/a><\/p>\n<\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kun luot lohkon ensimm\u00e4isen kerran WordPressin luontilohkokomentosarjalla k\u00e4ytt\u00e4m\u00e4ll\u00e4 npm init @wordpress\/block, saat sis\u00e4\u00e4ntulopisteen tiedostoon \/src\/index.js, jota voit k\u00e4ytt\u00e4\u00e4&#8230;<\/p>\n","protected":false},"author":1,"featured_media":221177,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[782,750,719,895,917,843],"tags":[1166],"class_list":["post-228895","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-avoimen-laehdekoodin-ohjelmisto","category-avoin-laehdekoodi","category-kehittaejae","category-koodi","category-muut","category-opetusohjelmia","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228895","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=228895"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228895\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/221177"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=228895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=228895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=228895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}