{"id":228421,"date":"2022-10-18T16:07:00","date_gmt":"2022-10-18T13:07:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228421"},"modified":"2022-11-09T02:21:35","modified_gmt":"2022-11-08T23:21:35","slug":"lisage-wordpressi-loomise-plokiskripti-sisenemispunktid","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/lisage-wordpressi-loomise-plokiskripti-sisenemispunktid\/","title":{"rendered":"Lisage WordPressi loomise plokiskripti sisenemispunktid"},"content":{"rendered":"\n<p>Kui loote WordPressi ploki loomise skripti abil esmakordselt ploki, <code>npm init @wordpress\/block<\/code>annab see teile sisenemispunkti <code>\/src\/index.js<\/code>, mida saate kasutada k\u00f5igi oma plokip\u00f5histe varade ja stiilide kompileerimiseks.<\/p>\n<p>M\u00f5nikord soovite lisada muid sisestuspunkte, n\u00e4iteks v\u00f5ite kasutada WordPressi plokiredaktori (Gutenberg) plokke mujal redaktoris, n\u00e4iteks <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">seadete lehel<\/a> v\u00f5i kohandajas.<\/p>\n<p>See juhend aitab teil laiendada WordPressi loomisploki skripti <code>webpack.config<\/code>, et saaksite neid t\u00e4iendavaid sisenemispunkte lisada.<\/p>\n<h2>Eeldused<\/h2>\n<ul>\n<li>Olge tuttav <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress Gutenbergi jaoks pluginate loomisega, kasutades loomisploki skripti<\/a><\/li>\n<\/ul>\n<h2>Looge oma failid<\/h2>\n<p>Plokiskripti <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">loomise juhendi<\/a> j\u00e4rgi loome oma lahenduses m\u00f5ned failid:<\/p>\n<h3>Loo<code>\/src\/admin.js<\/code><\/h3>\n<p>See fail on peamine sisenemispunkt igale Reactile, mida soovime WordPressi administraatoriekraanile lisada (n\u00e4iteks kui soovime <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">luua suvandite lehe, et juhtida oma seadeid Gutenbergi komponentidega<\/a>.<\/p>\n<p>Looge fail <code>\/src\/admin.js<\/code>ja kleepige j\u00e4rgmine kood:<\/p>\n<pre><code>import { __ } from '@wordpress\/i18n';\nimport api from '@wordpress\/api';\n\nimport '.\/admin.scss';\n<\/code><\/pre>\n<p>Me ei tee selles failis veel midagi, see on hilisemate juhendite teema. Praegu sisestame lihtsalt koodi, et saaksime v\u00e4ljundit testida.<\/p>\n<p>See aga impordib <code>\/src\/admin.scss<\/code>faili, mis kompileeritakse nii, et see sisaldaks kogu meie kohandatud CSS-i WordPressi administraatori jaoks.<\/p>\n<h3>Loo<code>\/src\/admin.scss<\/code><\/h3>\n<p>Looge fail <code>\/src\/admin.scss<\/code>ja lisage m\u00f5ni test-SCSS:<\/p>\n<pre><code>body {\n  background: pink;\n}\n<\/code><\/pre>\n<p>J\u00e4llegi pole sellel koodil muud kasu, kui selleks, et testida, kas SCSS kompileeritakse.<\/p>\n<h3>Loo<code>\/webpack.config.js<\/code><\/h3>\n<p>Looge oma pistikprogrammi juurfaili fail nimega <code>webpack.config.js<\/code>me k\u00e4sitleme varsti, mida sellesse faili lisada.<\/p>\n<h2>Redigeerige pistikprogrammi PHP juurfaili<\/h2>\n<p>Kui olete eelmist juhendit j\u00e4rginud, nimetatakse seda pistikprogrammi <code>wholesome-plugin.php<\/code>.<\/p>\n<p>Selles failis tahame registreerida administraatoriala skriptid, mille v\u00e4ljastab meie veebipaketi konfiguratsioon. Lisage selle faili allossa j\u00e4rgmine funktsioon:<\/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>Oleme koodi eelmisest j\u00e4rjekorraplokist \u00fcsna palju kopeerinud, kuid muutnud selle asjakohaseks meie eeldatavate ja v\u00e4ljundfailide <code>\/build\/admin.js<\/code>jaoks <code>\/build\/admin.css<\/code>. Pange t\u00e4hele, et laadime ka spetsiaalselt loodud <code>\/build\/admin.asset.php<\/code>faili, mis lisab meie administraatori skriptile automaatselt k\u00f5ik WordPressi plokiredaktori (Gutenbergi) s\u00f5ltuvused.<\/p>\n<h2>Redigeeri<code>webPack.config<\/code><\/h2>\n<p>2 sammus l\u00f5ime faili <code>webpack.config.js<\/code>, lisage sellesse faili j\u00e4rgmine kood:<\/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>See kood <code>webpack.config<\/code>impordib <code>@wordpress\/scripts<\/code>. <code>npm start<\/code>See on kood, mis t\u00f6\u00f6tab iga kord, kui oma lahenduses k\u00e4itate .<\/p>\n<p>K\u00f5ik, mida me teeme, on selle konfiguratsiooni valimine ja teise sisenemispunkti lisamine reaga <code>admin: path.resolve( process.cwd(), 'src', 'admin.js' ),<\/code>.<\/p>\n<p>\u00dclej\u00e4\u00e4nud osa koodist k\u00e4sib veebipaketil kasutada juba olemasolevaid s\u00e4tteid (nt <code>...defautConfig<\/code>, <code>...defaultConfig.entry<\/code>).<\/p>\n<h2>Koostage kood<\/h2>\n<p>Kompileerige oma plugin <code>npm start<\/code>k\u00e4suga ja vaatame, mis juhtub:<\/p>\n<p>Koodi koostamine uue sisenemispunktiga<\/p>\n<p>Skript genereerib n\u00fc\u00fcd meie jaoks m\u00f5ned uued failid:<\/p>\n<ul>\n<li>\n<p><code>\/build\/admin.assets.php<\/code>\u2014 See PHP-fail genereeritakse automaatselt <code>\/src<\/code>kausta kompileerimisel. See sisaldab massiivi k\u00f5igist WordPressi redigeerija (Gutenberg) JavaScripti s\u00fcndsustest, mida teie uus sisenemispunkt kasutab. See pannakse j\u00e4rjekorda pealaadurifaili kaudu <code>wholesome-plugin.php<\/code>meie lisatud lisafunktsiooni kaudu.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.css<\/code>\u2014 See on administraatori CSS-fail ja see pannakse j\u00e4rjekorda peamise <code>wholesome-plugin.php<\/code>laadimisfaili kaudu meie lisatud lisafunktsiooni kaudu.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.js<\/code>\u2014 See on peamine kompileeritud JavaScripti fail ja see pannakse j\u00e4rjekorda peamise <code>wholesome-plugin.php<\/code>laadimisfaili kaudu meie lisatud lisafunktsiooni kaudu.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.css.map<\/code>\u2014 See fail luuakse ainult siis, kui kompileerite varasid arendusre\u017eiimi jaoks (IE k\u00e4itate, <code>npm start<\/code>mitte <code>npm build<\/code>varade kompileerimisel. See on abistav fail siluritele, mis aitab vigade ilmnemisel tuvastada CSS-is failinimesid ja reanumbreid.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.js.map<\/code>\u2014 See fail luuakse ainult siis, kui kompileerite varasid arendusre\u017eiimi jaoks (IE k\u00e4itate, <code>npm start<\/code>mitte <code>npm build<\/code>varade kompileerimisel. See on kasulik fail JavaScripti siluritele, mis aitab vigade ilmnemisel tuvastada failinimesid ja reanumbreid.<\/p>\n<\/li>\n<li>\n<p>Vaadake <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">postituste metav\u00e4ljade kasutamist Gutenbergi plokkides<\/a><\/p>\n<\/li>\n<li>\n<p>Vaadake <a href=\"https:\/\/wholesomecode.ltd\/guides\/options-settings-data-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">valikute ja s\u00e4tete kasutamist Gutenbergi plokkides<\/a><\/p>\n<\/li>\n<li>\n<p>Vaadake <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-meta-boxes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kohandatud metakastide loomist Gutenbergis<\/a><\/p>\n<\/li>\n<li>\n<p>Vaadake <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Gutenbergi komponentide abil valikute ja s\u00e4tete lehe loomist<\/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>Kui loote esmakordselt ploki WordPressi loomise ploki skriptiga, kasutades k\u00e4sku npm init @wordpress\/block, annab see teile \/src\/index.js sisestuspunkti, mida saate kasutada&#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":[718,749,781,894,916,842],"tags":[1165],"class_list":["post-228421","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-avatud-laehtekoodiga","category-avatud-laehtekoodiga-tarkvara","category-kood","category-muud","category-opetused","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=228421"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228421\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/221177"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=228421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=228421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=228421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}