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;
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.
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.
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.
Jeśli chcemy mieć inny tekst na przycisku przesyłania formularza, możemy to określić we właściwości submit_value.
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.
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
});