{"id":233983,"date":"2023-02-27T16:23:00","date_gmt":"2023-02-27T13:23:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233983"},"modified":"2022-11-11T13:33:33","modified_gmt":"2022-11-11T10:33:33","slug":"kodowanie-zaawansowanych-pol-niestandardowych-wprowadzenie","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/kodowanie-zaawansowanych-pol-niestandardowych-wprowadzenie\/","title":{"rendered":"Kodowanie zaawansowanych p\u00f3l niestandardowych: wprowadzenie"},"content":{"rendered":"\n<p><a href=\"https:\/\/www.advancedcustomfields.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Advanced Custom Fields<\/a> (ACF) to wtyczka WordPress, kt\u00f3ra jest doskona\u0142ym narz\u0119dziem do konfigurowania niestandardowej meta postu. Umo\u017cliwia \u0142atwe tworzenie i konfigurowanie z\u0142o\u017conych i przyjaznych dla u\u017cytkownika metabox\u00f3w z wszelkiego rodzaju polami i ustawieniami dla typ\u00f3w post\u00f3w, taksonomii, ekran\u00f3w u\u017cytkownika i stron opcji. I jest bardzo przyjazny dla programist\u00f3w.<\/p>\n<p>Teraz mo\u017cesz r\u0119cznie skonfigurowa\u0107 w\u0142asne meta pola lub ustawienia, ale w przypadku bardziej z\u0142o\u017conych ustawie\u0144 wymaga to sporo kodowania, w tym stylizacji, JavaScriptu, walidacji i zapisywania obs\u0142ugi. Wyobra\u017a sobie na przyk\u0142ad r\u0119czne pisanie repeatera z grup\u0105 ustawie\u0144, wielokrotny wyb\u00f3r post\u00f3w przez okre\u015blone zapytanie. Lub obs\u0142uga ustawie\u0144 wy\u015bwietlania, kt\u00f3re zale\u017c\u0105 od pewnych zmiennych, takich jak przypisany termin lub szablon strony (co wymaga JavaScript). Zaawansowane pola niestandardowe obs\u0142uguj\u0105 to wszystko i robi\u0105 to pi\u0119knie.<\/p>\n<p>Pami\u0119taj, \u017ce zaawansowane pola niestandardowe w rzeczywisto\u015bci nie b\u0119d\u0105 wy\u015bwietla\u0107 \u017cadnych niestandardowych meta w szablonach. Wydawanie lub robienie czego\u015b w oparciu o pola i ustawienia skonfigurowane za pomoc\u0105 ACF nale\u017cy do Ciebie jako programisty. Ale mo\u017cna to \u0142atwo zrobi\u0107 przy u\u017cyciu dowolnej metody ACF. Mi\u0142o jest r\u00f3wnie\u017c wiedzie\u0107, \u017ce ACF wykorzystuje podstawow\u0105 meta funkcjonalno\u015b\u0107 WordPress (post, termin, u\u017cytkownik). Oznacza to, \u017ce faktycznie zapisuje np. ustawienia post\u00f3w jako meta postu \u2013 co mo\u017cna uzyska\u0107 za pomoc\u0105 podstawowych funkcji, takich jak <code>get_post_meta()<\/code>.<\/p>\n<p>Zaawansowane pola niestandardowe s\u0105 dost\u0119pne w <a href=\"https:\/\/wordpress.org\/plugins\/advanced-custom-fields\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wersji bezp\u0142atnej<\/a> i <a href=\"https:\/\/www.advancedcustomfields.com\/pro\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">p\u0142atnej wersji Pro<\/a>. Darmowa wersja jest wi\u0119cej ni\u017c wystarczaj\u0105ca w wi\u0119kszo\u015bci przypadk\u00f3w, ale w wersji Pro masz dodatkowe funkcje, takie jak pole repeatera, pole galerii, bloki Gutenberga (patrz p\u00f3\u017aniej) oraz mo\u017cliwo\u015b\u0107 u\u017cycia ACF do skonfigurowania w\u0142asnego niestandardowego administratora strony opcji. ACF jest r\u00f3wnie\u017c tak popularny, \u017ce mo\u017cna \u0142atwo znale\u017a\u0107 wysokiej jako\u015bci <a href=\"https:\/\/www.awesomeacf.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">rozszerzenia<\/a> do wszystkiego, czego nie obejmuje rdze\u0144 ACF.<\/p>\n<h2>Zaawansowane pola niestandardowe: cz\u0119\u015b\u0107 administracyjna<\/h2>\n<p>Po zainstalowaniu wtyczki Advanced Custom Fields otrzymasz nowe menu administratora dla &quot;Pola niestandardowe&quot;. Tutaj mo\u017cesz skonfigurowa\u0107 i skonfigurowa\u0107 swoje &quot;meta pola&quot; lub grupy ustawie\u0144.<\/p>\n<p>W ramach grupy mo\u017cesz skonfigurowa\u0107 dowoln\u0105 liczb\u0119 p\u00f3l r\u00f3\u017cnych typ\u00f3w. Najcz\u0119stsze z nich to wprowadzanie tekstu, obszar tekstowy, edytor tekstu sformatowanego, plik, obraz, prawda\/fa\u0142sz (prze\u0142\u0105cznik), pola wyboru, przyciski radiowe i pole wyboru. Inne popularne to wiele sposob\u00f3w wyboru post\u00f3w, wybieranie taksonomii, wybieranie u\u017cytkownik\u00f3w, selektor dat, selektor kolor\u00f3w, Mapy Google i wiele, wiele innych. W zale\u017cno\u015bci od wybranego typu pola otrzymujesz szereg dodatkowych opcji dostosowywania pola. Mo\u017cesz r\u00f3wnie\u017c doda\u0107 logik\u0119 warunkow\u0105 do dowolnego pola. Logika warunkowa s\u0142u\u017cy do ukrywania lub wy\u015bwietlania p\u00f3l w zale\u017cno\u015bci od innych opcji w grupie.<\/p>\n<p>Dla ka\u017cdej grupy ustawie\u0144 mo\u017cesz okre\u015bli\u0107, w jakich przypadkach te ustawienia maj\u0105 si\u0119 pojawia\u0107. Przyk\u0142adami s\u0105 edytowanie post\u00f3w, termin taksonomii lub edytowanie u\u017cytkownika. Mo\u017cesz dodatkowo dostosowa\u0107 widoczno\u015b\u0107 swoich ustawie\u0144, na przyk\u0142ad typu postu. Lub je\u015bli wpis ma przypisany okre\u015blony termin lub szablon strony, je\u015bli wpis jest autorstwa okre\u015blonego autora, je\u015bli rola u\u017cytkownika jest taka lub taka, rola aktualnie zalogowanego u\u017cytkownika lub je\u015bli strona jest stron\u0105 nadrz\u0119dn\u0105 albo nie. Mo\u017cesz tak\u017ce dostosowa\u0107 miejsce, w kt\u00f3rym powinno pojawi\u0107 si\u0119 pole meta. Jednak ta funkcjonalno\u015b\u0107 jest teraz nieco ograniczona dzi\u0119ki nowemu edytorowi Gutenberga.<\/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=\"Kodowanie zaawansowanych p\u00f3l niestandardowych: wprowadzenie\" ><\/a><\/p>\n<p>Zak\u0142adanie grupy<\/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=\"Kodowanie zaawansowanych p\u00f3l niestandardowych: wprowadzenie\" ><\/a><\/p>\n<p>Ustawienia dla jednego pola<\/p>\n<h2>Zaawansowane pola niestandardowe: cz\u0119\u015b\u0107 kodu<\/h2>\n<p>Przyjrzyjmy si\u0119 bardziej interesuj\u0105cej cz\u0119\u015bci: jak wykorzysta\u0107 zaawansowane pola niestandardowe wed\u0142ug kodu. Jak wspomniano wcze\u015bniej, ACF jest bardzo przyjazny dla programist\u00f3w i oferuje szeroki zakres mo\u017cliwo\u015bci dostosowywania.<\/p>\n<p>Uzyskiwanie warto\u015bci i umieszczanie ich w szablonach jest \u0142atwe dzi\u0119ki metodom ACF. Na przyk\u0142ad <code>the_field('your_meta_key')<\/code>do bezpo\u015bredniego wywo\u0142ywania go lub <code>get_field('your_meta_key')<\/code>przechowywania go w zmiennej PHP. Podaj identyfikator posta jako drugi argument, je\u015bli chcesz pobra\u0107 dane poza p\u0119tl\u0119. Bu\u0142ka z mas\u0142em. Mo\u017cesz u\u017cy\u0107 <code>get_post_meta()<\/code>, ale zaleca si\u0119 korzystanie z metod ACF \u2013 poniewa\u017c ACF mo\u017ce przekszta\u0142ci\u0107 warto\u015b\u0107 w co\u015b bardziej znacz\u0105cego przed zwr\u00f3ceniem jej do Ciebie.<\/p>\n<p>Kolejn\u0105 rzecz\u0105, o kt\u00f3rej powiniene\u015b wiedzie\u0107, jest narz\u0119dzie eksportu w ACF. Utworzone grupy mo\u017cna eksportowa\u0107 do dw\u00f3ch format\u00f3w; albo plik JSON do pobrania, albo czysty kod PHP. Plik JSON jest przydatny, je\u015bli chcesz wyeksportowa\u0107 ustawienia mi\u0119dzy serwerem testowym a serwerem live lub innym WordPressem. Eksportowanie w czystym PHP daje mo\u017cliwo\u015b\u0107 bezpo\u015bredniego wklejenia go do motywu lub wtyczki plik\u00f3w PHP.<\/p>\n<p>Jak mo\u017cna z tego wywnioskowa\u0107; mo\u017cesz u\u017cy\u0107 kodu PHP, pisz\u0105c go r\u0119cznie lub eksportuj\u0105c go po skonfigurowaniu w admin, aby doda\u0107 swoje grupy i pola. Pozwala to na wi\u0119ksz\u0105 kontrol\u0119 i sposoby generowania niestandardowych wybor\u00f3w.<\/p>\n<p>Ale czekaj, jest wi\u0119cej! ACF oferuje r\u00f3wnie\u017c szeroki zakres dzia\u0142a\u0144 i filtr\u00f3w do dalszego dostosowywania p\u00f3l lub ich warto\u015bci. Istniej\u0105 zaczepy do zapisywania lub renderowania pola, a tak\u017ce zaczepy do rejestrowania grup wed\u0142ug kodu (wspomniane powy\u017cej) oraz filtry do dostosowywania warto\u015bci, ustawie\u0144 lub wybor\u00f3w pola przed zapisaniem lub przed renderowaniem. Mo\u017cesz dodatkowo okre\u015bli\u0107, czy filtr powinien wp\u0142ywa\u0107 na wszystkie pola, pola wed\u0142ug okre\u015blonego typu, czy pola wed\u0142ug okre\u015blonego metaklucza. Wszystkie haki i filtry s\u0105 poprzedzone znakiem <code>acf\/<\/code>.<\/p>\n<p>Zajrzyj na stron\u0119 <a href=\"https:\/\/www.advancedcustomfields.com\/resources\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dokumentacji ACF<\/a> ; kliknij \u201eFunkcje&quot;, \u201eDzia\u0142ania&#8221; lub \u201eFiltry&#8221;, aby zobaczy\u0107 przegl\u0105d. Na tej stronie znajdziesz r\u00f3wnie\u017c \u015bwietne samouczki i przewodniki.<\/p>\n<h2>Uwaga na temat zaawansowanych p\u00f3l niestandardowych i Gutenberga<\/h2>\n<p>Tworzenie niestandardowych blok\u00f3w Gutenberga jest w tej chwili do\u015b\u0107 trudne. Dokumentacja nie jest na miejscu, zmiany w niej pojawiaj\u0105 si\u0119 cz\u0119sto, a kodowanie wymaga sporej wiedzy na temat Javascript. Najlepiej, je\u015bli potrzebujesz znajomo\u015bci Reacta i tego, jak skonfigurowa\u0107 kompilator z JSX\/ES6 z webpackiem i Babel.<\/p>\n<p>Jednak w <a href=\"https:\/\/www.advancedcustomfields.com\/blog\/acf-5-8-introducing-acf-blocks-for-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wersji 5.8 ACF Pro wprowadzi\u0142<\/a> funkcj\u0119 konfiguracji grupy p\u00f3l jako bloku Gutenberga &#8211; umo\u017cliwiaj\u0105c dodawanie niestandardowych blok\u00f3w wy\u0142\u0105cznie z kodem ACF i PHP. Nie jest wymagana znajomo\u015b\u0107 Javascriptu!<\/p>\n<p>Wszystko, co musisz zrobi\u0107, to skonfigurowa\u0107 grupy w admin lub kodem jak zwykle. Ale potem zdefiniuj ich lokalizacj\u0119 jako blok Gutenberga. Pozostaje tylko doda\u0107 troch\u0119 kodu PHP, aby zarejestrowa\u0107 je jako niestandardowy blok Gutenberga <code>acf_register_block()<\/code>. Do tej funkcji definiujesz wywo\u0142anie zwrotne do funkcji PHP lub pliku szablonu, kt\u00f3ry jest odpowiedzialny za renderowanie wyj\u015bcia bloku. Piszesz t\u0119 funkcj\u0119 lub cz\u0119\u015b\u0107 szablonu w ca\u0142o\u015bci w PHP i u\u017cywasz znanych metod, takich jak <code>get_field()<\/code>pobieranie warto\u015bci ustawie\u0144.<\/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=\"Kodowanie zaawansowanych p\u00f3l niestandardowych: wprowadzenie\" ><\/a><\/p>\n<p>Jak wygl\u0105da blok ACF w edytorze Gutenberg<\/p>\n<p>B\u0105d\u017a na bie\u017c\u0105co w kategorii <a href=\"https:\/\/awhitepixel.com\/blog\/category\/advanced-custom-fields\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Zaawansowane pola niestandardowe<\/a>, aby uzyska\u0107 samouczki dotycz\u0105ce korzystania z tej wtyczki!<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ten przewodnik dla pocz\u0105tkuj\u0105cych dotyczy wtyczki WordPress Advanced Custom Fields (ACF) i sposobu, w jaki mo\u017cesz j\u0105 wykorzysta\u0107 jako programista.<\/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":[897,721,721,919,897,919,1110,815,845,845,866,866,815],"tags":[1169],"class_list":["post-233983","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kod","category-deweloper","category-inny","category-n-a","category-wtyczki","category-samouczki","category-wordpress-7","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233983","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=233983"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233983\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/224889"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=233983"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=233983"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=233983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}