Jak używać Ajaksa w WordPressie

Opublikowany: 2023-02-12

Jeśli masz zaangażowaną i aktywną bazę klientów swojej witryny, możesz się zastanawiać, w jaki sposób możesz zapewnić im prawdziwie interaktywne i wzbogacone doświadczenie w sieci. Oferowanie interaktywności w czasie rzeczywistym może być dużą atrakcją dla odbiorców.

Na szczęście Asynchroniczny JavaScript i XML (Ajax) to przystępna metoda dodawania interaktywnych funkcji do Twojej witryny. Jeśli chodzi o WordPress, możesz nawet uprościć ten proces za pomocą wtyczki opartej na Ajax.

W tym artykule przedstawimy Ci Ajax i sposób jego działania. Przeprowadzimy Cię również przez pierwsze kroki z Ajaxem w WordPressie. Wskakujmy od razu!

Co to jest Ajax i jak działa?

Ajax łączy wiele różnych języków programowania, takich jak HTML, CSS, JavaScript i inne. W praktyce działa za kulisami, przyjmując żądania z przeglądarki internetowej, wysyłając je do serwera i przesyłając wyniki z powrotem do przeglądarki.

Jako użytkownik sieci nie będziesz wiedział, że Ajax działa. Po prostu uzyskasz wysoce interaktywne wrażenia. Na przykład we własnej witrynie możesz użyć Ajax do akceptowania polubień postów od zalogowanych użytkowników i wyświetlania podsumowania w czasie rzeczywistym.

Dlaczego Ajax jest przydatny?

Dzięki Ajaksowi użytkownicy nie muszą ponownie ładować strony, aby zobaczyć na niej pewne zmiany. Oznacza to, że Twoja witryna pozostanie szybka i zapewni płynniejsze wrażenia użytkownika. Ponieważ Ajax jest wydajny, wysyłając tam iz powrotem tylko te dane, których potrzebuje, może zmaksymalizować przepustowość i uniknąć cięższych transferów danych.

Jako użytkownicy sieci cały czas czerpiemy korzyści z Ajax. Jednym z przykładów jest funkcja automatycznego uzupełniania wyszukiwania Google.

Inne przykłady, które możesz znać, to komentarze na Facebooku i polubienia na Instagramie. Ajax prawdopodobnie działa wszędzie tam, gdzie możesz wchodzić w interakcje ze stroną internetową i natychmiast otrzymywać informacje w zamian.

Pierwsze kroki z Ajaksem w WordPressie

Jeśli chodzi o WordPress, istnieje kilka sposobów, w jakie Ajax jest przydatny. Najpierw przyjrzymy się adresowi URL Ajax i temu, jak go używać wraz z hakami funkcyjnymi WordPress.

Adres URL Ajax w WordPress

Ponieważ WordPress domyślnie używa Ajax w panelu administratora, dodanie większej funkcjonalności Ajax nie jest trudne. Jeśli jednak chcesz używać Ajax na froncie swojej witryny, musisz zrozumieć, jak działa adres URL Ajax.

W WordPressie plik admin-ajax.php ma adres URL. Zapewnia to informacje potrzebne do wysłania danych do przetworzenia i jest niezbędne do rozwoju front-end Ajax. WordPress wykorzystuje wywołanie wp_localize_script(), aby użyć adresu URL Ajax do połączenia funkcji JavaScript i PHP, ponieważ PHP nie może bezpośrednio odzwierciedlać ich bez pomocy.

Jak korzystać z haka akcji Ajax w WordPress

WordPress wykorzystuje haczyki w swoim programowaniu, jako sposób interakcji wtyczek i motywów z rdzeniem WordPress. Haczyki występują w dwóch odmianach: „akcje” i „filtry”. Dzięki Ajaksowi będziesz używać haków akcji do wykonywania funkcji.

Actions umożliwia dodawanie danych do WordPressa lub zmianę sposobu jego działania. Z Ajaxem użyjesz akcji wp_ajax_(action). Następnie można do tego podłączyć niestandardową funkcję, która ma być wykonywana podczas wywołania Ajax.

Na przykład ten przykładowy kod WordPress pokazuje, jak można połączyć wywołanie Ajax i obiekt JavaScript w tym samym pliku, aby wykonać akcję:

<?php

add_action('wp_ajax_my_action', 'moja_akcja');

funkcja moja_akcja() {
globalny $wpdb; // w ten sposób uzyskasz dostęp do bazy danych

$cokolwiek = intval( $_POST['cokolwiek'] );

$cokolwiek += 10;

echo $cokolwiek;

wp_die(); // jest to wymagane do natychmiastowego zakończenia i zwrócenia poprawnej odpowiedzi
}

Możesz także utworzyć osobne pliki JavaScript dla swoich akcji Ajax. Musisz tylko upewnić się, że używasz adresu URL Ajax, aby połączenia nie zostały utracone.

Jak korzystać z Ajaksa, pracując z przykładową wtyczką (3 kroki)

Jeśli chcesz poeksperymentować z Ajaksem, najlepszym sposobem jest zbudowanie z nim wtyczki. Na szczęście istnieje wiele fragmentów przykładowego kodu lub gotowych wtyczek, od których można zacząć. W tym przykładzie użyjemy przykładowego kodu szablonu wtyczki WordPress do pobrania.

Krok 1: Utwórz odpowiednie struktury plików

Najpierw musisz nazwać wtyczkę i utworzyć dla niej odpowiednią strukturę plików. Nazwa musi być unikalna i nie kolidować z żadnym innym narzędziem w katalogu wtyczek WordPress. Dzieje się tak dlatego, że gdy użytkownik prześle Twoją wtyczkę, trafi ona do jego katalogu wp-content/plugins/ .

Po wybraniu nazwy musisz utworzyć co najmniej trzy następujące pliki we własnym katalogu wp-content/plugins/ :

  • nazwa-wtyczki.php
  • nazwa-wtyczki.js
  • nazwa-wtyczki.css

Będziesz chciał umieścić plik .php w folderze nowej wtyczki i utworzyć oddzielne podfoldery dla plików JavaScript i CSS. Wszystkie pliki niezbędne do działania wtyczki będą musiały znajdować się w tym samym folderze głównym.

W następnym kroku zobaczysz, że przykładowy kod, którego używamy, zawiera wstępnie utworzone struktury plików. Uważamy jednak, że ważne jest, aby zrozumieć, jak zacząć od zera i dlaczego pliki muszą mieć określoną strukturę.

Krok 2: Wybierz przykładowy kod na początek

Korzystanie z przykładowego pliku kodu jest dobrym miejscem do rozpoczęcia wypróbowywania Ajax na pierwszej wtyczce. Zawsze jednak chcesz dokładnie sprawdzić swój przykładowy kod, aby upewnić się, że jest bezpieczny i nie zawiera błędów.

Jak wspomnieliśmy wcześniej, w naszym przykładzie użyjemy szablonu wtyczki WordPress. Ten przykładowy kod jest dostarczany w pakiecie z plikami potrzebnymi do ukończenia wtyczki.

Ta przykładowa wtyczka jest również zgodna ze standardami kodowania i dokumentacji WordPress. Aby rozpocząć, możesz pobrać plik .zip wtyczki ze strony wzorcowej.

Krok 3: Podłącz akcje do swojego kodu

Przykładowy kod wtyczki, którego używamy, jest zbudowany przy użyciu programowania obiektowego (OOP). Pomaga to programistom organizować ich kod i tworzy łatwy do udostępniania i wielokrotnego użytku wzorzec programowania.

Ponadto kod jest dostarczany ze wszystkimi plikami niezbędnymi do tworzenia wtyczek, w tym plikami aktywacji i dezaktywacji w katalogu /includes/ . W razie potrzeby z łatwością odnajdziesz także pliki publiczne i przeznaczone dla administratora.

Rzućmy okiem na naszą przykładową wtyczkę, przeglądając początek pliku nazwa-wtyczki.php :

<?php

/**
* Plik ładowania początkowego wtyczki
*
* Ten plik jest odczytywany przez WordPress w celu wygenerowania informacji o wtyczce w wtyczce
* Strefa administracyjna. Ten plik zawiera również wszystkie zależności używane przez wtyczkę,
* rejestruje funkcje aktywacji i dezaktywacji oraz definiuje funkcję
* rejestruje funkcje aktywacji i dezaktywacji oraz definiuje funkcję
* który uruchamia wtyczkę.
*
* @link http://example.com
* @od wersji 1.0.0
* @nazwa_wtyczki pakietu
*
* @wordpress-plugin
* Nazwa wtyczki: Szablon wtyczki WordPress
* Identyfikator URI wtyczki: http://example.com/nazwa-wtyczki-uri/
* Opis: To jest krótki opis tego, co robi wtyczka. Jest wyświetlany w obszarze administracyjnym WordPress.
* Wersja: 1.0.0
* Autor: Twoje imię i nazwisko lub Twoja firma
* Identyfikator URI autora: http://example.com/
* Licencja: GPL-2.0+
* URI licencji: http://www.gnu.org/licenses/gpl-2.0.txt
* Domena tekstowa: nazwa wtyczki
* Ścieżka domeny: /languages
*/

Wszystkie informacje zawarte w tej części kodu są ważne dla zarejestrowania Twojej wtyczki w WordPress. W ten sposób katalog wtyczek będzie wiedział, co wyświetlić dla twojej wtyczki.

Teraz musisz wykonać kilka czynności, aby połączyć wszystkie kropki, w tym:

  • Upewnij się, że adres URL Ajax jest dostępny dla twojego skryptu. Aby to osiągnąć, możesz użyć wp_localize_script() .
  • Utwórz klasę nazwa-wtyczki z klasą Nazwa-wtyczki{} w pliku nazwa-wtyczki.php . Tutaj zdefiniujesz swoje haki akcji.
  • Utwórz odpowiednią funkcję JavaScript w pliku nazwa-wtyczki.js .

Jednym z ważnych elementów podejścia Ajax jest określenie, kto może korzystać z każdej funkcji, zwłaszcza przy tworzeniu interaktywności front-end. Podłączymy akcję front-end z przykładowym kodem z WordPress:

if ( is_admin() ) {
add_action( 'wp_ajax_my_frontend_action', 'my_frontend_action' );
add_action( 'wp_ajax_nopriv_my_frontend_action', 'my_frontend_action');
add_action( 'wp_ajax_my_backend_action', 'my_backend_action');
// Dodaj tutaj inne haczyki akcji zaplecza
} w przeciwnym razie {
// Dodaj tutaj punkty akcji front-end inne niż Ajax
}

Zwróćmy uwagę na kilka rzeczy w tym przykładzie. Po pierwsze, te działania będą dostępne dla każdego w serwisie, niezależnie od tego, czy jest zalogowany na konto, czy nie. Wskazuje na to wywołanie „wp_ajax_nonpriv_()”. Po drugie, można zauważyć, że podczas działań front-endowych włączane są również działania back-endowe, administracyjne.

Aby zrozumieć proces, który ma miejsce w tym zestawie akcji, ważne jest również, aby wiedzieć, że my_frontend_action uruchomi funkcję PHP my_frontend_action_callback().

Krok 4: Przetestuj i debuguj swoją wtyczkę

Po skonfigurowaniu wszystkich haczyków akcji i odpowiednich funkcji, których potrzebujesz, będziesz chciał przetestować i potencjalnie debugować swoją wtyczkę (jeśli wystąpią jakiekolwiek problemy). Twój dostawca usług hostingowych może oferować narzędzie do debugowania jako część swojego pakietu hostingowego.

Tutaj w WP Engine udostępniamy dziennik błędów silnika WP, aby pomóc Ci znaleźć miejsca problemów.

Nasz dziennik błędów zawiera oznaczone kolorami wskazówki dotyczące wszelkich błędów w kodzie Twojej witryny oraz ich interakcji z naszymi serwerami lub innymi częściami Twojej witryny. To znacznie ułatwia rozwiązywanie problemów, niezależnie od tego, czy pracujesz z Ajaksem, czy z czymś zupełnie innym.

Przeglądaj inne zasoby i narzędzia WP Engine

Teraz, gdy jesteś na najlepszej drodze do tworzenia niesamowitych wtyczek WordPress za pomocą Ajax, możesz chcieć ocenić, jakich innych narzędzi będziesz potrzebować. WP Engine oferuje kompletną platformę Digital Experience Platform (DXP) i jest tutaj, aby pomóc Ci tworzyć nowe wtyczki do WordPress.

Niezależnie od tego, czy interesuje Cię nasz dziennik błędów silnika WP, dzięki któremu możesz uruchomić wtyczkę wolną od błędów, czy po prostu potrzebujesz solidnego i bezpiecznego hostingu WordPress, oferujemy szeroką gamę planów i zasobów do wykorzystania!