Jak podejść do nowoczesnego programowania WordPress (część 1)

Opublikowany: 2022-03-11

Nie jest tajemnicą, że baza kodów WordPressa to bałagan. Osobiście za każdym razem, gdy przez to przechodzę, chcę tylko zwinąć się w kłębek i płakać. Z drugiej strony WordPress znacznie wyprzedza swoją konkurencję. Łatwy w użyciu i potężny CMS to ogromne przedsięwzięcie, a WordPress pozostaje popularny, ponieważ to zapewnia.

Dlaczego więc mielibyśmy dbać o jakość kodu w rdzeniu WordPressa? Działa, prawda?

Tak, to działa, a 15-letnia baza kodu prawdopodobnie nie zostanie całkowicie zrefaktorowana przez opiekunów-wolontariuszy. Niestety oznacza to również, że działa on również jako przykład kodowania „na sposób WordPressa”, usprawiedliwiając wielu programistów za niestosowanie się do najlepszych praktyk i nowoczesnych technik programistycznych. Tak wiele wtyczek i motywów WordPress ma niesławnie zły kod, a ślepe podążanie za starszymi praktykami tylko kontynuuje trend.

Ale kogo obchodzi zły kod, który nadal spełnia swoje zadanie? Cóż, nic nie jest za darmo, a ktoś płaci za źle wykonaną pracę. Dzięki samej bazie kodu WordPress jej opiekunowie płacą na szczęście swoim czasem. Ale z własnym kodem płaci klient.

W przypadku każdego, nawet umiarkowanie złożonego systemu, koszt początkowego rozwoju jest nieznaczny w porównaniu z kosztem jego utrzymania, a utrzymanie oznacza również dodanie nowej funkcjonalności. Zatrudnienie programisty, który naprawi źle zaprojektowane i zaimplementowane oprogramowanie, będzie kosztować kilka razy więcej niż prawidłowe jego opracowanie od samego początku.

Tanie rozwiązania są zawsze najdroższe na dłuższą metę. Albo zostają porzuceni po wyczerpaniu budżetu. W rzeczywistości oszczędzamy pieniądze klientów, gdy stosujemy sprawdzone zasady i praktyki projektowania oprogramowania. Te metody nie są przesadną modą ani zmianą dla zmiany. Mądrość tutaj rodzi się ze zbiorowego doświadczenia programistów, a podążanie za nią naprawdę się opłaca.

Oczywiście nie dotyczy to naprawdę prostych zadań, takich jak dodawanie kilku linijek CSS lub kilka niestandardowych postów i przepisywania. Ale łączenie kilku wtyczek (lub częściej kilkudziesięciu wtyczek) lub tworzenie witryny opartej na Visual Composer to i tak nie jest inżynieria oprogramowania.

To nie jest złe samo w sobie — fakt, że niektóre rozwiązania są tak proste, sprawia, że ​​WordPress jest tak popularny. Ale w tej serii będę mówił o prawdziwym rozwoju WordPressa: pisaniu znaczącego kodu PHP, HTML, CSS i JavaScript. Zacznę od ogólnego przepływu pracy, a następnie skupię się na rozwoju front-endu w WordPressie w tym artykule.

Nowoczesny przepływ pracy programistyczny WordPress

Ogólnie kod jakości to:

  • Czytelny. Łatwo zrozumieć, co robi kod i dlaczego.
  • Modułowy. Małe bloki kodu z jasnym przeznaczeniem są łatwe do zrozumienia, opracowania i przetestowania.
  • Wielokrotnego użytku. Ponowne wykorzystanie już opracowanych modułów do rozwiązywania podobnych problemów znacznie przyspiesza rozwój.
  • Utrzymywane. Modyfikowanie starej funkcjonalności lub wprowadzanie nowych funkcji jest łatwe.

Główne wyniki — niższy koszt rozwoju i posiadania — mają wiele korzyści ubocznych, o których tutaj nie będę mówić.

Zamiast tego skupię się na technikach programistycznych i najlepszych praktykach, które mogą pomóc w tworzeniu kodu wysokiej jakości. Zacznijmy od kontroli wersji.

Użyj kontroli wersji

Oznacza to używanie Gita. Niestety, „kodowanie kowbojskie” w produkcji przez FTP to wciąż coś. Niedawno pracowałem dla agencji z siedzibą w Wielkiej Brytanii i w bazie kodu znajdowały się pliki o takich nazwach:

  • functions copy.php
  • functions copy 2.php
  • functions test.php
  • functions2.php
  • functions test2.php

Pierwszą rzeczą, którą powinieneś zrobić, gdy bierzesz witrynę WordPress, jest objęcie jej kontrolą wersji. Tanking Servers to zabawna retrospektywa błędów programistycznych WordPress. Byłoby bardzo łatwo naprawić te — i podobne wpadki, które prawdopodobnie przytrafiły się każdemu — za pomocą Gita.

Popełniłeś błąd w kodzie i cała witryna przestała działać? git reset wszystko tak, jak było. Aktualizacja nowej wersji wszystko popsuła? git reset działa jak wehikuł czasu. Jakiś złośliwy kod pojawił się znikąd? git status pokazuje wszystkie nowe pliki, usunięte pliki lub zmiany w śledzonych plikach. Następnie po prostu git checkout , przywracając oryginały.

Uważaj na ujawnianie folderu .git

OK, korzystanie z Gita jest wyraźnie ważne. Ale kiedy to zrobisz, równie ważne jest, aby nie narażać swojego repozytorium Git na włamanie. Problem pojawia się, gdy masz ujawnione foldery .git i przechowujesz w nich swoje dane uwierzytelniające.

Standardowa instalacja WordPressa w pełni znajduje się w publicznym folderze internetowym, a folder .git najprawdopodobniej tam również się znajduje. Oczywiście żadne dane logowania nie powinny być przechowywane w repozytorium Git, ale zdarza się, że większość repozytoriów zawiera poufne informacje, które nie powinny być ujawniane na zewnątrz.

Dlatego publiczny dostęp do folderu .git powinien być zablokowany. Jeśli używasz Apache, dodanie fragmentu poniżej na górze pliku .htaccess zablokuje dostęp do folderu .git oraz do plików dziennika. Pliki dziennika często zawierają poufne informacje, więc rozsądnie jest je również uniemożliwić. W przypadku różnych konfiguracji serwera WWW poproś o pomoc eksperta DevOps.

 RedirectMatch 404 /\.git RedirectMatch 404 ^.*\.log

Używaj oddzielnych środowisk

Nie twórz programów na działających witrynach — to przepis na przestoje i niezadowolonych klientów. OK, ale jak to ustawić?

Najlepiej byłoby, gdyby istniały trzy środowiska programistyczne, w których kod zawsze zmierzał w jednym kierunku: lokalny → staging → produkcja. To sprawdzona metoda unikania kolizji. Wszystkie aktualizacje rdzenia, wtyczek i motywów są najpierw wykonywane lokalnie, a następnie testowane na poczekalni, a na końcu wdrażane w środowisku produkcyjnym.

Na przykład konfiguracja specyficzna dla serwera może być przechowywana w osobnym pliku. Możesz utworzyć wp-config-local.php dla każdego środowiska lokalnego i tymczasowego. (Nie zapomnij dodać go do pliku .gitignore !) Następnie dodaj następujący fragment do wp-config.php :

 if (file_exists(dirname(__FILE__) . '/wp-config-local.php')) : // use local settings require_once(dirname(__FILE__) . '/wp-config-local.php'); else : // production settings endif;

Często najlepszym sposobem na skonfigurowanie różnych środowisk jest użycie zmiennych środowiskowych. Jeśli nie znasz tej koncepcji, radzę skorzystać z całkowicie nowoczesnego rozwiązania, takiego jak Roots.

Użyj WP-CLI

Interfejs wiersza poleceń WordPress (WP-CLI) to niezwykle przydatne narzędzie do administrowania instalacjami WordPress. Posiadanie dostępu do WP-CLI oznacza możliwość uruchomienia praktycznie dowolnej funkcji API WordPress. Na przykład możesz dodawać, usuwać i edytować użytkowników i ich hasła za pomocą WP-CLI. Przydatne, jeśli właśnie odziedziczyłeś witrynę, a właściciel się zablokował.

Innym przykładem jest to, że wstępne wdrożenie jest bardzo proste dzięki WP-CLI. Można to osiągnąć za pomocą kilku poleceń:

  • Pobieranie rdzenia, motywów i wtyczek
  • Wyszukiwanie i zastępowanie w bazie danych
  • Dodawanie administratora

Co więcej, działania te można oskryptować i zautomatyzować.

Użyj zaawansowanych opcji wdrażania

Mówiąc o automatyzacji, warto poznać kilka technologii i procesów wdrożeniowych, takich jak:

  • Ciągła integracja/ciągłe wdrażanie/dostarczanie (CI/CD)
  • Doker
  • Testy automatyczne (w tym testy regresji front-end)

To prawda, że ​​przejście od nieużywania kontroli wersji do radzenia sobie z Dockerem to ogromny skok i prawdopodobnie będzie przytłaczający dla typowego jednoosobowego projektu WordPress. Niektóre opcje mogą nawet nie być możliwe w zależności od dostawcy usług hostingowych. Zaawansowane wdrażanie jest jednak niezbędne w przypadku zespołów i większych projektów.

Użyj Lintingu

Jednak w przypadku projektów dowolnej wielkości linting jest dobrodziejstwem dla większości programistów. Linting oznacza automatyczne sprawdzanie kodu pod kątem błędów. W pełni funkcjonalne IDE, takie jak PHPStorm, robi to już po wyjęciu z pudełka; jednak prostsze edytory, takie jak VSCode czy Sublime Text, potrzebują dedykowanego programu o nazwie linter. Jednym ze sposobów ustawienia tego jest skonfigurowanie edytora tak, aby uruchamiał linter za każdym razem, gdy zapisujesz plik.

PHP_CodeSniffer to de facto linter dla PHP. Oprócz sprawdzania błędów składniowych, może również sprawdzić, czy Twój kod jest zgodny z wytycznymi dotyczącymi stylu, takimi jak PSR-2. To znacznie upraszcza przestrzeganie standardów kodowania.

W przypadku JavaScriptu popularnym linterem jest ESLint. Ma rozbudowany zestaw reguł i obsługuje niestandardowe konfiguracje dla wszystkich smaków i frameworków JavaScript.

Potężnym przypadkiem użycia jest tutaj włączenie lintingu do potoku kompilacji CI/CD, dzięki czemu cały kod jest automatycznie sprawdzany przed wdrożeniem.

Nowoczesne techniki programowania front-end WordPress

Po skonfigurowaniu odpowiedniego przepływu pracy dla całego projektu WordPress, zagłębmy się w najlepsze praktyki dotyczące interfejsu.

Użyj nowoczesnych narzędzi: Sass i ES6+

Świat front-end developmentu nieustannie się zmienia i jest w ciągłym ruchu. Kiedyś myśleliśmy, że Sass jest najlepszym narzędziem do pisania CSS — i nadal nim jest do tworzenia WordPressa sprzed Gutenberga — ale potem wszyscy zaczęli mówić o CSS w JS i stylizowanych komponentach.

Nawet WordPress nie mógł się oprzeć i podchwycił kilka z tych nowych technologii. Gutenberg, nowy edytor bloków, jest oparty na React i REST API.

Zdecydowanie powinieneś zapoznać się z tymi podstawowymi technologiami front-end:

  • ES6+. Dokumentacja WordPressa nazywa go ESNext, a nawet zachęca do korzystania z niego.
  • Sass. Używany przez WooCommerce i najlepszy sposób na pisanie CSS, jeśli nie jesteś jeszcze w CSS-in-JS.
  • Pakiet internetowy. Nawet rdzeń WordPressa używa teraz Webpack i Babel.

ES6 i Sass to odpowiednio współczesny JavaScript i CSS, a Webpack to narzędzie, które pozwala korzystać ze wszystkich tych nowoczesnych funkcji bez martwienia się o wsteczną kompatybilność. Webpack można nazwać kompilatorem aplikacji frontonu, który generuje pliki do użycia w przeglądarce.

Przejście z jQuery do Vue.js lub React

Rdzeń WordPressa i prawie wszystkie wtyczki WordPress zależą od jQuery, więc nie możesz po prostu przestać go używać. Właściwie nie ma sensu przestać go używać do prostych zadań, takich jak ukrywanie kilku elementów <div> lub wykonywanie jednorazowego żądania AJAX, gdy jesteś przyzwyczajony do robienia tego w ten sposób. jQuery i tak zostanie załadowane i jest proste i łatwe w użyciu.

Złożone aplikacje to obszary, z którymi boryka się jQuery: trudna do naśladowania logika, piekło wywołań zwrotnych, zmienne globalne i brak szablonów HTML. To wyraźnie wymaga innego sposobu organizacji aplikacji front-endowej.

Nowoczesne biblioteki front-end, takie jak React, wykorzystują zasady programowania obiektowego (OOP) i organizują architekturę aplikacji front-endowych w modułowe komponenty wielokrotnego użytku. Komponent zawiera cały kod, znaczniki i „stan komponentu” (zmienne) dla danego elementu. Elementem może być prawie wszystko: przycisk, pole wejściowe, formularz użytkownika lub widżet wyświetlający ostatnie posty z zaplecza WordPress REST API. Komponenty mogą zawierać inne komponenty, tworząc relację hierarchiczną.

W dzisiejszych czasach złożoność stron internetowych sprawia, że ​​organizowanie aplikacji w komponenty jest sprawdzonym sposobem tworzenia łatwych w utrzymaniu, szybkich aplikacji internetowych o dowolnej złożoności. Komponenty są wysoce wielokrotnego użytku, izolowane, a zatem łatwo testowalne „cegiełki”, więc naprawdę opłaca się nauczyć tej koncepcji.

Obecnie popularne są dwie biblioteki oparte na komponentach: Vue.js i React. React byłby oczywistym wyborem, ponieważ jest już używany przez Gutenberga. Jednak dla kogoś nowego we współczesnym JavaScript, Vue.js może być lepszym początkiem.

React rzuca Cię na głęboką wodę, używając funkcji ES6, klas, zastrzeżonej składni JSX i potoku kompilacji Webpack od razu. Krzywa uczenia się jest dość stroma.

Z drugiej strony Vue.js jest znacznie bardziej przyjazny dla początkujących i można go używać po prostu wstawiając tag <script> . Vue.js używa zwykłego JavaScript (ES5), HTML i CSS. Wprowadzenie do nowych pojęć jest znacznie bardziej stopniowe.

Po przepracowaniu kilku projektów Vue.js będziesz lepiej przygotowany do głębokiego zanurzenia się w React. Nie dlatego, że jest to zawsze potrzebne, ale na przykład rozwój Gutenberga tego wymaga.

Użyj interfejsu API REST WordPress

WordPress REST API to po prostu ustandaryzowany interfejs do zdalnego żądania i modyfikowania danych z WordPressa. To bardziej kwestia architektury oprogramowania niż zupełnie inny sposób kodowania. Te same stare fragmenty kodu jQuery AJAX mogą być używane z nieco innymi parametrami.

Najważniejsza korzyść? Ponieważ WordPress REST API standaryzuje komunikację między back-endem i front-endem, jest to duży krok w kierunku modułowości, ponownego wykorzystania i czytelności kodu. Te okropne szablony z HTML i PHP zmieszanymi razem i trochę SQL wrzucone do miksu muszą zniknąć. Gdy szablony są po prostu HTML z symbolami zastępczymi danych przekazywanych jako parametry, nie ma większej różnicy między przekazywaniem tych danych w PHP lub za pośrednictwem interfejsu API REST do aplikacji front-endowej.

Możesz także zajrzeć do WPGraphQL. Może ostatecznie zastąpić WordPress REST API, ale nie musi, ale szybko zyskuje na popularności.

Dowiedz się Gutenberga (klienci będą tego wkrótce potrzebować)

Ostatecznym celem Gutenberga jest między innymi pełna personalizacja witryny.

To kładzie podwaliny pod nowy model WordPress Core, który ostatecznie wpłynie na całe doświadczenie publikowania platformy.

Strona projektu WordPress Gutenberg na GitHub

Gutenberg otrzymał poważną reakcję od programistów WordPressa. Niektóre argumenty przeciwko włączeniu go do rdzenia WordPressa to:

  • Znaczna część użytkowników końcowych go nie potrzebuje, więc powinna to być opcjonalna wtyczka, a nie część rdzenia
  • Zepsuło niektóre strony
  • Po prostu nie był gotowy i przydałby się więcej polerowania i mniej błędów

Jednak dla autorów treści, którzy używają WordPressa jako platformy blogowej, Gutenberg wyraźnie zapewnia lepsze wrażenia niż stary edytor.

Wyłączenie Gutenberga będzie obsługiwane tak długo, jak będzie to potrzebne, tak. Ale wejście w to teraz jest mądrym pomysłem: kiedy klient podejdzie do ciebie i poprosi o rozwój Gutenberga, będziesz gotowy.

Czas nabrać tempa: nawet „WordPress Way” ewoluuje

Najczęstszym argumentem przeciwko używaniu wszystkich narzędzi i technik opisanych powyżej w rozwoju WordPressa jest to: „Sposób działania WordPress” nadal działa, a ten sposób ma być lepszy niż wszystkie te nowe, błyszczące rzeczy.

Ale teraz zauważyłeś, że główni programiści WordPressa doskonale znają wszystkie najnowsze osiągnięcia. Mało tego, wykorzystują je w miarę możliwości w nowszych częściach rdzenia ze względu na ich oczywiste zalety. Jedyną rzeczą, która nas powstrzymuje, jest przestarzały kod, którego nikt nie będzie refaktoryzował.

Od pewnego czasu WordPress i WooCommerce stosują praktykę tworzenia „wtyczek funkcjonalnych”, które wdrażają i wykorzystują nowe technologie. Kiedy nadejdzie odpowiedni czas, wtyczki te zostaną scalone z rdzeniem, tak jak zrobił to Gutenberg. WooCommerce ma również własny projekt React. WordPress REST API również zaczął działać jako osobna wtyczka i jest teraz częścią rdzenia WordPressa.

Pytanie nie brzmi, czy powinniśmy uczyć się nowych rzeczy i wykorzystywać je w mojej codziennej pracy, ale jak . Odpowiedź brzmi „stopniowo”, krok po kroku. Albo naucz się czegoś nowego, albo zrób coś, co dobrze znasz w nowy i inny sposób.

Na przykład dowiedz się, jak używać Webpack ze wszystkimi starymi skryptami. Webpack może transpilować Twój nowy kod ES6+ do „zwykłego” JavaScriptu zgodnego ze starszymi przeglądarkami. Może również minimalizować skrypty i łączyć je ze sobą. To jedna nowa rzecz. Gotowy? Następnie przepisz swój JavaScript, wykorzystując funkcje ES6. To nowy sposób robienia tego, co dobrze znasz.

Rezultat: nauczysz się Webpack i ES6. Jako profesjonaliści powinniśmy robić krok naprzód, a nie cofać się. Zawsze ucz się. I dziel się, gdy to zrobisz: Toptal prowadzi listę najlepszych praktyk programistycznych WordPress i z zadowoleniem przyjmuje wkład społeczności.

W drugiej części naszej serii zagłębimy się w część PHP współczesnego programowania zaplecza WordPress.