W tym samouczku pokażę Ci, jak utworzyć formularz front-endowy za pomocą Advanced Custom Fields (ACF). Omówię szczegółowo, jak to działa i jak można go dostosować do własnych potrzeb.
Advanced Custom Fields (ACF) to darmowa wtyczka, która pomaga dodawać ustawienia pól wielu typów do prawie każdego rodzaju treści w WordPress. Możesz dodawać pola do postów, taksonomii, menu, widżetów, użytkowników, a nawet niestandardowych stron administracyjnych. Jego głównym zastosowaniem jest administrator, ale można go również używać do generowania pól w interfejsie użytkownika.
Istnieje wiele aplikacji do dodawania pól ACF do interfejsu użytkownika; możesz dodać formularz, aby tworzyć i aktualizować posty, kategorie lub użytkowników. Za pomocą niektórych kodów możesz nawet utworzyć ogólny formularz kontaktowy, w którym odpowiedzi są zapisywane jako posty niestandardowego typu, a kod wyzwala powiadomienia e-mail w odpowiedziach na formularze. Tak jak zwykły formularz kontaktowy. Częstym zastosowaniem jest korzystanie z funkcji formularzy frontonu ACF do tworzenia formularzy i umożliwiania odwiedzającym tworzenia lub edytowania zawartości witryny bez logowania. Ale używaj tego ostrożnie. To łatwo otwiera się na spam i nadużycia, a w najgorszym przypadku odwiedzający mogą zniszczyć zawartość lub ustawienia Twojej witryny. Powinieneś przynajmniej wymagać od odwiedzających, aby logowali się z ważnymi użytkownikami, aby uzyskać dostęp do formularzy, które mogą zmieniać krytyczne treści WordPress (profil użytkownika, posty itp.).
Co zrobimy
Zakładam, że witryna WordPress zdefiniowała zestaw dodatkowych pól dla użytkowników o niestandardowej roli (’ member’) przy użyciu ACF. Ci użytkownicy nie mają w ogóle dostępu administracyjnego, ale chcemy zaoferować im możliwość edytowania własnych pól w ich profilu. Rozwiązaniem, na które się zdecydowałem, jest stworzenie niestandardowego szablonu strony do aktualizacji ich profilu, pokazującego formularz tylko wtedy, gdy są zalogowani i mają odpowiednią rolę.
W tym samouczku jest to dość proste, więc nie będę zawierał przykładu dodawania standardowych pól profilu użytkownika w WordPress (e-mail, hasło itp.). To trochę wykracza poza zakres tego samouczka. Zezwalam tylko na edycję pól ACF na tej stronie edycji profilu.
W ACF stworzyłem grupę pól z zestawem ustawień dla użytkowników członkowskich:
W moim motywie mam niestandardowy szablon strony, który obecnie wygląda tak – w tej chwili jest to zwykły, standardowy szablon pojedynczej strony;
<?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();W linii #11sprawdzamy, czy aktualny użytkownik jest zalogowany i ma niestandardową rolę member. Zmień rolę lub regułę minimalną na dowolną, na którą chcesz zezwolić w tym formularzu frontonu. Pamiętaj tylko, że nawet najniższa rola w WordPressie subscriber, ma dostęp do edycji swojego profilu w panelu administracyjnym.
Krótko mówiąc, chcemy dodać te pola na każdym członku do tej niestandardowej strony frontonu:
Jak działają formularze front-end ACF
Musisz dodać dwa wywołania funkcji w szablonie, który ma być formularzem frontonu; [acf_form_head](https://www.advancedcustomfields.com/resources/acf_form_head/)()i [acf_form](https://www.advancedcustomfields.com/resources/acf_form/)().
Funkcja acf_form_head()musi być umieszczona na samej górze szablonu, przed jakimkolwiek wyjściem. Zwykle w szablonie oznacza to przed [get_header](https://developer.wordpress.org/reference/functions/get_header/)(). Wywołanie funkcji zapewnia dodanie wszystkich skryptów i stylów, aby pola ACF były renderowane poprawnie, a także wszystkie funkcje przetwarzania, walidacji i przesyłania pracy. Do tej funkcji nie musimy dodawać żadnych parametrów.
Funkcja acf_form()jest tą, która renderuje formularz frontonu i powinna być umieszczona w miejscu, w którym ma się pojawić formularz. Akceptuje szereg ustawień. Musimy co najmniej informować o tym, które pola lub grupy pokazać i gdzie je zapisać.
Jeśli chodzi o decydowanie, które pola mają być wyświetlane, zwykle podajesz grupę pól (właściwość field_groups). Ale acf_form()funkcja obsługuje również dostarczanie określonych pojedynczych pól (właściwość fields). Możesz również podać wiele pól lub grup pól, aby połączyć je w ten sam formularz. Z tego powodu field_groupsoczekuje tablicy. Więc nawet jeśli chcesz pokazać tylko jedną grupę pól, musisz podać ten identyfikator lub informację o pracy w tablicy.
Drugą wymaganą właściwością, którą musisz podać w formularzu acf_form(), jest miejsce, z którego dane mają zostać załadowane i gdzie powinny zostać zapisane, we właściwości post_id. Nie daj się zwieść nazwie „post". Zasady dla post_idsą takie same, gdy używasz get_field(), jeśli znasz wcześniej pracę z ACF. Jeśli pola dotyczą wpisu (post, strona, post niestandardowy), wystarczy podać tutaj identyfikator. Ale jeśli chcesz ładować i aktualizować dane użytkowników, użyj tego formatu: user_{user ID}. Podobnie z polami dla kategorii: category_{category ID}. Sprawdź wszystkie zasady pod nagłówkiem „Uzyskaj wartość z różnych obiektów” w dokumentacji ACF dotyczącejget_field().
Dodanie formularza front-end ACF do naszego szablonu
Najpierw dodajemy acf_form_head()na samej górze, tuż przed get_header()– ale za deklaracją szablonu strony (linia #3). Następnie w miejscu, w którym chcemy wyrenderować formularz dodajemy acf_form()dwie właściwości.
Musimy znaleźć nasz identyfikator grupy terenowej. Jeśli dodałeś grupę pól według kodu (mam post szczegółowo o tym, jak dodać pola ACF według kodu ), masz już slug grupy pól. Następnie należy podać informację o pracy do field_groupswłaściwości w postaci tablicy. Jeśli dodałeś grupę pól w panelu administracyjnym, musisz otworzyć grupę w przeglądarce i sprawdzić adres URL. Interesuje nas identyfikator, który pojawia się po „ ?post=„:
W moim przykładzie identyfikator to 1145. To właśnie dostarczam w tablicy field_groups.
PS: Nie polecam zakodowania identyfikatora na sztywno, ponieważ ten identyfikator będzie inny w każdej instancji WordPressa! Jeśli pracujesz na lokalnej instalacji, a także na serwerze pomostowym i produkcyjnym, zdecydowanie polecam zamiast tego dodanie pól według kodu. W ten sposób możesz zdefiniować nazwę grupy pól, która będzie działać wszędzie.
Jeśli chodzi o post_idnieruchomość, to mogę uzyskać aktualny identyfikator użytkownika za pomocą funkcji WordPress [get_current_user_id](https://developer.wordpress.org/reference/functions/get_current_user_id/)(). Łączę ciąg ’ user_’ i zwrot tej funkcji jako 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();I to w zasadzie to!
Jeśli odwiedzę tę stronę będąc zalogowanym jako członek, otrzymam aktualne wartości dla tego użytkownika. Wszystkie typy pól ACF działają i dobrze wyglądają. Mogę zaktualizować wartości za pomocą formularza front-end i zobaczyć, że są one również aktualizowane w admin.
Dalsze dostosowywanie formularza
Możemy dalej modyfikować ustawienia przekazywane do acf_form(). Zapoznaj się z dokumentacją ACF dotyczącą acf_form(), aby zobaczyć wszystkie możliwe ustawienia.
W tej chwili nasz formularz profilu użytkownika wyświetla „Opublikuj aktualizację” po przesłaniu ustawień. Nie ma to sensu w przypadku ustawień profilu. Możemy dostosować wiadomość za pomocą właściwości updated_message.
acf_form([
'field_groups' => [1145],
'post_id' => 'user_'. $current_user_id,
'updated_message' => __('User profile updated.', 'txtdomain')
]);Jeśli chcesz, możesz zdefiniować inny adres URL do przekierowania po przesłaniu formularza. Domyślnie ta sama strona ładuje się ponownie z parametrem GET „ ?updated=true„. Możesz określić konkretny adres URL strony z podziękowaniami lub, jeśli formularz dotyczy posta, możesz przekierować go do wyświetlenia tego posta. Możemy podać adres URL we właściwości return.
acf_form([
'field_groups' => [1145],
'post_id' => 'user_'. $current_user_id,
'return' => home_url('thank-you')
]);Jeśli chcemy mieć inny tekst na przycisku przesyłania formularza, możemy to określić we właściwości submit_value.
acf_form([
'field_groups' => [1145],
'post_id' => 'user_'. $current_user_id,
'submit_value' => __('Update profile', 'txtdomain')
]);Możesz również powiedzieć, acf_form()aby nie renderować <form>tagu. Jeśli chcesz połączyć formularz ACF z własnym niestandardowym formularzem, możesz ustawić formi falsewpisać <form>i <input type="submit"/>ręcznie. Jeśli to zrobisz, ACF nadal będzie mógł aktualizować wartości, ale musisz zadbać o aktualizację wszystkich innych pól w formularzu niestandardowym.
<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>Wyzwalanie działań po przesłaniu formularza
Czasami możesz chcieć wyzwolić jakąś niestandardową funkcję lub zdarzenia, gdy formularz frontonu zostanie zaktualizowany. Typowym przykładem jest napisanie funkcji, która wysyła powiadomienie e-mail po każdym przesłaniu formularza.
Zaawansowane pola niestandardowe oferują dwa przydatne punkty zaczepienia, gdy pola są aktualizowane; działanie [acf/save_post](https://www.advancedcustomfields.com/resources/acf-save_post/)i filtr [acf/pre_save_post](https://www.advancedcustomfields.com/resources/acf-pre_save_post/). Ponownie, nie daj się zwieść nazwie „post”. Są one wyzwalane przy każdej aktualizacji pól ACF, w tym pól użytkownika, kategorii, menu itd.
Filtr acf/pre_save_postjest uruchamiany tylko w formularzach frontonu przy użyciu acf_form(). Jako parametr tego filtra otrzymujemy post_id, taką samą wartość, jaką przekazaliśmy powyżej post_id. acf_form()Filtr oczekuje, że wrócisz post_id. Pamiętaj, że musimy to przeanalizować, jeśli nie mamy na myśli identyfikatora poczty. Na przykład dla użytkownika musisz zrobić coś takiego:
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;
});Alternatywnie możesz użyć haka acf/save_post– ale pamiętaj, że jest on również uruchamiany w adminie. Jako parametr tego haka otrzymasz post_id, tak samo jak acf/pre_save_post. Ważną rzeczą do zapamiętania podczas używania acf/save_postjest to, że możesz użyć priorytetu przechwycenia, aby kontrolować, czy twoja funkcja jest uruchamiana przed zapisaniem pól, czy po. Funkcja podpięta o priorytecie 10 lub wyższym zostanie uruchomiona po zapisaniu pól. Priorytet mniejszy niż 10 zostanie uruchomiony przed zapisaniem wartości przez ACF.
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);Po zaczepieniu funkcji przed zapisem (priorytet mniejszy niż 10) możesz porównać przesłane wartości z tym, co ACF zapisze. Możesz zrobić, get_field()aby uzyskać aktualną wartość i porównać je z odpowiednią wartością w $_POST.
Jeśli chcesz coś zrobić tylko wtedy, gdy pola zostały zaktualizowane we front-endzie, możesz po prostu sprawdzić, czy jesteśmy w admin z [is_admin](https://developer.wordpress.org/reference/functions/is_admin/)(). Poniżej znajduje się przykład konfiguracji powiadomień e-mail, gdy użytkownik aktualizuje swoje ustawienia w interfejsie użytkownika;
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
});