Używanie AJAX z PHP w witrynie WordPress z własną wtyczką

W tym artykule omówimy AJAX z PHP dla Twojej witryny WordPress.

AJAX to technika tworzenia stron internetowych, która pomaga użytkownikom tworzyć interaktywne aplikacje na stronie internetowej. Zapewnia użytkownikom szybsze i płynniejsze korzystanie z Internetu. Pozwala użytkownikom dokonywać zmian lub aktualizować zawartość strony internetowej bez przeładowywania lub odświeżania stron. Aby pracować z AJAX, trzeba znać różne języki programowania.

Co to jest AJAX?

AJAX oznacza „asynchroniczny JavaScript i XML”. Jak wspomniano wcześniej, służy do tworzenia aplikacji internetowych, które są zabawne, stale zmieniające się i interaktywne.

Niektóre z popularnych przykładów aplikacji internetowych opracowanych za pomocą AJAX i powiązanych technologii to Mapy Google, funkcja autouzupełniania w wyszukiwarce Google, komentarze i polubienia w różnych postach w mediach społecznościowych i wiele innych.

Podstawy AJAX

Ajax za pomocą różnych języków programowania, takich jak JavaScript, HTML, CSS i XML, tworzy szybsze i ulepszone aplikacje internetowe i strony internetowe. Oprócz tych języków programowania do tworzenia aplikacji internetowych używany jest również AJAX z PHP i innymi językami po stronie serwera.

Używa JavaScript do wyświetlania treści, podczas gdy CSS pomaga w prezentacji i Document Object Model. Ponadto używa XHTML do treści.

W tradycyjnych aplikacjach internetowych lub stronach internetowych informacje są wymieniane z serwerem synchronicznie. Z drugiej strony, w aplikacjach webowych, które zostały zaprojektowane do korzystania z AJAX, gdy wystąpi zdarzenie, takie jak kliknięcie przycisku lub wypełnienie formularza, JavaScript tworzy żądanie XMLHTTP i wysyła je do serwera w formacie XML.

Serwer przetwarza żądanie, tworzy odpowiedź po stronie serwera i odsyła ją z powrotem do przeglądarki. Następnie JavaScript przetwarza odpowiedź, a treść na bieżącym ekranie zostaje zaktualizowana. Ponieważ ponowne ładowanie lub odświeżanie stron nie jest wymagane, użytkownicy nie będą świadomi przesyłania jakichkolwiek informacji na serwer.

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

Jak wynika z powyższej dyskusji, użytkownicy potrzebują następujących umiejętności, aby prawidłowo korzystać z AJAX.
• Znajomość języków programowania, takich jak JavaScript, HTML i CSS
• Biegłość w językach po stronie serwera, takich jak PHP i inne
• Podstawy XML lub JSON

Zalety AJAX

Poniżej omówiono różne zalety AJAX
• Obsługuje prawie wszystkie przeglądarki używane w obecnych czasach
• Wiąże się z szybszym czasem reakcji, co oznacza lepsze wrażenia użytkownika pod względem szybkości i wydajności
• Dostępne są biblioteki JavaScript typu open source, takie jak Prototype, jQuery itp.
• Skraca czas między klientem a serwerem, dzięki czemu oszczędza się czas zarówno użytkowników, jak i serwera
• Ponieważ serwer nie jest wymagany do przetwarzania dużej ilości danych, pomaga w ograniczeniu wykorzystania przepustowości i optymalizacji działania sieci.
• Ponieważ żądanie XMLHTTP jest używane do pobierania danych, użytkownicy mogą wykonywać wiele zadań jednocześnie.

AJAX w WordPressie

AJAX jest używany na zapleczu WordPressa, w wyniku czego za każdym razem, gdy wprowadzane są jakiekolwiek zmiany w postach lub kategoriach lub gdy administrator moderuje komentarze, aktualizacje będą dokonywane natychmiast. AJAX jest najczęściej używany z JQuery na WordPress. Proces, w którym WordPress używa AJAX, wygląda następująco
• Po zgłoszeniu żądanie przechodzi przez plik „admin-ajax.php” znajdujący się w folderze „wp-admin”.
• Żądania te są wymagane do dostarczenia przynajmniej części danych, zwanych również ogólnie „działaniem”, przy użyciu metody „pobierz” lub „post”.
• Ta akcja powoduje, że kod w pliku 'admin-ajax.php' tworzy dwa punkty zaczepienia, a mianowicie 'wp_ajax_my_action' i 'wp_ajax_nopriv_my_action'. 'my_action' w tych hakach wskazuje wartość zmiennej 'action' metody 'get' lub 'post'.
• Podczas gdy pierwsze podpięcie jest przeznaczone dla akcji podejmowanych przez zalogowanych użytkowników, drugie podpięcie jest przeznaczone wyłącznie dla wylogowanych użytkowników.
• Zahaczone funkcje powinny być zaplanowane tak, aby działały łagodnie, co zapewnia, że ​​nawet jeśli JavaScript jest wyłączony w przeglądarkach, kody będą nadal działać.

Utwórz wtyczkę WordPress AJAX

W tej sekcji weźmy przykład podstawowej wtyczki WordPress AJAX o nazwie „Licznik polubień”. Ta wtyczka zawiera następujące funkcje:
• Jest aktualizowany natychmiast na interfejsie użytkownika
• Zalogowani użytkownicy mogą polubić posty.
• Jeśli wylogowani użytkownicy spróbują polubić post, na ekranie pojawi się komunikat o błędzie
• Ta wtyczka pomaga w utrzymaniu całkowitego rejestru liczby „polubień” i wyświetla je
Po pierwsze, należy utworzyć i aktywować pustą wtyczkę WordPress. Aby utworzyć wtyczkę, należy wykonać następujące kroki.

Krok 1 : Wybierz unikalną nazwę wtyczki. Można sprawdzić repozytoria wtyczek, aby upewnić się, że proponowana nazwa wtyczki nie jest już używana. Zazwyczaj twórcy wtyczek wybierają nazwę wtyczki na podstawie funkcji, jaką ma ona pełnić.

Krok 2 : W następnym kroku wymagany jest plik PHP do utworzenia przy użyciu wybranej nazwy wtyczki. Ponieważ użytkownicy, którzy zainstalują tę wtyczkę, będą musieli umieścić plik PHP w katalogu wtyczek WordPress „wp-content/plugins-” w celu jego instalacji, wtyczki nie mogą mieć tej samej nazwy dla plików PHP.

Dlatego nazwa pliku wtyczki również powinna być unikalna, aby uniknąć konfliktu z inną wtyczką w repozytorium. Można użyć ich nazwy lub nazwy firmy w prefiksie, aby utworzyć unikalną nazwę dla pliku PHP.

Krok 3 : Należy zauważyć, że wtyczka WordPress powinna zawierać co najmniej jeden plik PHP wraz z JavaScript, CSS, językami i plikami graficznymi. Jeśli istnieje wiele plików, wybierz unikalną nazwę katalogu i preferowaną nazwę głównego pliku PHP.

Umieść wszystkie pliki wtyczek w utworzonym katalogu i poproś użytkowników wtyczki o przesłanie całego katalogu do katalogu „wp-content/plugins/”.

Instalację WordPressa można skonfigurować tak, aby zmienić standardowy katalog wtyczek „wp-content/plugins/”. Dlatego należy używać plugin_dir_path() i plugin_url() lub bezwzględnej ścieżki i adresów URL w ich kodzie PHP.

Szablon postu z motywem

Po utworzeniu wtyczki należy znaleźć szablon posta 'single.php' dla ich motywu. Można go znaleźć w katalogu głównym aktywnego motywu. Jest używany, gdy odpytywany jest pojedynczy post; gdzie chce się umieścić wtyczkę „Post Like Counter”. Plik powinien być otwarty do edycji.

Przygotuj szablon posta gotowy do rozmowy AJAX

Aby użytkownicy mogli polubić posty, należy utworzyć link. Jeśli użytkownicy włączyli JavaScript, mogą korzystać z plików JavaScript (które zostaną utworzone później) lub mogą bezpośrednio przejść do łącza. W tym celu wstaw następujący kod w pliku 'single.php'. Ten kod można również dodać do dowolnej części szablonu zawartej w pliku 'single.php'.

// Wartość meta klucza „polubienia” będzie przechowywać całkowitą liczbę polubień dla określonego posta, pokaże 0, jeśli jest to pusty ciąg
ID, „polubienia”, prawda);
	$lubi = ($lubi == "") ? 0 : $lubi;
?>

Ten post ma <span id='like_counter'></span> polubienia<br>

// Link do pliku admin-ajax.php. Jednorazowy czek wliczony w cenę dla dodatkowego bezpieczeństwa. Zwróć uwagę na klasę „user_like” dla klientów obsługujących JS.
ID.'&amp;nonce='.$nonce);
	echo '<a class="user_like" data-nonce="' . $nonce . '">ID . '" href="' . $link . '"&gt;Polub ten post</a>';
?&gt;

Adresowanie wywołania Ajax bez JavaScript

Klikając w link utworzony w poprzednim kroku, zostaniesz przekierowany do skryptu „admin-ajax.php”; jednak nie znajdą żadnego użytecznego wyniku, ponieważ funkcja nie jest tworzona do uruchamiania akcji. Aby utworzyć funkcję w pliku wtyczki i dodać ją do hooków stworzonych przez WordPress, wstaw następujący kod.

<?php // używane tutaj tylko do włączania podświetlania składni. Pomiń to, jeśli jest już zawarte w pliku wtyczki.

// zdefiniuj akcje dla dwóch utworzonych hooków, pierwszy dla zalogowanych użytkowników, a drugi dla wylogowanych użytkowników
add_action ("wp_ajax_my_user_like"; "mój_user_like");
add_action ("wp_ajax_nopriv_my_user_like", "proszę_zalogować");

// zdefiniuj funkcję, która ma być uruchamiana dla zalogowanych użytkowników
funkcja my_user_like() {
   
   // jednorazowa kontrola dla dodatkowej warstwy bezpieczeństwa, funkcja zakończy działanie, jeśli się nie powiedzie
   if ( !wp_verify_nonce( $_REQUEST['nonce'], "mój_użytkownik_like_nonce")) {
      exit("Hau Hau Hau Hau");
   }   
   
   // pobierz like_count dla posta, ustaw go na 0, jeśli jest pusty, zwiększ o 1, gdy kliknięcie jest zarejestrowane 
   $like_count = get_post_meta($_REQUEST["post_id"], "likes", true);
   $like_count = ($like_count == ') ? 0 : $liczba_podobnych;
   $new_like_count = $like_count + 1;
   
   // Zaktualizuj wartość 'lubi' klucz meta dla określonego postu, tworzy nowe metadane dla postu, jeśli żaden nie istnieje
   $like = update_post_meta($_REQUEST["post_id"], "likes", $new_like_count);
   
   // Jeśli powyższe działanie nie powiedzie się, typ wyniku zostanie ustawiony na 'błąd' i like_count ustawiony na starą wartość, jeśli się powiedzie, zaktualizowany do new_like_count  
   if($jak === fałsz) {
      $result['type'] = „błąd”;
      $result['like_count'] = $like_count;
   }
   w przeciwnym razie {
      $result['type'] = "sukces";
      $result['like_count'] = $new_like_count;
   }
   
   // Sprawdź, czy akcja została uruchomiona przez wywołanie Ajax. Jeśli tak, kod JS zostanie uruchomiony, w przeciwnym razie użytkownik zostanie przekierowany na stronę z postem
   if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
      $wynik = json_encode($wynik);
      echo $wynik;
   }
   w przeciwnym razie {
      header("Lokalizacja: ".$_SERVER["HTTP_REFERER"]);
   }

   // nie zapomnij zakończyć skryptów funkcją die() - bardzo ważne
   umierać();
}

// zdefiniuj funkcję, która ma być uruchamiana dla wylogowanych użytkowników
funkcja please_login() {
   echo „Musisz się zalogować, aby polubić”;
   umierać();
}

Jeśli wszystko się ułoży, gdy zalogowany użytkownik kliknie link „Lubię ten post”, liczba polubień zostanie automatycznie zaktualizowana. Z drugiej strony, jeśli JavaScript jest wyłączony, strona zostanie odświeżona, wyświetlając zaktualizowane liczby polubień.

Dodanie wsparcia dla JavaScript

Dodanie obsługi JavaScript może ułatwić sprawę. Aby używać AJAX z PHP na WordPressie, należy umieścić w kolejce bibliotekę jQuery wraz z niestandardowym plikiem JavaScript wtyczki. W tym celu napisz we wtyczce następujący kod.

 admin_url( 'admin-ajax.php' )));        
   
   // zakolejkuj bibliotekę jQuery i skrypt, który zarejestrowałeś powyżej
   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'liker_script' );
}

Następnie należy utworzyć plik JavaScript „liker_script.js”, który zostanie następnie przesłany do folderu głównego wtyczki. Poniższy kod służy do tworzenia pliku „liker_script.js”.

jQuery(dokument).gotowy(funkcja() {
   jQuery(".user_like").click( function(e) {
      e.zapobiegnijDefault(); 
      post_id = jQuery(this).attr("data-post_id");
      nonce = jQuery(this).attr("data-nonce");
      jQuery.ajax({
         wpisz : "post",
         dataType : "json",
         url : myAjax.ajaxurl,
         data : {action: "my_user_like", post_id : post_id, nonce: nonce},
         sukces: funkcja(odpowiedź) {
            if(response.type == "sukces") {
               jQuery("#like_counter").html(response.like_count);
            }
            w przeciwnym razie {
               alert("Nie można dodać Twojego polubienia");
            }
         }
      });
   });
});

Jak zaimplementować AJAX w motywach WordPress

Poniższe kroki pomogą w implementacji AJAX z PHP w motywach WordPress. Załóżmy na przykład, że nasza praca polega na wyświetlaniu kategorii w rozwijanym menu, a po kliknięciu „Kategoria nadrzędna” podkategorie pojawią się w innym rozwijanym polu. Zadanie to zostanie zrealizowane za pomocą następujących kroków

Krok 1 : Wybierz „kategorie” po lewej stronie pulpitu nawigacyjnego i wpisz nazwę kategorii w polu pojawiającym się po prawej stronie, a poniżej wstaw informację dotyczącą kategorii. Jeśli tworzona jest kategoria nadrzędna, wybierz „brak”, lub jeśli tworzone są podkategorie, wybierz kategorię nadrzędną z opcji.

Krok 2 : W tym kroku zostanie utworzony szablon WordPress, w którym zostanie zaimplementowana funkcjonalność AJAX. Otwórz nowy plik PHP i zapisz go. Wstaw następujący kod w utworzonej stronie.

W powyższym kodzie „Nazwa szablonu: Implementuj Ajax” to nazwa szablonu WordPress, a funkcje „get_header()” i „get_footer()” są używane do wyświetlania zawartości nagłówka i stopki strony.

Po pierwsze, plik biblioteki jQuery musi być zawarty na stronie, co pomoże w dodaniu rzeczy AJAX. AJAX z PHP można użyć dowolnej biblioteki JavaScript lub wywołać AJAX z surowym JavaScriptem. W poniższym przykładzie biblioteka JavaScript jQuery jest używana do implementacji AJAX.

Krok 3 : Dodaj plik jQuery do szablonu i wywołaj funkcję „wp_dropdown_categories”, aby można było pobrać kategorie nadrzędne z menu rozwijanego.

#treść{szerokość:auto; wysokość:400px; margines:50px;}

<div>


</div>
&lt;?php

Krok 4 : Wstaw kod jQuery, aby uzyskać identyfikator wybranej kategorii głównej. Wyślij go do pliku 'functions.php', aby pobrać podkategorie w ramach wybranego identyfikatora kategorii nadrzędnej. Wyniki można następnie odesłać na stronę bez jej odświeżania.

$(funkcja(){
			$('#main_cat').change(function(){
					var $mainCat=$('#main_cat').val();

					// zadzwoń ajax
					 $("#sub_cat").empty();
						$.ajax({
							url:"/wp-admin/admin-ajax.php",
							wpisz:'POST',
														data:'action=my_special_action&main_catid=' + $mainCat,

							 sukces:funkcja (wyniki)
								 {
								// alert(wyniki);
				$("#sub_cat").removeAttr("wyłączone");
				$("#sub_cat").append(wyniki);
										}
								   });
						  }
									);
});

W powyższym kodzie kod jest dodawany przy zdarzeniu zmiany głównych kategorii z identyfikatorem „#main_cat”.

var $mainCat=$('#main_cat').val();

Funkcja .val() pomaga w pobraniu wartości wybranej opcji z listy rozwijanej i zapisaniu w zmiennej '$mainCat'.

$("#sub_cat").empty();

Lista rozwijana podkategorii „#sub_cat” musi zostać opuszczona, jeśli zawiera jakąkolwiek poprzednią wartość, przed wywołaniem AJAX.

Poniższa linia jQuery pomoże w wywołaniu funkcji AJAX jQuery. Sprawdź parametry funkcji AJAX podane w poniższej sekcji.

url:"bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",
wpisz:'POST',

Aby AJAX działał w WordPressie, używany jest parametr „URL”. Dlatego żądania będą wysyłane do pliku „admin-ajax.php”. Następnie hooki w pliku 'functions.php' zostaną wywołane w celu pobrania opublikowanych danych, które zostały wysłane na adres URL: '/wp-admin/admin-ajax.php'

Do przesłania wartości wraz z żądaniem używany jest parametr 'data'. W tym przykładzie użyto dwóch argumentów z parametrem data – action i main_catid.

Krok 5 : W pliku 'functions.php' poniższy kod jest używany do przechwycenia akcji.

add_action('wp_ajax_my_special_action', 'my_action_callback');

W powyższej akcji hook ma dwa argumenty. W pierwszym argumencie „wp_ajax_my_special_action” „wp_ajax_” to wartość wysyłana wraz z parametrem danych „action”. W drugim argumencie „my_action_callback” dane zostaną przetworzone, a wyniki zostaną odesłane.

Powyższy hak akcji jest przeznaczony dla zalogowanych użytkowników. Dla wylogowanych użytkowników można podpiąć następującą akcję

add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');

Ostateczny kod po dodaniu hooków dla użytkowników i funkcji oddzwaniania wygląda następująco

funkcja implement_ajax() {
if(isset($_POST['main_catid']))
			{
			$categories= get_categories('child_of='.$_POST['main_catid'].'&hide_empty=0');
			  foreach ($kategorie jako $cat) {
				$option .= 'term_id.'">';
				$opcja .= $cat->cat_name;
				$option .= ' ('.$cat->category_count.')';
				$opcja .= '';
			  }

			  echo 'Scegli...'.$opcja;
			umierać();
			} // koniec jeśli
}
add_action ('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');//dla niezalogowanych użytkowników.

Krok 6 : W tym kroku utwórz nową stronę w panelu i przypisz do niej szablon. Po załadowaniu strony w przeglądarce zostanie w niej załadowana pierwsza lista rozwijana z kategoriami nadrzędnymi.

Ponieważ drugie menu jest puste, wybierz opcję w pierwszym menu, aby sprawdzić, jak to działa.

W ten sposób AJAX z PHP może być używany w witrynie WordPress za pomocą nowo utworzonej wtyczki.