Chcesz utworzyć WordPress Plugin ? Ten samouczek nauczy Cię, jak to zrobić.

Wtyczki przyczyniają się do popularności WordPressa, ponieważ pozwalają użytkownikom bez znajomości kodowania tworzyć niesamowite strony internetowe.

Istnieje ponad 50 000 wtyczek w rKatalog WordPressa  zaprojektowane do różnych celów. Znajdziesz WordPress wtyczki dla subskrypcja newslettera bezpieczeństwo et  handel elektroniczny . Po prostu to nazwij.

Bez nich witryna oparta na WordPressie byłaby jedynie zbiorem statycznych obrazów i bloków tekstu. Dzięki wtyczkom system zarządzania treścią może osiągnąć niesamowity poziom personalizacji.

Niezależnie od tego, czy potrzebujesz niestandardowej wtyczki do swojej witryny, czy chcesz utworzyć WordPress Plugin i zarabiać na tym, chodźmy.

Pytania na pytania

Czy wtyczki WordPress zarabiają?

Tak. TO WordPress wtyczki wnieść pieniądze. Możesz sprzedawać wtyczkę na swojej stronie internetowej lub na zewnętrznym rynku.

CodeCanyon ThemeForest i mojo rynek  to 3 najlepsze strony internetowe do sprzedaży wtyczek.

Możesz także dodać bezpłatną wersję swojej wtyczki do repozytorium WordPress i zaoferować wersję premium z dodatkowymi funkcjami.

Czy tworzenie wtyczek WordPress jest trudne?

Stworzenie WordPress Plugin jest stosunkowo łatwe i trudne, w zależności od pożądanych funkcji.

Tworzenie wtyczki jest łatwe, jeśli znasz już podstawy programowania WordPress i programowania PHP. Jeśli nie jesteś, może to być bardzo trudne. Najlepiej zacząć od prostej wtyczki, jak pokazano w tym przewodniku.

Ile zarabiają twórcy wtyczek?

Według Zip Recruiter średnia stawka godzinowa dla programistów WordPress wtyczki w Stanach Zjednoczonych wynosi 35 dolarów za godzinę. Daje to około 72 000 dolarów rocznie i 6 dolarów miesięcznie.

Jeśli sprzedasz swoją wtyczkę, możesz zarobić do 5 $ miesięcznie, w zależności od liczby sprzedaży. Oferując usługi dostosowywania wtyczek, możesz zarobić od 000 do 20 USD za godzinę.

Czego potrzebujesz, aby utworzyć wtyczkę WordPress

Aby stworzyć wtyczkę, nie musisz być ekspertem programistą WordPress. Aby rozpocząć, potrzebujesz tylko podstawowej wiedzy na temat kodowania.

  • Podstawowa znajomość programowania PHP: Wtyczki WordPress są napisane w PHP, więc zanim zaczniesz, powinieneś zrozumieć język i jego składnię.
  • Podstawowy HTML i CSS:  HTML i CSS pozwalają kontrolować wyświetlanie i wygląd wtyczek. Dlatego ważne jest, aby zrozumieć ich podstawy, aby stworzyć wtyczkę WordPress.
  • Znajomość WordPressa:  warto zapoznać się z platformą WordPress i jej głównymi funkcjami, a także z WordPress Codex (podręcznik online dotyczący programowania WordPress).
  • Środowisko programistyczne: Aby opracować i przetestować wtyczkę, musisz zainstalować WordPress na komputerze lokalnym lub w witrynie programistycznej. Umożliwi to przetestowanie wtyczki bez wpływu na działającą witrynę. Pokażemy Ci, jak to zrobić w następnej sekcji.
  • Edytor tekstu: Będziesz potrzebował edytora tekstu, aby napisać kod wtyczki. Dostępnych jest wiele opcji, takich jak Swysublimowany tekst, Atom et Visual Studio Code.

Jak stworzyć wtyczkę WordPress w 7 krokach

Krok 1: Zrozum, jak działają wtyczki WordPress

Ponieważ WordPress jest napisany w języku programowania, każdy, kto ma wiedzę na temat kodowania, może uzyskać dostęp do kodu WordPress i go modyfikować.

Dokładnie tak działają wtyczki. Pozwalają modyfikować i rozszerzać funkcjonalność WordPressa poprzez bezpośrednią interakcję z WordPressem za pomocą określonych funkcji PHP.

Tworzenie wtyczki WordPress i dodawanie kodu da coś tylko wtedy, gdy wywołasz funkcję PHP za pomocą haka. Haki umożliwiają Twojej wtyczce interakcję z WordPressem bez konieczności edytowania podstawowych plików.

Przyjrzyjmy się relacji między nawiasami kwadratowymi a funkcjami, aby zrozumieć podstawy wtyczek WordPress.

Funkcje WordPressa:

Kod WordPress jest zbudowany na funkcjach, które umożliwiają interakcję dowolnego kodu strony trzeciej z WordPress. Dlatego wiele funkcji znajdziesz we wtyczkach i motywach. Każda funkcja ma swoją nazwę, po której następuje nawias klamrowy i kod wewnątrz nawiasu klamrowego.

Voici un exemple:

function sticky_header() {

  ?>

  <script>

  // Select the header element

  var header = document.querySelector(‘header’);

  // Get the offset position of the header

  var sticky = header.offsetTop;

  // Add the sticky class to the header when you reach its scroll position. Remove “sticky” when you leave the scroll position

  function addSticky() {

    if (window.pageYOffset > sticky) {

      header.classList.add(“sticky”);

    } else {

      header.classList.remove(“sticky”);

    }

  }

  // Add the sticky class to the header when you scroll the page

  window.onscroll = function() {

    addSticky();

  };

  </script>

  <?php

}

add_action( ‘wp_footer’, ‘sticky_header’ );

Możesz wywołać tę funkcję bezpośrednio we wtyczce WordPress, wpisując sticky_header() w miejscu, w którym chcesz uruchomić kod. Ale jest to zła praktyka, ponieważ możesz napotkać problemy. Oto jeszcze dwa powody, dla których nie powinieneś wywoływać funkcji bezpośrednio w swoim kodzie.

Po pierwsze, bezpośrednie połączenie działa tylko w przypadku podstawowych funkcji, takich jak dodawanie treści do pliku motywu. Ponadto, stosując to podejście, będziesz musiał wielokrotnie wywoływać funkcje, aby używać ich w wielu miejscach, co jest czasochłonne i uciążliwe w plikach kodu.

Ręczne wywołanie funkcji może być również trudne, jeśli dopiero zaczynasz kodować. Podczas tworzenia wtyczek najlepszą praktyką jest dołączanie ich do haka. Oszczędzi to konieczności przywoływania funkcji w wielu miejscach.

Haki WordPressa:

Hak to określony punkt w kodzie WordPress, w którym możesz wykonywać własne niestandardowe funkcje. Istnieją dwa rodzaje haczyków: haczyki akcji i haczyki filtrujące.

Haki akcji

Haki akcji umożliwiają wykonywanie niestandardowych funkcji w określonym czasie w cyklu uruchamiania WordPress. Tak wygląda składnia haka akcji.

add_action('hook_name', 'my_custom_function');

Le  nazwa_haka  to nazwa haka akcji, którego chcesz użyć.

W WordPressie istnieje kilka haków akcji. Można je znaleźć w cOdex WordPress.

moja_funkcja_niestandardowa  to funkcja zawierająca kod, który chcesz wykonać. Ta funkcja musi być zdefiniowana przed funkcją add_action.

Składnia będzie wyglądać tak, aby dołączyć powyższą funkcję lepkiego nagłówka do haka.

add_action( 'wp_footer', 'sticky_header' );

Ta funkcja wykonuje funkcję sticky_header() po wywołaniu haka akcji wp_footer. Możesz także dołączyć funkcję do określonego haka, zastępując wp_footer wybraną nazwą haka.

Na przykład:

add_action( 'init', 'sticky_header' );

Spowoduje to uruchomienie funkcji lepkiego nagłówka po wywołaniu akcji inicjującej WordPress.

Haczyki do filtrów

Haczyki filtrów umożliwiają modyfikację danych przed ich wyświetleniem lub zapisaniem w bazie danych. Oto przykład haka filtra, który zmienia tytuł posta na blogu na wielkie litery.

add_filter( ‘the_title’, ‘uppercase_title’ );

function uppercase_title( $title ) {

  return strtoupper( $title );

}

Ta funkcja przyjmuje pojedynczy argument, $title, który jest oryginalnym tytułem posta na blogu.

Następnie funkcja używa funkcji strtoupper() aby przekonwertować tytuł na wielkie litery i zwraca zmodyfikowaną wartość.

Różnica między haczykami akcji i filtrów

Haki akcji umożliwiają wykonywanie niestandardowych funkcji w określonym czasie w cyklu uruchamiania WordPress. W powyższym przykładzie hak akcji Wp_footer jest wywoływana tuż przed znacznikiem.

Z drugiej strony haki filtrujące umożliwiają modyfikowanie danych podczas ich przesyłania przez bazę kodu WordPress.

Jak w powyższym przykładzie, haczyk na filtr tytuł pozwala na edycję tytułu wpisu na blogu przed jego wyświetleniem na stronie.

Krok 2: Skonfiguruj środowisko testowe

Drugim krokiem w tworzeniu wtyczki WordPress jest skonfigurowanie środowiska testowego lub programistycznego. Celem jest uniknięcie eksperymentowania na prawdziwej stronie.

Tworzenie wtyczki czasami wymaga przewijania w tę iz powrotem. Możesz także popełnić błędy, które zniszczą Twoją witrynę.

Możesz użyć swojego komputera jako lokalnego serwera do hostowania testowej witryny WordPress, w której możesz stworzyć i przetestować swoją wtyczkę.

Jeśli twój planzakwaterowanie wspiera tworzenie strony testowej, możesz także z niej skorzystać. Tutaj skorzystamy z pierwszego rozwiązania.

Skonfigurujemy środowisko testowe pobierz lokalnie , narzędzie programistyczne do lokalnego hostowania witryn WordPress.

Po zakończeniu pobierania uruchom oprogramowanie na komputerze i kliknij + ikona w lewym dolnym rogu, aby utworzyć nową witrynę lokalną.

utwórz wtyczkę WordPress

Wybrać z Utwórz nową witrynę a następnie kliknij przycisk KONTUNUUJ.

Następnie postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby dodać nazwę witryny, skonfigurować środowisko i utworzyć dane logowania WordPress.

Kiedy skończysz. Kliknij przycisk Dodaj witrynę. Po dodaniu witryny wybierz swoją witrynę w lokalnym pulpicie nawigacyjnym i uruchom pulpit administratora WordPress.

Po otwarciu strony logowania administratora użyj Nazwa Użytkownika i Hasło do WordPressa utworzony powyżej, aby uzyskać dostęp do pulpitu nawigacyjnego.

Zrobione. Twoje środowisko testowe jest gotowe. Zacznijmy tworzyć Twoją wtyczkę WordPress.

Krok 3: Utwórz folder wtyczek

Po utworzeniu środowiska testowego pierwszą rzeczą, którą musisz zrobić, jest utworzenie pliku wtyczki w katalogu witryny. Domyślnie WordPress przechowuje wszystkie wtyczki w katalogu wp-content/plugin.

Każda wtyczka zainstalowana na stronie WordPress będzie miała folder w tym katalogu. Dlatego dla swojej wtyczki będziesz musiał utworzyć folder w tym katalogu i nadać mu nazwę.

W tym samouczku przejdziemy do folderu wp-content/plugin w naszym lokalnym katalogu witryn. Oto jak.

Uwaga:  Proces jest taki sam, jeśli korzystasz z witryny pośredniczącej.

Na lokalnym pulpicie nawigacyjnym kliknij  Przejdź do folderu witryny . Zostaniesz przekierowany do lokalnego katalogu witryny.

wybierać mobilne i webowe w opcjach kliknij publiczny potem wp-content. Zobaczysz różne foldery w tym katalogu.

Otwórz folder Wtyczki i nowy podfolder z nazwą twojej wtyczki. Wykorzystamy tutaj Przyklejony nagłówek ponieważ jest to nazwa wtyczki, którą chcemy utworzyć.

Krok 4: Utwórz główny plik PHP dla swojej wtyczki

Po utworzeniu folderu wtyczek następnym krokiem jest dodanie pliku PHP do tego folderu. Tutaj będą dostępne kody i funkcje Twojej wtyczki.

W tym samouczku potrzebujemy tylko jednego pliku PHP dla prostej wtyczki, która tworzy lepki nagłówek w WordPress.

W przypadku bardziej złożonych wtyczek z zaawansowanymi funkcjami w folderze wtyczek mogą znajdować się różne typy plików, takie jak CSS i javascript. W naszym przypadku wystarczy jeden plik PHP.

Aby to zrobić, utwórz plik PHP w folderze wtyczki, jak na zrzucie ekranu poniżej.

Gdy plik jest gotowy, nadszedł czas, aby dodać kilka informacji do wtyczki.

Krok 5: Skonfiguruj informacje o wtyczce

Informacje o wtyczce, znane również jako nagłówek pliku wtyczki, to blok komentarza PHP, który zawiera szczegółowe informacje o wtyczce, takie jak nazwa wtyczki, wersja, adres URL, nazwa autora i jego strona internetowa, licencja itp.

To są informacje, które widzisz na stronie wtyczki WordPress po zainstalowaniu wtyczki.

Możesz znaleźć nagłówek pliku wtyczki w kodzie WordPress . To wygląda tak.

Po prostu skopiuj i wklej ten kod do pliku PHP wtyczki, a następnie edytuj szczegóły, aby pasowały do ​​wtyczki. W naszym przypadku czytnik plików wtyczek lepkich nagłówków będzie wyglądał następująco.

<?php

/*

Plugin Name: Sticky Header

Plugin URI: https://wordpress.org/plugins/sticky-header/

Description: Make your website header sticks to the top of every page on your website as users scroll.

Author: The Team

Author URI: https://blogpascher.com/sticky-header

Text Domain: Sticky Header 

Domain Path: /languages

*/

Po zapisaniu tego pliku utworzyłeś nową wtyczkę i możesz ją znaleźć na liście wtyczek już zainstalowanych w Twojej witrynie.

Zaloguj się do pulpitu nawigacyjnego WordPress witryny testowej i przejdź do Plugins>Plugins installés.

Zobaczysz wtyczkę Sticky Header ze szczegółami. Oto jest.

utwórz wtyczkę WordPress

Możesz teraz aktywować wtyczkę, ale to nic nie da, ponieważ nie dodaliśmy jeszcze do niej żadnej funkcjonalności. Sprawmy więc, by nasza wtyczka coś zrobiła.

Krok 6: Dodaj kod do swojej wtyczki

Aby to zrobić, dodamy lepki kod nagłówka, którego użyliśmy podczas nauki powyższych funkcji i zaczepów WordPress. Oto jak.

Otwórz plik PHP wtyczki. Pod szczegółami nagłówka skopiuj i wklej te fragmenty kodu do głównego pliku PHP wtyczki i zapisz go.

function sticky_header() {

  ?>

  <script>

  // Select the header element

  var header = document.querySelector(‘header’);

  // Get the offset position of the header

  var sticky = header.offsetTop;

  // Add the sticky class to the header when you reach its scroll position. Remove “sticky” when you leave the scroll position

  function addSticky() {

    if (window.pageYOffset > sticky) {

      header.classList.add(“sticky”);

    } else {

      header.classList.remove(“sticky”);

    }

  }

  // Add the sticky class to the header when you scroll the page

  window.onscroll = function() {

    addSticky();

  };

  </script>

  <?php

}

add_action( ‘wp_footer’, ‘sticky_header’ );

Ten kod robi dwie podstawowe rzeczy,

La fonction przyklejony_nagłówek jest aktywowany, gdy użytkownik przewija stronę i zatrzymuje się, gdy przewijanie się zatrzymuje.

Po drugie, akcja add_action('wp_footer', 'sticky_header'); skorzystaj z adresu…..

Zapisz kod i to wszystko. Pomyślnie stworzyłeś wtyczkę WordPress, która sprawia, że ​​nagłówek Twojej witryny jest lepki, gdy użytkownicy ją przewijają.

Krok 7: Aktywuj wtyczkę. w akcji.

Wróć na swoją stronę i aktywuj wtyczkę.

Podczas przewijania aktywnej wersji witryny nagłówek witryny pozostanie na górze strony.

utwórz wtyczkę WordPress

Gdy już zobaczysz efekt nowej wtyczki na swojej stronie demonstracyjnej, nadszedł czas, aby wypróbować ją na prawdziwej stronie.

Wcześniej upewnij się, że przetestowałeś wtyczkę pod kątem błędów i luk w zabezpieczeniach. Rozwiąż je, jeśli dotyczy. Jako środek ostrożności wykonać kopię zapasową witryny WordPress przed wdrożeniem nowej wtyczki.

Jeśli jesteś zadowolony z działania wtyczki w swojej witrynie, możesz przesłać ją do repozytorium wtyczek WordPress. Ponieważ właściciele witryn używają go za darmo, otrzymasz informację zwrotną, co należy poprawić i jak to zrobić.

A jeśli chcesz zarabiać na swojej wtyczce, możesz ją sprzedać na jednej ze stron internetowych, które wymieniliśmy powyżej

Wnioski

Jeśli dotarłeś tak daleko, zgodzisz się, że tworzenie wtyczki WordPress jest stosunkowo proste. Postępując zgodnie z instrukcjami zawartymi w tym przewodniku, będziesz w stanie stworzyć podstawową wtyczkę WordPress. Możesz eksperymentować z dowolną liczbą funkcji i ulepszać funkcjonalność swojej wtyczki.

Tworzenie złożonych wtyczek odbywa się w ten sam sposób. Większa funkcjonalność oznacza więcej funkcji w pliku wtyczki.

Czy kiedykolwiek próbowałeś stworzyć wtyczkę WordPress? Porozmawiajmy o twoich doświadczeniach w sekcji komentarzy poniżej.