WordPress zapewnia niesamowite wsparcie dla pracy z formularzami w aplikacji. Niezależnie od tego, czy dodajesz formularz w obszarze administracyjnym, czy publicznym, wbudowany mechanizm ze skryptami admin-post i admin-ajax pozwoli Ci sprawnie obsługiwać żądania formularzy.

W tym artykule pokażę Ci, jak obsługiwać niestandardowe zgłoszenia formularzy za pomocą interfejsu API WordPress. Przeprowadzę Cię przez proces dodawania niestandardowego formularza w obszarze administracyjnym wtyczki, obsługuj przesyłanie formularza za pośrednictwem HTML, a także żądania AJAX, i napisz obsługę formularza w PHP, aby zweryfikować, dezynfekować i przetwarzać dane wejściowe formularza.

Podczas gdy pozostanę w domenach administratora WordPress,te same koncepcje mają zastosowanie podczas pracy z formularzami w obszarach publicznych.

Będę również korzystać z obiektowych konstrukcji programistycznych dla wtyczki; jednak, można osiągnąć ten sam wynik za pomocą kodu proceduralnego, jak również. Wtyczkę praktyki można pobrać STĄD, aby śledzić wraz z artykułem.

Uwaga: Ten artykuł jest przeznaczony dla średnio-zaawansowanych programistów WordPress. Zakłada, że masz praktyczną znajomość HTML, JavaScript, jQuery, PHP i WordPress Plugin API. Jeśli chcesz odświeżyć, polecam zapoznanie się z poniższymi:

  • Rozwój WordPress dla początkujących: pierwsze kroki
  • Rozwój WordPress dla początkujących: budowanie wtyczek
  • Javascript dla programistów WordPress: używanie AJAX
  • Zaawansowany rozwój WordPress: Wprowadzenie do programowania obiektowego

Zacznijmy od pierwszego zrozumienia wbudowanego mechanizmu WordPress do obsługi zwykłego żądania postu formularza.

Formularz zgłoszenia z admin-post.php w WordPress

Gama hooków dostępnych w WordPressie daje Ci dużą kontrolę nad przepływem realizacji twojej aplikacji. Nie inaczej jest w przypadku przetwarzania formularzy. Wszystko, czego potrzebujesz, to poprawny hook do “hook into” i Dodaj niestandardowy moduł obsługi formularzy. Haki do Przetwarzania niestandardowych formularzy mają charakter dynamiczny, co oznacza, że nazwa haka częściowo zależy od Ciebie.

Aby przetworzyć zgłoszenia związane tylko z formularzem, potrzebujesz dokładniejszej kontroli, jak pokazano poniżej:

WordPress form submission with admin-post.php
Złożenie formularza WordPress z adminem-post.php

Odbywa się to poprzez skierowanie formularza do Admin-post.php plik znajdujący się w wp-admin katalog WordPress, a w tym niestandardowa nazwa dla działanie w formie. W ten sposób WordPress uruchomi dwa Hooki akcji w oparciu o status zalogowanego użytkownika:

  • admin_post_{$action} dla zalogowanych użytkowników
  • admin_post_nopriv_{$action} dla niezalogowanych użytkowników

Gdzie $akcja to nazwa akcji, która została przekazana przez formularz.

Następnie można użyć add_action aby powiązać moduł obsługi formularzy PHP z wyzwalanymi hookami, gdzie będziesz mieć pełną kontrolę nad przetwarzaniem danych formularza za pomocą $_GET oraz $_POST zmienne.

Jak można się już domyślić, pomimo swojej nazwy, admin-post.php może obsługiwać żądania POST i GET, a także żądania dotyczące obszarów administracyjnych i innych niż admin w aplikacji.

Zbadajmy to za pomocą niestandardowej wtyczki.

Obiektowa Struktura Wtyczek

Moim celem jest pomoc w zrozumieniu wszystkiego, co dzieje się za przetwarzaniem niestandardowych formularzy w WordPress z Ajaxem i bez niego. W tym artykule przygotowałem niestandardową wtyczkę, którą można pobrać STĄD, aby śledzić. Polecam otworzyć go w odpowiednim edytorze i zainstalować go tylko w lokalnej konfiguracji WordPress.

Zbudowałem wtyczkę przy użyciu obiektowych praktyk programowania za pomocą plugin boilerplate. Punkty wyjścia Boilerplate są jednymi z wielu najlepszych praktyk wymienionych w podręczniku wtyczek WordPress. Są to świetny sposób na zapewnienie spójności wtyczek i zaoszczędzenie czasu na pisaniu standardowego kodu. Przez pewien okres możesz nawet napisać własną niestandardową płytę kotłową w oparciu o preferencje kodowania. To właśnie zrobiłem.

Wtyczka jest oparta na moim własnym szablonie wtyczki, który jest forkiem oryginalnego projektu WordPress Plugin Boilerplate. Jest podobny do oryginalnego projektu pod wieloma względami, ale ma również wsparcie dla przestrzeni nazw i automatycznego ładowania. W ten sposób nie muszę mieć unikalnych prefiksów dla każdej klasy lub funkcji i nie kończę z wieloma include oraz wymagaj Oświadczenia. Jednak minimalna wymagana wersja PHP dla mojej wtyczki to 5.6.0.

Uwaga: Jeśli nie używasz przestrzeni nazw lub kodu proceduralnego, musisz poprzedzić wszystko.

Oto jak wtyczka jest zorganizowana w backendzie:

  • inc / core/* – podstawowa funkcjonalność wtyczki
  • inc / admin/* – funkcjonalność związana z obszarem administratora
  • inc / frontend/* – funkcjonalność związana z przestrzeniami ogólnodostępnymi
  • inc / common/* – funkcjonalność współdzielona między administratorem a frontendem
oop-based-plugin structure
Struktura wtyczek w backendzie

Wtyczka ma menu administratora najwyższego poziomu z dwoma pozycjami menu dla stron formularza.

admin menu structure of the plugin
Struktura menu administratora wtyczki

Aby zobaczyć, jak dodałem strony menu administratora, spójrz na define_admin_hooks() metoda w inc / core / class-init.php oraz add_plugin_admin_menu() metoda w inc / admin / class-admin.php wtyczki.

Jeśli chcesz dowiedzieć się więcej o dodawaniu stron administratora do swojej wtyczki, zapoznaj się z naszym artykułem na temat tworzenia stron administratora WordPress tutaj.

Dodanie formularza do strony administratora wtyczki

Kiedy dodałem stronę menu “HTML form Submit” dla wtyczki, musiałem również określić wywołanie zwrotne, aby załadować zawartość strony. Tutaj dodawany jest formularz.

Ładowanie gist nuancedesignstudio / afc5dac6bc5c36291b824e21a2832555

Jednak zamiast bezpośrednio pisać HTML w html_form_page_content metoda, użyłem innego pliku partials-html-form-view.phppołożony w inc / admin/views dla formularza HTML i załadował go w wywołaniu zwrotnym, jak pokazano poniżej:

Ładowanie gist nuancedesignstudio / 9361c83a07f8c6343a79a59bfbb09d41

Jest to czysto preferencja kodowania. To pozwala mi zachować mój kod czytelny przez oddzielenie HTML, i nie robi różnicy do wyjścia formularza na stronie wtyczki.

plugin admin page with html form
Formularz HTML na stronie Administratora wtyczki

Zrozumienie bezpieczeństwa, struktury i składania formularzy

Formularz, który został dodany powyżej, ma pole wyboru z rozwijaną listą istniejących użytkowników WordPress i dwoma polami tekstowymi do wprowadzania przez użytkownika. Jednak ten prosty przykład ma wiele dzieje się za kulisami. Poniższy kod formularza jest oczywisty, więc przejdźmy przez Ważne elementy:

Ładowanie gist nuancedesignstudio/48ebf27160bcc2a99e20ca0845b252e3

Bezpieczeństwo Formularza

Najważniejszą rzeczą, o której należy pamiętać, gdy mamy do czynienia z formularzami w obszarze administracyjnym WordPress, jest bezpieczeństwo. Zabezpiecz swój formularz za pomocą kombinacji zarówno WordPress Nonces, jak i current_user_can ($capability ). W moim przykładzie ograniczyłem wpis do formularza z if( current_user_can( 'edit_users' ) ), tzn. formularz zostanie załadowany tylko wtedy, gdy zalogowany użytkownik ma edit_users możliwości.

Wygenerowałem również niestandardowy nonce za pomocą wp_create_nonce() a następnie dodano go jako ukryte pole formularza. Zamiast tego możesz użyć wp_nonce_field() aby dodać go bezpośrednio. Oto świetny artykuł, aby szczegółowo zrozumieć Nonces.

Struktura Formularza

I ‘ ve prefixed wszystkie elementy formularza z nazwą wtyczki, aby zapewnić wyjątkowość. Jest to ponownie osobiste preferencje kodowania, ponieważ mogę być pewien kierowania tylko moich elementów formularza za pomocą JavaScript. Używałem również HTML5 wymagane atrybut pozostawiający walidację formularza przeglądarce.

plugin form inspect view in chrome
Sprawdzanie formularza administratora

Złożenie Formularza

Formularz należy przesłać do Admin-post.php korzystanie z admin_url ('Admin-post.php' ) funkcja zamiast twardego kodowania adresu URL. Gdy WordPress otrzyma formularz, będzie szukał wartości działanie pole do wyzwalania hooków formularza. W moim przypadku wygeneruje admin_post_nds_form_response hak. Gdyby była to strona otwarta dla publiczności, wywołałaby admin_post_nopriv_nds_form_response hak.

Obsługa formularza dla żądania POST

Na tym etapie, jeśli wyślesz formularz, zostaniesz przekierowany do pustej strony z adresem URL strony ustawionym na admin-post.php. Dzieje się tak dlatego, że nie ma jeszcze funkcji obsługi formularzy do przetworzenia żądania. Aby przetworzyć żądanie, zarejestrowałem swój własny program obsługi the_form_response w define_admin_hooks() metoda class-init.php o tak.: $this->loader->add_action ('admin_post_nds_form_response', $plugin_admin,'the_form_response');

Gdybyś korzystał z kodu proceduralnego, zrobiłbyś po prostu add_action ('admin_post_nds_form_response', 'the_form_response');

Ładowanie gist nuancedesignstudio/058d846d2b1059a097475e6e327499d7

the_form_response () gdzie będę miał pełny dostęp do danych formularza poprzez $_POST lub $_GET superglobale. Jak pokazano poniżej, dodałem punkt przerwania do wywołania zwrotnego w moim IDE, aby mieć pewność, że hook będzie działał zgodnie z oczekiwaniami.

pausing php script execution
Sprawdzanie danych wejściowych formularza za pomocą XDebug

Walidacja formularzy i dezynfekcja danych wejściowych

Przed wykonaniem jakichkolwiek operacji musisz zweryfikować brak i poprawnie wyczyścić dane wejściowe użytkownika. Skorzystałem z wp_verify_nonce ($nonce_name, $nonce_action ) funkcja weryfikacji nonce, oraz sanitize_key() oraz sanitize_text_field () funkcje do dezynfekcji danych wejściowych użytkownika dostępnych w zmiennej $_POST. Jeśli weryfikacja nonce nie powiedzie się, użytkownik otrzyma komunikat o błędzie jako odpowiedź serwera, używając wp_die () Funkcja WordPress.

Uwaga: uzyskałem dostęp do danych formularza za pomocą $_POST zmienna. Gdybym przesłał formularz za pomocą metoda get, Zamiast tego skorzystałbym z $_GET lub $_REQUEST zmienna globalna.

Tylko wtedy, gdy jestem pewien, że wszystko jest w porządku, wykonam operację WordPress, taką jak dodanie user-meta do wybranego użytkownika.

Aby dowiedzieć się więcej o dezynfekcji danych wejściowych, zalecam przeczytanie Kodeksu WordPress: sprawdzanie dezynfekcji i usuwanie danych Użytkownika tutaj.

Przesyłanie odpowiedzi serwera

Po wykonaniu operacji na serwerze ważne jest, aby wysłać odpowiedź serwera z powrotem do użytkownika. Aby to zrobić, musisz najpierw przekierować użytkownika z powrotem na stronę administratora lub taką, która zawiera informacje zwrotne. Przekierowałem użytkownika z powrotem na stronę wtyczki i użyłem WordPress Admin ogłoszenia aby wyświetlić informacje zwrotne od serwera. Odpowiedź serwera w moim przykładzie po prostu wyświetla zmienną $_POST jako powiadomienie administratora WordPress.

form post server response
Odpowiedź serwera z modułu obsługi formularzy

Progressive Enhancement

Na tym etapie mam w pełni funkcjonalny formularz w obszarze administracyjnym mojej wtyczki WordPress. Jest bezpieczny i przesyła poprawnie do mojego modułu obsługi formularzy, gdzie dane wejściowe są dezynfekowane, a na koniec odpowiedź serwera jest widoczna. Formularz będzie działać po wyjęciu z pudełka we wszystkich przeglądarkach, które mają wsparcie dla HTML5. Ale jest wiele, co mogę zrobić, aby poprawić wrażenia użytkownika, takie jak dodanie obsługi AJAX.

Takie podejście polegające na ustanowieniu podstawowego poziomu doświadczenia użytkownika, który jest dostępny we wszystkich przeglądarkach, a następnie dodaniu zaawansowanych funkcji dla przeglądarek, które go obsługują, nazywa się Progressive Enhancement.

Uwaga: założyłem, że moi użytkownicy używają nowoczesnych przeglądarek z obsługą HTML5. Jeśli jednak formularz musiałby być renderowany w starszej przeglądarce, wbudowana Walidacja wejściowa HTML5 dla wymaganych pól zostałaby przerwana. Can I Use to świetna strona internetowa, której można użyć do porównania funkcji internetowych dostępnych w różnych przeglądarkach i wersjach przeglądarki.

Przesyłanie formularzy za pomocą AJAX (admin-ajax.php) w WordPress

AJAX w WordPress jest obsługiwany przez wp-admin/admin-ajax.php plik. Oto przegląd tego, jak niestandardowe formularze mogą być przetwarzane za pomocą AJAX w WordPress:

form support with ajax
Składanie formularzy z obsługą AJAX w WordPress

Zauważysz, że jest to bardzo podobne do tego, jak formularze są przetwarzane za pomocą Admin-post.php. Gdy WordPress otrzyma żądanie AJAX stworzy dwa Hooki na podstawie dostarczonej akcji:

  • wp_ajax_{$action} dla zalogowanych użytkowników
  • wp_ajax_nopriv_{$action} dla niezalogowanych użytkowników

Gdzie $akcja to nazwa akcji, która została uchwalona.

Dodanie obsługi AJAX do formularza wtyczki

Druga strona menu Wtyczki “Ajax form Submit” ładuje formularz przesłany za pośrednictwem żądania AJAX. Jest dodawany do strony menu w taki sam sposób, jak omówiono wcześniej i wykorzystuje partials-ajax-form-view.php plik do załadowania zawartości formularza. Jeśli spojrzysz na ten plik, zauważysz, że jest prawie identyczny z wcześniejszym formularzem, z jedynymi różnicami w postaci id atrybut i tytuł. Teraz, gdy mogę zidentyfikować jeden formularz od drugiego, mogę przetworzyć tylko drugi formularz za pomocą AJAX przy użyciu JavaScript.

Aby dodać obsługę AJAX, wykonałem następujące kroki:

  • Zapytanie o plik JavaScript, aby załadować jQuery
  • Używana obsługa zdarzeń jQuery submit, aby uniemożliwić normalne przesyłanie formularzy
  • Używany jQuery.ajax() aby przesłać formularz do admin-ajax.php zamiast Admin-post.php

Uwaga: Jeśli z jakiegoś powodu JavaScript jest wyłączony w przeglądarce, jQuery lub AJAX również będą niedostępne, ale formularz będzie nadal przesyłać normalnie. To dlatego, że zostawiłem adres URL zgłoszenia formularza jako Admin-post.php w formie HTML.

Korzystanie z JavaScript i jQuery, aby opublikować formularz

Oto JavaScript, którego użyłem do przesłania formularza za pośrednictwem AJAX.

Ładowanie gist nuancedesignstudio / c1a29b1433fd4db658fb41815055a3e6

wydarzenie.preventDefault(); jest to, co faktycznie uniemożliwia normalne złożenie formularza.

Zebrałem dane formularza za pomocą jQuery serialize() funkcja, ale istnieje wiele innych sposobów, aby to zrobić. Jednym z nich jest używanie interfejsu FORMDATA HTML5. To wykracza poza zakres tego artykułu, ale na pewno warto się temu przyjrzeć.

var ajax_form_data = $("#nds_add_user_meta_ajax_form").serialize();

Dodałem również dodatkowe parametry URL do serializowanych danych, dzięki czemu mogę później odróżnić AJAX od zwykłego żądania w module obsługi formularzy PHP.

ajax_form_data=ajax_form_data+'&ajaxrequest=true&submit = Submit+Form';

Zazwyczaj X-Requested-With Nagłówek HTTP jest automatycznie ustawiany na XMLHttpRequest przez Bibliotekę AJAX. Można to również wykorzystać do identyfikacji żądania AJAX, ale nie zawsze jest to wiarygodne.

Metoda ajax() jQuery wyśle żądanie do serwera.

Ładowanie gist nuancedesignstudio/9fb35cd0c0cd80a9e53b7ea51365f2c7

Aby otrzymać formularz do przesłania na admin-ajax.php, Użyłem tablicy params.ajaxurl które zostało przekazane z PHP za pomocą wp_localize_script.

Uwaga: dane formularza w moim przykładzie zawierają działanie że WordPress użyje do generowania hooków dla żądania AJAX. Następujące Hooki zostaną wywołane przez WordPress:

  • wp_ajax_nds_form_response dla zalogowanych użytkowników
  • wp_ajax_nopriv_nds_form_response dla niezalogowanych użytkowników

Plik JavaScript znajduje się w enqueue_scripts() metoda Klasa-admin.php jak poniżej:

Ładowanie gist nuancedesignstudio/99a46c09d583a65c2d0554f781ab6b85

Zmienna globalna ajaxurl

Możesz także użyć globalnej zmiennej JavaScript ajaxurl zamiast przekazywać adres URL dla admin-ajax.php z PHP. Jednak zmienna jest dostępna tylko w przypadku administratorów i jest niedostępna w przypadku AJAX na interfejsie.

W zależności od odpowiedzi z serwera, wywołania zwrotne obietnicy AJAX .zrobione () oraz .fail() wykonamy odpowiednio. W moim przykładzie, dla pomyślnego żądania, dodałem odpowiedź do pustego div kontener # nds_form_feedback to była część mojego HTML formularza. Na koniec pola są usuwane przez Resetowanie formularza.

Obsługa formularza dla żądania AJAX

Dodałem ten sam moduł obsługi formularzy the_form_response do żądania AJAX, jak również.

Ładowanie gist nuancedesignstudio/7dc320db5b1787f6cecb256b48b2970e

A w formularzu użyłem $_POST['ajaxrequest'] to zostało ustawione ręcznie w JavaScript, aby odróżnić normalne i AJAX żądanie.

Ładowanie gist nuancedesignstudio / ec6fe7654fdfcb93c7aa50041df8ec03
pausing script execution to verify ajax
Sprawdzanie poprawności żądania AJAX za pomocą punktu przerwania

To wszystko. W AJAX odpowiedź jest wyświetlana bez przeładowywania lub przekierowywania strony.

Jeśli JavaScript był wyłączony lub nie ładował się z jakiegoś powodu, $_POST['ajaxrequest'] nie byłby poprawny, a Formularz przesłałby normalnie pomijając specyficzny AJAX if (isset ($_POST['ajaxrequest']) & & $_POST ['ajaxrequest'] = = = 'true') blok kodu.

Z pewnością możesz zrobić o wiele więcej, aby poprawić wrażenia użytkownika, i polecam zapoznanie się z dokumentacją jQuery API dla AJAX tutaj.

Dodatkowe Zasoby

Przejrzeliśmy tu wiele spraw. AJAX jest dość rozległym tematem i jest zaimplementowany na kilka sposobów. Oto kilka przykładów użycia AJAX w WordPress:

  • Ładowanie postów WordPress dynamicznie za pomocą AJAX
  • Korzystanie AJAX z PHP w witrynie WordPress bez wtyczki
  • Jak używać AJAX w WordPress, aby załadować wyniki wyszukiwania
Czy korzystasz z niestandardowych formularzy na swojej stronie? Daj nam znać w komentarzach poniżej.

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…