Rozwój WordPress dla średnio zaawansowanych użytkowników: budowanie wtyczek

Wtyczki pozwalają dodawać lub zmieniać wygląd i funkcje witryn. A najlepsze? Prawie każdy rodzaj funkcjonalności, jaki możesz wymarzyć dla swojej witryny, możesz przekształcić się w wtyczkę i sprawić, że tak się stanie.

To już trzeci post z naszej serii WordPress Development for Intermediate Users. Ta seria jest kontynuacją naszych popularnych samouczków dotyczących tworzenia WordPressa dla początkujących, które wprowadzają cię w podstawy tworzenia stron internetowych za pomocą WordPressa, jak rozpocząć kodowanie za pomocą PHP oraz budowanie motywów i wtyczek.

Powinieneś już wiedzieć, jak stworzyć podstawową wtyczkę – jeśli nie, powinieneś przejrzeć naszą serię dla początkujących przed kontynuowaniem – więc nie pokażę Ci, jak to zrobić. Zamiast tego przyjrzymy się, jak zbudować bardziej złożone wtyczki, a także najlepszej praktyce tworzenia wtyczek.

Do tej pory w tej serii opracowałeś motyw, w tym pliki szablonów, Hooki i funkcje dostosowywania. W tej części kursu wykorzystamy jeden z hooków, które już dodałeś, i wstawimy do niego zawartość.

Uwaga: ważne jest, abyś miał praktyczną znajomość PHP, ponieważ jest to podstawowy język WordPress i będę odnosił się do fragmentów kodu w całej tej serii.

Zaczynajmy.

Przegapiłeś tutorial z naszej serii WordPress Development for Intermediate Users? Tutaj możesz nadrobić wszystkie 7 postów:

• Rozwój WordPress dla średnio zaawansowanych użytkowników: tworzenie motywów w szczegółach
• Rozwój WordPress dla średnio zaawansowanych użytkowników: przygotowanie motywów do dostosowania
• Rozwój WordPress dla średnio zaawansowanych użytkowników: budowanie wtyczek
• Rozwój WordPress dla średnio zaawansowanych użytkowników: niestandardowe typy postów i taksonomie
• Rozwój WordPress dla średnio zaawansowanych użytkowników: zapytania i pętle
• Rozwój WordPress dla średnio zaawansowanych użytkowników: niestandardowe pola i metadane
• Rozwój WordPress dla średnio zaawansowanych użytkowników: Internacjonalizacja

To prawda, mnóstwo wiedzy WordPress, recenzja, opinie instruktorów i certyfikacja, za darmo dla członków WPMU DEVRozpocznij Naukę

Czego potrzebujesz

Aby śledzić tę część serii, potrzebujesz strony programistycznej z zainstalowanym i aktywowanym motywem. Ponieważ będziemy wchodzić w interakcję z motywem z poprzednich części serii, będziesz musiał go użyć. Jeśli wolisz pracować z własnym motywem, musisz dodać hak do tego przy użyciu technik, których nauczyłeś się w pierwszej części tej serii.

Jeśli pracowałeś nad tym, będziesz miał własną wersję motywu dla tej serii. Jeśli nie, możesz pobrać motyw z części drugiej, WordPress Development for Intermediate Users: Making your Themes Customizer-Ready, który znajduje się w plikach źródłowych tego kursu.

Będziesz także potrzebował strony programistycznej do pracy (może na komputerze lokalnym) i edytora kodu.

Najlepsze praktyki tworzenia wtyczek

Zanim zaczniemy tworzyć jakieś wtyczki, rzućmy okiem na to, jak powinieneś kodować swoje wtyczki. Aby być kompetentnym i wydajnym programistą wtyczek, powinieneś postępować zgodnie z najlepszą praktyką:

• Kod zgodnie ze standardami kodowania WordPress. Obejmuje to nie tylko sposób kodowania PHP, ale także HTML, CSS i JavaScript.
• Struktura plików i folderów wtyczki odpowiednio. Twoja wtyczka potrzebuje głównego pliku wtyczki, a jeśli chcesz dodać dodatkowe pliki, dodaj je do odpowiednich folderów, takich jak foldery dla skryptów, stylów, szablonów i obejmuje.
• Użyj odpowiednich haczyków. Nie dołączaj funkcji do haka, który wystrzeliwuje zbyt wcześnie lub zbyt często dla Twoich potrzeb.
• Używaj suchych zasad, unikając powtarzania w kodzie. Tam, gdzie kod musi być powtarzany w wielu miejscach, użyj pliku include zamiast tego, więc trzeba kodować tylko raz.
• Nie twórz funkcji, klas ani hooków, które powielają funkcje już dostarczone przez WordPress. Zapoznaj się z funkcjami, klasami i hookami WordPress, abyś mógł z nich jak najlepiej korzystać.
• Nie używaj przestarzałych funkcji.
• Jeśli potrzebujesz użyć skryptów lub stylów w swojej wtyczce, zapytaj je poprawnie (Więcej z nich wkrótce).
• Używaj poprawnej (i spójnej) składni i pisz swój kod w sposób określony przez standardy kodowania, z liberalnym użyciem komentarzy, aby pomóc sobie i innym użytkownikom.
• Podczas tworzenia własnych hooków i funkcji używaj prefiksów, aby upewnić się, że mają unikalne nazwy. W tym kursie używam wpmu_ jako przedrostek w całym.

 

Niezależnie od rodzaju wtyczki, którą rozwijasz, przestrzeganie tych wskazówek sprawi, że Twój kod i praktyki robocze będą bardziej wydajne i pomogą ci uzyskać akceptację wtyczek do wydania w katalogu wtyczek WordPress.

Dodawanie skryptów i stylów do wtyczek

W wielu przypadkach musisz dodać skrypty i style do wtyczek. Ważne jest, aby wiedzieć, jak to zrobić poprawnie. Zamiast korzystać z połączenia include lub dołączania skryptów lub stylów do wp_head lub wp_footer Hooki, powinieneś używać odpowiednich funkcji i hooków do sprawdzania swoich stylów i skryptów.

Aby to zrobić, potrzebujesz jednego z dwóch haków:

• wp_enqueue_scripts – dla skryptów i stylów, które będą używane w przedniej części witryny
• admin_enqueue_scripts – dla skryptów i stylów, które będą używane na ekranach administratora

W większości przypadków będziesz używać pierwszego z nich. Ale jeśli chcesz oznaczyć ekrany administratora, na przykład dodając nowy arkusz stylów lub chcesz dodać selektor daty do formularza widżetu na ekranach administratora, musisz użyć admin_enqueue_scripts. Zauważ, że używasz tych dwóch hooków zarówno dla skryptów, jak i stylów – nie ma równoważnego Hooka ze słowem style w nim.

Aby skorzystać z jednego z tych hooków, musisz utworzyć funkcję, która wykona dwie rzeczy:

• rejestruje skrypt lub arkusz stylów (wp_register_style dla stylów, wp_register_script do skryptów)
• enqueues it (wp_enqueue_script lub wp_enqueue_style)

Są one takie same, niezależnie od tego, czy skrypt lub styl jest podłączony do Hooka front-end czy Hooka admin. Czasami wystarczy zapytać skrypt, jeśli jest już dołączony do WordPress-jQuery, na przykład.

Oto przykład, w jaki sposób zapytałbyś skrypt w wtyczce, która ma być używana na ekranach administratora. Ten skrypt jest zależny od jQuery:

Na register_script() funkcja ma trzy parametry w tym przykładzie:

• Unikalna nazwa mojego skryptu, którą następnie używam przy jego zapytaniu.
• Jego lokalizacja, która jest względna do bieżącego pliku.
• Zależność (opcjonalna), czyli jQuery.

Rejestracja arkusza stylów w wtyczce jest podobna i będziesz miał szansę to zrobić podczas pracy w tej części kursu.

Zwróć uwagę, że zadawanie zapytań o skrypty i style do motywów jest bardzo podobne, z wyjątkiem jednej kluczowej różnicy: lokalizacja będzie inna. Zamiast używać plugins_url(), używasz get_template_directory_uri() z podkatalog i plik wymienione po tym. Więc jeśli pytałeś o ten sam skrypt, który załadowałem powyżej w temacie, kodujesz go w ten sposób:

Aby uzyskać pełne wskazówki na ten temat, zobacz nasz przewodnik po dodawaniu skryptów i stylów do WordPress we właściwy sposób.

Zastosowania dla wtyczek

Możesz użyć wtyczki, aby dodać prawie każdy rodzaj funkcjonalności do swojej witryny. Podczas gdy już spojrzeliśmy na funkcje.php plik w motywie i dodana funkcjonalność dostosowywania do motywu za pomocą pliku Dołącz, zwykle powinieneś pisać wtyczkę, aby dodać funkcjonalność. Motywy są przeznaczone do projektowania i wyświetlania: określają, w jaki sposób witryna wyświetla jej zawartość, podczas gdy wtyczki dodają dodatkową funkcjonalność do dodawania treści lub zarządzania witryną.

Ogólną zasadą jest, aby zadać sobie to pytanie?

Czy jeśli zmienię motywy dla mojej witryny, nadal będę potrzebować tej funkcji?

Jeśli odpowiedź brzmi „tak”, napisz wtyczkę zamiast kodować ją w swoim motywie. Możesz więc napisać wtyczkę, aby wykonać jedną z następujących czynności:

• Zarejestruj niestandardowe typy postów lub taksonomie.
• Dodaj niestandardowy metabox do ekranów edycji postów.
• Utwórz widżet.
• Wstaw zawartość za pomocą Hooka (np. przycisku call to action lub zapytania niestandardowego).
• Utwórz krótki kod.
• Dodaj dostosowanie administratora, takie jak dodatkowy tekst pomocy lub ekrany administratora.
• Pobieraj zawartość z zewnętrznego źródła za pomocą interfejsu API.
• Utwórz niestandardowy szablon, aby wyświetlić zawartość dodaną przez wtyczkę (nie tylko w celu zastąpienia pliku szablonu motywu).
• Dodaj niestandardowy wyświetlacz, taki jak Galeria.
• Zmaksymalizuj wydajność, zwiększ SEO i/lub Zwiększ bezpieczeństwo.

Znajdziesz wiele z nich dostępnych w fantastycznych wtyczkach innych firm, w tym naszych własnych, więc warto je sprawdzić przed zakodowaniem własnego. Inną opcją jest pobranie wtyczki innej firmy i edycja jej w celu zaspokojenia Twoich potrzeb. Istnieje sporo wtyczek w katalogu wtyczek, które rozpoczęły życie w ten sposób.

Zauważ, że nie ma systemu potomnego/nadrzędnego dla wtyczek, tak jak w przypadku motywów, więc po rozwidleniu wtyczki będziesz odpowiedzialny za utrzymanie kodu. Alternatywnie, możesz utworzyć inną wtyczkę, która korzysta z hooków dostarczanych przez wtyczkę innej firmy-robię to dość często, gdy chcę dostosować WooCommerce, który jest pełen hooków.

Teraz stwórzmy kilka wtyczek. Przeprowadzę Cię przez proces tworzenia trzech wtyczek:

• Wtyczka shortcode
• Wtyczka widget
• Wtyczka treści do podłączenia do motywu

Budowanie wtyczki Shortcode

Skróty to bloki tekstu umieszczane w nawiasach kwadratowych w postach i stronach, aby dodać zawartość zdefiniowaną przez skrót. Przybierają one trzy formy:

• Proste skróty wstawiające predefiniowaną zawartość: [shortcode]. Na przykład możesz utworzyć krótki kod ze znacznikami przycisku wywołania akcji i dodać go do postów i stron za pomocą krótkiego kodu.
• Skróty z tagami otwierającymi i zamykającymi oraz zawartością między nimi: [shortcode]content [/shortcode]. Możesz użyć takiego krótkiego kodu, aby dodać znaczniki wokół zamkniętej zawartości,tak jak robimy to tutaj na blogu programistów WPMU.
• Skróty z parametrami: [parametr shortcode= „value”]. Skróty mogą mieć tyle parametrów, ile chcesz. Przykładem może być dodanie krótkiego kodu do wstawiania znaczników, ale umożliwienie użytkownikowi zmiany go za pomocą parametrów.

Zbadajmy wszystkie trzy z tych opcji, tworząc Skrót przycisku call to action.

Tworzenie wtyczki

Zacznij od utworzenia pustego pliku wtyczki w Twoim wp-content / wtyczki katalogu i dodanie do niego tekstu otwierającego. Nauczyłeś się tego szczegółowo w serii dla początkujących. Ponieważ dodamy kilka stylów, musisz utworzyć folder dla swojej wtyczki. Aktywuj wtyczkę na swojej stronie programistycznej.

Oto moje:

Zapisz i aktywuj wtyczkę.

Style Zapytań

Następnie sprawdźmy poprawnie arkusz stylów dla naszego przycisku call to action. Robisz to za pomocą wp_enqueue_style() funkcja i wp_enqueue_scripts hak.

Utwórz folder o nazwie css w folderze wtyczki i wewnątrz niego, plik o nazwie styl.css. Teraz otwórz główny plik wtyczki i dodaj do niego:

Spowoduje to wyświetlenie arkusza stylów dla pola call to action. Style są następujące: możesz dodać je do wtyczki styl.css plik lub stwórz własny:

Tworzenie prostego Shortcode

Zacznijmy od kodowania prostego shortcode, który wyświetla predefiniowane znaczniki i tekst, gdy zostanie dodany do strony lub posta.

W pliku Wtyczki Dodaj funkcję, aby utworzyć shortcode:

Utworzyłeś funkcję ze znacznikami do wyświetlania zawartości skrótu, a następnie użyłeś add_shortcode() funkcja, aby przekształcić to w shortcode. Na add_shortcode() funkcja ma dwa parametry:

• tekst, który użytkownik wpisuje w nawiasach kwadratowych, aby wstawić Skrót
• funkcja callback do uruchomienia, gdy WordPress natknie się na shortcode.

Teraz przejdź do strony lub postu w swojej witrynie i wpisz [CTA-simple]:

Zapisz post lub stronę i wyświetl ją. Oto moje:

Widać, że okno się wyświetla, ale nie jest w miejscu, w którym dodałem shortcode podczas edycji posta. Zamiast tego został wstawiony na początku treści. Naprawiamy to za pomocą kilku funkcji PHP: ob_start() oraz ob_get_clean().

Edytuj swoją funkcję, aby wyglądała tak:

Teraz sprawdź swoją stronę. Pudełko powinno pojawić się we właściwym miejscu:

Tak lepiej! Więc mamy teraz krótki kod. Ale co, jeśli użytkownik chce zmienić wyświetlany tekst? Możemy to zrobić, tworząc inny rodzaj shortcode: jeden z tagami otwierającymi i zamykającymi.

Tworzenie skrótu z tagami otwierania i zamykania

W pliku wtyczki Utwórz nową funkcję, taką jak ta:

To dodaje pewne parametry do naszej funkcji zwrotnej: $atts, który nie jest używany, ale jest niezbędny do działania drugiego parametru, oraz $content, czyli treści, które użytkownik wpisuje pomiędzy tagami.

Teraz w widoku Kod strony lub posta Wpisz krótki kod w następujący sposób:

Zapisz post/stronę i wyświetl ją. Wyświetli okno wezwania do działania z dowolną zawartością dodaną przez Ciebie:

Oznacza to, że użytkownicy mogą wpisywać dowolną treść w polu wezwanie do działania. Ale teraz uprośćmy im sprawy.

Tworzenie skrótu z parametrami

Istnieje duża szansa, że ktoś korzystający z twojego shortcode nie będzie czuł się komfortowo kodując znaczniki dla linku w nim. Stwórzmy więc bardziej zaawansowany shortcode z dwoma atrybutami: telefon oraz e-mail.

W pliku wtyczki Utwórz trzecią funkcję, taką jak ta:

Teraz wprowadź krótki kod na swojej stronie z atrybutami. Coś w tym stylu.:

Zaktualizuj post lub stronę i spójrz na nią w interfejsie. Pole call to action pojawi się przy użyciu wartości podanych dla tych atrybutów:

Możesz więc zobaczyć, jak dodawanie atrybutów do shortcode może nieco ułatwić użytkownikom, i zapisać ich do pisania kodu, dając im większą kontrolę nad tym, co jest wyjściowe. Możesz użyć tej techniki na różne sposoby kontroli, treści, kodu i stylizacji.

Budowanie wtyczki Widget

Innym powszechnym zastosowaniem wtyczek jest utworzenie widżetu, który użytkownicy mogą dodać do obszaru widżetu w swojej witrynie. Użyjmy kodu z naszej wtyczki shortcode, aby utworzyć widżet dla przycisku call to action.

Tworzenie widżetu

Aby utworzyć widżet, musisz wejść w interakcję z WP_Widget klasa, która jest częścią interfejsu API widgetów. Istnieją cztery elementy do kodowania widżetu, które trafiają do twojej klasy:

• Funkcja konstruowania widżetu
• Formularz dla administratora widżetu
• Funkcja przetwarzania aktualizacji ustawień widżetu
• Funkcja wyświetlania widżetu na stronie.

Następnie musisz zarejestrować widżet za pomocą register_widget().

Zacznijmy od zakodowania pustej klasy widżetu i zarejestrowania jej.

Utwórz nową wtyczkę z własnym folderem w swoim wp-content / wtyczki katalog. Utwórz plik css i arkusz stylów w tym folderze, podobnie jak w przypadku funkcji shortcode. Musisz edytować stylizację, aby wyglądała lepiej w obszarze widgetu-główną różnicą będzie szerokość, która będzie musiała dodać do 100% , gdy uwzględnisz marginesy i wypełnienia – a także kierować obszar widgetu, a nie shortcode (zobaczysz klasy po rozpoczęciu pisania kodu widgetu).

Nie powiem wam, jak to zrobić, ponieważ jest to coś, co powinniście być w stanie wypracować na tym etapie kursu, ale mój kod znajdziesz w kodzie źródłowym tego kursu.

Zapytaj swój arkusz stylów w wtyczce, tak jak w przypadku wtyczki shortcode-upewnij się, że nie używasz tej samej nazwy funkcji do zapytań, ponieważ spowoduje to błąd.

Oto Mój kod do wtyczki do tej pory:

Nie zapisuj jeszcze swojego pliku, ponieważ nie będzie działał bez zawartości tej klasy.

Tworzenie funkcji konstruktora

Pierwszą funkcją wewnątrz tej klasy jest funkcja konstruktora. Stwórzmy go. Wewnątrz klasy, dodaj to:

To konstruuje widżet: definiuje jego nazwę klasy i jej opis. Teraz przejdźmy do formularza na ekranie widżetów.

Nadal w swojej klasie, dodaj następujące:

To robi następujące:

• Definiuje trzy zmienne: tytuł, numer telefonu i adres e-mail.
• Wyświetla formularz z polami wejściowymi dla każdej z naszych trzech zmiennych.

Teraz mamy formularz na ekranie widżetów. Ale to jeszcze nic nie da.

Zapisywanie wejść do widżetu

Aby zapisać to, co użytkownik wprowadza do tych pól dla naszego widżetu, musimy utworzyć funkcję wprowadzania, która zapisuje je do bazy danych.

W funkcji, którą właśnie dodałeś, dodaj to:

To wykorzystuje $instace zmienna do przechowywania tablicy wartości, po jednej dla każdego z naszych pól. W każdym przypadku sprawdza, czy wprowadzono coś nowego i jeśli tak, zapisuje to jako nową wartość, zastępując starą.

Wyświetlanie widżetu na stronie

Ostatnim krokiem jest wyprowadzenie widżetu na stronie, w obszarze widżetu, do którego użytkownik go dodaje.

Jeszcze w swojej klasie, dodaj to:

Powinieneś rozpoznać część kodu, ponieważ jest on podobny do kodu, którego użyliśmy do wyprowadzenia pola call to action podczas tworzenia wtyczki shortcode.  Ponownie można zdefiniować zmienne oparte na wartości każdego elementu w tablicy dla $ instancja zmienna. Jest to następnie wyświetlane w oknie call to action, z tekstem i dodanym łączem.

To jest to! Teraz zapisz wtyczkę i upewnij się, że jest aktywowana na stronie. Oto pełna klasa, którą stworzysz:

Teraz, jeśli dodasz widżet do obszaru widżetu i wprowadzisz adres e-mail i numer telefonu, zostanie on wyświetlony w Twojej witrynie. Oto moja na pasku bocznym:

Możesz użyć tej techniki, aby utworzyć widżet, który wyświetli wszystko, co chcesz, i użyć tych zmiennych i pól formularza do zdefiniowania tekstu, klas lub czegokolwiek innego.

Budowanie wtyczki do podłączenia do motywu

Przejdźmy teraz do innego rodzaju wtyczki. Zamiast wyświetlać zawartość tej wtyczki za pomocą krótkiego kodu lub widżetu, dołączymy ją do haczyka w motywie.

Ponownie utworzymy call to action box, ale tym razem wstawimy go poniżej zawartości każdego postu za pomocą funkcji i znacznika warunkowego. Pojawi się tylko na pojedynczych postach, a nie na stronach lub stronach archiwalnych.

Zacznij od utworzenia nowej wtyczki, ponownie z arkuszem stylów, który musisz zapytać w pliku wtyczki. Musisz zmienić klasy w arkuszu stylów, aby odzwierciedlić klasy używane w kodzie wyjściowym wtyczki, który zobaczysz, gdy przejdziemy dalej.

Aby to działało z Twoim motywem, musisz albo uruchomić motyw, który opracowaliśmy w pierwszej i drugiej części tej serii (które możesz znaleźć w plikach źródłowych), albo dodać hook pod treścią we własnym motywie. Nazwa naszego haka to wpmu_after_content.

Po skonfigurowaniu wtyczki zacznij od dodania funkcji empty i haka:

Teraz wewnątrz tej funkcji Dodaj is_singular() znacznik warunkowy:

Następnie, wewnątrz tego znacznika warunkowego, Dodaj kod, aby wyświetlić pole wywołanie do akcji:

Zapisz plik i aktywuj wtyczkę. Oto pełna funkcja i hak:

Teraz, gdy przeglądasz post w swojej witrynie, zobaczysz okno wezwanie do działania na dole:

Więc teraz masz wyjście call to action box na stronach, a nie postach lub archiwach (sprawdź to na swojej stronie!).

Warto zauważyć, że okno wezwania do działania, z którym pracowaliśmy, można dodać za pomocą dostosowywania. Możesz dodać sekcję do dostosowywania okna połączenia z akcją, utworzyć kontrolki i ustawienia dla numeru telefonu i adresu e-mail, a następnie podłączyć wyjście do after_content hak. Możesz nawet dodać przycisk radiowy z prośbą o wybranie typu zawartości, pod którym ma się pojawić okno. Jako dodatkowe wyzwanie, dlaczego nie spróbować tego zrobić? Możesz użyć kombinacji technik, których nauczyłeś się tutaj i tych, których nauczyłeś się w poprzedniej części tej serii.

Wtyczki występują w wielu formach

Jak widać z pracy nad kilkoma przykładowymi wtyczkami, istnieją różne typy wtyczek, które wyświetlają zawartość w Twojej witrynie na różne sposoby. Są to proste wtyczki, wyprowadzające prosty kod i z praktyką zaczniesz tworzyć znacznie bardziej złożone wtyczki do tworzenia i generowania treści w sposób, który użytkownicy mogą zdefiniować.

Ale wtyczki nie dotyczą tylko wyświetlania treści-możesz utworzyć wtyczkę, która pomoże Ci w administrowaniu witryną lub poprawi wydajność witryny, wśród wielu innych zastosowań. Kontynuując ten kurs, przekonasz się, że kodujesz więcej wtyczek, które wykonują różne zadania.

W następnej części tej serii przejdziemy do pracy z niestandardowymi typami postów i taksonomiami. Dowiesz się, jak je zarejestrować i wyświetlić za pomocą odpowiednich plików szablonów motywów. Do zobaczenia następnym razem!

Tagi:

• rozwój
• średniozaawansowany