{"id":228106,"date":"2022-10-13T20:35:00","date_gmt":"2022-10-13T17:35:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228106"},"modified":"2022-11-09T00:45:02","modified_gmt":"2022-11-08T21:45:02","slug":"tworzenie-niestandardowej-kontroli-selektora-laczy-cmb2-dla-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/tworzenie-niestandardowej-kontroli-selektora-laczy-cmb2-dla-wordpress\/","title":{"rendered":"Tworzenie niestandardowej kontroli selektora \u0142\u0105czy CMB2 dla WordPress"},"content":{"rendered":"\n

W tym samouczku przyjrz\u0119 si\u0119, jak utworzy\u0107 niestandardow\u0105 kontrolk\u0119, aby rozszerzy\u0107 funkcjonalno\u015b\u0107 CMB2<\/a> (Custom Meta Boxes 2) przez WebDevStudios<\/a>.<\/p>\n

Tworz\u0119 strony internetowe (i aplikacje internetowe) za pomoc\u0105 CMS WordPress<\/a> (system zarz\u0105dzania tre\u015bci\u0105), a kiedy trafi nowy projekt, mo\u017cesz zagwarantowa\u0107, \u017ce b\u0119dzie wymaga\u0142 ode mnie opracowania \u201eNiestandardowych skrzynek meta", aby umo\u017cliwi\u0107 u\u017cytkownikowi pe\u0142n\u0105 kontrol\u0119 nad zawarto\u015bci\u0105 i uk\u0142adem witryn.<\/p>\n

Opisz\u0119 szczeg\u00f3\u0142owo, w jaki spos\u00f3b zbudowa\u0142em kontrolk\u0119 CMB2 Link Picker dla CMB2<\/a> (dost\u0119pn\u0105 we wszystkich dobrych repozytoriach wtyczek WordPress). Zrzut ekranu mo\u017cna zobaczy\u0107 poni\u017cej.<\/p>\n

Sterowanie CMB2 \u201eLink Picker” w akcji<\/p>\n

Selektor link\u00f3w uruchamia wbudowane okno dialogowe \u201eWstaw\/edytuj link” WordPress po klikni\u0119ciu przycisku \u201eWybierz”. Wida\u0107 to na poni\u017cszym zrzucie ekranu:<\/p>\n

\"TworzenieNaci\u015bni\u0119cie przycisku pozwala wybra\u0107 link (lub doda\u0107 w\u0142asny)<\/p>\n

Jestem pewien, \u017ce zgodzisz si\u0119, \u017ce taka kontrola jest niezwykle przydatna, je\u015bli chcesz da\u0107 redaktorom swojej witryny mo\u017cliwo\u015b\u0107 dodawania link\u00f3w, a tak\u017ce przeszukiwania WordPress pod k\u0105tem wewn\u0119trznych link\u00f3w, zamiast wycinania i wklejania link\u00f3w do linku pole.<\/p>\n

Wst\u0119p \/ Historia<\/h2>\n

Dla tych, kt\u00f3rzy nie wiedz\u0105, metabox znajduje si\u0119 na ekranie edytora posta WordPress i prawdopodobnie b\u0119dzie zawiera\u0142 r\u00f3\u017cne kontrolki formularzy (pola tekstowe, listy rozwijane, pola wyboru itp.). Te kontrolki umo\u017cliwiaj\u0105 u\u017cytkownikom Twojej witryny \u0142atw\u0105 zmian\u0119 niestandardowego fragmentu tekstu lub funkcji w witrynie.<\/p>\n

\"Tworzenie\"TworzeniePrzyk\u0142ad meta pola z r\u00f3\u017cnymi kontrolkami formularza<\/p>\n

WordPress pozwala tworzy\u0107 metaboxy za pomoc\u0105 funkcji (takich jak [add_meta_box](https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/)<\/code>), ale tworzenie metabox\u00f3w w ten spos\u00f3b mo\u017ce by\u0107 d\u0142ugotrwa\u0142ym procesem z du\u017c\u0105 ilo\u015bci\u0105 powt\u00f3rze\u0144 kodu (zw\u0142aszcza je\u015bli chcesz u\u017cywa\u0107 tych samych kontrolek formularza w wielu projektach).<\/p>\n

Dlaczego CMB2?<\/h2>\n

Niekt\u00f3rzy z was mogli s\u0142ysze\u0107 o zaawansowanych polach niestandardowych<\/a> (ACF), kt\u00f3re zapewniaj\u0105 GUI (graficzny interfejs u\u017cytkownika), kt\u00f3ry pozwala tworzy\u0107 meta pola bezpo\u015brednio za pomoc\u0105 WordPressa.<\/p>\n

ACF moim zdaniem nie jest \u015bwietnym narz\u0119dziem<\/strong> do skalowania jakiegokolwiek rozwi\u0105zania webowego. Wtyczka zbytnio polega na danych przechowywanych w bazie danych. Powoduje to b\u00f3l podczas wdra\u017cania zmian w witrynie, poniewa\u017c nie mo\u017cna po prostu przes\u0142a\u0107 kodu i natychmiast zobaczy\u0107 zmiany. Zamiast tego musisz ponownie wykona\u0107 prac\u0119 w r\u00f3\u017cnych \u015brodowiskach wdro\u017ceniowych (staging, live itp.). Potrzebowali\u015bmy wi\u0119c rozwi\u0105zania, kt\u00f3re pozwoli nam programowo tworzy\u0107 metaboxy. Wpisz CMB2.<\/p>\n

Zanim przyj\u0119li\u015bmy CMB2, wcze\u015bniej u\u017cywali\u015bmy HM Custom Meta Boxes<\/a> od tych uroczych ludzi z Human Made<\/a> (kt\u00f3ra zacz\u0119\u0142a si\u0119 jako rozwidlenie poprzednika WebDevStudio do CMB2, \u201eCustom Meta Boxes”).<\/p>\n

Uwielbiali\u015bmy HM Custom Meta Boxes, a dzi\u0119ki najprostszym fragmentom kodu mogli\u015bmy szybko stworzy\u0107 niestandardowe Meta Boxy, aby zrobi\u0107 prawie wszystko!<\/p>\n

\"TworzeniePrzyk\u0142ad HM Custom Meta Boxes Markup (to jest oznaczenie dla Instagram Meta Box na pierwszym zrzucie ekranu)<\/p>\n

Dlaczego wi\u0119c przej\u015bcie na CMB2? C\u00f3\u017c, HM Custom Meta Boxes niestety nie cieszy\u0142 si\u0119 zbytni\u0105 sympati\u0105 (rozmawia\u0142em z jego g\u0142\u00f3wnym deweloperem i jest on bardzo zaj\u0119tym cz\u0142owiekiem), podczas gdy CMB2 posuwa\u0142 si\u0119 naprz\u00f3d z nowymi funkcjami, nowymi kontrolkami i zyska\u0142 na popularno\u015bci w spo\u0142eczno\u015bci WordPress z wieloma osobami, kt\u00f3re j\u0105 adoptuj\u0105 i wydaj\u0105 wtyczki, aby j\u0105 rozszerzy\u0107 (w tym kilka naszych agencji partnerskich).<\/p>\n

Wreszcie, jak mo\u017cna si\u0119 domy\u015bli\u0107, praca z CMB2 jest tak niewiarygodnie prosta, jak do tego przywykli\u015bmy, poniewa\u017c obie platformy maj\u0105 wsp\u00f3lnego przodka.<\/p>\n

Instrukta\u017c<\/h2>\n

Zanim zaczniemy, ka\u017cdy ma sw\u00f3j w\u0142asny zestaw idea\u0142\u00f3w dotycz\u0105cych tworzenia wtyczki WordPress, a ja wypr\u00f3bowa\u0142em sporo, jednak samouczek na temat \u201e Kompozycja korzenia w WordPressie<\/a> ” autorstwa Toma J Nowella ca\u0142kowicie zmieni\u0142 spos\u00f3b, w jaki pracuj\u0119. Uwa\u017cam, \u017ce jego podej\u015bcie jest czyste, proste i sprawia, \u017ce \u200b\u200b\u200b\u200bprzysz\u0142a konserwacja dowolnej wtyczki jest \u0142atwa. Je\u015bli pobierzesz \u017ar\u00f3d\u0142o wtyczki Link Picker for CMB2<\/a>, mo\u017cesz zobaczy\u0107 metody, kt\u00f3rych naucza w praktyce.<\/p>\n

Budowanie formy<\/h3>\n

Aby zbudowa\u0107 formularz, kt\u00f3ry renderuje selektor link\u00f3w, pierwsz\u0105 rzecz\u0105, kt\u00f3r\u0105 musimy zrobi\u0107, jest zaczepienie si\u0119 o cmb2_render_[control_name]<\/code>akcj\u0119. Jak nazwa\u0142em t\u0119 kontrolk\u0119 \u201elink_picker”, mo\u017cemy uzupe\u0142ni\u0107 podpi\u0119cie w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n

<?php\nadd_action( 'cmb2_render_link_picker', array( $this, 'cmb2_render_link_picker' ), 10, 5 );\n`\n<\/code><\/pre>\n
Dla tych z Was, kt\u00f3rzy tak naprawd\u0119 nie rozumiej\u0105 add_action<\/code>haka, dzia\u0142a to w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n
    \n
  1. Pierwszym argumentem cmb2_render_link_picker<\/code>jest nazwa haka, do kt\u00f3rego chcemy si\u0119 pod\u0142\u0105czy\u0107.<\/li>\n
  2. Drugim argumentem array( $this, 'cmb2_render_link_picker' )<\/code>jest funkcja, kt\u00f3r\u0105 chcemy wywo\u0142a\u0107 po uruchomieniu tego podpi\u0119cia. Zauwa\u017c, \u017ce zawijam to w tablic\u0119, z $this<\/code>pierwszym parametrem, poniewa\u017c wywo\u0142uj\u0119 funkcj\u0119 wewn\u0105trz klasy. Je\u015bli nie pracujesz z klasami, mo\u017cesz po prostu u\u017cy\u0107 nazwy funkcji cmb2_render_link_picker<\/code>.
    \n3., 10<\/code>to kolejno\u015b\u0107, w jakiej chcemy uruchomi\u0107 funkcj\u0119 (im ni\u017csza liczba, tym szybciej uruchamia si\u0119 po wywo\u0142aniu akcji).<\/li>\n
  3. Jest 5<\/code>to ilo\u015b\u0107 parametr\u00f3w, kt\u00f3re zostan\u0105 przekazane do wywo\u0142ywanej funkcji (wkr\u00f3tce stanie si\u0119 to jasne).<\/li>\n<\/ol>\n
    Nast\u0119pnie tworzymy funkcj\u0119, kt\u00f3ra wyrenderuje formularz:<\/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
    Zostawi\u0142em \u201eDocBlock” w powy\u017cszym kodzie, kt\u00f3ry opisuje, co robi ka\u017cdy z parametr\u00f3w przekazanych do cmb2_render_link_picker()<\/code>funkcji.<\/p>\n
    Zauwa\u017c, \u017ce moja funkcja zaczyna si\u0119 od public<\/code>deklaracji. To znowu dlatego, \u017ce pracuj\u0119 w klasie. Je\u015bli nie pracujesz z klasami, mo\u017cesz to pomin\u0105\u0107.<\/p>\n
    Warto\u015b\u0107 tego pola jest przekazywana do funkcji poprzez $value<\/code>parametr. W przypadku tego pola b\u0119dziemy przechodzi\u0107 przez tablic\u0119, poniewa\u017c nasza kontrolka ma do niej trzy oddzielne elementy:<\/p>\n