#2 Tworzenie wtyczki WordPress. Haki akcji


20 lutego 2016 / Michał Kortas


To tylko jeden wpis z serii Tworzenie wtyczki WordPress. Obecne i przyszłe artykuły dostępne będą pod specjalnym tagiem Wtyczka WordPress.

Kontynuując mój poprzedni wpis na temat tworzenia wtyczek do WordPressa, postaram się zgrabnie przejść do omówienia haków akcji. Wzorcową wtyczką, którą dzisiaj stworzysz, będzie prosty moduł umieszczania kodu Google Analitics, z uwzględnieniem kodu użytkownika podawanego w ustawieniach wtyczki. Brzmi tajemniczo? Nie przejmuj się i czytaj dalej! ;-)

Kursy wideo WordPress

Pamiętaj! Haków akcji powinno używać się tylko i wyłącznie dla funkcjonalności, które nie modyfikują treści dostarczanej użytkownikowi. Jeżeli chodzi o modyfikację treści, służą do tego filtry. O tym porozmawiamy w kolejnej części cyklu.

Podstawowy szkielet wtyczki

Jak tworzyć podstawowy szkielet wtyczki i jak zainstalować ją w WordPressie opisałem w części pierwszej –  zakładam, że ją przeczytałeś – teraz więc przejdę od razu do samego kodu PHP.

Projekt na GitHub

Przyjąłem, że tworzona wtyczka otrzyma nazwę wbrd_ga.

Uff! Pierwsze koty za płoty, więc nie ma co dłużej zwlekać. Spójrz na kod śledzenia Google Analitics.

Podstawową zmienną tego kodu jest tzw. identyfikator śledzenia, dla przykładu UA-00000000-2. To właśnie jego będziesz mógł zmieniać za pomocą panelu ustawień wtyczki (o tym za chwilę).

Stwórz nową klasę wbrd_ga, a w niej pierwszą metodę show_ga_code, która będzie zwracać powyższy kod.

Dopinanie się do haka

Teraz, za pomocą haka akcji, dołącz wywołanie funkcji do stopki strony. Zrób to koniecznie w konstruktorze.

W WordPressie domyślnie istnieje mnóstwo haków, do którym możesz się bez problemu dopiąć, jeśli tylko szablon przygotowany jest według fundamentalnych zasad WordPressa.

Po utworzeniu nowego obiektu klasy wbrd_ga i odświeżeniu witryny, prawie na samym dole pojawia się kod śledzenia.

Kod śledzenia Google Analitics

Tworzenie strony ustawień wtyczki

Często zdarza się, że wtyczka oprócz samego wywołania powinna dać się w prosty sposób skonfigurować. Pomimo tego, że poniższy przykład będzie trochę na wyrost, powinien pomóc zrozumieć Ci ideę tworzenia strony ustawień.

Mój przykład posiadał będzie wyłącznie jedno pole tekstowe, które pozwoli na wpisanie identyfikatora śledzenia GA.

Nowa pozycja w menu panelu administracyjnego

Na początek musisz stworzyć metodę, wykorzystującą z kolei funkcję o nazwie add_options_page().

  • Pierwszy parametr: tytuł strony ustawień
  • Drugi parametr: tytuł widoczny w menu
  • Trzeci parametr: rola użytkownika, mającego dostęp do ustawień
  • Czwarty parametr: unikalny parametr strony
  • Piąty parametr: nazwa metody generującej treść strony ustawień

Za pomocą kolejnego haka przypnij powyższą funkcję do menu administracyjnego.

Generowanie treści strony ustawień

Dodaj kolejną metodę, inicjującą treść strony ustawień wtyczki.

Zaczyna się robić ciekawie, prawda?

Jak już pewnie zauważyłeś, przypisałeś do zmiennej options tablicę z pobranymi wartościami. Pamiętaj, żeby zadeklarować tę zmienną w kodzie!

Teraz należy utworzyć metodę inicjującą stronę ustawień.

Pierwszą jej częścią jest rejestracja ustawień.

  • Pierwszy parametr: grupa opcji
  • Drugi parametr: nazwa opcji
  • Trzeci parametr: nazwa metody walidującej

Drugim krokiem jest tworzenie nowej sekcji w panelu ustawień. W Twoim i moim przypadku będzie to tylko jedna sekcja.

  • Pierwszy parametr: nazwa sekcji
  • Drugi parametr: tytuł sekcji
  • Trzeci parametr: nazwa metody zwrotnej
  • Czwarty parametr: parametr strony ustawień

Na koniec powinieneś dodać już konkretne pola ustawień.

  • Pierwszy parametr: nazwa pola
  • Drugi parametr: tytuł pola
  • Trzeci parametr: nazwa metody zwrotnej
  • Czwarty parametr: parametr strony ustawień
  • Piąty parametr: nazwa sekcji

Teraz możesz już zahaczyć stronę w panelu administracyjnym, korzystając z add_action.

Skomplikowane? Może trochę. Jeśli jesteś początkujący, możesz łatwo się zgubić, jednak w praktyce siła!

Funkcje zwrotne

Pamiętasz, że powyżej dodałeś do sekcji i pola funkcje zwrotne (callbacki)? W takim razie pokażę Ci, jak ich użyć. Za pomocą funkcji zwrotnych dodam tekst, który się wyświetli na początku sekcji oraz pole tekstowe w formularzu.

Walidacja

Pozostała Ci jeszcze jedna metoda do napisania. Oczyści ona tekst wpisywany w pole tekstowe.

Obiekt z ustawieniami

Na sam koniec wystarczy, że stworzysz nowy obiekt klasy wbrd_ga.

Pobieranie identyfikatora śledzenia

Żeby formularz ustawień miał sens, koniecznie trzeba pobrać identyfikator śledzenia z bazy i umieścić go w pierwszej metodzie, która wywołuje kod Google Analitics. Czas na niewielką modyfikację, korzystającą z funkcji get_option.

Nadszedł czas na efekty! ;-)

Przegląd gotowej wtyczki

Poprawny wynik końcowy jest niezwykle motywujący dla dalszej nauki. Spójrz zatem, co wyszło Ci z dzisiejszej pracy.

Odnośnik w menu

Odnośnik w menu panelu

Strona ustawień

Strona ustawień wtyczki

Kod wstawiony do kodu witryny

Kod Google Analitics

Podsumowanie

Dotrwałeś do końca? Świetnie! Bardzo Ci gratuluję. Jeżeli masz pytania co do utworzonej powyżej wtyczki, zapraszam Cię do ich zadawania na forum, nawet bez jakiejkolwiek rejestracji. W kolejnej części omówię korzystanie z haków filtrów, oczywiście w praktyce.

Przygotowałem cały kod, który dostępny jest na GitHub.

Projekt na GitHub Zapytaj na forum


Tagi:


13 odpowiedzi na “#2 Tworzenie wtyczki WordPress. Haki akcji”

  1. Xmartinez pisze:

    Michał, dzięki za artykuł, przyjemnie się czytało :) I od razu mam pytanie o to czy mieszanie php z js jest rozwiązaniem eleganckim. Czy podpięcie kodu śledzenia w osobnym pliku js i „przetłumaczenie” parametrów z ustawień na js za pomocą wp-localize-script nie byłoby lepsze?

    • Dziękuję :) nie jest to eleganckie, chodziło mi jednak o pokazanie podstawowych zasad tworzenia tego rodzaju wtyczki z ustawieniami własnymi. O wp-localize-script napiszę w jednej z kolejnych części. Pozdrawiam!

  2. DMati pisze:

    Ooo widzę, że WordPress to tu nie egzotyczny temat – podpinam pod planetę (http://planeta-wordpress.pl/).

  3. Gogler pisze:

    Bardzo dobry i przejrzysty artykuł, a przede wszystkim przydatny. Pozdrawiam i czekam na part III. :)

  4. Krzysztof Kwiatkowski pisze:

    Widzę że nikt nie zauważył chyba błędu – linijka kodu na widocznego na stronie:
    ga(’create’, UA-74295262-1, 'auto’);

    a powinno generować:
    ga(’create’, 'UA-74295262-1′, 'auto’);

    w pliku php dokonałem prostej zmiany:
    ga(’create’, 'options[’ga_id’] ?>’, 'auto’);

    • Witam, dziękuję za uwagę. Już poprawiam :)

      • Krzysztof Kwiatkowski pisze:

        Zdarza się :) ja już i tak przerobiłem kod by pojawiał mi się w Ustawieniach motywu. Wpis mi się bardzo podobał i czekam na inne.

        A może (bo nikt mi nie jest w stanie pomów) jak ostylować własny panel który można stworzyć jak „Opcje motywu” np. w sekcji Motyw. Mam na nim kilkanaście inputów i nagłówków. Teraz każdy element ma swoje style bo nie wiem jak je podpiąć globalnie (w osobnym pliku less/css) do takiego pliku custom_options.php.

      • Zapoznam się z tematem i spróbuję odpowiedzieć. Czy mógłbyś założyć odpowiedni wątek na https://webroad.pl/pytania ? Będzie prościej zmierzyć się z problemem na forum. Nie trzeba się rejestrować.

  5. Adam Foltyn pisze:

    Witam.
    Zauważyłem malutki błąd:

    public function ga_id_callback(){
    if(isset($this->options[’ga_id’])) $ga_id = esc_attr($this->options[’ga_id’]) <— Brak średnika
    echo '’;
    }

Skomentuj Gogler Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany.