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

wp-plugins

Link do poprzedniej części (1)

 

 

Link do repozytorium z kodem wtyczki

No to zaczynamy. Potrzebujemy instalacji WordPress, najlepiej lokalnie na naszej maszynie. Ułatwi to dodawanie i edycję plików powstającej wtyczki. Oprócz tego, sam proces testowania będzie sprawniejszy, ponieważ WP, zwłaszca po stronie panelu admina, nie należy do błyskawicznie lądujących się systemów CMS. Jeżeli nie masz ochoty lub nie wiesz jak postawić serwer www lokalnie, wystarczy Ci instalacja tego systemu blogowego online i swobodny dostęp FTP. W poprzednim poście założyłem, że masz podstawową wiedzę na temat organizacji i działania tego systemu. Wiesz więc zapewne, że wtyczki znajdują się pod ścieżką

/wp-content/plugins/

względem głównego katalogu Twojej instalacji bloga. Utwórz tam folder o nazwie nawiązującej do Twojego pluginu (u mnie: wp_spolszczpl), a następnie wewnątrz niego dodaj plik o tej samej nazwie, ale z rozszerzeniem *.php.

W tym miejscu warto wspomnieć, ze system WordPress czerpie wiele informacji z komentarzy w plikach źródłowych. Dlatego podstawowe informacje o swojej wtyczce powinieneś spisać w nowo utworzonym pliku.

<?php
/**
 * @package wp_spolszczpl
 * @version 0.1
 */
/*
Plugin Name: SpolszczPL
Plugin URI: http://kuzniabinarna.pl
Description: Plugin consumes spolszcz.pl API to correct content with polish special characters.
Author URI: http://kuzniabinarna.pl
*/

…co przełoży się na następujący widok po instalacji wtyczki w Twoim panelu admina…

tutorial_wtyczkawp_1

Tak, wtyczka już istnieje. Sam plik z jej opisem stanowi już dla WP istniejący plugin, który można włączać i wyłączać. Zróbmy więc coś z faktem, że na ten moment nie robi ona jeszcze kompletnie nic!

Przy okazji małych projektów pilnowanie numeru wersji wydaje sie zbednym wysiłkiem. Wyznaję jednak zasadę, że warto zawsze dbać o takie sprawy, ponieważ buduje to dobre nawyki na przyszłość, które z pewnością zaowocują przy większych projektach.

Poniższy krok jest opcjonalny, ale to używany w tym systemie sposób na blokowanie bezpośredniego dostępu do plików.

 defined( 'ABSPATH' ) or die( 'Nie ma tak łatwo!' ); 

Dodanie tej linijki na szczycie Twojego nowego pliku uniemożliwi nieprzewidziane działanie skryptu w przypadku, gdyby ktoś bawił się w „hakera” i próbował odpalić Twój skrypt z zewnątrz. Nie wierzę, że znajdzie się ktoś, kto widząc na czyjejś stronie podejrzany, wyeksponowany link, nie wywoływałby go z wypiekami na twarzy, z nadzieja, że za chwilę coś zepsuje!

Kolejnym małym krokiem dla człowieka, ale dużym dla naszego bloga będzie dodanie jakiegoś elementu interaktywnego. Pomyślmy jednak przez chwilę, czego własciwie potrzebujemy. Od tego będzie bowiem zależeć gdzie zaczniemy działać. Potrzebujemy prawdopodobnie przycisku, który po kliknięciu od razu poprawi nasz tekst. Gdzie mnie, czy tez potencjalnym użytkownikom mojego dodatku, byłoby najwygodniej posiadać taka funkcjonalność? Moim skromnym zdaniem najrozsądniej brzmi okolica dużego pola do edycji treści wpisu.

Jeżeli WordPress znasz tylko pobieżnie, możesz nie wiedzieć, ze rdzeniem jego działania są tzw. „hooks” i „filters”. Z angielskiego to będą zaczepy i filtry. Każdy taki zaczep nosi swoją nazwę i jest silnie związany z momentem, w którym jest przetwarzany. Dla przykładu, „plugins_loaded” występuje w momencie, gdy wszystkie wtyczki zostaną już załadowane. Może bardziej zrozumiała nazwą będzie więc „event”? (z ang. zdarzenie).

Filtry są trochę inne, ponieważ pozwalają podczepić się do treści wynikającej z jego kontekstu i zmodyfikować tą treść po drodze, po czym przepchnąć dalej, aż do samego miejsca docelowego. (np. treści postu) W tym miejscu do głowy przychodzi mi inna wersja naszej wtyczki, która mogła by wpinać się właśnie w takie miejsce, poprawiać znaki „w locie” i odsyłać treść dalej, aż do widoku strony. Rozwiązanie takie byłoby jednak bardzo nierozsądne, ponieważ odwołanie do usługi korekty tekstu byłoby lekko mówiąc „nadużywane” i odbywało by się za każdym razem, gdy użytkownik otwiera stronę z postem.

Jak na przykładnego developera przystało, otwieramy dokumentację i wertujemy kolejne linijki. Możemy również posłużyć się wujkiem google jeżeli cenimy swój czas. Okazuje się, że hook o nazwie add_meta_boxes pozwala nam wpiąć się w moment wyświetlania poszczególnych elementow na stronie edycji posta. Brzmi dobrze!

Dopiszmy więc trochę kodu w naszym pliku głównym wtyczki.

add_action('add_meta_boxes', 'on_add_meta_boxes');

function on_add_meta_boxes(){
    add_meta_box('spolszcz_pl', 'Polskie Znaki', 'wp_spolszczpl_meta', 'post', 'side');
}

// wyświetla kod html odpowiedzialny za nasz przycisk, który wyląduje w nowo dodanym meta box
function wp_spolszczpl_meta( $post ) {
?>
    <button class="button">Dodaj polskie znak</button>





<div class="clear"></div>





<?php
}

Dostępna w WP funkcja add_action pozwoli nam podpiąć się pod hook (czy też akcję) i przekazać nazwę funkcji, która zostanie wykonana przy danym zdarzeniu.
Dalej widzimy implementację tej funkcji, która znów używając dostępnej w WP funkcji, renderuje tak zwany meta box, czyli gotowy, stylowany kontener na elementy. Będzie to prawdopodobnie div z klasami nawiązującymi to stylu panelu admina. Oznacza to więc, że nie musimy się w tym momencie martwić o wygląd naszych elementów UI, ponieważ zostaną automatycznie dostosowane do widoku.
tutorial_wtyczkawp_2
Przez parametry tej funkcji możemy sprecyzować atrybut ID nowego elementu, tytuł wyświetlany, a do tego funkcję, która zostanie wykonana do wyświetlenia zawartość nowego pola.
Ostatni użyty tutaj parametr to dokładniejsza lokalizację na ekranie.

W efekcie, jeśli nasza wtyczka jest włączona na naszym blogu, zobaczymy efekt naszej pracy na ekranie dodawania i edycji posta.

W tym momencie mamy już dodatek, który wpina się między zwoje WordPress i dodaje nasz kod.

Zapraszam do kolejnej części, w której skupimy się na tym co dzieje się po użyciu nowo utworzonego przycisku wtyczki.