{"id":233593,"date":"2023-02-18T19:49:00","date_gmt":"2023-02-18T16:49:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233593"},"modified":"2023-02-23T17:21:37","modified_gmt":"2023-02-23T14:21:37","slug":"hur-man-skapar-ett-graenssnittsformulaer-med-acf","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/hur-man-skapar-ett-graenssnittsformulaer-med-acf\/","title":{"rendered":"Hur man skapar ett gr\u00e4nssnittsformul\u00e4r med ACF"},"content":{"rendered":"\n

I den h\u00e4r handledningen visar jag dig hur du skapar ett gr\u00e4nssnittsformul\u00e4r med Advanced Custom Fields (ACF). Jag kommer att g\u00e5 in i detalj om hur det fungerar och hur du kan anpassa det f\u00f6r att passa dina behov.<\/p>\n

Advanced Custom Fields<\/a> (ACF) \u00e4r ett gratis plugin som hj\u00e4lper dig l\u00e4gga till f\u00e4ltinst\u00e4llningar av en hel massa typer till n\u00e4stan alla typer av inneh\u00e5ll i WordPress. Du kan l\u00e4gga till f\u00e4lt i inl\u00e4gg, taxonomier, menyer, widgets, anv\u00e4ndare och till och med anpassade adminsidor. Dess huvudsakliga anv\u00e4ndning \u00e4r f\u00f6r admin, men du kan anv\u00e4nda den f\u00f6r att generera f\u00e4lten i front-end ocks\u00e5.<\/p>\n

Applikationerna f\u00f6r att l\u00e4gga till ACF-f\u00e4lt till front-end \u00e4r m\u00e5nga; du kan l\u00e4gga till ett formul\u00e4r f\u00f6r att skapa och uppdatera inl\u00e4gg, kategorier eller anv\u00e4ndare. Med viss kod kan du till och med skapa ett allm\u00e4nt kontaktformul\u00e4r d\u00e4r svaren sparas som anpassade inl\u00e4gg av inl\u00e4ggstyp och koden utl\u00f6ser e-postmeddelanden p\u00e5 formul\u00e4rsvar. Precis som ett vanligt kontaktformul\u00e4r. Att anv\u00e4nda ACF front-end-formul\u00e4rfunktioner f\u00f6r att skapa formul\u00e4r och f\u00f6r att till\u00e5ta bes\u00f6kare att skapa eller redigera webbplatsinneh\u00e5ll utan att logga in \u00e4r vanliga anv\u00e4ndningsomr\u00e5den. Men anv\u00e4nd detta med f\u00f6rsiktighet. Detta \u00f6ppnar l\u00e4tt upp f\u00f6r spam och missbruk, och i v\u00e4rsta fall kan bes\u00f6kare f\u00f6rst\u00f6ra din webbplats inneh\u00e5ll eller inst\u00e4llningar. Du b\u00f6r \u00e5tminstone kr\u00e4va att bes\u00f6kare loggar in med giltiga anv\u00e4ndare f\u00f6r att f\u00e5 tillg\u00e5ng till formul\u00e4r som kan \u00e4ndra kritiskt WordPress-inneh\u00e5ll (anv\u00e4ndarprofil, inl\u00e4gg, etc).<\/p>\n

Vad vi ska g\u00f6ra<\/h2>\n

Jag antar att WordPress-webbplatsen har definierat en upps\u00e4ttning ytterligare f\u00e4lt f\u00f6r anv\u00e4ndare av en anpassad roll (’ member<\/code>’) som anv\u00e4nder ACF. Dessa anv\u00e4ndare har inte administrat\u00f6rsbeh\u00f6righet alls men vi vill erbjuda dem m\u00f6jligheten att redigera sina anpassade f\u00e4lt p\u00e5 sin profil. L\u00f6sningen jag har valt \u00e4r att skapa en anpassad sidmall f\u00f6r att uppdatera sin profil, som endast visar formul\u00e4ret om de \u00e4r inloggade och har r\u00e4tt roll.<\/p>\n

Jag h\u00e5ller det ganska enkelt i den h\u00e4r handledningen s\u00e5 jag kommer inte att inkludera ett exempel p\u00e5 att l\u00e4gga till standardanv\u00e4ndarprofilf\u00e4lten i WordPress (e-post, l\u00f6senord, etc). Det faller lite utanf\u00f6r ramen f\u00f6r denna handledning. Jag till\u00e5ter endast redigering av ACF-f\u00e4lten p\u00e5 denna redigera profilsida.<\/p>\n

Med ACF har jag skapat en f\u00e4ltgrupp med en upps\u00e4ttning inst\u00e4llningar f\u00f6r medlemsanv\u00e4ndare:<\/p>\n

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

Och jag har en anpassad sidmall i mitt tema som f\u00f6r n\u00e4rvarande ser ut s\u00e5 h\u00e4r \u2013 f\u00f6r tillf\u00e4llet bara en vanlig standardmall f\u00f6r en sida;<\/p>\n

<?php \n\/* Template Name: ACF Profile Page *\/\nget_header(); ?>\n<main class=\"content\">\n    <?php if (have_posts()) { \n        while (have_posts()): the_post(); ?>\n        <article id=\"post-<?php the_ID() ?>\" <?php post_class(); ?>>\n            <h2 class=\"page-title\"><?php the_title(); ?><\/h2>\n            <?php the_content(''); ?>\n            <?php \n            if (is_user_logged_in() && current_user_can('member')) {\n                \/\/ Profile settings here\n            }\n            ?>\n        <\/article>\n    <?php endwhile;\n    } ?>\n<\/main>\n<?php \nget_sidebar();\nget_footer();<\/code><\/pre>\n
P\u00e5 raden #11<\/code>kontrollerar vi om den aktuella anv\u00e4ndaren \u00e4r inloggad och har den anpassade rollen member<\/code>. \u00c4ndra rollen eller minimiregeln till vad du vill till\u00e5ta detta gr\u00e4nssnittsformul\u00e4r f\u00f6r. Kom bara ih\u00e5g att \u00e4ven den l\u00e4gsta rollen i WordPress, subscriber<\/code>, har tillg\u00e5ng till att redigera sin profil i adminpanelen.<\/p>\n
S\u00e5 kort sagt, vi vill l\u00e4gga till dessa f\u00e4lt p\u00e5 varje medlem p\u00e5 den anpassade front-end-sidan:<\/p>\n
\"Hur<\/a><\/p>\n
Hur ACF front-end-formul\u00e4r fungerar<\/h2>\n
Du m\u00e5ste l\u00e4gga till tv\u00e5 funktionsanrop i mallen du vill ha i frontend-formul\u00e4ret; [acf_form_head](https:\/\/www.advancedcustomfields.com\/resources\/acf_form_head\/)()<\/code>och [acf_form](https:\/\/www.advancedcustomfields.com\/resources\/acf_form\/)()<\/code>.<\/p>\n
Funktionen acf_form_head()<\/code>m\u00e5ste placeras h\u00f6gst upp i din mall, f\u00f6re eventuell utmatning. Vanligtvis i en mall betyder detta f\u00f6re [get_header](https:\/\/developer.wordpress.org\/reference\/functions\/get_header\/)()<\/code>. Funktionsanropet ser till att alla skript och stilar l\u00e4ggs till s\u00e5 att ACF-f\u00e4lten kommer att renderas korrekt, samt all funktionalitet f\u00f6r att bearbeta, validera och skicka in arbete. Vi beh\u00f6ver inte l\u00e4gga till n\u00e5gra parametrar till den h\u00e4r funktionen.<\/p>\n
Funktionen acf_form()<\/code>\u00e4r den som \u00e5terger frontend-formul\u00e4ret och ska placeras d\u00e4r du vill att formul\u00e4ret ska visas. Den accepterar en m\u00e4ngd inst\u00e4llningar. Vi m\u00e5ste som ett minimum informera om vilka f\u00e4lt eller grupper som ska visas och var vi ska spara dem.<\/p>\n
N\u00e4r det g\u00e4ller att best\u00e4mma vilka f\u00e4lt som ska visas skulle du vanligtvis tillhandah\u00e5lla en f\u00e4ltgrupp (egenskap field_groups<\/code>). Men acf_form()<\/code>funktionen st\u00f6der att tillhandah\u00e5lla specifika enstaka f\u00e4lt ocks\u00e5 (egenskap fields<\/code>). Du kan ocks\u00e5 tillhandah\u00e5lla flera f\u00e4lt eller f\u00e4ltgrupper f\u00f6r att kombinera dem till samma form. P\u00e5 grund av detta field_groups<\/code>f\u00f6rv\u00e4ntar sig en array. S\u00e5 \u00e4ven om du bara vill visa en f\u00e4ltgrupp, m\u00e5ste du ange detta ID eller slug inuti en array.<\/p>\n
Den andra n\u00f6dv\u00e4ndiga egenskapen som du m\u00e5ste ange formul\u00e4ret acf_form()<\/code>\u00e4r var data ska laddas fr\u00e5n och var de ska sparas, i egenskapen post_id<\/code>. L\u00e5t dig inte luras av namnet "inl\u00e4gg". Reglerna f\u00f6r post_id<\/code>\u00e4r desamma n\u00e4r du anv\u00e4nder get_field()<\/code>, om du \u00e4r bekant med att arbeta med ACF sedan tidigare. Om f\u00e4lten \u00e4r f\u00f6r ett inl\u00e4gg (inl\u00e4gg, sida, anpassad inl\u00e4ggstyp) beh\u00f6ver du bara ange ID h\u00e4r. Men om du vill ladda och uppdatera data om anv\u00e4ndare, skulle du f\u00f6lja detta format: user_{user ID}<\/code>. P\u00e5 samma s\u00e4tt med f\u00e4lt f\u00f6r en kategori: category_{category ID}<\/code>. Kolla in alla regler under rubriken "F\u00e5 ett v\u00e4rde fr\u00e5n olika objekt" i ACF:s dokument p\u00e5get_field()<\/code><\/a>.<\/p>\n
L\u00e4gger till ACF-gr\u00e4nssnittsformul\u00e4r till v\u00e5r mall<\/h2>\n
F\u00f6rst l\u00e4gger vi till acf_form_head()<\/code>h\u00f6gst upp, precis f\u00f6re get_header()<\/code>\u2013 men efter sidmallsdeklarationen (rad #3<\/code>). acf_form()<\/code>Sedan l\u00e4gger vi till tv\u00e5 egenskaper p\u00e5 den plats d\u00e4r vi vill \u00e5terge formul\u00e4ret .<\/p>\n
Vi m\u00e5ste ta reda p\u00e5 v\u00e5rt f\u00e4ltgrupp-ID. Om du lade till f\u00e4ltgruppen efter kod (jag har ett inl\u00e4gg som g\u00e5r p\u00e5 djupet om hur man l\u00e4gger till ACF-f\u00e4lt efter kod<\/a>) har du redan angett en f\u00e4ltgruppssnigel. Du skulle sedan tillhandah\u00e5lla snigeln till field_groups<\/code>fastigheten, i en array. Om du lade till f\u00e4ltgruppen i adminpanelen m\u00e5ste du \u00f6ppna gruppen i webbl\u00e4saren och kontrollera URL:en. Vi \u00e4r intresserade av ID:t som visas efter " ?post=<\/code>":<\/p>\n
\"Hur<\/a><\/p>\n
I mitt exempel \u00e4r ID:t 1145<\/code>. Sedan \u00e4r det vad jag tillhandah\u00e5ller i utbudet av field_groups<\/code>.<\/p>\n
PS: Jag rekommenderar inte h\u00e5rdkodning av ett ID eftersom detta ID kommer att vara olika i varje WordPress-instans! Om du arbetar med en lokal installation samt en iscens\u00e4ttning och produktionsserver, skulle jag definitivt rekommendera att l\u00e4gga till f\u00e4lten med kod ist\u00e4llet. P\u00e5 s\u00e5 s\u00e4tt kan du definiera ett f\u00e4ltgruppsnamn och det kommer att fungera \u00f6verallt.<\/p>\n
N\u00e4r det g\u00e4ller post_id<\/code>fastigheten kan jag f\u00e5 det aktuella anv\u00e4ndar-ID med WordPress-funktionen [get_current_user_id](https:\/\/developer.wordpress.org\/reference\/functions\/get_current_user_id\/)()<\/code>. Jag sammanfogar str\u00e4ngen ’ user_<\/code>’ och returen av denna funktion som post_id<\/code>.<\/p>\n
<?php \n\/* Template Name: ACF Profile Page *\/\nacf_form_head();\nget_header(); ?>\n<main class=\"content\">\n    <?php if (have_posts()) { \n        while (have_posts()): the_post(); ?>\n        <article id=\"post-<?php the_ID() ?>\" <?php post_class(); ?>>\n            <h2 class=\"page-title\"><?php the_title(); ?><\/h2>\n            <?php the_content(''); ?>\n            <?php \n            if (is_user_logged_in() && current_user_can('member')) {\n                $current_user_id = get_current_user_id();\n                acf_form([\n                    'field_groups' => [1145],\n                    'post_id' => 'user_'. $current_user_id\n                ]);\n            }\n            ?>\n        <\/article>\n    <?php endwhile;\n    } ?>\n<\/main>\n<?php \nget_sidebar();\nget_footer();<\/code><\/pre>\n
Och det \u00e4r i princip det!<\/p>\n
Om jag bes\u00f6ker den h\u00e4r sidan inloggad som medlemsanv\u00e4ndare skulle jag f\u00e5 de aktuella v\u00e4rdena f\u00f6r den anv\u00e4ndaren. Alla ACF-f\u00e4lttyper fungerar och ser bra ut. Och jag kan uppdatera v\u00e4rdena med hj\u00e4lp av front-end-formul\u00e4ret och se att de ocks\u00e5 uppdateras i admin.<\/p>\n
Ytterligare anpassning av formul\u00e4ret<\/h2>\n
Vi kan ytterligare finjustera inst\u00e4llningarna som skickas till acf_form()<\/code>. Se ACF:s dokumentation p\u00e5 acf_form()<\/a> f\u00f6r att se alla m\u00f6jliga inst\u00e4llningar.<\/p>\n
F\u00f6r tillf\u00e4llet visar v\u00e5rt anv\u00e4ndarprofilformul\u00e4r "Inl\u00e4gg uppdaterat" n\u00e4r inst\u00e4llningarna skickas. Detta \u00e4r inte vettigt f\u00f6r profilinst\u00e4llningar. Vi kan anpassa meddelandet med fastigheten updated_message<\/code>.<\/p>\n
acf_form([\n    'field_groups' => [1145],\n    'post_id' => 'user_'. $current_user_id,\n    'updated_message' => __('User profile updated.', 'txtdomain')\n]);<\/code><\/pre>\n
Om du vill kan du definiera en annan URL att omdirigera till efter att formul\u00e4ret har skickats. Som standard laddas samma sida om med GET-parametern ’ ?updated=true<\/code>’. Du kan ange en specifik URL till en tacksida, eller om formul\u00e4ret \u00e4r f\u00f6r ett inl\u00e4gg kanske du vill omdirigera till att visa det inl\u00e4gget. Vi kan tillhandah\u00e5lla webbadressen i fastigheten return<\/code>.<\/p>\n
acf_form([\n    'field_groups' => [1145],\n    'post_id' => 'user_'. $current_user_id,\n    'return' => home_url('thank-you')\n]);<\/code><\/pre>\n
Om vi \u200b\u200bvill ha en annan text p\u00e5 formul\u00e4rs\u00e4ndningsknappen kan vi ange detta i egenskapen submit_value<\/code>.<\/p>\n
acf_form([\n    'field_groups' => [1145],\n    'post_id' => 'user_'. $current_user_id,\n    'submit_value' => __('Update profile', 'txtdomain')\n]);<\/code><\/pre>\n
Du kan ocks\u00e5 s\u00e4ga acf_form()<\/code>till att inte rendera <form><\/code>taggen. Om du vill kombinera ACF:s formul\u00e4r med ditt eget anpassade formul\u00e4r kan du st\u00e4lla form<\/code>in false<\/code>och skriva ut <form><\/code>och <input type=\"submit\"\/><\/code>manuellt. Om du g\u00f6r detta kommer ACF fortfarande att kunna uppdatera v\u00e4rdena, men du m\u00e5ste ta hand om att uppdatera eventuella andra f\u00e4lt i ditt anpassade formul\u00e4r.<\/p>\n
<form method=\"POST\">\n    <input type=\"text\" name=\"my-custom-input\" value=\"\" \/>\n    <?php\n    acf_form([\n        'field_groups' => [1145],\n        'post_id' => 'user_'. $current_user_id,\n        'form' => false\n    ]);\n    ?>\n    <input type=\"submit\" value=\"<?php _e('Submit', 'txtdomain'); ?>\" \/>\n<\/form><\/code><\/pre>\n
Utl\u00f6ser \u00e5tg\u00e4rder vid formul\u00e4rinl\u00e4mningar<\/h2>\n
Ibland kanske du vill utl\u00f6sa n\u00e5gon anpassad funktion eller h\u00e4ndelser n\u00e4r ett gr\u00e4nssnittsformul\u00e4r uppdateras. Ett vanligt exempel \u00e4r att skriva en funktion som skickar ett e-postmeddelande vid varje formul\u00e4rinl\u00e4mning.<\/p>\n
Avancerade anpassade f\u00e4lt erbjuder tv\u00e5 anv\u00e4ndbara krokar f\u00f6r n\u00e4r f\u00e4lt uppdateras; \u00e5tg\u00e4rden [acf\/save_post](https:\/\/www.advancedcustomfields.com\/resources\/acf-save_post\/)<\/code>och filtret [acf\/pre_save_post](https:\/\/www.advancedcustomfields.com\/resources\/acf-pre_save_post\/)<\/code>. \u00c5terigen, l\u00e5t dig inte luras av namnet "inl\u00e4gg". De utl\u00f6ses f\u00f6r alla ACF-f\u00e4ltuppdateringar inklusive f\u00e4lt f\u00f6r en anv\u00e4ndare, kategori, meny och s\u00e5 vidare.<\/p>\n
Filtret acf\/pre_save_post<\/code>k\u00f6rs endast<\/strong> p\u00e5 front-end-formul\u00e4r med acf_form()<\/code>. Som parameter till detta filter f\u00e5r vi post_id<\/code>, samma v\u00e4rde som vi skickade post_id<\/code>in acf_form()<\/code>ovan. Filtret f\u00f6rv\u00e4ntar sig att du kommer tillbaka post_id<\/code>. Kom ih\u00e5g att vi m\u00e5ste analysera detta om vi inte h\u00e4nvisar till ett inl\u00e4ggs-ID. Till exempel f\u00f6r anv\u00e4ndare skulle du beh\u00f6va g\u00f6ra n\u00e5got som:<\/p>\n
add_filter('acf\/pre_save_post', function($post_id) {\n    if (strpos($post_id, 'user_') === false) {\n        return $post_id;\n    }\n\u00a0\n    $user_id = intval(substr($post_id, 5));  \/\/ Extracts the user ID\n\u00a0\n    \/\/ Do your thing. You'll find the submitted values in $_POST\n\u00a0\n    return $post_id;\n});<\/code><\/pre>\n
Alternativt kan du anv\u00e4nda kroken acf\/save_post<\/code>\u2013 men kom ih\u00e5g att den utl\u00f6ses i admin ocks\u00e5. Som parameter till denna krok f\u00e5r du post_id<\/code>, samma som acf\/pre_save_post<\/code>. En viktig sak att komma ih\u00e5g n\u00e4r du anv\u00e4nder acf\/save_post<\/code>\u00e4r att du kan anv\u00e4nda krokprioriteten f\u00f6r att kontrollera om din funktion k\u00f6rs innan f\u00e4lt sparas, eller efter. En funktion kopplad till prioritet 10 eller h\u00f6gre kommer att triggas efter att f\u00e4lt har sparats. Och en prioritet p\u00e5 mindre \u00e4n 10 kommer att utl\u00f6sas innan ACF sparar v\u00e4rdena.<\/p>\n
add_action('acf\/save_post', function($post_id) {\n    \/\/ You can fetch the values with standard get_field()\n});\n\u00a0\nadd_action('acf\/save_post', function($post_id) {\n    \/\/ You can access the submitted values in $_POST\n}, 8);<\/code><\/pre>\n
N\u00e4r du har kopplat funktionen innan du sparar (prioritet mindre \u00e4n 10) kan du j\u00e4mf\u00f6ra de inskickade v\u00e4rdena med vad ACF kommer att spara. Du kan g\u00f6ra get_field()<\/code>f\u00f6r att f\u00e5 det aktuella v\u00e4rdet och j\u00e4mf\u00f6ra dem med motsvarande v\u00e4rde i $_POST<\/code>.<\/p>\n
Om du bara vill g\u00f6ra n\u00e5got n\u00e4r f\u00e4lten uppdaterades i front-end, kan du helt enkelt kontrollera om vi \u00e4r admin med [is_admin](https:\/\/developer.wordpress.org\/reference\/functions\/is_admin\/)()<\/code>. Nedan \u00e4r ett exempel p\u00e5 hur du skulle g\u00e5 tillv\u00e4ga f\u00f6r att st\u00e4lla in e-postmeddelanden n\u00e4r en anv\u00e4ndare uppdaterar sina inst\u00e4llningar i front-end;<\/p>\n
add_action('acf\/save_post', function($post_id) {\n    if (strpos($post_id, 'user_') === false) {\n        return $post_id;\n    }\n\u00a0\n    if (is_admin()) {\n        return;  \/\/ Bail if we are updating in admin\n    }\n\u00a0\n    $user_id = intval(substr($post_id, 5));\n\u00a0\n    \/\/ Use get_field() to get the saved\/submitted values if needed\n    \/\/ Then use wp_mail() to send an email\n});<\/code><\/pre>\n
Inspelningsk\u00e4lla:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Hur man skapar ett gr\u00e4nssnittsformul\u00e4r med Advanced Custom Fields (ACF). Jag kommer att g\u00e5 in i detalj om hur det fungerar och hur du kan anpassa det f\u00f6r att passa dina behov.<\/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":[724,838,848,1110,818,818,838,848,724,868,868],"tags":[1173],"class_list":{"0":"post-233593","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-utvecklaren","8":"category-guide-foer-nyboerjare","9":"category-handledningar","10":"category-n-a","11":"category-plugins-3","16":"category-wordpress-9","18":"tag-affiai-sv"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233593","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=233593"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233593\/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=233593"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=233593"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=233593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}