npm<\/code> skript, mille abil saate luua plokiplugina<\/a>, mis loob stardiploki, et saaksite kiiresti t\u00f6\u00f6le hakata.<\/p>\nVaikimisi on see WordPressi pistikprogramm, mille see loob, "plokk", kuid see annab meile ka hea l\u00e4htepunkti muud t\u00fc\u00fcpi Gutenbergi pistikprogrammide jaoks.<\/p>\n
Eeldused<\/h2>\n\n- S\u00f5lm peab olema teie masinasse installitud,<\/a> et saaksite kasutada
npm<\/code>k\u00e4sku (mis t\u00e4hendab Node Package Manager)<\/li>\n- WordPressi installimine<\/li>\n
- Koodiredaktor<\/li>\n
- Juurdep\u00e4\u00e4s terminalile<\/li>\n<\/ul>\n
Looge oma pistikprogramm<\/h2>\n
Kui olete s\u00f5lme oma arvutisse installinud, peaks teil olema juurdep\u00e4\u00e4s npm<\/code>oma terminali k\u00e4sule.<\/p>\nAvage oma terminal ja veenduge, et olete cd<\/code>oma WordPressi installi pistikprogrammide kaustas (nt) ’d (Muudetud kataloogi cd wp-content\/plugins<\/code>).<\/p>\nKui olete seal, k\u00e4ivitage j\u00e4rgmine k\u00e4sk:<\/p>\n
npm init @wordpress\/block\n<\/code><\/pre>\nSee laadib alla k\u00f5ik, mida skript ehituse alustamiseks vajab. Kui see on l\u00f5ppenud, esitab skript teile rea k\u00fcsimusi, mida on vaja pistikprogrammi konfigureerimiseks.<\/p>\n
Terminali kasutamine skripti loomise k\u00e4ivitamiseks<\/p>\n
Konfiguratsiooni k\u00fcsimused<\/h3>\n
Skript esitab j\u00e4rgmised k\u00fcsimused, siin on minu n\u00e4idisvastused:<\/p>\n
\n- \n
Identifitseerimiseks kasutatav plokk (ka pistikprogrammi ja v\u00e4ljundkausta nimi)<\/strong> \u2014 ma tahan, et minu ploki nimi oleks Wholesome Plugin<\/code>, seega sisestasin wholesome-plugin<\/code>.<\/p>\n<\/li>\n- \n
Ploki nime sisemine nimeruum (midagi teie toodete jaoks ainulaadset)<\/strong> \u2013 kuna see peaks olema unikaalne k\u00f5igi minu sisestatud toodete jaoks wholesomecode<\/code>, kuna see on minu ettev\u00f5tte nimi.<\/p>\n<\/li>\n- \n
Teie ploki kuvatav pealkiri<\/strong> \u2014 sisestasin pistikprogrammi pealkirja Wholesome Plugin<\/code>.<\/p>\n<\/li>\n- \n
Teie ploki l\u00fchikirjeldus (valikuline)<\/strong> \u2013 sisestasin " An example plugin to demonstrate the create-block-script<\/code>".<\/p>\n<\/li>\n- \n
Armatuurlaud, mis h\u00f5lbustab teie ploki tuvastamist (valikuline)<\/strong> \u2013 WordPressi Dashiconsi ressursi<\/a> kiiresti avamisel valisin selle, admin-plugins<\/code>kuna sellel on pistikprogrammi ikoon. \u00c4rge unustage seda tehes dashiconi eesliitest v\u00e4lja j\u00e4tta dashicon-.<\/p>\n<\/li>\n- \n
Kategooria nimi, mis aitab kasutajatel teie plokki sirvida ja avastada (kasutage nooleklahve)<\/strong> \u2013 valisin design<\/code>. Kuigi kohandatud kategooria sobiks ilmselt paremini.<\/p>\n<\/li>\n- \n
Pistikprogrammi autori nimi (valikuline). Mitu autorit v\u00f5ib olla loetletud komadega<\/strong> \u2014 sisestasin wholesomecode<\/code>.<\/p>\n<\/li>\n- \n
Pistikprogrammi litsentsi l\u00fchinimi (valikuline)<\/strong> \u2013 GPL v2.0 v\u00f5i uuema aktsepteerimiseks vajutasin sisestusklahvi.<\/p>\n<\/li>\n- \n
Link litsentsi t\u00e4isteksti juurde (valikuline)<\/strong> \u2013 GPL v2.0 litsentsi URL-i sisestamiseks vajutasin sisestusklahvi.<\/p>\n<\/li>\n- \n
Pistikprogrammi praeguse versiooni number<\/strong> \u2014 vajutasin sisestamiseks sisestusklahvi 0.1.0<\/code>.<\/p>\n<\/li>\n<\/ul>\n![\"WordPressi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d770fb3.png\")
Skripti seadistamise k\u00fcsimused<\/p>\n
Seej\u00e4rel l\u00f5petatakse skripti k\u00e4itamine.<\/p>\n
Mis just juhtus?<\/h3>\n
Skripti t\u00f6\u00f6tamise ajal juhtub m\u00f5ni asi, n\u00e4iteks:<\/p>\n
\n- See loob pistikprogrammi kausta,<\/li>\n
- See genereerib k\u00f5ik pluginafailid (\u00fcksikasju nende toimimise kohta vaadake pistikprogrammi uurimisest<\/a> )<\/li>\n
- See installib vajalikud s\u00f5ltuvused, sealhulgas
@wordpress\/scripts<\/code>paketi (see teeb pistikprogrammi loomisel palju raskusi)<\/li>\n- See koostab koodi<\/li>\n
- See v\u00e4ljastab k\u00e4skude loendi, mida saate kasutada<\/li>\n<\/ul>\n
![\"WordPressi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d865300.png\")
Ehitage k\u00e4sud<\/p>\n
Uurime neid l\u00e4hemalt pistikprogrammide uurimise<\/a> jaotises.<\/p>\nPlugina kasutamine<\/h2>\n
Enne pistikprogrammi kasutamist peate selle aktiveerima. Seda saate teha, valides Plugins<\/code>WordPressi administraatori men\u00fc\u00fcst ja seej\u00e4rel tehes valiku activate<\/code>pistikprogrammi nime all.<\/p>\n![\"WordPressi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d958ea6.gif\")
Aktiveerige pistikprogramm<\/p>\n
N\u00fc\u00fcd peate redigeerima postitust WordPressis ja sisestama pistikprogrammi Gutenbergi redaktori abil.<\/p>\n
![\"WordPressi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0db497f6.gif\")
Ploki sisestamine postitusse<\/p>\n
Pange t\u00e4hele, et pistikprogramm ei tee palju vaikimisi, vaid loob lihtsalt ploki. Siiski pakub see raamistikku, mida saate oma pistikprogrammi loomiseks kasutada.<\/p>\n
Ploki vaatamine esik\u00fcljel<\/h3>\n
Vaikimisi n\u00e4eb plokk esiotsas v\u00e4lja selline. Pange t\u00e4hele, et sellel on pisut erinev v\u00e4limus, see on tahtlik, et saaksite tutvuda WordPressi esi- ja tagak\u00fcljel oleva CSS-iga.<\/p>\n
![\"WordPressi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0dd10fa2.png\")
Esiotsas olev plokk<\/p>\n
Plugina uurimine<\/h2>\n
Plokiskripti loomise kogu eesm\u00e4rk on teil luua oma pistikprogramm. Uurime \u00fcksikasjalikumalt selle loodud faile:<\/p>\n
![\"WordPressi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0de1777f.png\")
Loodud failid<\/p>\n
wholesome-plugin<\/code><\/strong>\u2014 See on pistikprogrammi juurkaust, sellel on sama nimi, mis ma seadistusk\u00fcsimustes ‘n\u00e4lkja’ jaoks sisestasin.<\/p>\n**\/build**<\/code>\u2014 See on ehituskaust. \/src<\/code>See sisaldab k\u00f5iki kaustast loodud JavaScripti ja PHP varasid. Need pannakse j\u00e4rjekorda pealaadurifaili kaudu wholesome-notes.php<\/code>.<\/p>\n**\/build\/index.assets.php**<\/code>\u2014 See PHP-fail genereeritakse automaatselt \/src<\/code>kausta kompileerimisel. See sisaldab massiivi k\u00f5igist WordPressi redigeerija (Gutenberg) JavaScripti s\u00fcndsustest, mida teie pistikprogramm kasutab. See pannakse j\u00e4rjekorda p\u00f5hilaadurifaili kaudu wholesome-plugin.php<\/code>.<\/p>\n**\/build\/index.css**<\/code>\u2014 See on redaktori CSS-fail ja see asetatakse j\u00e4rjekorda peamise wholesome-plugin.php<\/code>laadimisfaili kaudu.<\/p>\n**\/build\/index.js**<\/code>\u2014 See on peamine kompileeritud JavaScripti fail ja see pannakse j\u00e4rjekorda peamise wholesome-plugin.php<\/code>laadimisfaili kaudu.<\/p>\n**\/build\/style-index.css**<\/code>\u2014 See on esiotsa CSS-fail ja see pannakse j\u00e4rjekorda peamise wholesome-plugin.php<\/code>laadimisfaili kaudu.<\/p>\n**\/build\/index.js.map**<\/code>\u2014 See fail luuakse ainult siis, kui kompileerite varasid arendusre\u017eiimi jaoks (IE k\u00e4itate, npm start<\/code>mitte npm build<\/code>varade kompileerimisel. See on kasulik fail JavaScripti siluritele, mis aitab vigade ilmnemisel tuvastada failinimesid ja reanumbreid.<\/p>\n\n- \n
**\/node_modules**<\/code>\u2014 See on kaust, kuhu on installitud k\u00f5ik teie pistikprogrammi JavaScripti s\u00f5ltuvused.<\/p>\n<\/li>\n- \n
**\/src**<\/code>\u2014 See on kaust, mis sisaldab k\u00f5iki teie pistikprogrammi kompileerimata varasid.<\/p>\n<\/li>\n- \n
**\/src\/edit.js**<\/code>\u2014 See on ploki redigeerimisfunktsioon ja juhib ploki kuvamist plokiredaktoris, kui see on redigeerimisre\u017eiimis.<\/p>\n<\/li>\n- \n
**\/src\/editor.scss**<\/code>\u2014 See on redaktori kompileerimata SCSS, see kompileeritakse \/build\/index.css<\/code>.<\/p>\n<\/li>\n- \n
**\/src\/index.js**<\/code>\u2014 See on teie WordPressi redaktori (Gutenbergi) ploki peamine kompileerimata JavaScripti fail. See registreerib ploki ja sisaldab vaikes\u00e4tteid.<\/p>\n<\/li>\n- \n
**\/src\/save.js**<\/code>\u2014 See on ploki salvestamise funktsioon ja kontrollib ploki m\u00e4rgistamist selle salvestamisel.<\/p>\n<\/li>\n- \n
**\/src\/style.scss**<\/code>\u2014 See on esiotsa kompileerimata SCSS, see kompileeritakse \/build\/style-index.css<\/code>.<\/p>\n<\/li>\n- \n
**\/.editorconfig**<\/code>\u2014 See fail sisaldab teie IDE (integreeritud arenduskeskkonna) jaoks kasulikke eelseadeid, n\u00e4iteks Visual Studio Code.<\/p>\n<\/li>\n- \n
**\/.gitignore**<\/code>\u2014 See fail k\u00e4sib gitil teatud faile ignoreerida, kui kasutate git-hoidlat (nt GitHub).<\/p>\n<\/li>\n- \n
**\/editor.css**<\/code>\u2014 Selle faili stiilid v\u00e4ljastatakse ainult redaktoris, see lisatakse j\u00e4rjekorda peamise wholesome-notes.php<\/code>laadimisfaili kaudu.<\/p>\n<\/li>\n- \n
**\/block.json**<\/code>\u2014 See fail m\u00e4\u00e4ratleb pistikprogrammi, nii et WordPressi plokiteek saaks selle avastada. Kui muudate pistikprogrammi, veenduge, et see fail oleks v\u00e4rskendatud. NPM-skripti uuemates versioonides kasutatakse seda faili \/src\/index.js<\/code>ploki registreerimise asemel.<\/p>\n<\/li>\n- \n
**\/package.json**<\/code>\u2014 See fail sisaldab k\u00f5iki pistikprogrammi npm-i s\u00f5ltuvusi ja k\u00e4ske, mida saate k\u00e4ivitada. Pange t\u00e4hele, et pistikprogramm kasutab wp-scripts<\/code>( @wordpress\/scripts<\/code>) baasina, nii et algselt on laaditud s\u00f5ltuvused selle paketi jaoks.<\/p>\n<\/li>\n- \n
**\/readme.txt**<\/code>\u2014 See fail on WordPressi pistikprogrammide hoidla readme-fail, mis on vajalik, kui soovite, et plokk oleks pistikprogrammide hoidlas loetletud.<\/p>\n<\/li>\n- \n
**\/wholesome-plugin.php**<\/code>\u2014 See on pistikprogrammi peamine laadimisfail. Selle nimi m\u00e4\u00e4rati ‘n\u00e4lkja’ kaudu, mille sisestasime esialgsesse h\u00e4\u00e4lestusskripti. See paneb j\u00e4rjekorda k\u00f5ik pistikprogrammi jaoks vajalikud JavaScripti varad.<\/p>\n<\/li>\n<\/ul>\nEhitusk\u00e4skude uurimine<\/h3>\n
Enne ehitusk\u00e4skude k\u00e4ivitamist peame veenduma, et oleme pistikprogrammide kaustas. Selles n\u00e4ites t\u00f6\u00f6taksime cd wholesome-plugin<\/code>terminalis, et muuta kataloog meie pistikprogrammide kaustaks.<\/p>\nSeej\u00e4rel saame k\u00e4ivitada j\u00e4rgmised k\u00e4sud:<\/p>\n
\n- \n
**npm start**<\/code>\u2014 alustab arendust\u00f6\u00f6de ehitamist. Kui muudate pistikprogrammi, peate muudatuste kuvamiseks seda tegema (t\u00f5en\u00e4oliselt peate ka oma brauserit v\u00e4rskendama).<\/p>\n<\/li>\n- \n
**npm run build**<\/code>\u2014 Ehitab tootmise koodi. Tehke seda, kui loote pistikprogrammi v\u00e4ljalaskeversiooni.<\/p>\n<\/li>\n- \n
**npm run format:js**<\/code>\u2014 Vormindab JavaScripti failid parimate tavade kohaselt automaatselt.<\/p>\n<\/li>\n- \n
**npm run lint:css**<\/code>\u2014 Lints (otsib vigu) CSS-failidest.<\/p>\n<\/li>\n- \n
**npm run lint:js**<\/code>\u2014 Lints (otsib vigu) JavaScripti failidest.<\/p>\n<\/li>\n- \n
**npm run packages-update**<\/code>– V\u00e4rskendab WordPressi pakette uusimale versioonile.<\/p>\n<\/li>\n<\/ul>\nKasutame pistikprogrammi muutmisel \u00fchte v\u00f5i mitut neist.<\/p>\n
Plugina muutmine<\/h2>\n
Alustuseks teeme oma ploki redigeeritavaks.<\/p>\n
Lisa atribuudid\/src\/index.js<\/code><\/h3>\nAvage \/src\/index.js<\/code>oma redaktoris ja lisage registerBlockType<\/code>funktsiooni alla j\u00e4rgmine teave apiVersion<\/code>:<\/p>\nattributes: {\n blockText: {\n default: 'Wholesome Plugin \u2013 hello from the editor!',\n type: 'string',\n },\n},\n<\/code><\/pre>\nSee annab meile koha andmete salvestamiseks meie pistikprogrammis, mida nimetatakse atribuudi (prop) blockText<\/code>kaudu juurdep\u00e4\u00e4setavaks. attributes<\/code>Pange t\u00e4hele, et oleme andnud sellele pistikprogrammi loomise skripti poolt loodud algteksti vaikev\u00e4\u00e4rtuseks.<\/p>\nLisage RichText\/src\/edit.js<\/code><\/h3>\nAvage \/src\/edit.js<\/code>oma redaktoris ja asendage import useBlockProps<\/code>j\u00e4rgmisega:<\/p>\nimport { RichText, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\nSee v\u00f5imaldab meil kasutada oma redigeerimise renderdusmeetodis RichTexti komponenti.<\/p>\n
Seej\u00e4rel muutke kogu Redigeerimisfunktsioon j\u00e4rgmiseks:<\/p>\n
export default function Edit( { attributes, setAttributes }) {\n const { blockText } = attributes;\n return (<p { ...useBlockProps() }>\n <RichText\n className=\"block__text\"\n keepPlaceholderOnFocus\n onChange={ (blockText) => setAttributes( { blockText }) }\n placeholder={ __( 'Block Text', 'wholesome-plugin') }\n tagName=\"span\"\n value={ blockText }\n \/>\n <\/p>\n );\n}\n<\/code><\/pre>\nSee seab RichText<\/code>komponendi v\u00e4\u00e4rtuseks sama, mis blockText<\/code>atribuudis salvestatud, ja atribuut onChange<\/code>m\u00e4\u00e4rab blockText<\/code>atribuudi v\u00e4\u00e4rtuseks, mis on kunagi komponendisse sisestatud RichText<\/code>.<\/p>\nV\u00e4ljutage atribuudid\/src\/save.js<\/code><\/h3>\nAvage \/src\/save.js<\/code>oma redaktoris ja asendage save<\/code>funktsioon j\u00e4rgmisega:<\/p>\nexport default function save( { attributes }) {\n const { blockText } = attributes;\n return (<p { ...useBlockProps.save() }>\n { blockText }\n <\/p>\n );\n}\n<\/code><\/pre>\nSee lihtsalt v\u00e4ljastab blockText<\/code>l\u00f5iku v\u00e4\u00e4rtuse.<\/p>\nPlugina kompileerimine<\/h3>\n
Avage terminal, veenduge, et olete oma pistikprogrammi juurkataloogis ja k\u00e4ivitage j\u00e4rgmine k\u00e4sk:<\/p>\n
Skript kompileeritakse. Kui teil on vigu, peaks terminal teid teavitama, mis need on.<\/p>\n
![\"WordPressi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0df5e2a4.gif\")
Plugina ehitamine<\/p>\n
Plugina sisestamine<\/h3>\n
Veenduge, et oleksite oma postitust v\u00e4rskendanud. Ploki eelmine versioon v\u00f5ib n\u00fc\u00fcd olla katki, see on hea, lihtsalt kustutage see ja sisestage uus.<\/p>\n
Sisestage plokk, kasutades redaktori vasakpoolses \u00fclanurgas olevat plussm\u00e4rki, ja kui see on sisestatud, kl\u00f5psake selle tekstil. Sa peaksid. n\u00fc\u00fcd saate teksti redigeerida.<\/p>\n
![\"WordPressi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e151e82.gif\")
Redigeeritava ploki sisestamine<\/p>\n
Plugina vaatamine<\/h3>\n
Salvestage postitus ja vaadake seda veebisaidi esiosas, algse teksti asemel tuleks kuvada teie muudetud tekst.<\/p>\n
![\"WordPressi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e327430.png\")
Redigeeritav plokk veebisaidi esiosas<\/p>\n
Kui soovite, et teie plokid kuvataks kohandatud plokkide kategoorias, lisage lihtsalt j\u00e4rgmine kood oma pistikprogrammi juure (antud juhul wholesome-plugin.php<\/code>:<\/p>\nfunction wholesomecode_wholesome_plugin_block_categories( $categories) {\n return array_merge(\n $categories,\n [\n [\n 'slug' => 'wholesome-blocks',\n 'title' => __( 'Wholesome Blocks', 'wholesome-boilerplate' ),\n ],\n ]\n );\n}\nadd_action( 'block_categories', 'wholesomecode_wholesome_plugin_block_categories', 10, 2 );\n<\/code><\/pre>\nSee registreerib teie ploki sisestajas kohandatud plokikategooria.<\/p>\n
Seej\u00e4rel peate lihtsalt kohandama funktsiooni category<\/code>argumenti, et viidata teie ploki kategooriale ja kompileerida uuesti:registerBlockType``\/src\/index.js<\/code><\/p>\n\ncategory: 'wholesome-blocks',\n<\/code><\/pre>\nN\u00fc\u00fcd, kui asute oma plokki sisestama, leiate selle oma \u00e4sja loodud ploki kategooriast:<\/p>\n
![\"WordPressi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e40fe2e.png\")
Kohandatud ploki kategooria ploki sisestajas<\/p>\n
\n- Heitke pilk PHP-le ploki renderdamiseks d\u00fcnaamiliste plokkidega<\/a><\/li>\n
- Vaadake postituse metav\u00e4ljade kasutamist oma plokis atribuutidena<\/a><\/li>\n
- Lisage InspectorControlsiga ploki k\u00fclgriba<\/a><\/li>\n
- Laiendage oma pistikprogrammi, lisades faili webpack.config t\u00e4iendavaid sisestuspunkte<\/a><\/li>\n<\/ul>\n