Reklama sponsora

1. Pierwsza wtyczka „Hello world”



Kurs WordPress – własna wtyczka – część pierwsza

Witam w pierwszej części mojego kursu z cyklu własna wtyczka. Jeśli zdecydowałeś się na WordPressa i chciałbyś nabyć umiejętność rozwijania jego funkcjonalności to ten kurs jest właśnie dla ciebie. Wtyczki pozwalają robić z WordPressem co tylko zechcesz, wystarczy trochę kreatywności a można stworzyć portal społecznościowy czy grę właśnie dzięki wtyczkom.

Co w tej części?

W tej części wprowadzę Cię w tematykę tworzenia wtyczek. Na początek kilka spraw organizacyjnych jak instalacja WordPressa, kilka słów o wtyczkach. Produktem tej części będzie nasza pierwsza wtyczka, która z założenia ma pokazać od czego zacząć. Co będzie robić nasza pierwsza wtyczka?

  • Własna zakładka w menu panelu administratora.
  • Funkcja strony wtyczki wyświetlająca napis „Hello world”

Instalacja WordPressa

No to zaczynamy, na początek zainstalujemy sobie czystego CMS-a.

Standardowa instalacja WordPressa nie wymaga zbyt wiele omawiania:

  1. Logujemy się na phpmyadmina naszego hosta i dodajemy bazę danych.
  2. Ściągamy WordPressa z oficjalnej strony.
  3. Rozpakowujemy i wrzucamy pliki na hosta.
  4. Wchodzimy na stronę. (Powinien się pokazać prosty instalator)
  5. Po przejściu wszystkich kroków instalacji logujemy możemy się zalogować do panelu admina, który standardowo znajduje się pod adresem Ścieżka_do_plików_wordpressa/wp-admin (w przypadku niektórych hostingów jak np linuxpl można spotkać zabezpieczenie, akurat w tym przypadku wystarczyło wpisać dwa razy „wpadmin”)

Gdzie umieścić wtyczkę

Teraz kiedy mamy już zainstalowanego WordPressa, możemy spokojnie przejść do pisania pierwszej wtyczki. Może to być pojedynczy plik PHP jednakże tak nie robimy, ponieważ zdecydowana większość wtyczek jest umieszczona w swoich folderach. To taka kwestia porządkowa. Kolejną istotną kwestią jest nazwa wtyczki. Warto tutaj trochę się zastanowić ponieważ istnieje już bardzo wiele wtyczek, warto postarać się aby nazwa wtyczki była zarazem unikalna i celnie wskazywała na to czego dotyczy jej funkcjonalność.

Aby stworzyć wtyczkę należy wejść do katalogu wp-content/plugins i utworzyć katalog o takiej samej nazwie jak wtyczka. Najlepiej używać tutaj tylko liter i podkreślników. W naszym przykładzie nazwiemy plugin po prostu moja_pierwsza_wtyczka.

 


katalogplik


 

Kiedy mamy już katalog tworzymy w nim plik o takiej samej nazwie. Będzie to główny plik wtyczki. Teraz otwieramy plik w dowolnym edytorze kodu. Do programowania polecam NetBeans, który jest jednym z najlepszych darmowych programów do kodowania stron www, no chyba że bardziej profesjonalny i droższy PHPStorm.

Określenie wtyczki

Na początku określany naszą wtyczkę. WordPress pobiera te dane z komentarza na początku naszego głównego pliku wtyczki. W tym przypadku na samym początku pliku moja_pierwsza_wtyczka.php wstawiamy komentarz:

 

 
/**
Plugin Name: Moja pierwsza wtyczka
Description: Opis mojej pierwszej wtyczki wyświetlającej napis Hello World
Version: 0.1
Author: Daniel Kuczewski
Author URI: http://zaawansowanywordpress.pl
Plugin URI: http://zaawansowanywordpress.pl/1-dodawanie-wtyczki-witaj-swiecie/
License: GPL
 */

Tutaj określamy kolejno:

  • Plugin Name: – tutaj wpisujemy nazwę naszej wtyczki. Jest to jedyna wymagana pozycja, pozostałe są opcjonalne aczkolwiek warto je stosować, szczególnie jeśli chcemy wypuścić naszą wtyczkę w świat.
  • Description: – To jest opis wtyczki widoczny w panelu administratora.
  • Version: – wersja naszej wtyczki – WordPress wykorzystuje tę informację jeżeli udostępnimy wtyczkę na platformie w celu sprawdzenia dostępności nowszej wersji.
  • Author – tutaj chyba nie trzeba wiele tłumaczyć
  • Author URI – odnośnik do strony autora, może to być portfolio lub jakaś inna strona autora w tym przypadku przekierowuję po prostu na mojego bloga. Jest on widoczny w panelu wtyczek.
  • Plugin URI – jest to odnośnik do strony z informacjami o wtyczce. W tym przypadku po prostu do tego wpisu.
  • License – licencja wtyczki.

Dzięki temu fragmentowi nasza wtyczka będzie już widoczna w panelu administratora wśród pozostałych wtyczek i wystarczy ją tylko aktywować.


Screenshot_10


Obrazek przedstawia naszą wtyczkę w panelu administratora, możemy włączyć, edytować lub usunąć. Jest tutaj także widoczny opis wtyczki wersja oraz podlinkowane informacje o autorze i witrynie wtyczki. Te informacje bardzo często przydają się użytkownikom szczególnie witryna wtyczki gdy jest ona bardziej zaawansowana.

Wprawdzie już mamy naszą pierwszą wtyczkę, ale zupełnie nic ona nie robi dlatego też kodujemy dalej.

Dodawanie menu w panelu administratora

Aby dodać menu w panelu administratora należy wykorzystać funkcję:

add_menu_page( string $page_title, string $menu_title, string $capability, string $menu_slug, callable $function = '', string $icon_url = '', int $position = null )

Dokumentację tej i każdej innej funkcji WordPressaa można znaleźć na oficjalnej stronie. Zachęcam do bardziej szczegółowego anglojęzycznego opisu Tutaj. A tak pokrótce co oznaczają poszczególne parametry:

  • $page_title – To tytuł strony – będzie on widoczny na przykład wśród zakładek przeglądarki, kiedy ktoś wejdzie na podstronę wtyczki w panelu administratora.
  • $menu_title – To tytuł wyświetlany w menu tak jak „wpisy”
  • $capability – określenie minimalny praw czyli kto zobaczy wtyczkę. O prawach trochę później, w tym przykładzie stworzymy menu widoczne dla administratora.
  • $menu_slug – Unikalna nazwa dla tego menu, litery, cyfry i podkreślniki.
  • $function – funkcja obsługująca stronę, do której prowadzi odnośnik, to właśnie tutaj umieścimy nazwę funkcji wyświetlającej „Hello world”
  • $icon_url – tutj możemy określić adres obrazka ikonki, domyślnie jest to koło zębate.
  • $position – jest to pozycja w menu, na której ma się wyświetlać wtyczka. Każda pozycja w menu ma przypisaną liczbę i tak
    • 2 – Kokpit
    • 4 – Separator
    • 5 – Wpisy
    • 10 – Media
    • 20 – Strony
    • 25 – Komentarze
    • 59 – Separator
    • 60 – Wygląd
    • 65 – Wtyczki
    • 70 – Użytkownicy
    • 75 – Narzędzia
    • 80 – Ustawienia

Jeśli chcemy aby odnośnik do naszej wtyczki wyświetlał się na przykład pomiędzy mediami a stronami to pozycję określamy na 12.

Przy okazji skoro już jesteśmy przy menu, warto dodać kilka słów o podmenu. Można tutaj podpiąć kolejną opcję nie tylko pod menu naszej wtyczki ale także dowolne inne. Aby to zrobić wystarczy znać unikalną nazwę ($menu_slug). I tak wygląda nasza funkcja do tworzenia podmenu:

add_submenu_page( string $parent_slug, string $page_title, string $menu_title,string $capability, string $menu_slug, callable $function = '' )

 

Większość parametrów już znamy, z nowych występuje $parent_slug czyli $menu_slug menu nadrzędnego.

Teraz kiedy już poznaliśmy większość teorii dotyczącej dodawania menu przejdźmy do praktyki. Stworzymy sobie menu i podmenu. Nasza opcja główna będzie wyświetlała napis „Hello World” zaś po kliknięciu odnośnika w podmenu ukaże nam się napis „Hello World 2”.

Pod naszym nagłówkiem zawierającym informacje o wtyczce tworzymy funkcję, dzięki której dołączymy nasze menu wykorzystując zaczep.

 


function mpw_add_menu(){
    add_menu_page( 'Strona główna wtyczki', 'Moja pierwsza wtyczka', 'administrator', 'moja-pierwsza-wtyczka', 'glowna_moja_pierwsza_wtyczka', '', 7 );
    add_submenu_page( 'moja-pierwsza-wtyczka', 'Strona podmenu', 'Podmenu', 'administrator', 'moja-pierwsza-wtyczka-podmenu1', 'podstrona_moja_pierwsza_wtyczka' );
}

To co się dzieje w tej funkcji zostało już wytłumaczone. Można zauważyć że nazwa jest dość długa, tutaj jako prefiks użyłem pierwszych liter nazwy wtyczki. Warto zadbać o to by nazwy funkcji były jak najbardziej unikalne ponieważ jest wiele wtyczek i można natrafić na taką samą nazwę funkcji co z kolei może wywołać niepowołane konsekwencje.

Warto zauważyć że wprowadziliśmy tutaj już nazwy funkcji odpowiedzialnych za wyświetlenie treści glowna_moja_pierwsza_wtyczka oraz podstrona_moja_pierwsza_wtyczka. Teraz stworzymy te funkcje.

 


function glowna_moja_pierwsza_wtyczka(){
    echo "Hello World";
}

function podstrona_moja_pierwsza_wtyczka(){
    echo "Hello World 2";
}

Jak już wcześniej określiliśmy funkcje te wyświetlają napisy. Teraz nie pozostaje nic innego jak „zaczepić” nasze menu.

Zaczep akcji

O co chodzi z zaczepem akcji? Pozwalają one na wywołanie funkcji w określonym momencie. Tak jak w naszym przypadku dodajemy nasz plugin do menu w momencie jego budowania. WordPress udostępnia wiele zaczepów akcji czyli takich momentów, w których możemy wykonać własną funkcję. Daje to całkiem spore możliwości. Możemy „zaczepić” naszą funkcję tak aby wykonała się na przykład w momencie logowania do panelu lub w momencie dodawania wpisu. Jest to temat dość obszerny na oddzielną lekcję ponieważ możemy tworzyć i wykorzystywać własne zaczepy, na ten moment wystarczy nam wiedza że zaczep to jest właśnie taki moment wywołujący nasza funkcję. Aby zaczepić naszą funkcję wykorzystujemy funkcję systemową:


add_action( $tag, $function, $priority, $accepted_args);

Funkcja ta pobiera cztery parametry:

  • $tag – nazwa zaczepu akcji
  • $function – nasza funkcja.

Pozostałe parametry oraz ogólnie zaczepy omawiam w części 5

Teraz skoro już znamy teorię zaczepiamy nasze menu.


add_action( 'admin_menu', 'mpw_add_menu' );

I to już cała nasza wtyczka. Poniżej znajduje się pełny kod wtyczki.

Kod wtyczki


<?php 
/**
Plugin Name: Moja pierwsza wtyczka
Version: 0.1
Description: Opis mojej pierwszej wtyczki wyświetlającej napis Hello World
Author: Daniel Kuczewski
Author URI: http://zaawansowanywordpress.pl
Plugin URI: http://zaawansowanywordpress.pl/1-dodawanie-wtyczki-witaj-swiecie/
 */

function mpw_add_menu(){
 add_menu_page( 'Strona główna wtyczki', 'Moja pierwsza wtyczka', 'administrator', 'moja-pierwsza-wtyczka', 'glowna_moja_pierwsza_wtyczka', '', 7 );
 add_submenu_page( 'moja-pierwsza-wtyczka', 'Strona podmenu', 'Podmenu', 'administrator', 'moja-pierwsza-wtyczka-podmenu1', 'podstrona_moja_pierwsza_wtyczka' );
}

function glowna_moja_pierwsza_wtyczka(){
 echo "Hello World";
}

function podstrona_moja_pierwsza_wtyczka(){
 echo "Hello World 2";
}

add_action( 'admin_menu', 'mpw_add_menu' );

A oto zrzut ekranu naszego dzieła.


Screenshot_1


Jak widać mamy menu i nasz napis się wyświetla, czyli plan został wykonany.

Wtyczkę można pobrać tutaj -> moja_pierwsza_wtyczka

 

Dodany przez Woocommerce - plik użytkownika - Zaawansowany Wordpress
2020-05-01 11:01:50

[…] sobie teraz wtyczkę o nazwie „user_product_custom_file”, zupełnie zgodnie z pierwszą częścią kursu „Własna wtyczka”. I tak wygląda nasz plik […]


Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *