Jak utworzyć wtyczkę WordPress (krok po kroku dla początkujących)

Więc chcesz utworzyć wtyczkę WordPress, ale nie wiesz, od czego zacząć?

Wtyczki WordPress umożliwiają dodawanie niestandardowych funkcji do witryny. Istnieją tysiące z nich dostępnych za darmo, a nawet możesz tworzyć własne niestandardowe wtyczki WordPress.

W tym przewodniku pokażemy, jak stworzyć wtyczkę WordPress i jak rozpocząć podróż rozwoju wtyczki WordPress.

O Tworzeniu Pierwszej Wtyczki WordPress

Wtyczki WordPress są jak aplikacje dla Twojej witryny WordPress. Podobnie jak aplikacje na telefonie, możesz zainstalować wtyczki w WordPress, aby dodać nowe funkcje.

Aby dowiedzieć się więcej o wtyczkach WordPress, zobacz nasz przewodnik na temat wtyczek WordPress i jak one działają?

Do napisania wtyczki potrzebna jest podstawowa znajomość języków programowania, takich jak PHP, CSS, HTML i JavaScript.

Brzmi jak dużo nauki, prawda?

Nie martw się, nadal możesz śledzić nasz samouczek. Przeprowadzimy Cię przez proces krok po kroku, a pod koniec będziesz miał wystarczającą wiedzę na temat programowania WordPress, aby stworzyć prostą wtyczkę WordPress.

Uwaga: Ten samouczek pokazuje, jak napisać podstawową wtyczkę. Aby wszystko było proste, nie zagłębimy się w zaawansowane umiejętności kodowania WordPress.

Czego potrzebujesz, aby stworzyć swoją pierwszą wtyczkę WordPress?

Po pierwsze, potrzebujesz lokalnego środowiska programistycznego, aby przetestować wtyczkę WordPress na swoim komputerze. Aby to skonfigurować, zobacz nasz przewodnik, Jak zainstalować WordPress na komputerze z systemem Windows lub Mac).

Możesz również przetestować wtyczkę na stronie postoju. Jeśli jednak wystąpi błąd, możesz skończyć się zniszczeniem witryny, co sprawi, że będzie ona niedostępna.

Zobacz nasz przewodnik, Jak naprawić typowe błędy WordPress, aby rozwiązać te problemy.

Do napisania kodu potrzebny będzie również zwykły edytor tekstu. Notatnik lub TextEdit będą działać dobrze. Jeśli jednak chcesz wypróbować coś bardziej zaawansowanego, sprawdź te edytory kodu dla programistów.

Z tymi gotowymi, zaczynajmy.

Tworzenie Pierwszej Wtyczki WordPress

Pierwszym krokiem jest utworzenie nowego folderu na pulpicie lub folderze dokumenty i nazwanie go czymś w rodzaju WPB-plugin-tutorial lub my-first-plugin.

Następnie musisz utworzyć nowy plik w edytorze tekstu i zapisać go w folderze wtyczek jako WPB-plugin-tutorial.php lub mój-pierwszy-plugin.php. Najważniejsze, że … rozszerzenie php, ale możesz nazwać plik jak chcesz.

Musisz otworzyć ten plik PHP za pomocą edytora tekstu.

Pierwszą rzeczą, którą musisz dodać do pliku wtyczki, jest nagłówek wtyczki. Ten blok komentarzy po prostu mówi WordPress nazwę wtyczki, Wersja, strona internetowa, nazwa autora wtyczki i więcej.

<?php
/*
Nazwa Wtyczki: WPBeginner Plugin Tutorial
Plugin URI: https://www.wpbeginner.com 
Opis: Krótki Krótki opis wtyczki. Zostanie on wyświetlony na stronie wtyczek w obszarze administracyjnym WordPress. 
Wersja: 1.0
Autor: WPBeginner 
Autor URI: https://www.wpbeginner.com
Licencja: GPL2
URI licencji: https://www.gnu.org/licenses/gpl-2.0.html
Domena tekstowa: wpb-tutorial
Ścieżka domeny: / języki
*/

Po dodaniu nagłówka wtyczki możesz zacząć dodawać kod wtyczki pod nim.

W tym samouczku stworzymy prostą wtyczkę, która dodaje wiadomość na końcu każdego artykułu, prosząc użytkowników o śledzenie nas na Twitterze.

Po prostu skopiuj i wklej poniższy kod poniżej bloku nagłówka wtyczki.

function wpb_follow_us ($content) {

// Rób to tylko wtedy, gdy wyświetlany jest pojedynczy post
if (is_single() ) { 

// Wiadomość, którą chcesz wyświetlić po wpisie
// Dodaj adresy URL do swoich własnych profili na Twitterze i Facebooku

$content .= '<p class="follow-us">Jeśli podoba Ci się ten artykuł, Śledź nas na <a href = "http://twitter.com/wpbeginner" title=" WPBeginner na Twitterze"target=" _blank"rel = "nofollow" >Twitter</a> i <a href="https://www.facebook.com/wpbeginner Facebook Facebook</a>."title=" WPBeginner na Facebooku"target=" _blank"rel="nofollow" >Facebook < / a>.< / p>";

} 
// Return the content
return $ content; 

}
// Podłącz naszą funkcję do WordPress the_content filter
add_filter ('the_content', 'wpb_follow_us'); 

Nie zapomnij zastąpić adresów URL profilu Twittera i Facebooka własnymi adresami URL przed zapisaniem zmian.

Teraz przejdź do pulpitu na komputerze i utwórz plik zip Dla folderu wtyczek.

Użytkownicy komputerów Mac mogą kliknąć prawym przyciskiem myszy folder i wybrać „Compress wpb-plugin-tutorial”. Użytkownicy systemu Windows mogą kliknąć prawym przyciskiem myszy folder i wybrać Wyślij do folderu ” skompresowany (spakowany) .

Instalacja i aktywacja pierwszej wtyczki WordPress

Teraz, gdy stworzyliśmy wtyczkę, nadszedł czas, aby ją przetestować.

Przejdź do obszaru administracyjnego WordPress w swojej witrynie i odwiedź Wtyczki ” Dodaj Nowy strona.

Musisz kliknąć przycisk „Prześlij wtyczkę” na górze, aby przesłać wtyczkę. To pokaże Ci pole przesyłania wtyczki.

Śmiało i kliknij przycisk Wybierz plik, aby wybrać właśnie utworzony plik zip. Następnie kliknij przycisk Zainstaluj teraz, aby przesłać i zainstalować wtyczkę.

Po zainstalowaniu, śmiało i aktywuj wtyczkę.

Możesz teraz odwiedzić swoją stronę internetową, aby zobaczyć wtyczkę w akcji. Będziesz mógł zobaczyć nowy akapit na końcu wszystkich swoich pojedynczych postów.

Przesyłanie wtyczki do WordPress.org repozytorium wtyczek

Jeśli chcesz, aby Twoja wtyczka została odkryta i używana przez innych użytkowników WordPressa, możesz ją przesłać do WordPress.org repozytorium wtyczek.

Aby to zrobić, najpierw musisz utworzyć plik „Read Me” dla swojej wtyczki. Otwórz pusty plik tekstowy i zapisz go jako readme.txt w folderze wtyczek.

Ten readme.plik txt musi spełniać WordPress.org składnia pliku readme. Informacje, które dodajesz w readme.plik txt zostanie wyświetlony na stronie wtyczki na WordPress.org.

Oto próbka readme.plik txt, którego możesz użyć jako punktu wyjścia.

= = = Nazwa Wtyczki = = =
Autorzy: WPBeginner
Tagi: wpbeginner, plugin tutorial
Wymaga co najmniej: 5.5
Testowany do: 5.8
Stabilny tag: 1.0
Licencja: GPLv2 lub nowsza
URI licencji: http://www.gnu.org/licenses/gpl-2.0.html

Wtyczka do WordPressa, aby nauczyć początkujących, jak pisać wtyczkę do WordPressa. 

==Opis = = 

Ta prosta wtyczka jest częścią naszego przewodnika dla początkujących do pisania wtyczki WordPress. 

==Instalacja = = 

1. Prześlij folder wtyczek do folderu / wp-content / plugins/.
1. Przejdź do strony * * wtyczki * * i aktywuj wtyczkę.

= = Najczęściej Zadawane Pytania ==

= Jak korzystać z tej wtyczki? =

Odpowiedź na pytanie

= Jak odinstalować wtyczkę? =

Po prostu Dezaktywuj i usuń wtyczkę. 

= = Screeny ==
1. Opis pierwszego zrzutu ekranu. 
1. Opis drugiego zrzutu ekranu. 

==Changelog = = 
= 1.0 =
* Plugin wydany. 

Teraz pozwól nam wyjaśnić trochę o tym, jak działa składnia pliku readme wtyczki WordPress, dzięki czemu można dostosować go do swojej wtyczki.

Pierwsza linia wtyczki read me to Twoja nazwa wtyczki. Nazwa ta pojawi się w WordPress.org katalog wtyczek jako tytuł wtyczki.

Następna linia To Contributors. Są to identyfikatory użytkowników odpowiedzialne za zarządzanie wtyczką na WordPress.org. jeśli nie masz jeszcze WordPress.org konto użytkownika, następnie można utworzyć darmowe WordPress.org konto użytkownika, aby uzyskać identyfikator użytkownika.

„Wymaga co najmniej” i „testowane do” odnoszą się do wersji WordPress, z którymi współpracuje wtyczka. 'Stabilny tag’ jest wersją Twojej wtyczki.

Pola 'Licencja’ można pozostawić jako GPL, A adres URL taki sam.

Następnie możesz edytować obszar opisu, aby wyjaśnić, co robi twoja wtyczka.

Po edycji pliku readme wtyczki nie zapomnij zapisać zmian.

Teraz twój plugin jest gotowy do przeglądu przez WordPress.org ’ s plugins team. Aby przesłać swój plugin będziesz potrzebował darmowego WordPress.org konto.

Odwiedź Stronę Dodaj swój Plugin, a jeśli nie jesteś jeszcze zalogowany, kliknij przycisk logowania w prawym górnym rogu ekranu.

Po zalogowaniu będziesz mógł przesłać i przesłać wtyczkę do przeglądu. Po prostu kliknij przycisk Wybierz plik, aby wybrać plik zip wtyczki, a następnie kliknij przycisk Prześlij.

Na WordPress.org zespół przeglądu wtyczki będzie następnie spojrzeć na kod wtyczki dla typowych błędów i kontroli bezpieczeństwa. Po zatwierdzeniu otrzymasz wiadomość e-mail od zespołu wtyczek.

Ten e-mail będzie zawierał link do repozytorium Subversion (SVN) Twojej wtyczki hostowanej na WordPress.org.

Korzystanie z Subversion (SVN), aby przesłać wtyczkę

Subversion jest oprogramowaniem do kontroli wersji. Pozwala użytkownikom na wprowadzanie zmian w plikach i katalogach, zachowując Rejestr zmian, zarządzając różnymi wersjami i umożliwiając współpracę.

Potrzebujesz klienta SVN zainstalowanego na komputerze, aby przesłać wtyczkę do WordPress.org.

Użytkownicy systemu Windows mogą używać SilkSVN lub TortoiseSVN (za darmo). Użytkownicy komputerów Mac mogą zainstalować aplikację SmartSVN lub wersje na swoich komputerach.

W tym artykule pokażemy zrzuty ekranu wersji aplikacji dla komputerów Mac. Proces ten jest jednak bardzo podobny we wszystkich aplikacjach SVN z GUI.

Po zainstalowaniu musisz otworzyć aplikację wersje i pobrać kopię repozytorium wtyczki WordPress. Wystarczy kliknąć przycisk „nowe repozytorium”.

Spowoduje to wyświetlenie okienka, w którym najpierw musisz podać nazwę tej zakładki. Możesz go nazwać po swojej wtyczce. Następnie musisz dodać adres URL repozytorium SVN swojej wtyczki WordPress.

Kliknij przycisk Utwórz, aby połączyć się z repozytorium.

Aplikacja wersje będzie teraz pobrać kopię repozytorium wtyczki do komputera. Następnie kliknij prawym przyciskiem myszy nazwę repozytorium w widoku przeglądarki, a następnie wybierz „Kasa”.

Zostaniesz poproszony o podanie nazwy folderu i wybranie lokalizacji, w której chcesz go przechowywać na swoim komputerze. Możesz użyć tej samej nazwy folderu, co katalog wtyczki i kliknąć przycisk kasy, aby kontynuować.

Wersje aplikacja utworzy teraz lokalną kopię wtyczki na komputerze. Możesz go wyświetlić w repozytorium wtyczki lub przeglądać w aplikacji Finder.

Teraz musisz skopiować pliki wtyczek i wkleić je do folderu trunk lokalnego repozytorium.

Gdy to zrobisz, zauważysz ikonę znaku zapytania obok nowych plików w aplikacji wersje.

Ponieważ te pliki nie istniały wcześniej, musisz je „dodać”. Wybierz nowe pliki i kliknij przycisk Dodaj, aby dodać te pliki do folderu lokalnego.

Teraz, gdy Pliki Wtyczek są dodawane do subversion, jesteś teraz gotowy do ich przesłania. Zasadniczo, będziesz synchronizować zmiany w folderze lokalnym i katalogu subversion.

Kliknij lokalne repozytorium, aby je wybrać, a następnie kliknij przycisk „Zatwierdź zmiany”.

Pojawi się nowe okienko, a zobaczysz listę zmian i pole do dodania wiadomości o zatwierdzeniu.

Twoja aplikacja SVN będzie teraz synchronizować zmiany i zatwierdzać je do repozytorium wtyczki.

Teraz, gdy przesłałeś pliki wtyczki do bagażnika, nadszedł czas, aby oznaczyć je do wersji.

Przejdź do lokalnej kopii wtyczki i skopiuj pliki w folderze trunk. Następnie musisz otworzyć folder tags i w nim utworzyć nowy folder.

Nazwij ten folder po nazwie wersji. Upewnij się, że pasuje do wersji podanej w nagłówku wtyczki. W powyższym przykładowym kodzie użyliśmy wersji 1.0 Dla naszej wtyczki.

Po dodaniu folderu 1.0 w katalogu/ tags/. Zobaczysz ikonę znaku zapytania obok nazwy folderu w aplikacji Wersja.

Ponieważ jest to nowy folder, musisz kliknąć przycisk Dodaj, aby dołączyć folder i cały jego plik do repozytorium.

Następnie możesz śmiało kliknąć przycisk zatwierdzania, aby zsynchronizować zmiany. Możesz kontynuować edycję plików wtyczek w lokalnej kopii.

Po zakończeniu zmian, po prostu kliknij przycisk Zatwierdź, aby zsynchronizować je z WordPress.org repozytorium.

Jeśli wprowadziłeś kilka poważnych zmian w swojej wtyczce, będziesz chciał dodać nową wersję, dodając nowy folder nazwany po numerze wersji. Upewnij się, że Numer wersji pasuje do nagłówka wtyczki.

Możesz teraz wyświetlić podgląd wtyczki na WordPress.org katalog wtyczek.

Dodawanie grafiki do wtyczki na WordPress.org

WordPress.org umożliwia dodawanie kompozycji i zrzutów ekranu za pomocą wtyczek. Elementy te muszą być zgodne ze standardowymi praktykami nazewnictwa i powinny być przesyłane za pomocą Subversion.

Baner Nagłówka Wtyczki

Jest to duży obraz, który pojawia się na górze strony wtyczki. Może to być 772 x 250 lub 1544 x 500 pikseli w formatach jpeg lub png. Zawsze powinno być tak nazwane:

• sztandar-772×250.JPG lub baner-772×250.png
• sztandar-1544×500.JPG lub baner-1544×500.png

Ikona Wtyczki

Jest to mniejszy plik obrazu w kształcie kwadratu wyświetlany jako ikona wtyczki w wynikach wyszukiwania i aukcjach wtyczek. Może to być 125 x 125 lub 250 x 250 pikseli w formatach jpeg lub png.

Ten plik ikon powinien mieć taką nazwę:

• ikona-128×128.jpg lub ikona-128×128..png
• ikona-256×256.jpg lub ikona-256×256.png

Zrzuty ekranu

Pliki zrzutów ekranu powinny być nazwane przy użyciu następującego formatu:

• zrzut ekranu-1.png
• zrzut ekranu-2.png

Możesz dodać tyle, ile chcesz. Te zrzuty ekranu powinny być wyświetlane w tej samej kolejności, co opisy zrzutów ekranu w readme.plik txt.

Po przygotowaniu całej kompozycji możesz umieścić je w folderze zasoby lokalnej kopii wtyczki.

Następnie zobaczysz ikonę znaku zapytania obok folderu zasoby. Kliknij przycisk Dodaj, aby dodać nowy plik zasobów do repozytorium.

Na koniec kliknij przycisk Zatwierdź, aby przesłać pliki do WordPress.org repozytorium. Po pewnym czasie będziesz mógł zobaczyć grafikę pojawiającą się na stronie wtyczki.

Dalsze zasoby, aby dowiedzieć się WordPress rozwój wtyczki

Wtyczki WordPress mogą być tak proste, jak te, które pokazaliśmy powyżej. Mogą być również znacznie bardziej wydajne, takie jak wtyczka eCommerce lub wtyczki członkostwa, formularz kontaktowy lub wtyczki galerii zdjęć.

Te bardziej wydajne wtyczki WordPress mogą również mieć dodatki. Te dodatki działają jak wtyczki, które rozszerzają inne wtyczki.

Oto niektóre zasoby, które pomogą Ci dowiedzieć się więcej sposobów dodawania funkcjonalności do wtyczek WordPress.

1. Dodawanie skrótu w WordPress
2. funkcje.sztuczki plików php, których możesz teraz użyć w wtyczce specyficznej dla witryny.
3. Tworzenie niestandardowych typów postów i taksonomii.
4. Prawidłowe dodawanie arkuszy stylów i javascript w WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak stworzyć wtyczkę do WordPressa. Możesz również zapoznać się z tymi najlepszymi wtyczkami WordPress i przestudiować ich kod źródłowy, aby uzyskać więcej przykładów.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.