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.
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ą.
Wiele zalet Ajax
- Minimalizuje wykorzystanie przepustowości i optymalizuje operacje sieciowe, ponieważ serwery nie będą wymagane do przetwarzania dużych ilości danych.
- Oszczędność czasu zarówno dla użytkowników, jak i dla server, ponieważ użytkownik może natychmiast zobaczyć odpowiedź z serwera.
- Zwiększona wydajność. Ponieważ nie są wysyłane dane z całej strony, Ajax poprawia wydajność, szybkość i użyteczność stron internetowych/aplikacji.
- 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:
- Użytkownik uruchamia żądanie Ajax, które jest najpierw przekazywane do admin-ajax.php plik w wp-admin folder.
- Żądanie Ajax musi dostarczyć przynajmniej jedną część danych (przy użyciu metody GET lub POST). To żądanie nazywa się działanie.
- 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.
- 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.
- 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.
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.
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:
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:
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:
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ę!
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.
- 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. - 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. - 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. - 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. - 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. - 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. - 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!
