Tutorial: Własna wtyczka do WordPress na bardzo prostym przykładzie – część 3

wp-plugins

Link do poprzedniej części (2)

 

 

Link do repozytorium z kodem wtyczki

Powstająca wtyczka wyświetla już przycisk w odpowiednim miejscu. Najwyższy czas dodać akcję po kliknięciu w niego, czyli cały sens powstającego dodatku.
Pierwsze pytanie jakie może się nasuwać, to czy naciśnięcie przycisku powinno przeładowywać stronę czy powinno działać na obecnym widoku?
Łatwiejsza wydaje się wersja pierwsza, więc piszemy treść postu, naciskamy przycisk „Dodaj polskie znaki”, strona przeładowuje się. Ku naszemu zdziwieniu, coś poszło nie tak!
Treść posta jest pusta lub nieaktualna, dlaczego? Przeładowanie strony nie wiąże się przecież z zapisaniem zmian. Oczywiście dało by się to objąć działaniem wtyczki, ale jak dla mnie brzmi to jak zbędna komplikacja.
Dlatego warto wrócić do wersji drugiej, czyli działanie na obecnej stronie bez przeładowywania.
Potrzebny będzie więc prosty skrypt JS, który podepnie event pod nasz przycisk. W poprzedniej części, jeżeli pamiętasz, utworzyliśmy funkcję wp_spolszczpl_meta, która dodawała do widoku edycji posta nasz kod. Dopiszmy w niej bezpośrednio nowy skrypt:




		<script type="text/javascript">
			var proxyPath = "<?= get_ajax_path() ?>";
			function getContent()
			{
				return jQuery('#content').val();
			}
			function setContent(newContent)
			{
				jQuery('#content').val(newContent);
			}
			function OnPluginButtonClick(e)
			{
				e.preventDefault();
				var postContent = getContent();
				jQuery.post(proxyPath, {txt:postContent}, setContent).fail(function(){ console.log('Failed to communicate with a proxy.'); });
			}
			jQuery('#Spolszcz').on('click', OnPluginButtonClick);
		</script>

WordPress domyślnie dla pola edycji treści nadaje identyfikator content, wiec stworzyłem sobie dwie funkcje dostępu, czyli setContent oraz getContent.

W funkcji, która odpowiada na kliknięcie, dostajemy obiekt eventu (zdarzenia), który pozwala między innymi powstrzymać domyślne zdarzenie (preventDefault), efektem czego w tym przypadku byłoby przeładowanie strony. Ustaliliśmy wcześniej, że tego nie chcemy.
Użyłem tu jeszcze pomocniczej funkcji , której definicja jest następująca:

function get_ajax_path()
{
	return plugin_dir_url(__FILE__).'wp_spolszczpl_proxy.php';
}

Funkcja ta znajduje się w pliku głównym wtyczki i pozwala nam wydzielić nazwę pliku ze skryptem, który będzie poprawiał nasz tekst. Korzystam tutaj z dostępnej w WP funkcji plugin_dir_url, która generuje nam ścieżkę na serwerze, w której rezyduje nasza wtyczka. Pozwoli to na bezbłędne określenie ścieżki do pliku.

Pod adres ten przy pomocy biblioteki jQuery, która od jakiegoś czasu jest już częścią podstawowej instalacji WordPress, wysyłamy aktualną treść posta i czekamy na odpowiedź serwera. Funkcja zwrotna to nasz setter, który aktualizuje pole tekstowe treścią, którą serwer nam zwróci. Do wysłania danych używam technologii AJAX, która wysyła zapytania do serwera „w tle” strony, unikając w ten sposób niepotrzebnego przeładowania całej treści. Dostajemy potrzebny zasób i wykorzystujemy go na stronie, proste! W bibliotece jQuery realizujemy to przy pomocy metody post, która swoją nazwa wskazuje na rodzaj metody zapytania, od której zależy w jaki sposób nasz docelowy skrypt PHP przechwyci te dane. Istnieje oczywiście analogiczna metoda get, ale po więcej szczegółów i kombinacji odsyłam do dokumentacji tej biblioteki.

Następnie potrzebujemy akcję, do której odwołamy się na zapleczu naszej aplikacji. Tworzymy więc plik wp_spolszczpl_ajax.php, ktory pobierze od nas treść bez polskich znaków i w magiczny sposob zwróci nam wersję poprawioną:

<?php
if(isset($_POST['txt']))
{
	$SC = new SoapClient("http://www.spolszcz.pl/webapi.wsdl");
	echo $SC->Spolszcz($_POST['txt']);
	exit;
}
defined( 'ABSPATH' ) or die( 'No script kiddies please!' );

Zajmijmy się teraz samym zapleczem, tak by przetwarzana treść była rzeczywiście poprawiana. Ze strony spolszcz.pl dostajemy informacje, że treść wystarczy wysłać pod podany adres używając protokołu SOAP. Nie jest to obecnie szczyt technologii, ale w PHP jest to bardzo łatwe, więc piszemy powyższy, krótki skrypt pobierający z przysłanego metodą POST treść i wysyłający ją do zewnętrznej usługi.

efekt

Interfejs strony spolszcz.pl zwraca nam z grubsza poprawioną treść, a my odsyłamy ja dalej do naszego skryptu JS, który zaktualizuje pole z treścią posta. W tym momencie warto zaznaczyć, że tak jak wspominałem na początku, poprawa tekstu nigdy nie będzie w pełni automatyczna. Metoda prób i błędów wywnioskowałem, że API spolszcz.pl w dwuznacznych sytuacjach po prostu nie poprawia słów, zapewne w celu uniknięcia zmiany kontekstu zdań. Dobry nawyk, jeżeli nie umiesz czegoś naprawić, to przynajmniej tego nie zepsuj! (na myśl przychodzi mi rozbieranie na części pierwsze zabawek za dzieciaka).

Po wstępnym przetestowaniu, okazuje się, że to nawet działa. Oczywiście jest to szkic pomysłu i wymaga szlifów, które opiszę w kolejnej, prawdopodobnie ostatniej części tego poradnika.