{"id":233938,"date":"2023-02-27T15:53:00","date_gmt":"2023-02-27T12:53:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233938"},"modified":"2022-11-11T13:17:12","modified_gmt":"2022-11-11T10:17:12","slug":"kodning-foer-avancerade-anpassade-faelt-en-introduktion","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/kodning-foer-avancerade-anpassade-faelt-en-introduktion\/","title":{"rendered":"Kodning f\u00f6r avancerade anpassade f\u00e4lt: en introduktion"},"content":{"rendered":"\n

Advanced Custom Fields<\/a> (ACF) \u00e4r ett WordPress-plugin som \u00e4r ett utm\u00e4rkt verktyg f\u00f6r att st\u00e4lla in anpassad postmeta. Det l\u00e5ter dig enkelt bygga och konfigurera komplexa och anv\u00e4ndarv\u00e4nliga metaboxar med alla typer av f\u00e4lt och inst\u00e4llningar f\u00f6r inl\u00e4ggstyper, taxonomi, anv\u00e4ndarsk\u00e4rmar och alternativsidor. Och det \u00e4r super utvecklarv\u00e4nligt.<\/p>\n

Nu kan du st\u00e4lla in dina egna metaboxar eller inst\u00e4llningar manuellt, men f\u00f6r mer komplexa inst\u00e4llningar kr\u00e4ver det att du kodar en hel del inklusive styling, Javascript, validering och hanteringssparande. F\u00f6rest\u00e4ll dig till exempel att manuellt skriva en repeater med en grupp inst\u00e4llningar, ett flerval av inl\u00e4gg efter en viss fr\u00e5ga. Eller hantering som visar inst\u00e4llningar som beror p\u00e5 vissa variabler s\u00e5som vilken term eller sidmall som \u00e4r tilldelad (vilket kr\u00e4ver Javascript). Advanced Custom Fields hanterar allt detta, och det g\u00f6r det s\u00e5 vackert.<\/p>\n

T\u00e4nk p\u00e5 att avancerade anpassade f\u00e4lt faktiskt inte kommer att mata ut n\u00e5gon av dina anpassade meta i dina mallar. Att skriva ut eller g\u00f6ra n\u00e5got baserat p\u00e5 de f\u00e4lt och inst\u00e4llningar som st\u00e4llts in med ACF \u00e4r upp till dig som utvecklare att hantera. Men detta g\u00f6rs enkelt genom att anv\u00e4nda n\u00e5gon av ACF:s metoder. Det \u00e4r ocks\u00e5 trevligt att veta att ACF anv\u00e4nder WordPress k\u00e4rna (post, term, anv\u00e4ndare) metafunktionalitet. Vilket inneb\u00e4r att den faktiskt sparar t.ex. inst\u00e4llningar f\u00f6r inl\u00e4gg som postmeta \u2013 som du kan f\u00e5 tag i med hj\u00e4lp av k\u00e4rnfunktioner som get_post_meta()<\/code>.<\/p>\n

Avancerade anpassade f\u00e4lt kommer i en gratisversion<\/a> och en Pro-betald version<\/a>. Gratisversionen \u00e4r mer \u00e4n tillr\u00e4ckligt f\u00f6r de flesta fall, men i Pro-versionen f\u00e5r du n\u00e5gra ytterligare funktioner s\u00e5som ett repeaterf\u00e4lt, gallerif\u00e4lt, Gutenberg-block (se senare), och m\u00f6jligheten att anv\u00e4nda ACF f\u00f6r att s\u00e4tta upp din egen anpassade admin alternativsidor. ACF \u00e4r ocks\u00e5 s\u00e5 popul\u00e4rt att du enkelt kan hitta h\u00f6gkvalitativa till\u00e4gg<\/a> f\u00f6r allt som core ACF inte t\u00e4cker sig sj\u00e4lv.<\/p>\n

Avancerade anpassade f\u00e4lt: Admin-delen<\/h2>\n

N\u00e4r du installerar Advanced Custom Fields-plugin f\u00e5r du en ny adminmeny f\u00f6r "Custom Fields".Det \u00e4r h\u00e4r du kan st\u00e4lla in och konfigurera dina "metaboxar" eller grupper av inst\u00e4llningar.<\/p>\n

Inom en grupp kan du s\u00e4tta upp s\u00e5 m\u00e5nga f\u00e4lt du vill av olika typer. De vanligaste \u00e4r textinmatning, textomr\u00e5de, richtextredigerare, fil, bild, sant\/falskt (v\u00e4xling), kryssrutor, alternativknappar och valruta. Andra vanliga \u00e4r flera s\u00e4tt att v\u00e4lja inl\u00e4gg, v\u00e4lja taxonomi, v\u00e4lja anv\u00e4ndare, datumv\u00e4ljare, f\u00e4rgv\u00e4ljare, Google Maps och m\u00e5nga, m\u00e5nga fler. Beroende p\u00e5 vilken f\u00e4lttyp du v\u00e4ljer f\u00e5r du en rad ytterligare alternativ f\u00f6r att anpassa f\u00e4ltet. Du kan ocks\u00e5 l\u00e4gga till villkorlig logik till vilket f\u00e4lt som helst. Villkorlig logik \u00e4r till f\u00f6r att d\u00f6lja eller visa f\u00e4lt beroende p\u00e5 andra alternativ inom gruppen.<\/p>\n

F\u00f6r varje grupp av inst\u00e4llningar kan du definiera i vilka fall dessa inst\u00e4llningar ska visas. Exempel \u00e4r n\u00e4r du redigerar inl\u00e4gg, en taxonomiterm eller redigering av en anv\u00e4ndare. Du kan ytterligare anpassa synligheten f\u00f6r dina inst\u00e4llningar p\u00e5 till exempel inl\u00e4ggstyp. Eller om ett inl\u00e4gg har en viss term eller sidmall tilldelad, om ett inl\u00e4gg \u00e4r av en viss f\u00f6rfattare, om anv\u00e4ndarrollen \u00e4r s\u00e5 eller s\u00e5, rollen f\u00f6r den nuvarande inloggade anv\u00e4ndaren eller om sidan \u00e4r en \u00f6verordnad sida eller inte. Du kan ocks\u00e5 anpassa var metarutan ska visas. Denna funktionalitet \u00e4r dock n\u00e5got reducerad nu med den nya Gutenberg-redigeraren.<\/p>\n

\"Kodning<\/a><\/p>\n

Skapar en grupp<\/p>\n

\"Kodning<\/a><\/p>\n

Inst\u00e4llningar f\u00f6r ett enskilt f\u00e4lt<\/p>\n

Avancerade anpassade f\u00e4lt: Koddelen<\/h2>\n

L\u00e5t oss ta en titt p\u00e5 den mer intressanta delen: hur du kan anv\u00e4nda avancerade anpassade f\u00e4lt med kod. Som n\u00e4mnts tidigare \u00e4r ACF super utvecklarv\u00e4nlig och erbjuder ett brett utbud av anpassningsm\u00f6jligheter.<\/p>\n

Att f\u00e5 tag p\u00e5 v\u00e4rden och mata ut dem i dina mallar g\u00f6rs enkelt med hj\u00e4lp av ACF:s metoder. Till exempel the_field('your_meta_key')<\/code>f\u00f6r att direkt eka det eller get_field('your_meta_key')<\/code>f\u00f6r att lagra det i en PHP-variabel. Ange post-ID som andra argument om du beh\u00f6ver h\u00e4mta data utanf\u00f6r loopen. L\u00e4tt som en pl\u00e4tt. Du kan anv\u00e4nda get_post_meta()<\/code>, men det rekommenderas att anv\u00e4nda ACF:s metoder \u2013 eftersom ACF kan f\u00f6rvandla v\u00e4rdet till n\u00e5got mer meningsfullt innan det returneras till dig.<\/p>\n

En annan sak du b\u00f6r vara medveten om \u00e4r exportverktyget inom ACF. Du kan exportera skapade grupper till tv\u00e5 format; antingen en nedladdningsbar JSON-fil eller ren PHP-kod. JSON-filen \u00e4r anv\u00e4ndbar om du beh\u00f6ver exportera inst\u00e4llningar mellan test- och liveservrar, eller en annan WordPress. Att exportera i ren PHP ger dig m\u00f6jligheten att direkt klistra in det i ditt tema eller plugin PHP-filer.<\/p>\n

Som du kanske kan dra slutsatsen av detta; du kan anv\u00e4nda PHP-kod, antingen genom att skriva den manuellt eller genom att exportera den efter att ha st\u00e4llt in dem i admin, f\u00f6r att l\u00e4gga till dina grupper och f\u00e4lt. Detta ger mer kontroll och s\u00e4tt att skapa anpassade val.<\/p>\n

Men v\u00e4nta, det finns mer! ACF erbjuder ocks\u00e5 ett brett utbud av \u00e5tg\u00e4rder och filter f\u00f6r att anpassa f\u00e4lten eller deras v\u00e4rden ytterligare. Det finns krokar f\u00f6r att spara eller rendera ett f\u00e4lt samt krokar f\u00f6r att registrera grupper efter kod (som n\u00e4mns ovan), och filter f\u00f6r att anpassa f\u00e4ltets v\u00e4rden, inst\u00e4llningar eller val innan du sparar eller f\u00f6re rendering. Du kan vidare ange om filtret ska p\u00e5verka alla f\u00e4lt, f\u00e4lt av en viss typ eller f\u00e4lt av en viss meta-nyckel. Alla krokar och filter \u00e4r prefixerade med acf\/<\/code>.<\/p>\n

Ta en titt p\u00e5 ACF:s dokumentationssida<\/a> ; klicka p\u00e5 ’Funktioner’, ’\u00c5tg\u00e4rder’ eller ’Filter’ f\u00f6r en \u00f6versikt. Du hittar ocks\u00e5 bra tutorials och guider p\u00e5 den h\u00e4r webbplatsen.<\/p>\n

En anteckning om Advanced Custom Fields och Gutenberg<\/h2>\n

Att skapa anpassade Gutenberg-block \u00e4r f\u00f6r tillf\u00e4llet ganska skr\u00e4mmande. Dokumentationen \u00e4r inte riktigt p\u00e5 plats, \u00e4ndringar i den sker ofta och det kr\u00e4ver en hel del Javascript-kunskaper f\u00f6r att koda. Helst beh\u00f6ver du kunskap om React och hur man st\u00e4ller in kompilator fr\u00e5n JSX\/ES6 med webpack och Babel.<\/p>\n

Men i version 5.8 introducerade ACF Pro<\/a> en funktion f\u00f6r att st\u00e4lla in en f\u00e4ltgrupp som ett Gutenberg-block \u2013 s\u00e5 att du kan l\u00e4gga till anpassade block enbart med ACF- och PHP-kod. Inga Javascript-kunskaper kr\u00e4vs!<\/p>\n

Allt du beh\u00f6ver g\u00f6ra \u00e4r att st\u00e4lla in grupperna i admin eller med kod som vanligt. Men sedan definiera deras plats som Gutenberg block. Allt som \u00e5terst\u00e5r \u00e4r att l\u00e4gga till lite PHP-kod f\u00f6r att registrera dem som ett anpassat Gutenberg-block med acf_register_block()<\/code>. Till den funktionen definierar du en callback till en PHP-funktion eller mallfil som \u00e4r ansvarig f\u00f6r att rendera blockutdata. Du skriver den h\u00e4r funktionen eller malldelen helt i PHP och anv\u00e4nder v\u00e4lbekanta metoder som get_field()<\/code>att f\u00e5 fram inst\u00e4llningsv\u00e4rdena.<\/p>\n

\"Kodning<\/a><\/p>\n

Hur ett ACF-block ser ut i Gutenberg-redigeraren<\/p>\n

H\u00e5ll \u00f6gonen \u00f6ppna i kategorin Avancerade anpassade f\u00e4lt<\/a> f\u00f6r tutorials om hur du anv\u00e4nder detta plugin!<\/p>\n

Inspelningsk\u00e4lla: awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Den h\u00e4r guiden f\u00f6r nyb\u00f6rjare tittar p\u00e5 WordPress-plugin Advanced Custom Fields (ACF) och hur du som utvecklare kan anv\u00e4nda den.<\/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":[901,724,848,901,922,1110,922,818,818,848,724,868,868],"tags":[1173],"class_list":["post-233938","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-koda","category-utvecklaren","category-handledningar","category-oevrig","category-n-a","category-plugins-3","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233938","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=233938"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233938\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/224889"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=233938"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=233938"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=233938"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}