Hur man skapar ett gränssnittsformulär med ACF

I den här handledningen visar jag dig hur du skapar ett gränssnittsformulär med Advanced Custom Fields (ACF). Jag kommer att gå in i detalj om hur det fungerar och hur du kan anpassa det för att passa dina behov.

Advanced Custom Fields (ACF) är ett gratis plugin som hjälper dig lägga till fältinställningar av en hel massa typer till nästan alla typer av innehåll i WordPress. Du kan lägga till fält i inlägg, taxonomier, menyer, widgets, användare och till och med anpassade adminsidor. Dess huvudsakliga användning är för admin, men du kan använda den för att generera fälten i front-end också.

Applikationerna för att lägga till ACF-fält till front-end är många; du kan lägga till ett formulär för att skapa och uppdatera inlägg, kategorier eller användare. Med viss kod kan du till och med skapa ett allmänt kontaktformulär där svaren sparas som anpassade inlägg av inläggstyp och koden utlöser e-postmeddelanden på formulärsvar. Precis som ett vanligt kontaktformulär. Att använda ACF front-end-formulärfunktioner för att skapa formulär och för att tillåta besökare att skapa eller redigera webbplatsinnehåll utan att logga in är vanliga användningsområden. Men använd detta med försiktighet. Detta öppnar lätt upp för spam och missbruk, och i värsta fall kan besökare förstöra din webbplats innehåll eller inställningar. Du bör åtminstone kräva att besökare loggar in med giltiga användare för att få tillgång till formulär som kan ändra kritiskt WordPress-innehåll (användarprofil, inlägg, etc).

Vad vi ska göra

Jag antar att WordPress-webbplatsen har definierat en uppsättning ytterligare fält för användare av en anpassad roll (’ member’) som använder ACF. Dessa användare har inte administratörsbehörighet alls men vi vill erbjuda dem möjligheten att redigera sina anpassade fält på sin profil. Lösningen jag har valt är att skapa en anpassad sidmall för att uppdatera sin profil, som endast visar formuläret om de är inloggade och har rätt roll.

Jag håller det ganska enkelt i den här handledningen så jag kommer inte att inkludera ett exempel på att lägga till standardanvändarprofilfälten i WordPress (e-post, lösenord, etc). Det faller lite utanför ramen för denna handledning. Jag tillåter endast redigering av ACF-fälten på denna redigera profilsida.

Med ACF har jag skapat en fältgrupp med en uppsättning inställningar för medlemsanvändare:

Och jag har en anpassad sidmall i mitt tema som för närvarande ser ut så här – för tillfället bara en vanlig standardmall för en sida;

<?php 
/* Template Name: ACF Profile Page */
get_header(); ?>
<main class="content">
    <?php if (have_posts()) { 
        while (have_posts()): the_post(); ?>
        <article id="post-<?php the_ID() ?>" <?php post_class(); ?>>
            <h2 class="page-title"><?php the_title(); ?></h2>
            <?php the_content(''); ?>
            <?php 
            if (is_user_logged_in() && current_user_can('member')) {
                // Profile settings here
            }
            ?>
        </article>
    <?php endwhile;
    } ?>
</main>
<?php 
get_sidebar();
get_footer();

På raden #11kontrollerar vi om den aktuella användaren är inloggad och har den anpassade rollen member. Ändra rollen eller minimiregeln till vad du vill tillåta detta gränssnittsformulär för. Kom bara ihåg att även den lägsta rollen i WordPress, subscriber, har tillgång till att redigera sin profil i adminpanelen.

Så kort sagt, vi vill lägga till dessa fält på varje medlem på den anpassade front-end-sidan:

Hur ACF front-end-formulär fungerar

Du måste lägga till två funktionsanrop i mallen du vill ha i frontend-formuläret; [acf_form_head](https://www.advancedcustomfields.com/resources/acf_form_head/)()och [acf_form](https://www.advancedcustomfields.com/resources/acf_form/)().

Funktionen acf_form_head()måste placeras högst upp i din mall, före eventuell utmatning. Vanligtvis i en mall betyder detta före [get_header](https://developer.wordpress.org/reference/functions/get_header/)(). Funktionsanropet ser till att alla skript och stilar läggs till så att ACF-fälten kommer att renderas korrekt, samt all funktionalitet för att bearbeta, validera och skicka in arbete. Vi behöver inte lägga till några parametrar till den här funktionen.

Funktionen acf_form()är den som återger frontend-formuläret och ska placeras där du vill att formuläret ska visas. Den accepterar en mängd inställningar. Vi måste som ett minimum informera om vilka fält eller grupper som ska visas och var vi ska spara dem.

När det gäller att bestämma vilka fält som ska visas skulle du vanligtvis tillhandahålla en fältgrupp (egenskap field_groups). Men acf_form()funktionen stöder att tillhandahålla specifika enstaka fält också (egenskap fields). Du kan också tillhandahålla flera fält eller fältgrupper för att kombinera dem till samma form. På grund av detta field_groupsförväntar sig en array. Så även om du bara vill visa en fältgrupp, måste du ange detta ID eller slug inuti en array.

Den andra nödvändiga egenskapen som du måste ange formuläret acf_form()är var data ska laddas från och var de ska sparas, i egenskapen post_id. Låt dig inte luras av namnet "inlägg". Reglerna för post_idär desamma när du använder get_field(), om du är bekant med att arbeta med ACF sedan tidigare. Om fälten är för ett inlägg (inlägg, sida, anpassad inläggstyp) behöver du bara ange ID här. Men om du vill ladda och uppdatera data om användare, skulle du följa detta format: user_{user ID}. På samma sätt med fält för en kategori: category_{category ID}. Kolla in alla regler under rubriken "Få ett värde från olika objekt" i ACF:s dokument påget_field().

Lägger till ACF-gränssnittsformulär till vår mall

Först lägger vi till acf_form_head()högst upp, precis före get_header()– men efter sidmallsdeklarationen (rad #3). acf_form()Sedan lägger vi till två egenskaper på den plats där vi vill återge formuläret .

Vi måste ta reda på vårt fältgrupp-ID. Om du lade till fältgruppen efter kod (jag har ett inlägg som går på djupet om hur man lägger till ACF-fält efter kod) har du redan angett en fältgruppssnigel. Du skulle sedan tillhandahålla snigeln till field_groupsfastigheten, i en array. Om du lade till fältgruppen i adminpanelen måste du öppna gruppen i webbläsaren och kontrollera URL:en. Vi är intresserade av ID:t som visas efter " ?post=":

I mitt exempel är ID:t 1145. Sedan är det vad jag tillhandahåller i utbudet av field_groups.

PS: Jag rekommenderar inte hårdkodning av ett ID eftersom detta ID kommer att vara olika i varje WordPress-instans! Om du arbetar med en lokal installation samt en iscensättning och produktionsserver, skulle jag definitivt rekommendera att lägga till fälten med kod istället. På så sätt kan du definiera ett fältgruppsnamn och det kommer att fungera överallt.

När det gäller post_idfastigheten kan jag få det aktuella användar-ID med WordPress-funktionen [get_current_user_id](https://developer.wordpress.org/reference/functions/get_current_user_id/)(). Jag sammanfogar strängen ’ user_’ och returen av denna funktion som post_id.

<?php 
/* Template Name: ACF Profile Page */
acf_form_head();
get_header(); ?>
<main class="content">
    <?php if (have_posts()) { 
        while (have_posts()): the_post(); ?>
        <article id="post-<?php the_ID() ?>" <?php post_class(); ?>>
            <h2 class="page-title"><?php the_title(); ?></h2>
            <?php the_content(''); ?>
            <?php 
            if (is_user_logged_in() && current_user_can('member')) {
                $current_user_id = get_current_user_id();
                acf_form([
                    'field_groups' => [1145],
                    'post_id' => 'user_'. $current_user_id
                ]);
            }
            ?>
        </article>
    <?php endwhile;
    } ?>
</main>
<?php 
get_sidebar();
get_footer();

Och det är i princip det!

Om jag besöker den här sidan inloggad som medlemsanvändare skulle jag få de aktuella värdena för den användaren. Alla ACF-fälttyper fungerar och ser bra ut. Och jag kan uppdatera värdena med hjälp av front-end-formuläret och se att de också uppdateras i admin.

Ytterligare anpassning av formuläret

Vi kan ytterligare finjustera inställningarna som skickas till acf_form(). Se ACF:s dokumentation på acf_form() för att se alla möjliga inställningar.

För tillfället visar vårt användarprofilformulär "Inlägg uppdaterat" när inställningarna skickas. Detta är inte vettigt för profilinställningar. Vi kan anpassa meddelandet med fastigheten updated_message.

acf_form([
    'field_groups' => [1145],
    'post_id' => 'user_'. $current_user_id,
    'updated_message' => __('User profile updated.', 'txtdomain')
]);

Om du vill kan du definiera en annan URL att omdirigera till efter att formuläret har skickats. Som standard laddas samma sida om med GET-parametern ’ ?updated=true’. Du kan ange en specifik URL till en tacksida, eller om formuläret är för ett inlägg kanske du vill omdirigera till att visa det inlägget. Vi kan tillhandahålla webbadressen i fastigheten return.

acf_form([
    'field_groups' => [1145],
    'post_id' => 'user_'. $current_user_id,
    'return' => home_url('thank-you')
]);

Om vi ​​vill ha en annan text på formulärsändningsknappen kan vi ange detta i egenskapen submit_value.

acf_form([
    'field_groups' => [1145],
    'post_id' => 'user_'. $current_user_id,
    'submit_value' => __('Update profile', 'txtdomain')
]);

Du kan också säga acf_form()till att inte rendera <form>taggen. Om du vill kombinera ACF:s formulär med ditt eget anpassade formulär kan du ställa formin falseoch skriva ut <form>och <input type="submit"/>manuellt. Om du gör detta kommer ACF fortfarande att kunna uppdatera värdena, men du måste ta hand om att uppdatera eventuella andra fält i ditt anpassade formulär.

<form method="POST">
    <input type="text" name="my-custom-input" value="" />
    <?php
    acf_form([
        'field_groups' => [1145],
        'post_id' => 'user_'. $current_user_id,
        'form' => false
    ]);
    ?>
    <input type="submit" value="<?php _e('Submit', 'txtdomain'); ?>" />
</form>

Utlöser åtgärder vid formulärinlämningar

Ibland kanske du vill utlösa någon anpassad funktion eller händelser när ett gränssnittsformulär uppdateras. Ett vanligt exempel är att skriva en funktion som skickar ett e-postmeddelande vid varje formulärinlämning.

Avancerade anpassade fält erbjuder två användbara krokar för när fält uppdateras; åtgärden [acf/save_post](https://www.advancedcustomfields.com/resources/acf-save_post/)och filtret [acf/pre_save_post](https://www.advancedcustomfields.com/resources/acf-pre_save_post/). Återigen, låt dig inte luras av namnet "inlägg". De utlöses för alla ACF-fältuppdateringar inklusive fält för en användare, kategori, meny och så vidare.

Filtret acf/pre_save_postkörs endast på front-end-formulär med acf_form(). Som parameter till detta filter får vi post_id, samma värde som vi skickade post_idin acf_form()ovan. Filtret förväntar sig att du kommer tillbaka post_id. Kom ihåg att vi måste analysera detta om vi inte hänvisar till ett inläggs-ID. Till exempel för användare skulle du behöva göra något som:

add_filter('acf/pre_save_post', function($post_id) {
    if (strpos($post_id, 'user_') === false) {
        return $post_id;
    }
 
    $user_id = intval(substr($post_id, 5));  // Extracts the user ID
 
    // Do your thing. You'll find the submitted values in $_POST
 
    return $post_id;
});

Alternativt kan du använda kroken acf/save_post– men kom ihåg att den utlöses i admin också. Som parameter till denna krok får du post_id, samma som acf/pre_save_post. En viktig sak att komma ihåg när du använder acf/save_postär att du kan använda krokprioriteten för att kontrollera om din funktion körs innan fält sparas, eller efter. En funktion kopplad till prioritet 10 eller högre kommer att triggas efter att fält har sparats. Och en prioritet på mindre än 10 kommer att utlösas innan ACF sparar värdena.

add_action('acf/save_post', function($post_id) {
    // You can fetch the values with standard get_field()
});
 
add_action('acf/save_post', function($post_id) {
    // You can access the submitted values in $_POST
}, 8);

När du har kopplat funktionen innan du sparar (prioritet mindre än 10) kan du jämföra de inskickade värdena med vad ACF kommer att spara. Du kan göra get_field()för att få det aktuella värdet och jämföra dem med motsvarande värde i $_POST.

Om du bara vill göra något när fälten uppdaterades i front-end, kan du helt enkelt kontrollera om vi är admin med [is_admin](https://developer.wordpress.org/reference/functions/is_admin/)(). Nedan är ett exempel på hur du skulle gå tillväga för att ställa in e-postmeddelanden när en användare uppdaterar sina inställningar i front-end;

add_action('acf/save_post', function($post_id) {
    if (strpos($post_id, 'user_') === false) {
        return $post_id;
    }
 
    if (is_admin()) {
        return;  // Bail if we are updating in admin
    }
 
    $user_id = intval(substr($post_id, 5));
 
    // Use get_field() to get the saved/submitted values if needed
    // Then use wp_mail() to send an email
});