Tässä opetusohjelmassa tarkastellaan, kuinka voit lisätä mukautetun sivupalkin Inspectoriin (oikea sivupalkki) WordPress Gutenbergissä. Sisällä toteutamme postin metaan yhdistetyn kentän. Kaikki on toteutettu Javascriptillä, Gutenberg-editorin sisällä, ja se on vaihtoehto metalaatikoiden lisäämiselle perinteisellä tavalla.
Varoitus!
Tämä on opetusohjelma oman mukautetun sivupalkin luomiseen. Mutta jos olet kiinnostunut vain lisäämään meta/asetukset Inspectorin vakiosivupalkkiin ("Asiakirja"-välilehti), minulla on opetusohjelma juuri sitä varten:
Mitä luomme
WordPress Gutenbergin avulla kehittäjät voivat luoda mukautettuja sivupalkkeja käyttämällä niin sanottua Javascript-laajennusta. (Ei pidä sekoittaa perinteisiin WordPress-laajennuksiin). Käyttämällä Javascript-laajennusta voimme luoda uuden sivupalkin ja liittää sen myös "Työkalut ja asetukset" -valikkoon.
Lisäämme "Työkalut" -kohtaan uuden valikkokohdan, joka avaa mukautetun sivupalkin. Sivupalkin sisältö on täysin sinun päätettävissäsi, mutta käyn läpi joitain esimerkkejä, mukaan lukien kuinka yhdistää post-metakenttä sen sisällä.
Javascriptin määrittäminen
Tätä opetusohjelmaa varten kirjoitan ES6/ESNext Javascriptin JSX:llä, mikä tarkoittaa, että meidän on määritettävä kääntäjä. Jos haluat seurata mukana etkä kirjoittaa ES5 Javascriptiä, sinun on määritettävä kehitysympäristö, joka kokoaa Javascriptin samalla kun menet. Jos et ole perehtynyt tähän, seuraa viestiäni, jossa kerron, kuinka tämä määritetään, ja palaa sitten tänne.
Olen määrittänyt webpack.config.jskääntämään Javascript-lähdetiedostoni teemakansioni /assets/js/sidebar-plugin.js. Tämä käännetty tiedosto on se, mitä meidän on lisättävä Gutenberg-editoriin. Tätä koodia kirjoittaessani olen käynnistänyt ajonaikaisen kääntäjän, joka kääntää Javascriptin uudelleen aina, kun tallennan muutoksia lähdekoodiin (npm run start). Kaikki tämä on selitetty perusteellisesti aiemmin mainitussa opetusohjelmassa.
Kirjoitan tämän teemaan, mutta se toimii samoin laajennuksessa. Muista vain säätää polkuja, kun lisäät skriptin editoriin.
Skriptin lisääminen editoriin
Jotta voimme lisätä komentosarjamme Gutenberg-editoriin, meidän on kirjoitettava PHP. Jos olet teemassa, functions.phpse on hyvä paikka aloittaa, tai jossain laajennustiedostoissasi. Huomaa, että meidän on lisättävä lopullinen käännetty komentosarja, ei lähdekoodia. Esimerkissäni käännetty Javascript sijaitsee teemakansiossani /assets/js/sidebar-plugin.js.
Luomme funktion, joka on koukussa enqueue_block_editor_assets. Sisällä teemme tavalliseen tapaan [wp_enqueue_script](https://developer.wordpress.org/reference/functions/wp_enqueue_script/)(). Komentosarjan riippuvuuksiksi lisäämme kaksi; wp-plugins, ja wp-edit-post. Nämä kaksi pakettia on ladattava ennen komentosarjaamme, koska käytämme niiden toimintoja.
add_action('enqueue_block_editor_assets', function() {
wp_enqueue_script('awp-sidebar-plugin', get_stylesheet_directory_uri(). '/assets/js/sidebar-plugin.js', ['wp-plugins', 'wp-edit-post']);
});Koska asetamme skriptin jonoon koukkuun, skriptimme enqueue_block_editor_assetsladataan vain, kun Gutenberg-editori on aktiivinen. Loistava! Nyt kaikki on valmis kirjoittamaan Javascript-laajennuksemme.
Rekisteröi Javascript-laajennus
Ensimmäinen vaihe on liitännäisen rekisteröinti. Teemme tämän [registerPlugin](https://github.com/WordPress/gutenberg/tree/master/packages/plugins#registerPlugin)wp.plugins-toiminnolla paketin sisältä wp.plugins.
Parametrina registerPluginille annamme nimen (varmista, että se on yksilöllinen) ja objektin asetuksineen. Sinun on vähintään annettava komponentti renderöintiominaisuutta varten. Voit myös halutessasi lisätä kuvakkeen WordPressin dashiconeista. Muista, että jos et määritä kuvaketta, se palaa laajennuskuvakkeeseen. Esittelytarkoituksiin käytän 'carrot'kuvaketta.
Mitä tulee komponenttiin, aloitamme määrittelemällä peruskomponentin, joka palauttaa yksinkertaisen div:n, jossa on satunnaista tekstiä. Ja ennen kaikkea koodia tuhoamme funktiot paketeista, joita haluamme käyttää.
Jos mitään ei tapahdu (ei edes virheitä), kun päivität Gutenbergin, olemme kaikki hyvät. Emme näe komponenttiamme, koska emme ole kertoneet WordPressille, missä se renderöidään. Seuraava askel on liittyä mukautettuun sivupalkkivalikkoon ja työkaluvalikon komponentteihin tavaroidemme renderöimiseksi.
Rekisteröi mukautettu sivupalkki
Mutta ensin selitys siitä, kuinka Gutenberg käsittelee mukautettuja sivupalkkeja ja miksi meidän on tehtävä mitä teemme. Kun rekisteröimme mukautetun sivupalkin onnistuneesti, yksi asia tapahtuu automaattisesti aluksi. Gutenberg lisää pikakuvakkeen sivupalkkiimme ylätyökaluriville, Työkalut-valikon viereen. Tämä tapahtuu, koska sivupalkkimme "kiinnitetään" automaattisesti.
Vain mukautetun sivupalkin lisäämisen ongelma on, että kuka tahansa käyttäjä voi "irrottaa" tämän pikakuvakkeen. Kun he tekevät niin, ei ole tukiasemaa sivupalkin avaamiseen uudelleen! Tästä syystä meidän on lisättävä myös valikkokohta Työkalut-valikkoon.
Mukautetun sivupalkin rekisteröinti tapahtuu PluginSidebarpaketin komponentilla wp.editPost. Valikkokohdan lisääminen Työkalut-valikkoon tapahtuu osuvasti nimetyllä komponentilla PluginSidebarMoreMenuItem(myös wp.editPostpakkauksessa).
Komponenttia varten PluginSidebarmeidän on tarjottava joitain rekvisiitta. Sinun tulee tarjota vähintään nameja title. Rekvisiitta titleon itsestään selvä, tämä on nimi, joka näkyy sivupalkin yläosassa. Vuonna potkuri nametarjoaa ainutlaatuisen etana. Kun lisäät valikkokohdan, sinun on viitattava tähän etanaan.
PluginSidebarMoreMenuItem(Työkaluvalikko) -komponentin lisääminen vaatii vähintään yhden ehdotuksen; target. Tässä annat saman nimen kuin annoit sivupalkin ehdotuksessa name. Komponentin sisällöksi kirjoitat tekstin, joka näytetään valikkokohtana. Yleensä tämä on sama kuin sivupalkin title.
Koska React vaatii yhden käärintäsolmun komponentin palautuksen ympärille, käärimme kaiken Fragmentkomponentin sisään (wp.elementpakkauksesta). Käärin myös naruni __()pakkauksesta wp.i18nkäännösten mahdollistamiseksi.
Yllä olevalla koodilla saamme seuraavat kaksi (todennäköisimmin kolme) asiaa tapahtumaan. Saat työkalupalkkiin porkkanakuvakkeen pikakuvakkeen (jos et ole vielä irrottanut sitä). Napsauttamalla tätä avautuu sivupalkki. Saat myös uuden valikkokohdan työkaluvalikon sivupalkkiin otsikon "Lisäosat" alle.
Sisällön lisääminen sivupalkkiin
Sivupalkin todellinen sisältö on täysin sinun päätettävissäsi. Sinun tarvitsee vain lisätä HTML-koodia tai komponentteja PluginSidebarhaluamallasi tavalla ("Hei siellä." -tekstin sijaan).
Saatat huomata, että sivupalkin sisällöstä puuttuu täyte. Tämä on tarkoituksellista, koska ajatuksena on, että luot paneeleja tämän sivupalkin sisään. Paneelit ovat normaalin Gutenberg-sivupalkin kokoontaitettavia osia. Nämä ovat komponentteja, jotka voit helposti lisätä mukautettuun sivupalkkiin. Voit lisätä niin monta paneelia kuin haluat, ja ne sopivat erinomaisten asioiden ryhmittelyyn.
Lisäämme paneelit sivupalkkiimme
Katsotaanpa nopeasti, kuinka voimme lisätä paneeleja sivupalkkiimme. Jos olet luonut omia mukautettuja lohkotyyppejä, saatat tuntea nämä komponentit. Käytämme ja PanelBodyvalinnaisesti paketista.PanelRow``wp.components
PanelBodyKomponentille annat vähintään potkurin title. Voit halutessasi määrittää ehdotukselle tosi tai epätosi initialOpenpäättääksesi, laajennetaanko paneeli oletuksena vai ei. Sisällönä komponentin sisällä on kaikki paneelin sisällä.
A:n sisällä PanelBodyvoit valinnaisesti käyttää PanelRowkomponentteja. Ne eivät todellakaan ole välttämättömiä, mutta voivat auttaa sinua saamaan hyvän tyylin paneelisi sisällölle.
Lisätään esimerkiksi kaksi paneelia mukautettuun sivupalkkiimme.
Tällä koodilla mukautettu sivupalkkimme alkaa todella näyttää siltä, että se kuuluu Gutenbergiin!
Viestin metakenttien lisääminen mukautettuun sivupalkkiin
Nyt ollaan todella perehtymässä mukautetun sivupalkin hyödyllisiin juttuihin; asetusten lisääminen ja niiden arvojen tallentaminen. Mutta ensin meidän on ymmärrettävä, miten.
Asetuskenttien (syötteet, valintaruudut, vaihtokentät jne.) lisääminen sivupalkkiin on todella helppoa käyttämällä WordPress-pakettien valmiita komponentteja. Meidän on kuitenkin pohdittava, kuinka arvot tallennetaan. Ilmeinen vaihtoehto on tallentaa ne post-meta-muodossa. Mutta asetuksen yhdistäminen postin metakenttään vaatii ylimääräistä koodia. Tarkemmin sanottuna meidän on käytettävä niin kutsuttuja korkeamman asteen komponentteja, jotta voimme hakea ja päivittää post-meta Javascriptin sisällä. Meidän on myös rekisteröitävä jokainen viestimeta PHP:n avulla ja saatettava ne REST API:n saataville.
Tämän opetusohjelman päätteeksi esitän kuinka lisätä post-meta avaimella awp_my_custom_meta, joka tulisi tallentaa joko tosi tai epätosi. Sivupalkissa se näkyy vaihtokenttänä (tosi/epätosi-komponentti).
Rekisteröi REST API:n post-meta
Ensimmäinen askel post-meta-sisällön lisäämisessä Javascript-tiedostoomme on niiden rekisteröiminen ja niiden määrittäminen käytettävissä oleviksi REST API:ssa. Tätä varten palaamme takaisin PHP:hen.
Toimintoon kytketyn funktion sisällä initkäytämme [register_meta](https://developer.wordpress.org/reference/functions/register_meta/)()funktiota. Parametreiksi meidän on määritettävä objektityyppi ‘ post‘, koska käytämme sitä post-metana (se ei sulje pois esim. sivun postaustyyppiä). Tarjoamme meta-avaimen ja sitten joukon argumentteja. Kriittinen asia lisättäväksi argumenttitaulukkoon on ‘ show_in_rest‘:n asettaminen arvoon true. Viestin metaa käytetään yleisesti nimellä ‘ single‘ (mieti, miten käytät get_post_meta()). Määrittelemme myös type. Mitä tulee tapauksiimme, asetimme sen arvoon " boolean".
Tällä koodilla ‘ awp_my_custom_meta‘ post meta -kenttä on käytettävissä Gutenbergistä. Sinun on toistettava register_meta()jokaiselle viestisisällölle, jonka haluat lisätä sivupalkkiin.
Palataan nyt Javascriptiin.
Asetuksen lisääminen sivupalkkiimme
Aloitetaan helposta osasta: syötteen lisääminen sivupalkkiimme. Myöhemmin lisäämme lisää koodia, jotta asetuskenttä todella yhdistetään post metaan. Koska meidän on tehtävä tämä, määritämme asetuksellemme erillisen uuden komponentin. Joten paneelin sisällä, johon haluat lisätä asetukset, voit kutsua vain tätä uutta komponenttia.
Kutsutaan komponentti CustomSidebarMetaComponent(saatat kutsua sitä joksikin projektisi kannalta oleelliseksi). Tämän komponentin sisällä haluamme hahmontaa vaihtokentän. Tätä varten käytämme pakkauksessa olevaa ToggleControlkomponenttia. wp.componentsToggleControlin rekvisiittana tarjoamme tukitarraan title. ToggleControl tarvitsee myös rekvisiitta onChangearvon päivittämistä ja checkednykyistä arvoa varten. Jätämme nämä kaksi pois toistaiseksi seuraavaan vaiheeseen asti.
Yllä olevalla koodilla sinun pitäisi saada vaihtokenttä sivupalkkiin. Sitä ei ole valittu eikä mitään tapahdu, kun napsautat sitä. Se on seuraava vaihe: sen yhdistäminen post-metaan.
Viestin metaan pääseminen withSelect- ja withDispatchin avulla
Jotta voimme käyttää sekä päivittää post-meta-arvoa, meidän on käytettävä korkeamman järjestyksen komponentteja (HOC) päästäksemme WordPress-myymäläversioon (samanlainen kuin Redux). WordPress tarjoaa meille hyödyllisiä HOC-ominaisuuksia, joita voimme käyttää wp.datapaketissa.
Korkeamman asteen komponentti [withSelect](https://developer.wordpress.org/block-editor/packages/packages-data/#withSelect)on tarjota komponentillemme rekvisiitta, joka on meidän tapauksessamme haettu post metasta. Käytämme tätä saadaksemme post-meta-arvon. Sisällä withSelectvoimme select('core/editor').getEditedPostAttribute('meta')hakea nykyisen viestin metan.
Toisaalta se [withDispatch](https://developer.wordpress.org/block-editor/packages/packages-data/#withDispatch)on korkeamman asteen komponentti, joka voi suorittaa toimintoja. Meidän tapauksessamme haluamme päivittää post metan, kun vastaavaa kenttäasetusta muutetaan sivupalkissamme. Tämän komponentin sisällä käytämme dispatch('core/editor').editPost()WordPressille ilmoitusta toiminnon lähettämisestä. Tarjoamamme objektin sisällä kerromme WordPressille, että se on meta, jota haluamme päivittää.
Lopuksi meidän on yhdistettävä withSelectja withDispatchkomponenttimme kanssa, joka käsittelee post meta -kentän (CustomSidebarMetaComponent). Tätä varten käytämme composepaketista wp.composeWordPressiä. Ajatuksena on, että withSelectja withDispatchtarjoaa CustomSidebarMetaComponentkomponentillemme rekvisiitta. withSelecttarjoaa post-metaan arvon prop, ja withDispatchtarjoaa toiminnon, jota voimme kutsua päivittämään arvon prop. Asetamme nämä rekvisiitta ToggleFieldille checkedja onChangevastaavasti .
Siinä on paljon selittelyä. Katsotaanpa varsinaista koodia:
Aloitetaan alusta. Joka on pohjassa. Rivillä #36muutamme sivupalkissa hahmonnettavan komponentin komponentiksi, jonka loimme compose(rivillä #15). Komponentti CustomSidebarMetayhdistää withSelectja withDispatchkomponentit ja palauttaa CustomSidebarMetaComponent.
Käyttäjällä CustomSidebarMetaComponenton pääsy rekvisiitta customPostMetaValueosoitteesta withSelect, ja setCustomPostMetapotkuriin. withDispatchNäitä kahta käytämme rekvisiittalle checkedja onChangerekvisiittalle ToggleField.
Huomaa, että rivissä #5lisäämme propskomponentteihin parametreiksi, jotta rekvisiitta on käytettävissä komponentissa.
Johtopäätös ja loppusanat
Toivottavasti tästä opetusohjelmasta oli sinulle hyötyä. Tämän onnistuin ymmärtämään aiheesta monen yrityksen ja erehdyksen aikana. Tästä aiheesta ei ole vielä juuri mitään dokumentaatiota. Kamppailen edelleen tämän kanssa, varsinkin kun on kyse useiden post-metatietojen tehokkaasta käsittelystä. Jos onnistun oppimaan hyviä temppuja, päivitän tämän opetusohjelman varmasti!
Toivottavasti seuraamalla tätä opetusohjelmaa sinulla pitäisi olla koodi, joka lisää onnistuneesti uuden mukautetun sivupalkin WordPress Gutenberg -editoriin ja toivottavasti mielekästä sisältöä ja asetuksia. Tässä on viimeinen koodi mukautetulle sivupalkin post-metakentällä.