Korzystanie z AJAX i PHP w witrynie WordPress tworzenie własnej wtyczki

Dobry design jest niewidoczny! To jak klimatyzator ustawiony na automatyczną regulację temperatury. Dopóki nie poczujesz się zbyt gorąco lub zimno, nie zwracasz na to uwagi, koncentrując się zamiast tego na zadaniu pod ręką lub po prostu ciesząc się czasem.

Dla użytkowników surfujących po Internecie, Ajax jest jak automatyczny Klimatyzator. Sprawia, że strony internetowe są płynniejsze i szybsze w użyciu, co zapewnia przyjemne wrażenia. A co najważniejsze, to po prostu działa!

Jeśli zamiast tego wolisz film, masz szczęście!

Dowiedz się, jak łatwo korzystać z Ajax:

  • Czym dokładnie jest Ajax?
  • Podstawy Ajax
  • Umiejętności potrzebne do pracy z Ajax w WordPress
  • Proces korzystania z Ajax w WordPress
  • Godne Uwagi Wtyczki WordPress, Które Używają Ajax

Czym dokładnie jest Ajax?

Ajax jest techniką tworzenia stron internetowych, która oznacza Asynchroniczne JavaScript And XML. Służy do tworzenia dynamicznych aplikacji internetowych, które są interaktywne i zabawne. Dzięki Ajax nie musisz czekać na przeładowanie strony, aby zobaczyć zmianę. Wszystko odbywa się automatycznie w tle bez zakłócania tego, co robisz, zwiększając tym samym komfort użytkowania.

Ajax w pracy!

Prawdopodobnie natknąłeś się już na Ajax w sieci. Funkcja autouzupełniania w wyszukiwarce Google jest chyba najbardziej popularna. Google Maps jest inny. Odświeżanie na żywo tweetów, komentarzy na Facebooku, postów Reddit, polubień na YouTube, wszystkie te niesamowite doświadczenia użytkowników są możliwe dzięki Ajax i powiązanym technologiom.

W tym poście Dam ci szybkie wprowadzenie do Ajaxu, wymień jego zalety, wyjaśnij, jak działa w WordPress, a następnie zanurkujemy z głową w stworzenie prostej wtyczki Ajax WordPress.

Brzmi zabawnie? Zaczynajmy.

Podstawy Ajax

Ajax wykorzystuje kombinację języków programowania, takich jak HTML / CSS, JavaScript, XML / JSON oraz język skryptowy po stronie serwera (PHP, ASP.NET, itp.). Działa poprzez wysyłanie danych z przeglądarki do serwera, który je przetwarza i odsyła odpowiedź. Ta odpowiedź jest używana przez przeglądarkę do aktualizacji strony internetowej bez jej ponownego ładowania.

Tak to zwykle bywa:

  • Akcja użytkownika uruchamia Zdarzenie w przeglądarce (takie jak kliknięcie przycisku).
  • Aktywuje się wywołanie Ajax, które wysyła żądanie do serwera, używając XML / JSON.
  • Skrypt po stronie serwera przetwarza to żądanie. W razie potrzeby może również uzyskać dostęp do bazy danych.
  • Następnie serwer wysyła odpowiedź z powrotem do przeglądarki.
  • Druga funkcja JavaScript, zwana funkcją zwrotną, odbiera odpowiedź i aktualizuje stronę internetową.
infographic illustrating the basics of Ajax

Wiele zalet Ajax

  1. Minimalizuje wykorzystanie przepustowości i optymalizuje operacje sieciowe, ponieważ serwery nie będą wymagane do przetwarzania dużych ilości danych.
  2. Oszczędność czasu zarówno dla użytkowników, jak i dla server, ponieważ użytkownik może natychmiast zobaczyć odpowiedź z serwera.
  3. Zwiększona wydajność. Ponieważ nie są wysyłane dane z całej strony, Ajax poprawia wydajność, szybkość i użyteczność stron internetowych/aplikacji.
  4. Zwiększona responsywność. Eliminując przeładowanie całej strony, Strony będą szybsze i bardziej responsywne, a tym samym bardziej przyjazne dla użytkownika.

Umiejętności potrzebne do pracy z Ajax w WordPress

  • Znajomość HTML, CSS i JavaScript (wystarczy jQuery)
  • Podstawowa znajomość formatów wymiany danych XML lub JSON
  • Know-how PHP dla skryptów po stronie serwera

Jeśli twoja znajomość jQuery lub PHP jest Dotknij i idź, nie martw się! Nadal możesz postępować zgodnie z logiką samouczka. Zapraszam do działu komentarzy, jeśli utknąłeś lub potrzebujesz pomocy 🙂

Intro do Ajax w WordPress

Rdzeń WordPress używa już Ajax, ale tylko na ekranach administratora. Na przykład, gdy moderujesz komentarze lub dodajesz / usuwasz elementy z kategorii lub postów, możesz zobaczyć natychmiastowe aktualizacje dzięki Ajax. Jest to również technologia stojąca za uwielbianą funkcją automatycznego zapisywania.

Ajax jest najczęściej używany z funkcjami jQuery na WordPress, ponieważ jest znacznie prostszy w porównaniu do VanillaJS. Co więcej, rdzeń WordPress jest już załadowany biblioteką jQuery.

Oto jak wygląda proces korzystania z Ajax w WordPress:

  1. Użytkownik uruchamia żądanie Ajax, które jest najpierw przekazywane do admin-ajax.php plik w wp-admin folder.
  2. Żądanie Ajax musi dostarczyć przynajmniej jedną część danych (przy użyciu metody GET lub POST). To żądanie nazywa się działanie.
  3. Kod w admin-ajax.php wykorzystuje działanie aby utworzyć dwa Hooki: wp_ajax_youraction oraz wp_ajax_nopriv_youraction. Proszę., youraction jest wartością zmiennej GET lub POST działanie.
  4. Pierwszy hak wp_ajax_youraction wykonuje tylko dla zalogowanych użytkowników, natomiast drugi hook wp_ajax_nopriv_youraction przeznaczony wyłącznie dla wylogowanych użytkowników. Jeśli chcesz atakować wszystkich użytkowników, musisz wystrzelić ich osobno.
  5. Zaplanuj funkcje haka, aby uzyskać wdzięczną degradację. Zapewnia to, że Twój kod będzie działał nawet w przeglądarkach z wyłączoną obsługą JavaScript.
Infographic illustrating how Ajax is used with WordPress

Stwórzmy wtyczkę Ajax WordPress

Każda wielka podróż zaczyna się od jednego kroku, podobnie jak nasza nauka. Zbudujmy podstawową wtyczkę WordPress o nazwie Post Likes Counter z następującymi funkcjami:

  • Zalogowani użytkownicy mogą polubić posty.
  • Wtyczka przechowuje zestawienie całkowitej liczby polubień postów i wyświetla je.
  • Licznik polubień postu jest aktualizowany natychmiast na front-endzie.
  • Wylogowani użytkownicy będą wyświetlać komunikat o błędzie, jeśli spróbują polubić post.

Aby rozpocząć, Utwórz pustą wtyczkę WP i aktywuj ją. Jeśli potrzebujesz pomocy w tym zakresie, możesz zapoznać się z naszym przewodnikiem rozwoju wtyczek WordPress. WordPress Codex ma również szczegółową stronę na temat pisania wtyczki WP.

Znajdź szablon postu swojego motywu

Następnie musisz znaleźć swój motyw single.php szablon post. Jest używany, gdy zapytany jest pojedynczy post, czyli tam, gdzie chcemy, aby nasz licznik polubień postu był. Ten plik można znaleźć w folderze głównym aktywnego motywu. Pozostaw otwarte do edycji.

Przygotuj szablon Post dla połączenia Ajax

Stwórzmy tutaj link, aby użytkownicy polubili posty. Jeśli użytkownik ma włączoną obsługę języka JavaScript, użyje pliku JavaScript, który utworzymy później; jeśli nie, po prostu podąży bezpośrednio za linkiem. Umieść poniższy kod w swoim singiel.php plik.

Ładowanie gist 1379ac822720e8c8c1860209a2bfe323

Alternatywnie możesz dodać ten kod do dowolnego części szablonu Twój singiel.php plik zawiera. Na przykład, jeśli używasz oficjalnego Twenty Nineteen motyw, możesz wstawić ten kod do motywu content-single.php plik. Do testowania tego kodu wtyczki wstawiłem go do tego pliku na samym końcu jego div.wpis-treść sekcji.

Adresowanie wywołania Ajax bez JavaScript

Kliknięcie w powyższy link przeniesie Cię do admin-ajax.php skrypt, ale nie zobaczysz żadnego użytecznego wyjścia, ponieważ nie utworzyłeś jeszcze żadnej funkcji do uruchomienia akcji.

Aby to zrobić, utwórz funkcję w pliku wtyczki i dodaj ją do dwóch haczyków, które zostały stworzone dla Ciebie przez WordPress. Postępuj zgodnie z poniższym kodem:

Ładowanie gist 5b77823b65250637eee4396d8abcc5a0

Jeśli wszystko się sprawdzi, gdy zalogowany użytkownik kliknie Polub ten Post link, podobny licznik nad nim powinien automatycznie wzrosnąć o 1. W przypadku przeglądarek z wyłączoną obsługą JavaScript strona zostanie odświeżona, ale nadal będzie wyświetlać zaktualizowaną liczbę like count.

Funkcja obsługi wylogowanych użytkowników nie robi tutaj zbyt wiele, z wyjątkiem wyświetlania komunikatu o błędzie. Ma służyć tylko jako przykład. Możesz oczywiście na tym skorzystać i dać odwiedzającym bardziej pomocne opcje.

Na koniec dodanie obsługi JavaScript

Jest to dobra praktyka, aby dodać wsparcie dla JavaScript pod koniec, jak to sprawia, że rzeczy znacznie jaśniejsze. Aby użyć Ajax na WordPress, musisz zapytać bibliotekę jQuery, a także niestandardowy plik JavaScript wtyczki. W tym celu przejdź do wtyczki i dołącz następujący skrypt:

Ładowanie gist c4ba96f5ac2997b294c70c90b82d43d3

Gdy to zrobisz, nadszedł czas, aby utworzyć liker_script.js Plik JavaScript. Następnie musisz przesłać ten plik do lokalizacji wskazanej w poprzednim kodzie (podpowiedź: jest to folder główny wtyczki). Oto kod do liker_script.js:

Ładowanie gist 9d3183eeca419da10b9ff997ef236b87

Na my_user_like() funkcja zdefiniowana w naszym pluginie powinna wysłać naszej przeglądarce odpowiedź w postaci tablicy wyników zakodowanej w JSON, która może być również używana jako obiekt JavaScript. Korzystając z tego, możemy zaktualizować post jak liczyć bez przeładowywania strony internetowej.

I to wszystko! Hurrayyyyyy!

Masz teraz włączone funkcje Ajax dla wtyczki. Oczywiście możesz to rozwinąć i dodać więcej funkcji zgodnie z własnymi upodobaniami. Śmiało, tweak it tiuda ci się!

Screenshot showing our simple post like counter on the frontend of a post.
Nasz prosty post jak licznik. Możesz dodać style, animacje i Inne skrypty, aby je wyrównać.

Godne Uwagi Wtyczki WordPress, Które Używają Ajax

Potrzebujesz inspiracji Ajax, aby cię rozpalić? Sprawdź te niesamowite wtyczki WordPress, które wykorzystują moc Ajax do tworzenia zaawansowanych funkcji i płynniejszych doświadczeń użytkownika.

  1. Lazy Load Plugins
    Leniwe Ładowanie to technika tworzenia stron internetowych używana do poprawy początkowego czasu ładowania strony. Odbywa się to poprzez opóźnienie ładowania zasobów o dużej zawartości, które nie są widoczne dla użytkownika w widoku przeglądarki. Zasoby te są ładowane automatycznie, gdy użytkownik przewija stronę internetową w dół. Darmowa wersja Smush obsługuje leniwe Ładowanie.
  2. Forminator
    Całkowicie rozszerzalna wtyczka do tworzenia formularzy, która obsługuje również ankiety, quizy, formularze zamówień z opcjami płatności itp. Ma możliwość włączenia przesyłania formularzy za pomocą Ajax, dzięki czemu jest to bezproblemowe doświadczenie dla użytkowników.
  3. Zaloguj Się Za Pomocą Ajax
    Zasilaj swoją witrynę WordPress płynnym Ajax logowania i efektów rejestracji z tej bogatej w funkcje wtyczki. Jeśli chcesz zapewnić swoim użytkownikom lepsze logowanie i rejestrację niż domyślny WordPress, nie szukaj dalej.
  4. WP-PostRatings
    Ta prosta wtyczka dodaje system oceny Ajax dla postów i stron witryny WordPress. Dodaje również obsługę skrótów dla ocen, dzięki czemu można je wyświetlać w dowolnym miejscu.
  5. Filtr produktów YITH WooCommerce Ajax
    Niezwykle pomocna i potężna wtyczka do WooCommerce, która pozwala zastosować dokładne filtry potrzebne do wyświetlania odmian produktów, których szukasz. Ajax zapewnia, że wszystko dzieje się w mgnieniu oka.
  6. Ajax Search Lite
    Responsywny, live Search plugin dla WordPress, zasilany przez Ajax. Zawiera również autouzupełnianie Google i sugestie słów kluczowych. Daj użytkownikom lepsze doświadczenie wyszukiwania w swojej witrynie dzięki tej wtyczce.
  7. Prosty Czat Ajax
    Czy kiedykolwiek zastanawiałeś się, czy możesz rozmawiać z innymi użytkownikami na stronie internetowej, NA ŻYWO? Ta wtyczka zasilana Ajax jest odpowiedzią na to. Jest kompatybilny z urządzeniami mobilnymi i jest zbudowany tak, aby był bardzo konfigurowalny, jak na swoje upodobania.

Przejdź do WordPress.org ‘ s plugin repozytorium dla bardziej genialnych implementacji Ajax.

Zachowaj spokój i Ajax na!

Co jest dobre dla jest również dobry dla użytkownika i serwera, ale musisz go zrównoważyć. Ajax jest potężnym narzędziem w twoim arsenale, aby zwiększyć wydajność witryny i doświadczenie użytkownika. Ale powinieneś używać go tylko tam, gdzie jest to konieczne. Zawsze skupiaj się na aspekcie user experience. Na początku będzie trochę ciężko, ale gdy już opanujesz podstawy Ajaxu, nic cię nie powstrzyma!