{"id":228665,"date":"2022-10-13T20:18:00","date_gmt":"2022-10-13T17:18:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228665"},"modified":"2022-11-09T03:40:12","modified_gmt":"2022-11-09T00:40:12","slug":"mukautetun-cmb2-linkkivalitsinohjaimen-luominen-wordpressille","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/mukautetun-cmb2-linkkivalitsinohjaimen-luominen-wordpressille\/","title":{"rendered":"Mukautetun CMB2-linkkivalitsinohjaimen luominen WordPressille"},"content":{"rendered":"\n

T\u00e4ss\u00e4 opetusohjelmassa tarkastelen, kuinka voit luoda mukautetun ohjausobjektin laajentaaksesi WebDevStudiosin CMB2<\/a> :n (Custom Meta Boxes 2) toimintoja<\/a>.<\/p>\n

Kehit\u00e4n verkkosivustoja (ja verkkosovelluksia) WordPress<\/a> CMS:ll\u00e4 (Content Management System), ja kun uusi projekti saapuu, voit taata, ett\u00e4 minun on kehitett\u00e4v\u00e4 "mukautettuja metalaatikoita", jotta k\u00e4ytt\u00e4j\u00e4 voi hallita tarkasti. sivuston sis\u00e4ll\u00f6st\u00e4 ja asettelusta.<\/p>\n

Kerron yksityiskohtaisesti, kuinka rakensin CMB2-ohjauslinkkivalitsimen CMB2:lle<\/a> (saatavilla kaikista hyvist\u00e4 WordPress-laajennusten arkistoista). Kuvakaappaus josta on n\u00e4ht\u00e4viss\u00e4 alla.<\/p>\n

"Link Picker" CMB2-ohjain toiminnassa<\/p>\n

Linkinvalitsin k\u00e4ynnist\u00e4\u00e4 sis\u00e4\u00e4nrakennetun WordPressin "Lis\u00e4\u00e4\/muokkaa linkki\u00e4" -valintaikkunan, kun napsautat Valitse-painiketta. T\u00e4m\u00e4 n\u00e4kyy alla olevassa kuvakaappauksessa:<\/p>\n

\"MukautetunPainamalla painiketta voit valita linkist\u00e4 (tai lis\u00e4t\u00e4 omasi)<\/p>\n

Olen varma, ett\u00e4 olet samaa mielt\u00e4 siit\u00e4, ett\u00e4 t\u00e4llainen hallinta on uskomattoman k\u00e4tev\u00e4\u00e4, jos haluat antaa sivustosi toimittajille mahdollisuuden lis\u00e4t\u00e4 linkin ja my\u00f6s etsi\u00e4 WordPressist\u00e4 sen sis\u00e4isi\u00e4 linkkej\u00e4 sen sijaan, ett\u00e4 heid\u00e4n pit\u00e4isi leikata ja liitt\u00e4\u00e4 linkit linkkiin. ala.<\/p>\n

Johdanto \/ Historia<\/h2>\n

Niille, jotka eiv\u00e4t tied\u00e4, metaruutu on WordPress-viestin muokkausn\u00e4yt\u00f6ss\u00e4, ja se sis\u00e4lt\u00e4\u00e4 todenn\u00e4k\u00f6isesti erilaisia \u200b\u200blomakeohjausobjekteja (tekstilaatikoita, avattavia luetteloita, valintaruutuja jne.). N\u00e4iden s\u00e4\u00e4timien avulla verkkosivustosi k\u00e4ytt\u00e4j\u00e4t voivat helposti muuttaa mukautettua teksti\u00e4 tai toimintoja sivustolla.<\/p>\n

\"Mukautetun\"MukautetunEsimerkki metalaatikosta, jossa on erilaisia \u200b\u200blomakeohjausobjekteja<\/p>\n

WordPressin avulla voit luoda metalaatikoita funktioiden (kuten [add_meta_box](https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/)<\/code>) avulla, mutta metalaatikoiden luominen t\u00e4ll\u00e4 tavalla voi olla pitk\u00e4 prosessi ja sis\u00e4lt\u00e4\u00e4 paljon koodin toistoa (varsinkin jos haluat k\u00e4ytt\u00e4\u00e4 samoja lomakeohjausobjekteja useissa projekteissa).<\/p>\n

Miksi CMB2?<\/h2>\n

Jotkut teist\u00e4 ovat ehk\u00e4 kuulleet Advanced Custom Fieldsist\u00e4<\/a> (ACF), joka tarjoaa graafisen k\u00e4ytt\u00f6liittym\u00e4n (Graphical User Interface), jonka avulla voit luoda metalaatikoita suoraan WordPressill\u00e4.<\/p>\n

ACF ei mielest\u00e4ni ole loistava ty\u00f6kalu<\/strong> millek\u00e4\u00e4n skaalautuvalle verkkoratkaisulle. Laajennus on liian riippuvainen tietokantaan tallennetuista tiedoista. T\u00e4m\u00e4 aiheuttaa kipua, kun muutoksia otetaan k\u00e4ytt\u00f6\u00f6n sivustossa, koska et voi vain nostaa koodiasi ja n\u00e4hd\u00e4 muutokset v\u00e4litt\u00f6m\u00e4sti. Sen sijaan sinun on suoritettava ty\u00f6 uudelleen eri k\u00e4ytt\u00f6\u00f6nottoymp\u00e4rist\u00f6iss\u00e4 (vaiheistus, live jne.). Joten tarvitsimme ratkaisun, jonka avulla voimme luoda metalaatikoita ohjelmallisesti. Sy\u00f6t\u00e4 CMB2.<\/p>\n

Ennen kuin otimme k\u00e4ytt\u00f6\u00f6n CMB2:n, k\u00e4ytimme aiemmin HM Custom Meta Boxeja<\/a> niilt\u00e4 ihanilta ihmisilt\u00e4 Human<\/a> Madessa (joka alkoi WebDevStudion edelt\u00e4j\u00e4n\u00e4 CMB2:lle,).<\/p>\n

Rakastimme HM Custom Meta Boxeja, ja yksinkertaisimpien koodinp\u00e4tkien avulla pystyimme nopeasti luomaan mukautettuja metalaatikoita melkein mihin tahansa!<\/p>\n

\"MukautetunHM Custom Meta Box -merkint\u00e4esimerkki (t\u00e4m\u00e4 on Instagram-metalaatikon merkint\u00e4 ensimm\u00e4isess\u00e4 kuvakaappauksessa)<\/p>\n

Miksi sitten siirryt\u00e4\u00e4n CMB2:een? No, HM Custom Meta Boxes ei valitettavasti saanut paljon rakkautta (puhuin sen p\u00e4\u00e4kehitt\u00e4j\u00e4lle ja h\u00e4n on eritt\u00e4in kiireinen mies), kun taas CMB2 eteni uusilla ominaisuuksilla, uusilla ohjaimilla ja se oli saanut vetoa. WordPress-yhteis\u00f6ss\u00e4, jossa monet ihmiset ottavat sen k\u00e4ytt\u00f6\u00f6n ja julkaisevat laajennuksia sen laajentamiseksi (mukaan lukien useat kumppanitoimistomme).<\/p>\n

Lopuksi, kuten olet ehk\u00e4 havainnut, ty\u00f6skentely CMB2:n kanssa on yht\u00e4 uskomattoman yksinkertaista kuin olimme tottuneet, sill\u00e4 molemmilla alustoilla on yhteinen esi-is\u00e4.<\/p>\n

Opastus<\/h2>\n

Ennen kuin aloitamme, jokaisella on omat ihanteensa WordPress-laajennuksen luomiseen, ja olen kokeillut muutamia, mutta Tom J Nowellin WordPressin<\/a> juurikokoonpanon opetusohjelma muutti t\u00e4ysin tapani ty\u00f6skennell\u00e4. Mielest\u00e4ni sen l\u00e4hestymistapa on puhdas, yksinkertainen, ja se tekee mink\u00e4 tahansa laajennuksen tulevasta yll\u00e4pidosta helppoa. Jos nappaat Link Picker for CMB2 -laajennuksen l\u00e4hteen<\/a>, n\u00e4et h\u00e4nen opettamansa menetelm\u00e4t k\u00e4yt\u00e4nn\u00f6ss\u00e4.<\/p>\n

Lomakkeen rakentaminen<\/h3>\n

Luodaksemme linkkivalitsimen hahmontavan lomakkeen, meid\u00e4n on ensin kytkeydytt\u00e4v\u00e4 cmb2_render_[control_name]<\/code>toimintaan. Kuten olen kutsunut t\u00e4t\u00e4 ohjausobjektia "link_picker", voimme t\u00e4ydent\u00e4\u00e4 koukun seuraavasti:<\/p>\n

<?php\nadd_action( 'cmb2_render_link_picker', array( $this, 'cmb2_render_link_picker' ), 10, 5 );\n`\n<\/code><\/pre>\n
Niille teist\u00e4, jotka eiv\u00e4t oikein ymm\u00e4rr\u00e4 add_action<\/code>koukkua, se toimii seuraavasti:<\/p>\n
    \n
  1. Ensimm\u00e4inen argumentti cmb2_render_link_picker<\/code>on sen koukun nimi, johon haluamme liitty\u00e4.<\/li>\n
  2. Toinen argumentti array( $this, 'cmb2_render_link_picker' )<\/code>on funktio, jota haluamme kutsua, kun t\u00e4m\u00e4 koukku suoritetaan. Huomaa, ett\u00e4 k\u00e4\u00e4nn\u00e4n t\u00e4m\u00e4n taulukkoon $this<\/code>ensimm\u00e4isen\u00e4 parametrina, koska kutsun funktiota luokan sis\u00e4ll\u00e4. Jos et ty\u00f6skentele luokkien kanssa, voit k\u00e4ytt\u00e4\u00e4 vain funktion nime\u00e4 cmb2_render_link_picker<\/code>.
    \n3., 10<\/code>on j\u00e4rjestys, jossa haluamme funktion k\u00e4ynnistyv\u00e4n (mit\u00e4 pienempi numero, sit\u00e4 nopeammin se k\u00e4ynnistyy, kun toimintoa kutsutaan).<\/li>\n
  3. T\u00e4m\u00e4 5<\/code>on parametrien m\u00e4\u00e4r\u00e4, joka v\u00e4litet\u00e4\u00e4n kutsumaani funktioon (t\u00e4m\u00e4 selvi\u00e4\u00e4 pian).<\/li>\n<\/ol>\n
    Seuraavaksi luomme funktion, joka hahmontaa lomakkeen:<\/p>\n
    <?php\n\npublic function cmb2_render_link_picker( $field, $value, $object_id, $object_type, $field_type_object) {\n\u2026\n}\n`\n<\/code><\/pre>\n
    Olen j\u00e4tt\u00e4nyt "DocBlockin" yll\u00e4 olevaan koodiin, joka kuvaa, mit\u00e4 kukin funktioon siirretty parametri cmb2_render_link_picker()<\/code>tekee.<\/p>\n
    Huomaa, ett\u00e4 funktioni alkaa public<\/code>ilmoituksella. T\u00e4m\u00e4 taas johtuu siit\u00e4, ett\u00e4 ty\u00f6skentelen luokassa. Jos et ty\u00f6skentele luokkien kanssa, voit j\u00e4tt\u00e4\u00e4 t\u00e4m\u00e4n pois.<\/p>\n
    T\u00e4m\u00e4n kent\u00e4n arvo v\u00e4litet\u00e4\u00e4n funktioon $value<\/code>parametrin kautta. T\u00e4m\u00e4n kent\u00e4n tapauksessa kuljemme taulukon l\u00e4pi, koska ohjausobjektissamme on kolme erillist\u00e4 elementti\u00e4:<\/p>\n