W tym kursie nauczysz się tworzenia wtyczek do WordPress od podstaw. W pierwszej części utworzymy strukturę katalogów, dodamy wymagane informacje i nowy typ postów.

Jaką funkcję będzie pełnić wtyczka?

W kursie zbudujemy od podstaw wtyczkę Devcorner Events. Plugin umożliwi adminowi dodawanie wydarzeń (np. koncerty, festiwale, spotkania). Bez problemu ustawi ich datę, godzinę, miejsce i opis. W ustawieniach wybierze styl wydarzeń i umieści je w dowolnym miejscu na stronie. Dodamy też opcjonalne funkcje takie jak odliczanie czasu do eventu, okno popup i kilka innych.

Umożliwimy również obsługę dodatkowego języka i możliwość tłumaczenia wtyczki. Na samym końcu dodamy też funkcję aktualizowania wtyczki (bez umieszczania jej w oficjalnym katalogu WordPressa).

Jak widzisz wtyczka będzie dosyć zaawansowana i będziesz się mógł na jej podstawie wiele nauczyć.

Co muszę wiedzieć przed rozpoczęciem kursu?

Pisząc tę serię artykułów zakładam, że masz przynajmniej podstawową wiedzę o WordPressie. Umiesz zainstalować WP na serwerze lokalnym i orientujesz się w panelu administratora. Oprócz tego wymagana jest przynajmniej podstawowa wiedza o PHP. Będziemy działać również trochę w JavaScript, ale nie będzie to nic zaawansowanego.

Znasz PHP, ale nie masz pojęcia o WordPressie? Sprawdź ten poradnik instalacji i opis panelu administratora.

Dlaczego powstaje ten kurs?

Większość polskich materiałów na ten temat popełnia dwa główne błędy:

  1. Proste zagadnienia są niepotrzebnie przeciągane, a te skomplikowane tłumaczone są bardzo ogólnie. W efekcie przez 20 minut umieramy z nudów słuchając jak autor szczegółowo tłumaczy banały, a później szukamy w sieci dodatkowej wiedzy, bo trudniejsze zagadnienie zostało ledwie poruszone. Na pewno to znasz 🙂
  2. Przykłady są niepraktyczne. Wyświetlenie „Hello World” przez wtyczkę niczego Cię nie nauczy. Przejdź teraz do Google, wpisz „tworzenie wtyczki wordpress” i sam sprawdź.

W tym kursie rzeczy bardzo proste będę tłumaczył w jednej linijce. Na rzeczy ważniejsze poświęcimy trochę więcej czasu. Przede wszystkim efektem naszej pracy będzie w pełni praktyczny plugin. Taki, za który ktoś faktycznie będzie chciał Ci zapłacić 🙂

Proceduralnie czy obiektowo?

Podczas przygotowywania tego kurs powstał dylemat: pisać kod proceduralnie czy obiektowo? Generalnie podejście obiektowe jest lepszą praktyką. Zdecydowałem jednak, że chcąc dotrzeć również do początkujących lepiej będzie pominąć OOP.

Z ankiety, którą przeprowadziłem jakiś czas temu, jasno wynika, że tylko 6% czytelników devcorner.pl jest na zaawansowanym poziomie. Dlatego myślę, że to dobra decyzja. Po zakończeniu kursu pojawi się jednak materiał bonusowy, który wytłumaczy podejście obiektowe w budowie wtyczek.

Przygotowania

Przed przejściem do tworzenia wtyczki musimy wykonać dwie rzeczy:

  1. Zainstaluj najnowszą wersję WP  na serwerze lokalnym (np. XAMPP) lub zewnętrznym – nie ma to większego znaczenia.
  2. Zainstaluj motyw. Może być dowolny, jeśli tylko obsługuje widgety. Jeśli chcesz korzystać z motywu, który wykorzystałem w kursie to zainstaluj Shapely.

Po wykonaniu tych dwóch akcji przejdź na stronę główną.

shapely

Wszystko gotowe. Możemy przejść do tworzenia podstaw naszej wtyczki.

Tworzenie wtyczki

Włącz tryb debugowania

Tryb debugowania pokaże błędy, które często będą bez niego niezauważalne. Jest to duże ułatwienie podczas tworzenia wtyczek. W głównym folderze WordPressa otwórz plik wp-config.php i zamień linię:

define('WP_DEBUG', false);

na:

define('WP_DEBUG', true);

Struktura katalogów i plików

Wszystkie wtyczki umieszczamy w folderze \wp-content\plugins. Plugin nazwiemy Devcorner Events, więc utwórzmy w tym katalogu nowy folder o nazwie devcorner-events. Możesz swoją wtyczkę nazwać dowolnie, ale będziesz musiał o tym pamiętać podczas całego kursu.

Wewnątrz utworzonego folderu stwórzmy plik odpowiadający nazwie katalogu – devcorner-events.php. To jest główny plik motywu. Teoretycznie mógłby to być jedyny plik, ale dobrą praktyką jest podzielenie kodu na kilka plików i umieszczenie ich w podkatalogach. Później będziemy je wczytywać do głównego pliku.

Dodajmy teraz kilka folderów, których użyjemy w kolejnych częściach:

  • includes – tutaj umieścimy wszystkie pliki PHP, które dołączymy do głównego pliku
  • languages – miejsce na pliki językowe
  • admin (wewnątrz foldery: js, css) – tutaj dodamy skrypty i style działające w panelu admina
  • public (wewnątrz foldery: js, css, images) – skrypty i style działające na froncie

Twoja struktura katalogów i plików powinna teraz wyglądać tak:

/devcorner-events
     devcorner-events.php
     /includes
     /languages
     /admin
          /js
          /css
     /public
          /js
          /css
          /images

Podstawowe informacje o wtyczce

W głównym pliku wtyczki (devcorner-events.php) umieścimy wymagane informacje o wtyczce. Robimy to wewnątrz komentarza PHP:

<?php
/*
Plugin Name: Devcorner Events
Plugin URI: https://devcorner.pl
Description: Dodawaj i wyświetlaj wydarzenia.
Version: 1.0
Author: Devcorner
Author URI: https://devcorner.pl
Text Domain: devcorner-events
*/

Z tym informacji wymagany jest tylko Plugin Name (nazwa wtyczki, powinna odpowiadać nazwie pliku). Reszta danych jest opcjonalna, ale warto je dodać. Tworząc wtyczkę wielojęzykową dodajemy unikalny Text Domain (temat zostanie dokładnie wytłumaczony w części poświęconej tłumaczeniu wtyczki).

Ważna uwaga: plików PHP nie zamykamy znacznikiem ?>. Może to spowodować błędy.

Możesz teraz w panelu administratora przejść do zakładki Wtyczki:

widok wtyczek

Dane, które zdefiniowaliśmy w głównym pliku są już widoczne. Możesz teraz włączyć wtyczkę. Na ten moment oczywiście nie wykonuje ona żadnych akcji.

Dodanie wpisów typu Event

Kolejne wydarzenia będą dodawane podobnie jak standardowe wpisy. W tym celu musimy utworzyć nowy typ postów. Zanim napiszemy niezbędny kod utwórzmy nowy plik w folderze includes o nazwie menu.php. Dzięki temu unikniemy nieporządku w głównym pliku.

Wewnątrz pliku dodajmy kod:

function devcorner_events_create_posttype() 
{
  register_post_type( 'events', // typ postu (bez spacji, wielkich liter i max 20 znaków)
        array(
            'labels' => array(
                'name' => __( 'Events' ),
                'singular_name' => __( 'Event' )
            ),
            'public' => true,
            'has_archive' => true,
            //'rewrite' => array('slug' => 'events'),
            'supports' => array( 'title', 'editor', 'excerpt' )
        )
    );
}

add_action( 'init', 'devcorner_events_create_posttype' );

Pierwszą rzeczą, którą warto tutaj zaznaczyć jest sama nazwa funkcji – devcorner_events_create_posttype. Od teraz przed każdą nazwą funkcji będziemy wstawiać prefix devcorner_events. Pozwoli nam to na uniknięcie konfliktów z innymi funkcjami wewnątrz WordPressa. Zazwyczaj prefix to nazwa wtyczki. Jeśli nazwa jest długa, to możemy użyć tylko pierwszych liter np. de_create_posttype. Najważniejsze, by prefix był unikalny.

Wewnątrz devcorner_events_create_posttype() korzystamy z funkcji register_post_type(). Jak sama nazwa wskazuje służy ona do rejestracji typów postów. Pierwszym parametrem jest po prostu typ postu. W naszym przypadku jest to events – wydarzenia.

Drugim parametrem jest tablica, która zawiera resztę ustawień:

  • labels – tablica zawierająca różne formy nazwy (np. liczba mnoga, pojedyncza itd.).
  • public – ten parametr ustawiony na true pokazuje zakładkę Events w menu bocznym.
  • has_archive – ten parametr ustawiony na true pozwala nam ustawić dla postów archiwa (wykorzystamy to dopiero w kolejnych częściach kursu)
  • rewrite – domyślnie url wpisu będzie zależne od nazwy typu postów np. devcorner.pl/events/nazwa-wydarzenia. Jeśli chcielibyśmy zmienić słowo events, to możemy do tego wykorzystać ten parametr.
  • supports – tablica z polami, które wspiera typ postu. W naszym przypadku będzie to tylko tytuł, edytor i wstęp.

Funkcja register_post_type() posiada znacznie więcej parametrów, ale musiałbym poświęcić cały wpis na ich opisanie. Listę wszystkich parametrów znajdziesz tutaj.

Druga funkcja (add_action()) pozwala na podpięcie funkcji podanej w drugim parametrze (devcorner_events_create_posttype) do określonej akcji WordPressa – w tym przypadku init. Z tej funkcji będziemy korzystali bardzo często do podpinania tworzonych funkcji pod różne akcje.

Jeśli w tym momencie jeszcze nie do końca rozumiesz jak działa ten proces, to nie martw się. Po kilku kolejnych funkcjach wszystko będzie już jasne.

Zapisz plik menu.php. Podepnijmy go teraz do głównego pliku devcorner-events.php:

include_once( plugin_dir_path( __FILE__ ) . 'includes/menu.php');

Jeśli włączyłeś wcześniej wtyczkę i odświeżysz teraz panel administratora, to zobaczysz nową pozycję w menu:

events

Tutaj będziemy dodawać nowe wydarzenia. To rozwiązanie jest świetne, ponieważ korzysta z funkcji (dodawanie postów), która jest znana każdemu użytkownikowi WordPressa. Dzięki temu użytkownicy nie będą mieć żadnych problemów z obsługą wtyczki.

To wszystko w tej części kursu. Znasz już podstawy tworzenia pluginów, ale pozostało jeszcze sporo do zrobienia. W kolejnej części dodamy do wydarzeń nowe pola (data, czas, lokalizacja), utworzymy pierwszą wersję widgetu i dodamy stronę ustawień.

Pobierz paczkę z wtyczką >>

  • Brudka

    W sumie można było to zrobić obiektowo, nawet przez deklarację klasy „devcorner_events” i wtedy w niej budować funkcje (metody) – ładniejszy byłby zapis potem kodu. 😉
    Bo takie baaardzo długie funkcje są troszkę „męczące” w czytaniu. 😉

  • Janusz Kamiński

    Dziękuję za artykuł!

  • Pawel123

    Cześć, zrobiłem tak jak przestawiłeś w poradniku jednak kiedy próbuję włączyć plugin wyskakuje error.

    Notice: Undefined variable: menu in /home/pawwlak/domains/make4u.pl/public_html/2/wp-admin/includes/menu.php on line 45

    Warning: Invalid argument supplied for foreach() in /home/pawwlak/domains/make4u.pl/public_html/2/wp-admin/includes/menu.php on line 45

    Notice: Undefined variable: submenu in /home/pawwlak/domains/make4u.pl/public_html/2/wp-admin/includes/menu.php on line 74

    Warning: Invalid argument supplied for foreach() in /home/pawwlak/domains/make4u.pl/public_html/2/wp-admin/includes/menu.php on line 74

    Notice: Undefined variable: menu in /home/pawwlak/domains/make4u.pl/public_html/2/wp-admin/includes/menu.php on line 93

    Warning: Invalid argument supplied for foreach() in /home/pawwlak/domains/make4u.pl/public_html/2/wp-admin/includes/menu.php on line 93

    Notice: Undefined variable: menu in /home/pawwlak/domains/make4u.pl/public_html/2/wp-admin/includes/menu.php on line 156

    Warning: Invalid argument supplied for foreach() in /home/pawwlak/domains/make4u.pl/public_html/2/wp-admin/includes/menu.php on line 156

    Warning: uksort() expects parameter 1 to be array, null given in /home/pawwlak/domains/make4u.pl/public_html/2/wp-admin/includes/menu.php on line 241

    Warning: Invalid argument supplied for foreach() in /home/pawwlak/domains/make4u.pl/public_html/2/wp-admin/includes/menu.php on line 308

    Warning: array_keys() expects parameter 1 to be array, null given in /home/pawwlak/domains/make4u.pl/public_html/2/wp-admin/includes/menu.php on line 327

    Warning: array_pop() expects parameter 1 to be array, null given in /home/pawwlak/domains/make4u.pl/public_html/2/wp-admin/includes/menu.php on line 328

    Fatal error: Call to undefined function user_can_access_admin_page() in /home/pawwlak/domains/make4u.pl/public_html/2/wp-admin/includes/menu.php on line 333

    Dlaczego tak się dzieje?

    • Bartłomiej Mąkina

      Cześć,

      w głównym pliku wtyczki zamień linię
      include_once(‚includes/menu.php’); na include_once( plugin_dir_path( __FILE__ ) . ‚includes/menu.php’);

  • zogdev

    Czekam na następne części jednak jest jeden mały błąd. Brakuje tagu php przed dodanym kodem w pliku menu.php

  • Rafał Morawiec

    O! A tyle co miałem się rozglądać za jakimś kursem 🙂
    Na pewno się przyda.

    PS Czekam na wersję obiektową 😀