{"id":228048,"date":"2022-10-13T20:13:00","date_gmt":"2022-10-13T17:13:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228048"},"modified":"2022-11-09T00:26:11","modified_gmt":"2022-11-08T21:26:11","slug":"skapa-en-anpassad-cmb2-laenkvaeljarkontroll-foer-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/skapa-en-anpassad-cmb2-laenkvaeljarkontroll-foer-wordpress\/","title":{"rendered":"Skapa en anpassad CMB2-l\u00e4nkv\u00e4ljarkontroll f\u00f6r WordPress"},"content":{"rendered":"\n

I den h\u00e4r handledningen kommer jag att titta p\u00e5 hur du kan skapa en anpassad kontroll f\u00f6r att ut\u00f6ka funktionaliteten f\u00f6r CMB2<\/a> (Custom Meta Boxes 2) av WebDevStudios<\/a>.<\/p>\n

Jag utvecklar webbplatser (och webbapplikationer) med WordPress<\/a> CMS (Content Management System), och n\u00e4r ett nytt projekt landar kan du garantera att det kommer att finnas ett krav p\u00e5 mig att utveckla ’Custom Meta Boxes’ f\u00f6r att l\u00e5ta anv\u00e4ndaren ha fin kontroll \u00f6ver webbplatsens inneh\u00e5ll och layout.<\/p>\n

Jag kommer att beskriva hur jag byggde CMB2-kontrollen Link Picker f\u00f6r CMB2<\/a> (tillg\u00e4nglig fr\u00e5n alla bra WordPress-pluginf\u00f6rr\u00e5d). En sk\u00e4rmdump som kan ses nedan.<\/p>\n

"Link Picker" CMB2-kontrollen i aktion<\/p>\n

L\u00e4nkv\u00e4ljaren aktiverar den inbyggda WordPress-dialogrutan "Infoga\/redigera l\u00e4nk" n\u00e4r du klickar p\u00e5 knappen "V\u00e4lj". Detta kan ses p\u00e5 sk\u00e4rmdumpen nedan:<\/p>\n

\"SkapaGenom att trycka p\u00e5 knappen kan du v\u00e4lja fr\u00e5n en l\u00e4nk (eller l\u00e4gga till din egen)<\/p>\n

Jag \u00e4r s\u00e4ker p\u00e5 att du h\u00e5ller med om att det \u00e4r otroligt praktiskt att ha en kontroll som denna om du vill ge dina webbplatsredigerare m\u00f6jligheten att l\u00e4gga till en l\u00e4nk och \u00e4ven s\u00f6ka i WordPress efter dess interna l\u00e4nkar, ist\u00e4llet f\u00f6r att de m\u00e5ste klippa och klistra in l\u00e4nkarna i en l\u00e4nk f\u00e4lt.<\/p>\n

Introduktion \/ Historia<\/h2>\n

F\u00f6r de som inte k\u00e4nner till, finns en metabox p\u00e5 redigeringssk\u00e4rmen f\u00f6r ett WordPress-inl\u00e4gg och kommer sannolikt att inneh\u00e5lla olika formul\u00e4rkontroller (textrutor, rullgardinslistor, kryssrutor etc…). Dessa kontroller l\u00e5ter dina webbplatsanv\u00e4ndare enkelt kunna \u00e4ndra en anpassad text eller funktionalitet p\u00e5 webbplatsen.<\/p>\n

\"Skapa\"SkapaEtt exempel p\u00e5 en metabox med olika formul\u00e4rkontroller<\/p>\n

WordPress l\u00e5ter dig skapa metaboxar med hj\u00e4lp av funktioner (som t.ex. [add_meta_box](https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/)<\/code>), men att skapa metaboxar p\u00e5 detta s\u00e4tt kan vara en l\u00e5ng process, med mycket kodupprepning (speciellt om du vill anv\u00e4nda samma formul\u00e4rkontroller i flera projekt).<\/p>\n

Varf\u00f6r CMB2?<\/h2>\n

N\u00e5gra av er kanske har h\u00f6rt talas om Advanced Custom Fields<\/a> (ACF) som tillhandah\u00e5ller ett GUI (Graphical User Interface) som l\u00e5ter dig skapa metaboxar direkt med WordPress.<\/p>\n

ACF enligt mig \u00e4r inte ett bra verktyg<\/strong> f\u00f6r n\u00e5gon webbl\u00f6sning som skalas. Plugin-programmet \u00e4r f\u00f6r mycket beroende av att data lagras i databasen. Detta orsakar sm\u00e4rta n\u00e4r du distribuerar \u00e4ndringar p\u00e5 en webbplats, eftersom du inte bara kan trycka upp din kod och se \u00e4ndringarna direkt. Ist\u00e4llet m\u00e5ste du g\u00f6ra om arbetet p\u00e5 de olika distributionsmilj\u00f6erna (staging, live, et al). S\u00e5 vi beh\u00f6vde en l\u00f6sning som l\u00e5ter oss skapa metaboxar programm\u00e4ssigt. Ange CMB2.<\/p>\n

Innan vi antog CMB2 anv\u00e4nde vi tidigare HM Custom Meta Boxes<\/a> fr\u00e5n de d\u00e4r underbara m\u00e4nniskorna p\u00e5 Human Made<\/a> (som b\u00f6rjade som en gaffel till WebDevStudios f\u00f6reg\u00e5ngare till CMB2,).<\/p>\n

Vi \u00e4lskade HM Custom Meta Boxes, och med de enklaste kodavsnitten kunde vi snabbt skapa anpassade Meta Boxes f\u00f6r att g\u00f6ra i stort sett vad som helst!<\/p>\n

\"SkapaHM Custom Meta Boxes Markup Exempel (detta \u00e4r markeringen f\u00f6r Instagram Meta Box i den f\u00f6rsta sk\u00e4rmdumpen)<\/p>\n

S\u00e5 varf\u00f6r flytta till CMB2? Tja, HM Custom Meta Boxes fick tyv\u00e4rr inte s\u00e5 mycket k\u00e4rlek (jag pratade med dess huvudutvecklare och han \u00e4r en v\u00e4ldigt mycket upptagen man), medan CMB2 gick fram\u00e5t med nya funktioner, nya kontroller, och det hade f\u00e5tt dragkraft i WordPress-communityt med m\u00e5nga m\u00e4nniskor som adopterar det och sl\u00e4pper plugins f\u00f6r att ut\u00f6ka det (inklusive flera av v\u00e5ra partnerbyr\u00e5er).<\/p>\n

Slutligen, som du kanske har f\u00f6rst\u00e5tt, \u00e4r arbetet med CMB2 lika otroligt enkelt som vi hade vant oss vid, eftersom b\u00e5da plattformarna har en gemensam f\u00f6rfader.<\/p>\n

Handledning<\/h2>\n

Innan vi b\u00f6rjar har alla sina egna ideal om hur man skapar ett WordPress-plugin, och jag har provat en hel del, men handledningen om ’ Root Composition in WordPress<\/a> ’ av Tom J Nowell f\u00f6r\u00e4ndrade helt hur jag arbetar. Jag tycker att dess tillv\u00e4gag\u00e5ngss\u00e4tt \u00e4r rent, enkelt, och det g\u00f6r framtida underh\u00e5ll av alla plugin till en enkel sak. Om du tar tag i k\u00e4llan till Link Picker for CMB2-<\/a> plugin, kan du se metoderna han l\u00e4r ut i praktiken.<\/p>\n

Bygga formul\u00e4ret<\/h3>\n

F\u00f6r att bygga formen som \u00e5terger L\u00e4nkv\u00e4ljaren \u00e4r det f\u00f6rsta vi beh\u00f6ver g\u00f6ra att koppla in i cmb2_render_[control_name]<\/code>handlingen. Som jag har kallat den h\u00e4r kontrollen ’link_picker’ kan vi slutf\u00f6ra kroken s\u00e5 h\u00e4r:<\/p>\n

<?php\nadd_action( 'cmb2_render_link_picker', array( $this, 'cmb2_render_link_picker' ), 10, 5 );\n`\n<\/code><\/pre>\n
F\u00f6r er som inte riktigt f\u00f6rst\u00e5r add_action<\/code>kroken fungerar det som f\u00f6ljer:<\/p>\n
    \n
  1. Det f\u00f6rsta argumentet cmb2_render_link_picker<\/code>\u00e4r namnet p\u00e5 kroken vi vill haka p\u00e5.<\/li>\n
  2. Det andra argumentet array( $this, 'cmb2_render_link_picker' )<\/code>\u00e4r funktionen vi vill anropa n\u00e4r denna hook k\u00f6rs. Observera att jag lindar in detta i en array, med $this<\/code>som den f\u00f6rsta parametern, eftersom jag anropar funktionen i en klass. Om du inte arbetar med klasser kan du bara anv\u00e4nda funktionsnamnet cmb2_render_link_picker<\/code>.
    \n3., \u00e4r den 10<\/code>ordning som vi vill att funktionen ska aktiveras (ju l\u00e4gre nummer, desto snabbare aktiveras den n\u00e4r \u00e5tg\u00e4rden anropas).<\/li>\n
  3. Det 5<\/code>\u00e4r m\u00e4ngden parametrar som kommer att skickas till funktionen som jag anropar (detta kommer att bli klart inom kort).<\/li>\n<\/ol>\n
    D\u00e4refter skapar vi funktionen som renderar formul\u00e4ret:<\/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
    Jag har l\u00e4mnat "DocBlock" i koden ovan som beskriver vad var och en av parametrarna som skickas in i cmb2_render_link_picker()<\/code>funktionen g\u00f6r.<\/p>\n
    Observera att min funktion b\u00f6rjar med public<\/code>deklarationen. Detta beror \u00e5terigen p\u00e5 att jag arbetar inom en klass. Om du inte arbetar med klasser kan du utel\u00e4mna detta.<\/p>\n
    V\u00e4rdet f\u00f6r detta f\u00e4lt skickas till funktionen via $value<\/code>parametern. N\u00e4r det g\u00e4ller detta f\u00e4lt kommer vi att passera genom en array, eftersom v\u00e5r kontroll har tre separata element:<\/p>\n