Jak zbudować swoją pierwszą wtyczkę WordPress. Przewodnik krok po kroku

Czy zawsze chciałeś zbudować własną wtyczkę WordPress, ale nie miałeś pojęcia, od czego zacząć? W tym artykule zamierzamy zdjąć tajemnicę z wtyczek i ujawnić, jak łatwo jest zbudować wtyczkę WordPress. Zdziwisz się, jak szybko możesz to zrobić i miejmy nadzieję, że będziesz podekscytowany prawie nieograniczonymi możliwościami oferowanymi w celu dodania funkcji do swojej witryny WordPress za pomocą niestandardowej wtyczki.

Jednym z głównych powodów, dla których WordPress okazał się tak niewiarygodnie popularny jako CMS (system zarządzania treścią) jest, częściowo ze względu na jego charakter open source, fakt, że możliwe jest znaczne dostosowanie zarówno projektu, jak i funkcjonalności stron internetowych zbudowanych przy użyciu WordPressa z prawie żadnych ograniczeń co do tego, co można osiągnąć.

Możesz to zrobić na dwa sposoby. Po pierwsze, pisząc kod, który zmienia wygląd lub funkcję Twojej witryny WordPress. Drugim (i najpopularniejszym sposobem) jest skorzystanie z wtyczek do tworzenia stron internetowych, takich jak Elementor, do zmiany wyglądu/wyglądu witryny, a następnie do korzystania z kolejnych wtyczek w celu dodania funkcjonalności. Każdy może korzystać z wtyczek… większość wymaga bardzo niewielkich umiejętności do konfiguracji i nie jest wymagane żadne doświadczenie w kodowaniu, co czyni je niesamowicie potężnym narzędziem.

Co to jest wtyczka i dlaczego powinienem ją utworzyć?

Jak być może już wiesz (lub już się domyślasz) wtyczki w WordPressie służą do rozszerzania funkcji witryny WordPress. WordPress jest dostarczany „po wyjęciu z pudełka” z wieloma przydatnymi funkcjami, które są gotowe do użycia. Wtyczki pozwalają albo ulepszyć dostępne wbudowane funkcje, albo szybko i łatwo dodać zupełnie nowe, bez konieczności kodowania. Pomyśl o wtyczkach WordPress jako jednym z narzędzi, które pozwalają stworzyć witrynę zbudowaną dokładnie według Twoich wymagań.

Skąd więc bierzesz wtyczki? Cóż, jednym z najlepszych miejsc do rozpoczęcia jest katalog wtyczek WordPress, który zawiera (w momencie pisania tego tekstu) 57 592 darmowych wtyczek zaprojektowanych, aby umożliwić Ci ulepszenie Twojej witryny w taki czy inny sposób. Szanse są dość wysokie, że jeśli potrzebujesz wtyczki, która oferuje konkretną funkcję lub funkcję, ktoś już zbudował wtyczkę, która wykona zadanie i dodała ją do katalogu, abyś mógł jej użyć.

Dlaczego więc miałbyś budować własną wtyczkę? Cóż, powodów jest kilka. Po pierwsze, wiele wtyczek innych firm będzie cierpieć z powodu „rozdęcia funkcji”. Innymi słowy, prawdopodobnie będą zawierać więcej funkcji, niż naprawdę potrzebujesz. Może to sprawić, że konfiguracja wtyczki i jej utrzymanie będą bardziej złożone.

Drugim i prawdopodobnie najbardziej prawdopodobnym powodem, dla którego chcesz zbudować własną wtyczkę, jest to, że nie możesz znaleźć wtyczki innej firmy, która zapewnia dokładnie taką funkcję lub funkcję, jakiej potrzebujesz. W przypadku braku osoby trzeciej oferującej odpowiednią wtyczkę, jedyną opcją jest zbudowanie własnej wtyczki (lub zlecenie kogoś, aby zrobił to za Ciebie). Jako bonus możesz wtedy zarabiać na nowej wtyczce, sprzedając ją innym, którzy również chcą funkcji lub funkcji, którą stworzyłeś dla swojej własnej witryny.

Hostuj swoją stronę internetową z Pressidium

60- DNIOWA GWARANCJA ZWROTU PIENIĘDZY

ZOBACZ NASZE PLANY

Tworzenie wtyczki WordPress

Zanurzmy się od razu i przejdźmy przez kroki, które należy wykonać, aby zbudować własną wtyczkę. To zabawny proces, który oferuje wiele możliwości.

Nazywanie wtyczki

Zanim zaczniemy jakiekolwiek kodowanie, najpierw musimy nazwać naszą wtyczkę. Ważne, aby ta nazwa była wyjątkowa. Dzieje się tak, aby nie kolidowało z innymi wtyczkami zainstalowanymi w Twojej witrynie. Aby „zabezpieczyć” swoją wtyczkę na przyszłość, w przypadku, gdy zdecydujesz się przesłać ją do katalogu wtyczek WordPress, warto również sprawdzić, czy nazwa nie będzie kolidować z żadną z tysięcy, które są już dostępne. Możesz to zrobić, przeszukując katalog wtyczek WordPress.

Zdecydowanie zaleca się również, aby nazwa wtyczki odzwierciedlała to, co faktycznie robi wtyczka. Zwiększy to również prawdopodobieństwo, że inni mogą znaleźć go w katalogu WordPress, jeśli go opublikowałeś.

Decydowanie o celach wtyczki

Zanim staniesz się zbyt uwikłany w rzeczywisty proces tworzenia wtyczki, najpierw musisz dokładnie określić, co chcesz osiągnąć dzięki wtyczce. O wiele łatwiej jest zaprojektować coś, gdy cel końcowy jest jasny, niż przeprojektować wtyczkę w połowie, gdy okaże się, że pożądana funkcjonalność nie zostanie dostarczona.

W tym samouczku zbudujemy wtyczkę, która automatycznie doda przycisk na dole każdego artykułu na blogu. Chociaż byłoby oczywiście możliwe ręczne dodanie przycisku na dole artykułów, jest to umiarkowanie czasochłonne za każdym razem, gdy dodajemy artykuł na blogu. Na stronie z tysiącami artykułów edytowanie każdego z nich w celu dodania takiego przycisku byłoby ogromnym przedsięwzięciem.

W tym przypadku wtyczka, która robi to automatycznie, zaoszczędziłaby nam ogromną ilość czasu. To klasyczny przykład zadania, które uzasadniałoby zbudowanie własnej wtyczki. Nazwiemy tę wtyczkę „Under Post Button”.

Teraz zdefiniowaliśmy jego funkcję i nazwaliśmy go, możemy zabrać się do pracy nad jego budowaniem!

Uwaga: do testowania wtyczki zawsze używaj serwera pomostowego, a nie działającej witryny.

Krok 1: Utwórz wymagane pliki/foldery, aby wtyczka działała

Na tym początkowym etapie utworzymy wtyczkę i zarejestrujemy ją na naszej stronie internetowej. Na tym etapie nie musimy się martwić o dodanie jakiejkolwiek funkcjonalności.

Utwórz folder wtyczek

Najpierw uzyskaj dostęp do swojej witryny za pośrednictwem klienta SFTP i przejdź do folderu /wp-content/plugins. W tym folderze utwórz nowy folder o unikalnej nazwie. Nazwa powinna być podobna do nazwy wtyczki i zawierać tylko małe litery i myślniki. Nasz folder będzie nosił nazwę „pod przyciskiem post”.

Utwórz główny plik

Następnie, w tym nowym folderze, utwórz plik PHP o tej samej nazwie, co nasz folder „under-post-button.php”.

Poinformuj WordPressa o wtyczce

Plik PHP powinien zawierać niezbędne skomentowane nagłówki, które informują WordPressa, że ​​plik jest wtyczką i dostarczają o nim informacji. W tym miejscu należy przestrzegać określonego standardowego formatu. Dostępne pola nagłówka zgodnie ze standardami WordPress to:

• Nazwa wtyczki
• URI wtyczki
• Opis
• Wersja
• Wymaga co najmniej
• Wymaga PHP
• Autor
• URI autora
• Licencja
• URI licencji
• Domena tekstowa
• Ścieżka domeny
• Sieć

Minimalny obowiązkowy komentarz w nagłówku, aby wtyczka działała, to „Nazwa wtyczki”. Na potrzeby tego samouczka to wszystko, co uwzględnimy. Pozostałe nagłówki, które normalnie byłyby zawarte we wtyczce, są wymagane przede wszystkim, gdy wtyczka jest rozpowszechniana (na przykład przesyłana do dyrektora wtyczek WordPress). Omówimy je bardziej szczegółowo w przyszłym artykule.

Aby dodać nazwę wtyczki do naszego pliku PHP, otwórz plik PHP w edytorze kodu (takim jak Sublime) i dodaj następujące elementy:

 <?php /* Plugin Name: Under Post Button */ ?>

Teraz przejdź do swojego administratora WordPress, kliknij „Wtyczki” i powinieneś zobaczyć swoją wtyczkę na liście wtyczek.

Możesz go teraz aktywować. Wtyczka jest teraz funkcjonalna, ale ponieważ nie kodowaliśmy żadnej funkcjonalności, w rzeczywistości nic nie zrobi.

Krok 2: Dodaj funkcjonalność do wtyczki

W pliku PHP wtyczki dodaj następujący kod:

 add_action( 'the_content', 'myButton' ); function myButton ( $content ) { return $content .= '<button class="btn">My Button</button>'; }

To, co robi ten fragment kodu, polega na tym, że używa zaczepu „add_action()”, aby dodać naszą funkcję zwrotną „myButton”. Oznacza to, że funkcja „myButton” zostanie wykonana wraz z domyślnymi funkcjami podstawowymi, które są wykonywane przy każdym wywołaniu akcji „the_content”.

Akcja „the_content” domyślnie zwraca zawartość bieżącego posta. Od teraz wraz z treścią będą drukowane również nasze niestandardowe dane wyjściowe. Jeśli odwiedzisz teraz dowolny wpis na blogu w swojej witrynie, zobaczysz przycisk na końcu artykułu. Tak więc, gdybyśmy mieli 1000 artykułów na naszej stronie internetowej, wszystkie z nich wyświetlałyby teraz ten przycisk na końcu artykułu. O wiele szybciej było dodać ten przycisk za pomocą wtyczki niż ręcznie dodać przycisk do każdego z tych 1000 artykułów!

Jeśli nie znasz jeszcze terminów „hak” i „działanie” lub chcesz lepiej zrozumieć sposób ich działania w WordPressie, zapoznaj się z odpowiednią oficjalną dokumentacją WordPress. Hooki i akcje są szeroko stosowane w WordPressie, więc jeśli planujesz tworzyć wtyczki, ważne jest, aby dobrze zrozumieć, czym one są i jak działają.

Krok 3: Ulepszanie naszej wtyczki

Pomyślnie dodaliśmy przycisk na dole wszystkich naszych artykułów WordPress. Ten przycisk to świetne CTA (wezwanie do działania), którego można użyć, aby zachęcić kogoś do skontaktowania się z Twoją firmą. Musimy tylko wprowadzić kilka małych zmian, aby ten przycisk działał jak wezwanie do działania, zmieniając wyświetlany tekst i dodając hiperłącze, aby po kliknięciu prowadziło do strony docelowej.

Zmiana tekstu wyświetlanego na przycisku

To bardzo proste. Po prostu edytuj tekst po tagu <button class=”btn”>. W naszym przypadku zmieniliśmy to na „Weź udział w naszym BEZPŁATNYM losowaniu nagród!”.

 add_action( 'the_content', 'myButton' ); function myButton ( $content ) { return $content .= '<button class="btn">Enter our FREE Prize Draw!</button>'; }

Dodaj link do przycisku

Jeśli wejdziesz do naszego bezpłatnego losowania nagród za pomocą formularza, możesz łatwo dodać link, który przekieruje ludzi do tego formularza. Na potrzeby tego przykładu skierujemy ich do naszej strony „Skontaktuj się z nami”

 add_action( 'the_content', 'myButton' ); function myButton ( $content ) { return $content .= '<a href="YOURDOMAIN.URL/contact/"><button class="btn">Enter our FREE Prize Draw!</button></a>'; }

Alternatywnie możesz użyć tak zwanego względnego adresu URL, który jest uważany za „poprawny” sposób dodawania adresów URL w WordPressie.

 add_action( 'the_content', 'myButton' ); function myButton ( $content ) { return $content .= '<a href="/contact/"><button class="btn">Enter our FREE Prize Draw!</button></a>'; }

I zaczynamy, gotowi do nawiązania nowych kontaktów za pomocą naszego własnego, niestandardowego przycisku CTA.

Wniosek

Chociaż stworzony przez nas plugin jest niewątpliwie bardzo prosty, to pokazuje ogromną moc, jaką mogą mieć wtyczki. Za pomocą kilku linijek kodu udało nam się przy niewielkim wysiłku dodać przycisk do potencjalnie tysięcy stron w naszej witrynie. Chociaż możesz nie myśleć, że jest to najbardziej niesamowita wtyczka, jaką kiedykolwiek widziałeś, mam nadzieję, że nasz samouczek pokazuje, jak stosunkowo łatwo jest zbudować niestandardową wtyczkę w WordPressie. Mając to na uwadze, możesz teraz swobodnie eksperymentować z własną wtyczką.

W przyszłym samouczku ulepszymy naszą wtyczkę, tworząc interfejs dla Twojej wtyczki w obszarze administracyjnym, który w WordPressie nazywamy stroną opcji. Zwiększy to funkcjonalność naszej wtyczki, ułatwiając użytkownikom zalogowanym do administratora WordPress zmianę takich rzeczy, jak nazwa przycisku i adres URL, bez konieczności bezpośredniej aktualizacji kodu wtyczki.

Tworzenie wtyczek może być niezwykle satysfakcjonujące. W sieci dostępnych jest mnóstwo informacji, które mogą Ci pomóc. Jedynym prawdziwym ograniczeniem jest Twoja wyobraźnia. Miłego tworzenia wtyczek!