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

Przez lata stworzyliśmy wiele wtyczek do WordPressa, pomagając zarówno sobie, jak i tysiącom użytkowników. Wielu naszych czytelników pytało nas, jak mogą tworzyć własne wtyczki.

Tworzenie wtyczek do WordPressa może początkowo wydawać się trudne, ale w rzeczywistości jest całkiem zabawne i satysfakcjonujące. Niezależnie od tego, czy chcesz utworzyć nową funkcję na swojej witrynie, czy podzielić się czymś przydatnym z innymi, tworzenie wtyczek to świetny sposób, aby to zrobić.

W tym przewodniku pokażemy ci, jak krok po kroku stworzyć twoją pierwszą wtyczkę do WordPressa.

Co jest potrzebne do stworzenia twojej pierwszej wtyczki WordPress?

Wtyczki WordPress są jak aplikacje dla twojej witryny internetowej WordPress. Podobnie jak aplikacje na twoim telefonie, możesz zainstalować wtyczki w WordPressie, aby utwórz nowe funkcje.

Aby dowiedzieć się więcej o wtyczkach WordPress, zapoznaj się z naszym przewodnikiem na temat wtyczek WordPress i ich działania.

Aby stworzyć twoją pierwszą wtyczkę do WordPressa, będziesz potrzebował podstawowej znajomości języków kodowania, takich jak PHP, CSS, HTML i JavaScript.

To może wydawać się dużo, ale nie martw się; nadal możesz postępować zgodnie z naszym poradnikiem. Przeprowadzimy cię przez ten proces krok po kroku, a pod koniec będziesz miał wystarczającą wiedzę na temat programowania WordPress, aby stworzyć prostą wtyczkę WordPress.

Z tego powodu będziemy trzymać się podstaw i nie będziemy zagłębiać się w zaawansowane umiejętności kodowania WordPress.

Po drugie, będziesz potrzebować lokalnego środowiska programistycznego, aby przetestować twoją wtyczkę WordPress na komputerze. Aby je skonfigurować, zapoznaj się z naszym przewodnikiem na temat instalacji WordPressa na twoim komputerze z systemem Windows lub Mac).

Możesz również przetestować twoją wtyczkę na witrynie internetowej . Jeśli jednak wystąpi błąd, może to spowodować uszkodzenie twojej witryny internetowej, czyniąc ją niedostępną.

Zapoznaj się z naszym przewodnikiem na temat poprawek typowych błędów WordPress, aby rozwiązać te problemy.

Będziesz także potrzebował zwykłego edytora tekstu do napisania twojego kodu. Notatnik lub TextEdit będą działać dobrze. Jeśli jednak chcesz wypróbować coś bardziej zaawansowanego, sprawdź te edytory kodu dla programistów.

Mając je gotowe, zacznijmy od poradnika. Możesz skorzystać z poniższych odnośników, aby przejść do konkretnego tematu:

Krok 1: Utwórz podstawową wtyczkę WordPress

Pierwszym krokiem jest utworzenie nowego folderu na pulpicie lub w katalogu dokumentów i nadanie mu nazwy takiej jak wpb-plugin-tutorial lub my-first-plugin.

Następnie musisz utworzyć nowy plik w edytorze tekstowym i zapisać go w twoim katalogu wtyczek jako wpb-plugin-tutorial.php lub my-first-plugin.php. Importowane jest rozszerzenie .php, ale możesz nazwać plik, jak chcesz.

Musisz otworzyć ten plik PHP w twoim edytorze tekstu.

Pierwszą rzeczą, którą musisz dodać do twojego pliku wtyczki, jest nagłówek wtyczki. Ten blok komentarza po prostu informuje WordPress o nazwie twojej wtyczki, wersji, witrynie internetowej, nazwie autora wtyczki i nie tylko:

/*
Plugin Name:  WPBeginner Plugin Tutorial
Plugin URI:   https://www.wpbeginner.com
Description:  A short little description of the plugin. It will be displayed on the Plugins page in WordPress admin area.
Version:      1.0
Author:       WPBeginner
Author URI:   https://www.wpbeginner.com
License:      GPL2
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  wpb-tutorial
Domain Path:  /languages
*/

Po dodaniu nagłówka wtyczki można rozpocząć dodawanie kodu wtyczki pod nim.

W tym poradniku stworzymy prostą wtyczkę, która na końcu każdego artykułu doda wiadomość z prośbą o śledzenie nas na Twitterze.

Wystarczy skopiować i wkleić poniższy kod pod blokiem nagłówka twojej wtyczki:

<?php
function wpb_follow_us($content) {

// Only do this when a single post is displayed
if ( is_single() ) { 

// Message you want to display after the post
// Add URLs to your own Twitter and Facebook profiles

$content .= '<p class="follow-us">If you liked this article, then please follow us on <a href="http://twitter.com/wpbeginner" title="WPBeginner on Twitter" target="_blank" rel="nofollow">Twitter</a> and <a href="https://www.facebook.com/wpbeginner" title="WPBeginner on Facebook" target="_blank" rel="nofollow">Facebook</a>.</p>';

}
// Return the content
return $content; 

}
// Hook our function to WordPress the_content filter
add_filter('the_content', 'wpb_follow_us'); 

Nie zapomnij zastąpić adresów URL profili na Twitterze i Facebooku twoimi własnymi przed zapisaniem zmian.

Teraz przejdź do pulpitu na twoim komputerze i utwórz plik zip dla katalogu z wtyczką.

Użytkownicy komputerów Mac mogą kliknąć katalog prawym przyciskiem myszy i wybrać opcję „Compress wpb-plugin-tutorial”. Użytkownicy systemu Windows mogą kliknąć katalog prawym przyciskiem myszy i wybrać opcję „Kompresuj do pliku zip”.

Krok 2: Instalacja i włączanie twojej pierwszej wtyczki WordPress

Teraz, gdy utworzyliśmy wtyczkę, nadszedł czas, aby ją zainstalować, abyś mógł ją przetestować. Aby uzyskać instrukcje krok po kroku, możesz zapoznać się z naszym artykułem na temat instalacji wtyczki WordPress.

Przejdź do obszaru administracyjnego WordPress na twojej witrynie internetowej i przejdź na stronę Wtyczki ” Dodaj nowy.

Musisz kliknąć przycisk „Prześlij wtyczkę” u góry, aby przesłać twoją wtyczkę. Spowoduje to wyświetlenie okna przesyłania wtyczki.

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, włącz wtyczkę.

Możesz teraz przejść na twoją witrynę internetową, aby zobaczyć wtyczkę w działaniu.

Będziesz mógł zobaczyć nowy akapit na końcu wszystkich twoich pojedynczych wpisów.

Krok 3: Prześlij twoją wtyczkę do repozytorium wtyczek WordPress.org

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

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

Ten plik readme.txt musi być zgodny ze składnią pliku readme WordPress.org. Informacje dodane w pliku readme.txt będą wyświetlane na stronie twojej wtyczki w witrynie WordPress.org.

Oto przykładowy plik readme.txt, który można wykorzystać jako punkt wyjścia:

=== Your Plugin Name ===
Contributors: WPBeginner
Tags: wpbeginner, plugin tutorial
Requires at least: 6.0
Tested up to: 6.2
Stable tag: 1.0
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

A WordPress plugin to teach beginners how to write a WordPress plugin. 

== Description ==

This simple plugin is part of our beginner's guide to writing a WordPress plugin. 

== Installation ==

1. Upload the plugin folder to your /wp-content/plugins/ folder.
1. Go to the **Plugins** page and activate the plugin.

== Frequently Asked Questions ==

= How do I use this plugin? =

Answer to the question

= How to uninstall the plugin? =

Simply deactivate and delete the plugin. 

== Screenshots ==
1. Description of the first screenshot.
1. Description of the second screenshot. 

== Changelog ==
= 1.0 =
* Plugin released.

Teraz wyjaśnijmy trochę o tym, jak działa składnia pliku readme wtyczki WordPress, abyś mógł dostosować go do swojej wtyczki.

Pierwsza linia wtyczki read me to twoja nazwa wtyczki. Ta nazwa pojawi się w katalogu wtyczek WordPress.org jako tytuł twojej wtyczki.

Następny wiersz to Współtwórcy. Są to identyfikatory użytkowników odpowiedzialnych za zarządzanie twoją wtyczką na WordPress.org. Jeśli nie masz jeszcze konta użytkownika WordPress.org, możesz utworzyć bezpłatne konto użytkownika WordPress.org, aby uzyskać twój identyfikator użytkownika.

„Wymaga co najmniej” i „Przetestowano do” odnoszą się do wersji WordPress, z którymi współpracuje twoja wtyczka. Tag „Stable” to wersja twojej wtyczki.

Pola „Licencja” można pozostawić jako GPL, a adres URL bez zmian.

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

Po edycji pliku readme twojej wtyczki, nie zapomnij zapisać zmian.

Teraz twoja wtyczka jest gotowa do sprawdzenia przez zespół ds. wtyczek WordPress.org. Aby przesłać twoją wtyczkę, będziesz potrzebować darmowego konta WordPress.org.

Przejdź na stronę Dodaj swoją wty czkę i jeśli nie jesteś jeszcze zalogowany, kliknij przycisk „zaloguj się”.

Po zalogowaniu się, będziesz mógł przesłać swoją wtyczkę do recenzji.

Wystarczy kliknąć przycisk „Wybierz plik”, aby wybrać plik zip twojej wtyczki. Następnie zaznacz wszystkie odpowiednie pola i kliknij „Prześlij”.

Zespół ds. recenzji wtyczek WordPress.org sprawdzi następnie twój kod wtyczki pod kątem typowych błędów i zabezpieczeń. Po zatwierdzeniu otrzymasz e-mail od zespołu ds. wtyczek.

Ten e-mail będzie zawierał odnośnik do repozytorium Subversion (SVN) twojej wtyczki hostowanej na WordPress.org.

Krok 4: Użyj Subversion (SVN), aby wgrać twoją wtyczkę

Subversion to oprogramowanie do kontroli wersji. Umożliwia ono użytkownikom wprowadzanie zmian w plikach i katalogach przy jednoczesnym prowadzeniu rejestru zmian, zarządzaniu różnymi wersjami i umożliwianiu współpracy.

Będziesz potrzebował klienta SVN zainstalowanego na komputerze, aby przesłać twoją wtyczkę do WordPress.org.

Użytkownicy systemu Windows mogą korzystać z SilkSVN lub TortoiseSVN (bezpłatnie). Użytkownicy komputerów Mac mogą zainstalować SmartSVN lub Versions App na swoich komputerach.

W tym artykule pokażemy zrzuty ekranu aplikacji Versions dla komputerów Mac. Proces ten jest jednak bardzo podobny we wszystkich aplikacjach SVN z graficznym interfejsem użytkownika.

Po zainstalowaniu należy otworzyć aplikację Wersje i sprawdzić kopię repozytorium twojej wtyczki WordPress. Wystarczy kliknąć przycisk „New Repository Bookmark”.

Spowoduje to wyświetlenie wyskakującego okienka, w którym najpierw należy podać nazwę tej zakładki. Możesz nadać jej nazwę twojej wtyczki.

Następnie należy dodać adres URL repozytorium SVN twojej wtyczki WordPress.

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

Aplikacja Versions App pobierze teraz kopię repozytorium twojej wtyczki na twój komputer. Następnie kliknij prawym przyciskiem myszy nazwę twojego repozytorium w widoku przeglądarki, a następnie wybierz „Checkout”.

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

Aplikacja Versions utworzy teraz lokalną kopię twojej wtyczki na twoim komputerze. Możesz ją zobaczyć w repozytorium twojej wtyczki lub przeglądać za pomocą aplikacji Finder.

Teraz musisz skopiować pliki twojej wtyczki i wkleić je do katalogu trunk twojego lokalnego repozytorium.

Gdy to zrobisz, obok nowych plików w aplikacji Wersje pojawi się ikonka znaku zapytania.

Ponieważ pliki te nie istniały wcześniej, należy je dodać. Wybierz nowe pliki i kliknij przycisk „Dodaj”, aby dodać je do twojego regionalnego katalogu.

Teraz, gdy twoje pliki wtyczek zostały dodane do subversion, jesteś gotowy, aby je przesłać. Zasadniczo będziesz synchronizować zmiany w twoim regionalnym katalogu i katalogu subversion.

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

Pojawi się nowe wyskakujące okienko.

Zobaczysz listę zmian i pole do dodania wiadomości o zatwierdzeniu. Wystarczy kliknąć „Zatwierdź”, aby kontynuować.

Twoja aplikacja SVN zsynchronizuje teraz zmiany i zatwierdzi je w repozytorium wtyczki.

Teraz, gdy przesłałeś pliki wtyczki do trunk, nadszedł czas, aby tagować je do wersji.

Przejdź do lokalnej kopii twojej wtyczki i skopiuj pliki do katalogu trunk. Następnie należy otworzyć katalog tagów i utworzyć w nim nowy folder.

Nazwij ten katalog nazwą wersji. Upewnij się, że jest ona zgodna z wersją, którą wpiszesz w nagłówku twojej wtyczki. W powyższym przykładowym kodzie użyliśmy wersji 1.0 dla naszej wtyczki.

Po dodaniu folderu 1.0 w katalogu /tags/. W aplikacji Wersja zostanie powiadomiona ikonka znaku zapytania obok nazwy katalogu.

Ponieważ jest to utwórz nowy katalog, należy kliknąć przycisk „Dodaj”, aby włączyć katalog i wszystkie jego pliki do repozytorium.

Następnie możesz kliknąć przycisk „Zatwierdź”, aby zsynchronizować twoje zmiany. Możesz kontynuować edycję plików twojej wtyczki w kopii lokalnej.

Po wprowadzeniu twoich zmian wystarczy kliknąć przycisk zatwierdzenia, aby zsynchronizować je z repozytorium WordPress.org.

Jeśli dokonałeś poważnych zmian w twojej wtyczce, będziesz chciał utworzyć nową wersję, dodając nowy katalog o nazwie zgodnej z numerem wersji. Upewnij się, że numer wersji jest zgodny z nagłówkiem twojej wtyczki.

Możesz teraz wyświetlić podgląd twojej wtyczki w katalogu wtyczek WordPress.org.

Krok 5: Dodaj grafikę do twojej wtyczki na WordPress.org

WordPress.org umożliwia dodawanie grafiki i zrzutów ekranu wraz z twoją wtyczką. Elementy te muszą być zgodne ze standardowymi praktykami nazewnictwa i powinny być przesyłane przy użyciu Subversion.

Baner nagłówka wtyczki

Jest to duży obrazek, który pojawia się na górze strony wtyczki. Może mieć rozmiar 772 x 250 lub 1544 x 500 pikseli w formacie jpeg lub png. Jego nazwa powinna zawsze wyglądać następująco:

• banner-772×250.jpg lub banner-772×250.png
• banner-1544×500.jpg lub banner-1544×500.png

Ikonka wtyczki

Ten mniejszy plik obrazka w kształcie kwadratu jest wyświetlany jako ikonka wtyczki w wynikach wyszukiwania i listach wtyczek. Może mieć rozmiar 125 x 125 lub 250 x 250 pikseli w formacie jpeg lub png.

Plik z ikonką powinien mieć taką nazwę:

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

Zrzuty ekranu

Pliki zrzutów ekranu powinny być nazwane w następującym formacie:

• screenshot-1.png
• screenshot-2.png

Możesz dodać dowolną ich liczbę. Te zrzuty ekranu powinny pojawić się w tej samej kolejności, co opisy zrzutów ekranu w twoim pliku readme.txt.

Po przygotowaniu wszystkich elementów graficznych, możesz umieścić je w katalogu zasobów regionalnej kopii twojej wtyczki.

Następnie obok katalogu z zasobami pojawi się ikonka znaku zapytania. Kliknij przycisk „Dodaj”, aby utworzyć nowy plik zasobów w twoim repozytorium.

Na koniec kliknij przycisk commit, aby przesłać twoje pliki do repozytorium WordPress.org. Po chwili będziesz mógł zobaczyć, jak grafika pojawia się na twojej stronie wtyczki.

Najlepsze przewodniki do nauki tworzenia wtyczek WordPress

Wtyczki WordPress mogą być tak proste, jak ta, którą pokazaliśmy powyżej. Mogą być również znacznie bardziej rozbudowane, takie jak quizy, liczniki czasu, RSVP, głosowania, recenzje Google i wiele innych.

Niektóre potężne wtyczki WordPress mogą również posiadać dodatki. Te dodatki działają jak wtyczki, które rozszerzają inne wtyczki.

Oto kilka zasobów, które pomogą ci poznać więcej sposobów na dodanie funkcjonalności do twoich wtyczek WordPress:

• Przydatne fragmenty kodu WordPress dla początkujących
• Dodawanie krótkiego kodu w WordPress
• sztuczki z plikiem functions. php, które można teraz wykorzystać w witrynie wtyczki
• Tworzenie własnych typów treści i taksonomii
• Prawidłowe dodawanie arkuszy stylów i JavaScript w WordPressie

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak stworzyć wtyczkę WordPress. Warto również zapoznać się z naszym przewodnikiem na temat tworzenia nowych funkcji dla WordPressa i naszą listą najbardziej udanych firm i przedsiębiorstw WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.