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:
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ówadmin_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ą na $_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ść wtyczkiinc / admin/*– funkcjonalność związana z obszarem administratorainc / frontend/*– funkcjonalność związana z przestrzeniami ogólnodostępnymiinc / common/*– funkcjonalność współdzielona między administratorem a frontendem
Wtyczka ma menu administratora najwyższego poziomu z dwoma pozycjami menu dla stron formularza.
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 ” formularz HTML Submit ” strona menu dla wtyczki, musiałem również określić wywołanie zwrotne, aby załadować zawartość strony. Tutaj dodawany jest formularz.
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:
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.
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:
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.
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 action 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');
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.
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.
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:
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ówwp_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 doadmin-ajax.phpzamiastAdmin-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.
Używanie Javascripript i jQuery, aby opublikować formularz
Oto JavaScript, którego użyłem do przesłania formularza za pośrednictwem AJAX.
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.
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_responsedla zalogowanych użytkownikówwp_ajax_nopriv_nds_form_responsedla niezalogowanych użytkowników
Plik JavaScript znajduje się w enqueue_scripts() metoda Klasa-admin.php jak poniżej:
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ż.
A w formularzu użyłem $_POST['ajaxrequest'] to zostało ustawione ręcznie w JavaScript, aby odróżnić normalne i AJAX żądanie.
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
