{"id":234005,"date":"2023-02-27T16:12:00","date_gmt":"2023-02-27T13:12:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234005"},"modified":"2022-11-11T13:46:50","modified_gmt":"2022-11-11T10:46:50","slug":"mukautettujen-edistyneiden-kenttien-koodaus-johdanto","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/mukautettujen-edistyneiden-kenttien-koodaus-johdanto\/","title":{"rendered":"Mukautettujen edistyneiden kenttien koodaus: Johdanto"},"content":{"rendered":"\n<p><a href=\"https:\/\/www.advancedcustomfields.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Advanced Custom Fields<\/a> (ACF) on WordPress-laajennus, joka on loistava ty\u00f6kalu mukautetun post metan m\u00e4\u00e4ritt\u00e4miseen. Sen avulla voit helposti rakentaa ja konfiguroida monimutkaisia \u200b\u200bja k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llisi\u00e4 metalaatikoita, joissa on kaikenlaisia \u200b\u200bkentti\u00e4 ja asetuksia viestityypeille, taksonomialle, k\u00e4ytt\u00e4j\u00e4n\u00e4yt\u00f6ille ja asetussivuille. Ja se on eritt\u00e4in kehitt\u00e4j\u00e4yst\u00e4v\u00e4llinen.<\/p>\n<p>Nyt voit m\u00e4\u00e4ritt\u00e4\u00e4 omat metalaatikot tai asetukset manuaalisesti, mutta monimutkaisempia asetuksia varten sinun on koodattava melko v\u00e4h\u00e4n, mukaan lukien tyyli, Javascript, validointi ja tallennuksen k\u00e4sittely. Kuvittele esimerkiksi kirjoittavan manuaalisesti toistimen asetusryhm\u00e4ll\u00e4, usean viestien valinnalla tietyll\u00e4 kyselyll\u00e4. Tai sellaisten asetusten n\u00e4ytt\u00e4minen, jotka riippuvat tietyist\u00e4 muuttujista, kuten m\u00e4\u00e4ritetyst\u00e4 termist\u00e4 tai sivumallista (mik\u00e4 vaatii Javascriptin). Advanced Custom Fields k\u00e4sittelee kaiken t\u00e4m\u00e4n, ja se tekee sen kauniisti.<\/p>\n<p>Muista, ett\u00e4 Advanced Custom Fields ei itse asiassa tulosta mit\u00e4\u00e4n mukautettua metatietoa malleissasi. Kehitt\u00e4j\u00e4n teht\u00e4v\u00e4n\u00e4 on tuottaa tai tehd\u00e4 jotain ACF:ll\u00e4 m\u00e4\u00e4ritettyjen kenttien ja asetusten perusteella. Mutta t\u00e4m\u00e4 on helppo tehd\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4 mit\u00e4 tahansa ACF:n menetelmi\u00e4. On my\u00f6s mukava tiet\u00e4\u00e4, ett\u00e4 ACF hy\u00f6dynt\u00e4\u00e4 WordPress-ytimen (viesti, termi, k\u00e4ytt\u00e4j\u00e4) metatoimintoja. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 se itse asiassa tallentaa esim. viestien asetukset post-meta-muodossa \u2013 johon voit saada k\u00e4siins\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4 ydintoimintoja, kuten <code>get_post_meta()<\/code>.<\/p>\n<p>Advanced Custom Fields -kentist\u00e4 on saatavana <a href=\"https:\/\/wordpress.org\/plugins\/advanced-custom-fields\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ilmainen versio<\/a> ja <a href=\"https:\/\/www.advancedcustomfields.com\/pro\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Pro-maksullinen versio<\/a>. Ilmainen versio on enemm\u00e4n kuin tarpeeksi useimpiin tapauksiin, mutta Pro-versiossa saat lis\u00e4ominaisuuksia, kuten toistinkent\u00e4n, galleriakent\u00e4n, Gutenberg-lohkot (katso my\u00f6hemmin) ja mahdollisuuden k\u00e4ytt\u00e4\u00e4 ACF:\u00e4\u00e4 oman mukautetun j\u00e4rjestelm\u00e4nvalvojan m\u00e4\u00e4ritt\u00e4miseen. vaihtoehtosivut. ACF on my\u00f6s niin suosittu, ett\u00e4 voit helposti l\u00f6yt\u00e4\u00e4 korkealaatuisia <a href=\"https:\/\/www.awesomeacf.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">laajennuksia<\/a> kaikkeen, mit\u00e4 ydin-ACF ei peit\u00e4.<\/p>\n<h2>Advanced Custom Fields: J\u00e4rjestelm\u00e4nvalvojan osa<\/h2>\n<p>Kun asennat Advanced Custom Fields -laajennuksen, saat uuden j\u00e4rjestelm\u00e4nvalvojavalikon &quot;Muokatut kent\u00e4t&quot; varten. T\u00e4ss\u00e4 voit m\u00e4\u00e4ritt\u00e4\u00e4 ja m\u00e4\u00e4ritt\u00e4\u00e4 &quot;metalaatikot&quot; tai asetusryhm\u00e4t.<\/p>\n<p>Ryhm\u00e4n sis\u00e4ll\u00e4 voit m\u00e4\u00e4ritt\u00e4\u00e4 niin monta kentt\u00e4\u00e4 kuin haluat erityyppisi\u00e4. Yleisimm\u00e4t ovat tekstinsy\u00f6tt\u00f6, tekstialue, richtext-editori, tiedosto, kuva, tosi\/ep\u00e4tosi (vaihtokytkin), valintaruudut, valintanapit ja valintaruutu. Muita yleisi\u00e4 tapoja valita postaukset, taksonomian, k\u00e4ytt\u00e4jien valitseminen, p\u00e4iv\u00e4m\u00e4\u00e4r\u00e4valitsin, v\u00e4rinvalitsin, Google Maps ja monet, monet muut. Valitsemastasi kentt\u00e4tyypist\u00e4 riippuen saat useita lis\u00e4vaihtoehtoja kent\u00e4n mukauttamiseen. Voit my\u00f6s lis\u00e4t\u00e4 ehdollista logiikkaa mihin tahansa kentt\u00e4\u00e4n. Ehdollinen logiikka on tarkoitettu kenttien piilottamiseen tai n\u00e4ytt\u00e4miseen ryhm\u00e4n muista vaihtoehdoista riippuen.<\/p>\n<p>Jokaiselle asetusryhm\u00e4lle voit m\u00e4\u00e4ritt\u00e4\u00e4, miss\u00e4 tapauksissa n\u00e4iden asetusten tulee n\u00e4ky\u00e4. Esimerkkej\u00e4 ovat viestien muokkaaminen, taksonomiatermi tai k\u00e4ytt\u00e4j\u00e4n muokkaaminen. Voit muokata asetustesi n\u00e4kyvyytt\u00e4 lis\u00e4\u00e4 esimerkiksi viestityypin mukaan. Tai jos julkaisulle on m\u00e4\u00e4ritetty tietty termi tai sivumalli, jos viesti on tietylt\u00e4 kirjoittajalta, jos k\u00e4ytt\u00e4j\u00e4rooli on sellainen, nykyisen kirjautuneen k\u00e4ytt\u00e4j\u00e4n rooli tai jos sivu on yl\u00e4sivu tai ei. Voit my\u00f6s muokata sit\u00e4, miss\u00e4 metaruudun pit\u00e4isi n\u00e4ky\u00e4. T\u00e4m\u00e4 toiminto on kuitenkin hieman heikentynyt nyt uuden Gutenberg-editorin my\u00f6t\u00e4.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4a07952.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4a07952.png\" alt=\"Mukautettujen edistyneiden kenttien koodaus: Johdanto\" ><\/a><\/p>\n<p>Ryhm\u00e4n perustaminen<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4c9fa22.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4c9fa22.png\" alt=\"Mukautettujen edistyneiden kenttien koodaus: Johdanto\" ><\/a><\/p>\n<p>Yhden kent\u00e4n asetukset<\/p>\n<h2>Advanced Custom Fields: Koodiosa<\/h2>\n<p>Katsotaanpa mielenkiintoisempaa osaa: kuinka voit hy\u00f6dynt\u00e4\u00e4 Advanced Custom Fields -kentti\u00e4 koodin mukaan. Kuten aiemmin mainittiin, ACF on eritt\u00e4in kehitt\u00e4j\u00e4yst\u00e4v\u00e4llinen ja tarjoaa laajan valikoiman mukautettavuutta.<\/p>\n<p>Arvojen saaminen ja niiden tulostaminen malleihin onnistuu helposti ACF:n menetelmill\u00e4. Esimerkiksi <code>the_field('your_meta_key')<\/code>sen suoraan kaikumiseen tai <code>get_field('your_meta_key')<\/code>sen tallentamiseen PHP-muuttujaan. Anna viestitunnus toiseksi argumentiksi, jos haluat hakea tietoja silmukan ulkopuolelta. Helppo nakki. Voit k\u00e4ytt\u00e4\u00e4 <code>get_post_meta()<\/code>, mutta on suositeltavaa k\u00e4ytt\u00e4\u00e4 ACF:n menetelmi\u00e4, koska ACF voi muuttaa arvon joksikin merkityksellisemm\u00e4ksi ennen kuin palauttaa sen sinulle.<\/p>\n<p>Toinen asia, joka sinun tulee olla tietoinen, on ACF:n vientity\u00f6kalu. Voit vied\u00e4 luodut ryhm\u00e4t kahteen muotoon; joko ladattava JSON-tiedosto tai puhdas PHP-koodi. JSON-tiedosto on hy\u00f6dyllinen, jos haluat vied\u00e4 asetukset testi- ja live-palvelimien tai muun WordPressin v\u00e4lill\u00e4. Vienti puhtaalla PHP:ll\u00e4 antaa sinulle mahdollisuuden liitt\u00e4\u00e4 se suoraan teema- tai lis\u00e4osa PHP-tiedostoosi.<\/p>\n<p>Kuten t\u00e4st\u00e4 voi p\u00e4\u00e4tell\u00e4; Voit lis\u00e4t\u00e4 ryhmi\u00e4si ja kentti\u00e4si PHP-koodin avulla joko kirjoittamalla sen manuaalisesti tai viem\u00e4ll\u00e4 sen sen j\u00e4lkeen, kun olet asettanut ne adminissa. T\u00e4m\u00e4 mahdollistaa enemm\u00e4n hallintaa ja tapoja luoda mukautettuja valintoja.<\/p>\n<p>Mutta odota, siell\u00e4 on enemm\u00e4n! ACF tarjoaa my\u00f6s laajan valikoiman toimintoja ja suodattimia kenttien tai niiden arvojen mukauttamiseen edelleen. Siell\u00e4 on koukkuja kent\u00e4n tallentamiseen tai render\u00f6imiseen sek\u00e4 koukkuja ryhmien rekister\u00f6intiin koodin mukaan (mainittu yll\u00e4) ja suodattimia kent\u00e4n arvojen, asetusten tai valintojen mukauttamiseen ennen tallennusta tai ennen render\u00f6imist\u00e4. Voit lis\u00e4ksi m\u00e4\u00e4ritt\u00e4\u00e4, vaikuttaako suodatin kaikkiin kenttiin, tietyn tyypin kenttiin vai tietyn metaavaimen kenttiin. Kaikkien koukkujen ja suodattimien etuliitteen\u00e4 on <code>acf\/<\/code>.<\/p>\n<p>Katso <a href=\"https:\/\/www.advancedcustomfields.com\/resources\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ACF:n dokumentaatiosivu<\/a> ; Napsauta &quot;Toiminnot&quot;, &quot;Toiminnot&quot; tai &quot;Suodattimet&quot; saadaksesi yleiskatsauksen. T\u00e4lt\u00e4 sivustolta l\u00f6yd\u00e4t my\u00f6s upeita opetusohjelmia ja oppaita.<\/p>\n<h2>Huomautus Advanced Custom Fields -kentist\u00e4 ja Gutenbergist\u00e4<\/h2>\n<p>Mukautettujen Gutenberg-lohkojen luominen on t\u00e4ll\u00e4 hetkell\u00e4 melko pelottavaa. Dokumentaatio ei ole aivan paikallaan, siihen tulee usein muutoksia ja sen koodaaminen vaatii melkoisesti Javascript-osaamista. Tarvitset mielell\u00e4\u00e4n tietoa Reactista ja JSX\/ES6-k\u00e4\u00e4nt\u00e4j\u00e4n asentamisesta webpackilla ja Babelilla.<\/p>\n<p>Kuitenkin <a href=\"https:\/\/www.advancedcustomfields.com\/blog\/acf-5-8-introducing-acf-blocks-for-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">versiossa 5.8 ACF Pro esitteli<\/a> ominaisuuden kentt\u00e4ryhm\u00e4n m\u00e4\u00e4ritt\u00e4miseksi Gutenberg-lohkoksi \u2013 jolloin voit lis\u00e4t\u00e4 mukautettuja lohkoja puhtaasti ACF- ja PHP-koodilla. Javascriptin tuntemusta ei tarvita!<\/p>\n<p>Sinun tarvitsee vain m\u00e4\u00e4ritt\u00e4\u00e4 ryhm\u00e4t adminissa tai koodilla tavalliseen tapaan. Mutta sitten m\u00e4\u00e4ritell\u00e4\u00e4n niiden sijainti Gutenbergin kortteliksi. J\u00e4ljelle j\u00e4\u00e4 vain PHP-koodin lis\u00e4\u00e4minen niiden rekister\u00f6imiseksi mukautetuksi Gutenberg-lohkoksi <code>acf_register_block()<\/code>. T\u00e4lle funktiolle m\u00e4\u00e4rit\u00e4t takaisinkutsun PHP-funktiolle tai mallitiedostolle, joka vastaa lohkotulosteen render\u00f6imisest\u00e4. Kirjoitat t\u00e4m\u00e4n funktion tai malliosan kokonaan PHP:ll\u00e4 ja k\u00e4yt\u00e4t tuttuja menetelmi\u00e4, kuten <code>get_field()<\/code>asetusarvojen hankkimiseen.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4fc3c57.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4fc3c57.png\" alt=\"Mukautettujen edistyneiden kenttien koodaus: Johdanto\" ><\/a><\/p>\n<p>Milt\u00e4 ACF-lohko n\u00e4ytt\u00e4\u00e4 Gutenberg-editorissa<\/p>\n<p>Pysy kuulolla <a href=\"https:\/\/awhitepixel.com\/blog\/category\/advanced-custom-fields\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Advanced Custom Fields -kategoriassa<\/a> saadaksesi opetusohjelmia t\u00e4m\u00e4n laajennuksen k\u00e4yt\u00f6st\u00e4!<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>T\u00e4ss\u00e4 aloittelijoille tarkoitetussa oppaassa tarkastellaan WordPress-laajennusta Advanced Custom Fields (ACF) ja kuinka sin\u00e4 voit kehitt\u00e4j\u00e4n\u00e4 hy\u00f6dynt\u00e4\u00e4 sit\u00e4.<\/p>\n","protected":false},"author":1,"featured_media":224889,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[895,719,719,895,813,917,917,1110,843,813,843,864,864],"tags":[1166],"class_list":["post-234005","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-koodi","category-kehittaejae","category-laajennuksia","category-muut","category-n-a","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/234005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=234005"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/234005\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/224889"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=234005"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=234005"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=234005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}