Alustame absoluutsetest p\u00f5hit\u00f5dedest. Milliseid programmeerimiskeeli (programmeerimiskeeli) ja t\u00f6\u00f6riistu peaksite Gutenbergi jaoks parimaks arendamiseks kasutama v\u00f5i \u00f5ppima?<\/p>\n
Keel ja raamatukogud, mida peate teadma<\/h2>\n
L\u00fchike vastus k\u00fcsimusele, millist keelt peate Gutenbergi arendamiseks kasutama, on: Javascript. Kuid Javascripti maailmas on \u00fcsna palju kontseptsioone, laiendusi ja t\u00f6\u00f6riistu, millest peaksite teadma.<\/p>\n
K\u00f5igepealt on k\u00fcsimus Javascripti versioonis. Seal on Javascripti ametlik standardimine; ECMAScript. ECMAScript 5 (sageli l\u00fchendatud ES5<\/strong> -ks) tuli v\u00e4lja umbes 10 aastat tagasi ja see on Javascripti versioon, mida enamik meist arendajatest tunneb. Siis on meil ECMAScript 6 (sageli l\u00fchendatud ES6<\/strong> -ks ), mis ilmus 2015. aastal. M\u00f5ned inimesed nimetavad seda versiooni ES2015-ks. Ja l\u00f5puks on ESNext<\/strong>, mis on d\u00fcnaamiline nimi, mis katab tulevase versiooni ja sisaldab ettepanekuid, mida loodame lisada mis tahes j\u00e4rgmisesse Javascripti standardversiooni.<\/p>\n V\u00f5ib-olla m\u00f5tlete j\u00e4rgmiselt: "See on k\u00f5ik hea ja k\u00f5ik, Javascripti uuemad versioonid t\u00e4hendavad lihtsalt rohkem funktsioone. Nii et ma kasutan lihtsalt uusimat." Kuid Javascripti versioonide kohta peate teadma v\u00e4ga olulist asja ja see on j\u00e4rgmine: enamik brausereid saab t\u00e4nap\u00e4eval aru ainult ES5-st.<\/p>\n See t\u00e4hendab, et kui soovite Javascripti ES6-s v\u00f5i ESNextis kirjutada, peate seadistama t\u00f6\u00f6riistad, mis muudavad teie koodi ES5-ks, et brauserid seda m\u00f5istaksid. Kuid enne, kui hakkate m\u00f5tlema ES6 ja ESNexti \u00f5ppimise \u00fcldse vahelej\u00e4tmisele, pidage meeles, et ES5 on 10 aastat vana. Ja see n\u00f5uab palju rohkem koodi kirjutamist. Samuti on see palju v\u00e4hem loetav ja keerulisem, kui kirjutaksite selle ES6-s v\u00f5i ESNextis.<\/p>\n Lisaks soovite Gutenbergi kontseptsioonide jaoks kasutada ka JSX<\/strong> -i \u2013 Javascripti s\u00fcntaksilaiendit. JSX on ka keel, mida brauserid ei m\u00f5ista ilma seda muutmata.<\/p>\n Kui te pole ikka veel veendunud, et ES6\/ESNext on selle teisendamiseks lisasammu v\u00e4\u00e4rt, lubage mul n\u00e4idata teile koodide v\u00f5rdlust. ES6 ja JSX abil saate selle kirjutada lihtsa l\u00f5igu tagastamiseks; klassi ja muutuja d\u00fcnaamilise v\u00e4ljundiga;<\/p>\n Neile teist, kes pole sellega tutvunud ja arvate, et olen tsitaadid unustanud \u2013 ei, ma ei ole seda teinud. See on JSX-i lihtsus. V\u00f5rdleme \u00fclaltoodut sellega, kuidas kirjutaksite ES5 ja WordPressi Javascripti teekidega:<\/p>\n Kogu \u00fclaltoodud kood on vajalik ES6 ja JSX-i v\u00e4ljastamiseks ainsuses, mida on v\u00e4ga lihtne lugeda! Kujutage ette keerukama kasutajaliidese koostamist s\u00fcndmuste ja tingimustingimustega, kui lihtsalt \u00fcks l\u00f5ik n\u00f5uab seda kohmakat koodijuppi.<\/p>\n Kas olete veendunud? Hea!<\/p>\n K\u00f5ige tavalisem ja WordPressi t\u00f6\u00f6riist ES6\/ESNexti teisendamiseks on Babel<\/a>. Tavaliselt kasutate Babelit Webpacki<\/a> pistikprogrammina, mis on t\u00f6\u00f6riist, mis koondab ja minimeerib teie Javascripti faile. M\u00f5lemad t\u00f6\u00f6riistad kasutavad Node.js<\/a> -i, mis annab teile m\u00f5ned t\u00f6\u00f6riistad Webpacki ja Babeli skriptide k\u00e4ivitamiseks k\u00e4sureal. Kui see k\u00f5lab segadusse ajavalt, on mul postitus, mis selgitab p\u00f5hjalikult, kuidas k\u00f5iki neid t\u00f6\u00f6riistu Gutenbergi arendamiseks seadistada .<\/a><\/p>\n Teine asi, mida peate tehnoloogiate kohta teadma, on see, et Gutenberg p\u00f5hineb React JS<\/strong> peal oleval abstraktsioonikihil. React JS<\/a> on avatud l\u00e4htekoodiga Javascripti teek, mida haldab Facebook ja mis ilmus umbes 2013. aastal. Kuna React on olnud juba m\u00f5nda aega, on selle teegi jaoks palju \u00f5petusi, juhendeid ja dokumentatsiooni. Reacti ametlikul saidil on hea ja \u00fcksikasjalik \u00f5petus<\/a> teile, kes pole Reacti kasutanud. Gutenbergi jaoks arendamiseks ei pea te kindlasti olema Reacti ekspert, kuid selle komponentide ja olekutega t\u00f6\u00f6tamise p\u00f5hit\u00f5ed aitavad teil Gutenbergi m\u00f5ista.<\/p>\n Gutenbergi \u00fcks suurimaid eeliseid on postisisus fikseeritud HTML-ist eemaldumine. WordPress, enne Gutenbergi, ja enamik veebip\u00f5hiseid CMS-i salvestavad artiklite sisu puhtas HTML-is. Lihtsa sisu (pealkirjad ja l\u00f5igud) puhul see \u00fcldiselt probleem ei ole. Kuid keerulisema ja d\u00fcnaamilisema rikkaliku sisu puhul v\u00f5ib see olla suurem probleem.<\/p>\n K\u00f5ik CMS-id, mis lubavad artikli sisus d\u00fcnaamilist sisu, puutuvad kokku probleemidega selle salvestamisel kehtiva HTML-ina. See v\u00f5ib olla \u00fcksk\u00f5ik milline pilt, mis viitab t\u00e4ieliku URL-i asemel selle ID-le s\u00fcsteemis. V\u00f5i vidin, mis kuvab d\u00fcnaamiliselt antud kategooria viimaseid postitusi. Tavaliselt lahendatakse see kohandatud kr\u00fcptilise HTML-i v\u00e4ljastamisega, mille tavap\u00e4rasel v\u00e4ljastamisel pole m\u00f5tet. Seej\u00e4rel laske CMS-i parseril muuta need HTML-i osad millekski t\u00e4hendusrikkaks v\u00f5i d\u00fcnaamiliseks. Selle puuduseks on see, et kui teisaldate oma sisu teise CMS-i, p\u00f5hjustab see sageli inetu HTML-i. Sisu t\u00e4idetakse s\u00f5elumata HTML-iga, mille peate k\u00e4sitsi puhastama. Seda probleemi p\u00fc\u00fcab Gutenberg lahendada.<\/p>\n Gutenbergiga on WordPress otsustanud salvestada t\u00e4iendava ja d\u00fcnaamilise teabe HTML-i kommentaaridena. HTML-i kommentaarid ei ole veebisaidi kasutajatele kunagi n\u00e4htavad ja p\u00f5him\u00f5tteliselt on kommentaariplokis k\u00f5ik lubatud. HTML-i kommentaar algab Ma ei hakka kommenteerima, kuidas kommentaariplokid on \u00fcles ehitatud \u2013 selle kohta leiate \u00fcksikasjaliku juhendi<\/a> WordPressi redaktori k\u00e4siraamatust. Kuid n\u00e4iteks Gutenbergi postituse sisu lihtne l\u00f5ik salvestatakse andmebaasi j\u00e4rgmiselt:<\/p>\n Mis puudutab d\u00fcnaamilist sisu, siis tavaliselt ei v\u00e4ljastata HTML-i \u00fcldse. Kogu teave, mida WordPress vajab, et m\u00f5ista, mida see plokk teeb, leiate HTML-i kommentaaridest. Nii salvestab Gutenberg ploki "Viimased postitused":<\/p>\n Kuna k\u00f5ik on HTML-i kommentaar, siis oma postituste teise WordPressi \u00fclekandmine ilma Gutenbergi v\u00f5i muu CMS-ita tagab, et v\u00e4lja ei s\u00fclitata inetut parseerimata HTML-i. Seda lihtsalt ignoreeritakse ja j\u00e4etakse vahele.<\/p>\n Nagu olete praeguseks ilmselt aru saanud, algavad kommentaaride plokid ploki nimega, mille ees on ‘ Kasulik teada:<\/strong> Teil on paar v\u00f5imalust, kuidas kohandada oma teemasid v\u00f5i pistikprogramme Gutenbergi jaoks. Allpool on loetletud k\u00f5ige levinumad kohandused, mida arendajana t\u00f5en\u00e4oliselt teeksite.<\/p>\n WordPress Gutenbergiga on kaasas suur hulk plokit\u00fc\u00fcpe ja saate m\u00f5nda neist laiendada. Saate ka m\u00f5ned neist eemaldada v\u00f5i otsustada teatud juhtudel lubada v\u00f5i eemaldada ainult m\u00f5ned neist.<\/p>\n K\u00f5ige tavalisem meetod ploki laiendamiseks on kohandatud plokistiilide lisamine<\/a> \u2013 need on ploki stiilivariatsioonid. Blokeerimisstiilid ei ole WordPressis vaikimisi levinud, kuid neid on. Heitke pilk Quote plokki. Gutenbergi redaktoris on parempoolsel k\u00fclgribal kast nimega "Stiilid".<\/p>\n Teine v\u00f5imalus olemasolevate plokkide kohandamiseks on filtrite kasutamine. T\u00f5en\u00e4oliselt tunnete WordPressis PHP-d kasutavaid filtreid, kuid Gutenbergi puhul on n\u00fc\u00fcd olemas Javascripti-p\u00f5hised filtrid plokkidel<\/a>. N\u00e4iteks saate k\u00f5ikidele v\u00f5i teatud t\u00fc\u00fcpi plokkidele lisada oma kohandatud atribuute (s\u00e4tteid) v\u00f5i filtreerida, kuidas neid salvestatakse v\u00f5i v\u00e4ljastatakse.<\/p>\n Samuti saate manipuleerida plokkide kategooriatega, samuti eemaldada v\u00f5i teatud olukordades teatud plokke lubada. V\u00f5i v\u00f5ite n\u00e4iteks veenduda, et kohandatud postituse t\u00fc\u00fcbi jaoks on lubatud vaid k\u00e4put\u00e4is plokit\u00fc\u00fcpe.<\/p>\n Kohandatud plokkide loomine on v\u00f5ib-olla enamiku WordPressi arendajate esimene m\u00f5te. WordPressi vaikeplokid v\u00f5ivad olla kaugel, kuid kui loote keerukama teema v\u00f5i pistikprogrammi, on teil t\u00f5en\u00e4oliselt konkreetsed vajadused. N\u00e4iteks Gutenbergi kasutamine, et luua kena v\u00e4limusega esileht koos sisu ja d\u00fcnaamilise sisu otseteedega. Enamiku kohandamisv\u00f5imaluste saavutamiseks on v\u00f5imalik kasutada CSS-klassi valikut, mis on olemas k\u00f5igi plokkide jaoks. Kuid see pole eriti kasutajas\u00f5bralik.<\/p>\n Oma kohandatud plokkide kirjutamine on ilmselt Gutenbergi teema v\u00f5i pistikprogrammi kohandamisel k\u00f5ige keerulisem. Kuid see v\u00f5ib olla ka k\u00f5ige rahuldust pakkuv! Saate mitte ainult luua plokke, mis toimivad ja n\u00e4evad v\u00e4lja t\u00e4pselt sellised, nagu soovite, vaid see on ka suurep\u00e4rane viis uue Javascripti-p\u00f5hise tehnoloogia kiireks tundma\u00f5ppimiseks.<\/p>\n Kui olete WordPressi teemaarendaja, peaksite teadma, et Gutenbergi jaoks v\u00f5ib teie teema vajada palju seadistamist, eriti Kuna vaikimisi tegeleb WordPress enamiku vaikeplokkide stiilimisega ise, nii et te ei peaks oma teemas nende stiilide p\u00e4rast liiga palju muretsema. Kuid teemaarendajad on tavaliselt oma kujunduse ja stiili osas valivamad. Seega peate t\u00f5en\u00e4oliselt kohandama v\u00f5i t\u00e4iendama ploki stiili. Redigeerija stiile saate lisada ainult kasutajaliidesele, ainult redaktorile v\u00f5i m\u00f5lemale. WordPress Gutenbergi k\u00e4siraamat annab \u00fclevaate redaktori stiilidest<\/a> ja vaikeplokistiilidest.<\/p>\nMiks siis vaeva n\u00e4ha ES6, ESNexti v\u00f5i JSX-iga?<\/h3>\n
return <p className=\"example\">Hello, my name is {name}<\/p>;<\/code><\/pre>\nreturn wp.element.createElement(\n 'p',\n { className: 'example' },\n 'Hello, my name is ' + name\n);<\/code><\/pre>\nTeisendust\u00f6\u00f6riistad ja React JS<\/h3>\n
![\"WordPressi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153969-61e5175b816e1.png\")
<\/a><\/p>\nKokkuv\u00f5tteks:<\/h3>\n
\n
Uus viis postituse sisu salvestamiseks ja miks<\/h2>\n
<!--<\/code>ja l\u00f5peb t\u00e4hega --><\/code>ning Gutenberg salvestab andmed teatud struktuuris JSON-vormingus. Iga Gutenbergi plokk on \u00fcmbritsetud algava HTML-i kommentaariga ja p\u00e4rast seda sulgeva HTML-i kommentaariga.<\/p>\nPostituste sisu salvestatakse uuel viisil<\/h3>\n
<!-- wp:paragraph -->\n<p>Lorem ipsum dolor sit amet consectetur adipiscing elit.<\/p>\n<!-- \/wp:paragraph --><\/code><\/pre>\n<!-- wp:latest-posts {\"categories\":\"17\",\"displayPostContent\":true,\"excerptLength\":30,\"postLayout\":\"grid\"} \/--><\/code><\/pre>\nwp<\/code>‘. Kui on kohandatud s\u00e4tteid, v\u00e4ljastatakse need JSON-i nime j\u00e4rel, nagu n\u00e4ete viimaste postituste blokeerimise n\u00e4ites. Gutenberg viitab neile kui atribuutidele ja see kontseptsioon on midagi, millega saate v\u00e4ga tuttavaks, kui hakkate \u00f5ppima Gutenbergi jaoks arendama.<\/p>\n
\nkui soovite p\u00f5hjalikumalt uurida, kuidas uue postituse sisu salvestatakse, v\u00f5ite vaadata wp_posts<\/code>oma andmebaasis olevat tabelit. WordPressi mallide seest andmebaasi t\u00e4ieliku v\u00e4\u00e4rtuse piilumiseks on veel \u00fcks lihtsam viis. Kasutage silmuses olevas \u00fches mallis lihtsalt " echo get_the_content()<\/code>". Tavalise " the_content()<\/code>" kasutamine v\u00e4ljastab s\u00f5elutud postituse sisu, kuid sisu v\u00e4\u00e4rtuse kordamisel v\u00e4ljastatakse t\u00e4pselt see, mis on andmebaasis salvestatud. Kommentaariplokkide n\u00e4gemiseks saate kasutada t\u00f6\u00f6riista Kontrolli v\u00f5i vaadata allikat Chrome’is v\u00f5i Firefoxis.<\/p>\nMida saate arendajana Gutenbergis teha<\/h2>\n
Laiendage ja kohandage olemasolevaid plokke<\/h3>\n
Looge oma kohandatud plokid<\/h3>\n
Veenduge, et teie teema oleks Gutenbergi jaoks valmis<\/h3>\n
add_theme_support()<\/code>. WordPressi k\u00e4siraamatus on hea \u00fclevaade<\/a> k\u00f5igist teematugedest, mida peate oma teema Gutenbergi jaoks valmis muutmiseks arvestama.<\/p>\n