Nowoczesny przepływ pracy programistyczny WordPress ze stosem Roots
Opublikowany: 2022-03-11WordPress istnieje od wieków, przynajmniej według standardów internetowych, a jego filozofią zawsze było zachowanie kompatybilności wstecznej. To skupienie się na zgodności jest zrozumiałe, biorąc pod uwagę ogromną liczbę witryn WordPress w Internecie. Jednak, chociaż może to pomóc tym, którzy nadal używają starszych środowisk ze starymi wersjami PHP i MySQL (co samo w sobie stanowi zagrożenie dla bezpieczeństwa, ale nie jest to tematem dzisiejszego artykułu), spowodowało również, że nowsze wersje WordPressa nie wykorzystują w pełni najnowsze możliwości PHP.
Spowodowało to również, że wielu programistów WordPressa żyje w bańce WordPressa, nie mając motywacji do uczenia się nowych i nowoczesnych technologii programowania front-end, a czasami utknęło w „starym dobrym” sposobie robienia rzeczy.
Czy potrafisz zastosować nowoczesny przepływ pracy programistycznej dla WordPressa?
Z pewnością możesz, a stos WordPress Roots jest tutaj, aby pomóc Ci rozwijać się jak w 2019 roku, z trzema niesamowitymi narzędziami:
- Sage jako motyw startowy,
- Bedrock jako nowoczesny boilerplate WordPress,
- Trellis do zarządzania wdrażaniem i udostępnianiem w różnych środowiskach.
Zespół Roots ma również dwa dodatkowe narzędzia w fazie rozwoju: Acorn, framework do budowania wtyczek, oraz Clover, plugin boilerplate. Ze względu na to, że oba są w wersji alfa, nie są one uwzględnione w tym artykule, ale zdecydowanie powinieneś mieć na nie oko.
Czym dokładnie jest stos korzeni?
Pierwotnie znany jako motyw Roots, był to solidny motyw startowy HTML5, który miał zapewnić czystszy punkt wyjścia dla nowych witryn WordPress. Z czasem przekształciła się w pełen zestaw narzędzi, przechodząc przez wszystkie najważniejsze współczesne technologie i standardy sieciowe (od Grunta do Gulp i Webpack, LESS i SCSS, NPM i Yarn, Bootstrap, standardy kodowania PSR-2 i zasadę DRY), zmuszając w ten sposób programistów WordPressa, którzy go przyjęli, do ciągłego uczenia się i bycia na bieżąco z tym, co mają do zaoferowania nowoczesne technologie programistyczne.
Dzisiaj Roots wyrósł na pełny zestaw narzędzi w ciągłym rozwoju, których celem jest pomoc w tworzeniu lepszych witryn WordPress poprzez cały cykl, od rozwoju po inscenizację i produkcję, a także uczynienie Cię lepszym programistą, zmuszając Cię do wyjścia z komfortu strefa zapewniana przez tzw. bańkę WordPressa.
Przyjrzyjmy się jednak trzem głównym narzędziom, jakie oferują, czym one są i dlaczego warto z nich skorzystać.
Korzenie Szałwia 9
Roots Sage 9 to ostatnia iteracja profesjonalnie utrzymanego motywu startowego WordPress , pierwotnie wydanego jako Roots w 2011 roku. W ciągu swojego życia przeszedł wiele zmian, ulepszeń i ponownego rozważenia najlepszych praktyk, aby w końcu stać się tym, czym dziś jest świetnym punktem wyjścia do wprowadzenia nowoczesnego przepływu pracy programistycznego front-end dla programowania WordPress.
To, co próbuje zrobić Sage, to przyjąć wzorzec MVC (Model-View-Controller), w którym widoki i kontroler są całkowicie oddzielone; umożliwia nam to ponowne wykorzystanie widoków, które niekoniecznie muszą „wiedzieć”, skąd pochodzą dane, ale po prostu czekają, aż kontroler przekaże im dane do wyświetlenia.
Kontroler dołączony do Sage 9 nie jest rzeczywistym kontrolerem, który możesz już znać w innych frameworkach, takich jak Laravel, główna różnica polega na tym, że kontroler Sage 9 używa routingu opartego na szablonach zamiast routingu opartego na adresach URL. Zasadniczo pozwalasz WordPressowi obsługiwać routing adresów URL i piszesz kontrolery dla plików szablonów.
Dodając kilka stopni złożoności do całego procesu rozwoju, Sage 9 może nie być najlepszym wyborem na początek dla początkujących, ponieważ będziesz miał sporo nauki, aby ostatecznie opanować go i móc używać w produkcji: właściwie zarządzanie zależnościami i zasobami, wersjonowanie kodu, nowa struktura projektu, nowy silnik szablonów wywodzący się z Laravela, zasada DRY (Don't Repeat Yourself) i będziesz musiał trzymać się ścisłych standardów kodowania, które są nieco inne od tego, co WordPress zaleca; ale jeśli jesteś doświadczonym programistą, może to być świetny początek.
Jeśli chcesz iść na całość z Sage, pamiętaj o radzie Bena Worda, jednego z twórców zespołu Roots:
Sage nie jest ramą tematyczną, jest motywem startowym. Rzadko powinieneś go aktualizować i zazwyczaj nie powinieneś tworzyć z niego motywów podrzędnych. Jako motyw startowy, Sage ma służyć jako punkt wyjścia do nowego projektu.
Ale również:
Jeśli podkreślenia to 1000 godzin przewagi, Sage ma 10 000 godzin przewagi.
Struktura plików i folderów w Sage
Struktura plików i folderów Sage różni się nieco od tego, do czego przywykliśmy w innych motywach początkowych, takich jak podkreślenia, a nawet w poprzedniej głównej wersji Sage 8.
Oto, co znajdziesz zaraz po zainstalowaniu Sage:
├── app/ # it contains all the PHP code of your theme │ ├── controllers/ # your Controllers, it already contains a few │ │ # examples to use as a starting point │ ├── admin.php # setup for the WordPress theme customizer │ ├── filters.php # a good place to group all your theme │ │ # filter hooks │ ├── helpers.php # for various helper functions you want │ │ # to reuse in your theme │ └── setup.php # the main theme setup file ├── config/ # theme configuration files ├── dist/ # all built theme assets, never edit this! ├── resources/ # original theme assets, edit this instead! │ ├── assets/ # all front-end assets │ │ ├── build/ # Webpack and ESLint config │ │ ├── fonts/ # theme fonts │ │ ├── images/ # theme images │ │ ├── scripts/ # theme JS scripts │ │ ├── styles/ # theme SCSS stylesheets │ │ └── config.json # settings for compiled assets │ ├── views/ # all theme Blade templates │ │ ├── layouts/ # base Blade templates │ │ └── partials/ # partial Blade templates │ ├── functions.php # Composer autoloader and theme includes, │ │ # normally you should not edit this unless │ │ # you know what you're doing │ ├── index.php # required by WordPress but left blank │ │ # intentionally, never edit this! │ ├── screenshot.png # the screenshot used in the WordPress admin │ └── style.css # required by WordPress, it should contain │ # only the theme meta information ├── vendor/ # Composer packages, never edit this! ├── composer.json # autoloading for `app/` files ├── composer.lock # Composer lock file, never edit this └── package.json # Node.js dependencies and scripts
Dodatkowo niektóre inne pliki używane przez edytory kodu i IDE, takie jak .editorconfig, .eslintrc.js, .stylelintrc.js, phpcs.xml itp.
Oto krótki przegląd podstawowych wymagań gry Sage 9:
- WordPress >= 4,7
- PHP >= 7.1.3 (z włączonym php-mbstring)
- Kompozytor
- Node.js >= 8.0.0
- Przędza
Skała macierzysta
Bedrock jest jak WordPress na sterydach!
Jeśli Sage poprawia tworzenie motywów, Bedrock poprawia całą instalację WordPressa. Robi to, zapewniając nowoczesny szablon projektu , z ulepszoną strukturą folderów i bezpieczeństwem (na przykład poprzez brak plików konfiguracyjnych w katalogu głównym witryny), plikami konfiguracyjnymi i ENV oraz odpowiednim zarządzaniem zależnościami (tak, w tym wtyczki i motywy WordPress) .
Aby opisać to jednym zdaniem, moglibyśmy powiedzieć, że Bedrock to samodzielny projekt WordPress, który automatyzuje instalację podstawowych plików i wymaganych wtyczek.
Struktura plików i folderów
Jeśli spojrzysz na podstawową instalację Bedrock, możesz poczuć się zagubiony na początku. Bedrock oddziela pliki sieciowe, konfiguracyjne i zależności do własnych folderów. Oto jak wygląda struktura nagiej kości:
├── config/ # WordPress configuration files │ ├── environments/ # configuration files for other │ │ │ # environments, they will override │ │ │ # production configuration │ │ ├── development.php # overrides for WP_ENV === 'development' │ │ └── staging.php # overrides for WP_ENV === 'staging' │ └── application.php # main configuration for production │ # environment, it's the equivalent of │ # the wp-config.php file ├── vendor/ # Composer packages, never edit this! ├── web/ # the new root folder of the webserver │ ├── app/ # your new wp-content folder │ ├── wp/ # WordPress core files, never edit this! │ ├── index.php # WordPress view bootstrapper │ └── wp-config.php # required by WordPress, never edit this! ├── .env # all environment variables: db name, │ # user and password, salts, current │ # environment, site urls, and others ├── composer.json # here you can manage versions of │ # WordPress, plugins and other │ # dependencies └── composer.lock # Composer lock file, never edit this
Plus kilka innych mniej ważnych plików.
Wymagania dotyczące podłoża skalnego to:
- PHP >= 7,1
- Kompozytor
Krata
Trellis to nowoczesny stos LEMP do płynnego zarządzania Twoimi serwerami programistycznymi, postojowymi i produkcyjnymi, mający na celu utrzymanie ich jak najbardziej zbliżonych do siebie („parytet rozwoju i produkcji”). Oznacza to, że jeśli Twoja niestandardowa witryna WordPress działa w Twoim środowisku programistycznym, można bezpiecznie założyć, że będzie działać również w środowisku produkcyjnym i można ją wdrożyć bez obaw.
Do lokalnego rozwoju Trellis wykorzystuje Vagrant, dzięki prostemu vagrant up
będziesz miał maszynę wirtualną z odpowiednim nowoczesnym środowiskiem.

Udostępnianie i wdrażanie w środowiskach pomostowych i produkcyjnych jest zarządzane za pomocą podręczników Ansible, które są plikami YAML, które informują firmę Ansible, co ma robić.
Sugerowana struktura folderów Trellis
Trellis ma sugerowaną strukturę folderów składającą się tylko z dwóch podfolderów:
├── trellis/ # the clone of the Trellis repository └── site/ # the Bedrock-based WordPress website
Zalecam pozostawienie go bez zmian, ale można go dostosować w zależności od upodobań i potrzeb.
Wymagania dotyczące kraty
- Kompozytor
- Wirtualna skrzynka >= 4.3.10
- Włóczęga >= 2.1.0
Dlaczego powinieneś go używać
Jeśli WordPress działa już tak, jak jest, dlaczego miałbyś przejść na bardziej złożony stos i poświęcić dużo czasu na jego opanowanie? Ponieważ istnieją oczywiste i mniej oczywiste zalety. Spróbujmy zobaczyć, jakie one są.
Motyw startowy Agnostic Framework
Zbyt wiele motywów startowych WordPress zmusza Cię do korzystania z określonego frameworka CSS, który może Ci się podobać, a nawet nie, ale Sage jest całkowicie niezależny od frameworka. Podczas instalacji będziesz mieć możliwość automatycznego włączenia Bootstrap 4, Bulma, Foundation, Tachyons, Tailwind CSS lub żadnego frameworka, jeśli chcesz zacząć od zera lub użyć czegoś innego (WSKAZÓWKA: ostatnio zaczynam lubić Tailwind CSS dużo).
PRO RADA: na komputerze z systemem Windows może pojawić się komunikat „Tryb TTY nie jest obsługiwany na platformie Windows” podczas instalacji i nie będziesz mógł wybrać platformy ani skonfigurować Sage. Będziesz musiał uruchomić te trzy polecenia ręcznie z poziomu folderu motywu, jeśli chcesz skorzystać z automatycznej konfiguracji:
$ vendor\bin\sage meta # to specify the metadata for your # theme (the name, etc., that goes # in style.css). $ vendor\bin\sage config # to specify your theme's dev URL and # theme directory. $ vendor\bin\sage preset # to set up the theme with one of the # supported frameworks or no # framework at all.
Nowoczesny proces budowy
Dzięki Webpack zawartym w Sage nie musisz już myśleć o kompilowaniu zasobów, łączeniu i minimalizowaniu kodu JavaScript i CSS, optymalizacji obrazów, sprawdzaniu błędów JavaScript i stylów oraz zarządzaniu bibliotekami zewnętrznymi. Proces budowania zajmie się tym wszystkim dzięki prostej yarn build
(lub yarn build:production
, jeśli chcesz zoptymalizować zasoby do użytku produkcyjnego), tworząc wszystkie statyczne pliki w folderze /dist/
motywu.
Nowoczesne PHP i wymagania
Minimalna wersja PHP, na której można uruchomić WordPress, to PHP 5.2.4, co zapewni wsteczną kompatybilność wszystkim użytkownikom, którzy prowadzą swoje witryny w starszym środowisku, ale stare wersje PHP (<= 7.0) oficjalnie osiągnęły koniec Life, więc nie są już obsługiwane i mogą narazić Twoją witrynę na luki w zabezpieczeniach i problemy z wydajnością.
Zarówno Sage, jak i Bedrock wymagają rozsądnej wersji PHP 7.1 (chociaż jeśli masz opcję wyboru 7.3, zrób to).
Sage 9 również w pełni przyjmuje standardy kodowania PSR-2 (najczęściej stosowane i akceptowane kodowanie)
standardów używanych w społeczności PHP), które różnią się nieco od standardów kodowania WordPressa, ale pozwalają na czystszy i łatwiejszy w utrzymaniu kod, zwłaszcza jeśli pracujesz w zespole lub musisz dzielić się swoim kodem z innymi.
Lepsze zależności i zarządzanie pakietami
Stos Roots w dużym stopniu wykorzystuje Composer do zarządzania wszystkimi zależnościami i pakietami, w tym rdzeniem WordPress, wtyczkami i motywami. Może to stanowić problem, jeśli używasz narzędzi innych firm do zarządzania aktualizacjami WordPress (takich jak ManageWP, MainWP lub InfiniteWP), ale ktoś może argumentować, że posiadanie wszystkiego pod kontrolą wersji zapewnia większą kontrolę i ułatwia powrót do poprzedniej pracy wersja, jeśli coś pójdzie nie tak.
Ponadto Sage używa Yarn jako menedżera pakietów i zależności dla kodu aplikacji oraz do uruchomienia procesu kompilacji.
Lepsze pliki szablonów
WordPress nie ma prawdziwego silnika szablonów, więc aby to zrekompensować, Sage zastosował Laravel's Blade i działa zgodnie z zasadą DRY: Don't Repeat Yourself.
Tak wygląda domyślny plik szablonu single.blade.php, tylko 6 linijek kodu:
@extend('layouts.app') @section('content') @while(have_posts()) @php the_post() @endphp @include('partials.content-single-'.get_post_type()) @endwhile @endsection
Silnik szablonów Blade całkowicie oddziela widoki i kontrolery, a jego składnia jest bardziej elegancka, zwięzła, czytelna i łatwiejsza do napisania niż tylko znaczniki PHP. Ogólną zasadą jest pozostawienie całego kodu PHP poza plikami szablonów (lub przynajmniej spróbuj).
Inną korzyścią płynącą z używania Blade jest dziedziczenie szablonów: podstawowy szablon układu (domyślnie /resources/views/layouts/app.blade.php
) definiuje bloki zawierające wspólne elementy witryny, które są następnie dziedziczone przez szablony podrzędne. Dziedziczenie szablonów jest świetne, aby usunąć powtarzające się znaczniki z poszczególnych szablonów i zachować suchość.
Synchronizacja przeglądarki
Uruchamiając yarn start
, uruchomisz sesję Browsersync. Browsersync to moduł do zsynchronizowanego testowania przeglądarki podczas programowania. Będzie obserwował zmiany wprowadzone w zasobach front-endowych i współpracując z pakietem Webpack, automatycznie wprowadza zmiany do sesji przeglądarki.
Szybkie, łatwe i bezpieczne wdrażanie WordPressa
Trellis oferuje wdrożenia WordPress bez przestojów. Po uruchomieniu wdrożenia Trellis sklonuje twoje repozytorium, uruchomi instalację kompozytora, a następnie zaktualizuje dowiązanie symboliczne do bieżącego wydania, aby nigdy nie edytować bezpośrednio plików, które są obecnie obsługiwane w produkcji.
Podczas korzystania z Bedrock Trellis również wymaga bardzo niewielkiej konfiguracji.
Wady
Jedyną wadą korzystania z pełnego stosu Roots (oprócz uczenia się nowych rzeczy, co w ogóle nie powinno być uważane za problem) jest to, że musisz korzystać z dostawcy hostingu przyjaznego Trellis, takiego jak Kinsta, droplet DigitalOcean lub inny host, który obsługuje co najmniej SSH, Composer i WP-CLI, wraz z opcją aktualizacji ścieżki katalogu głównego.
To sprawia, że większość taniego (ish) współdzielonego hostingu nie wchodzi w grę i jest to coś, co Ty i/lub Twój klient musicie wziąć pod uwagę przed rozpoczęciem nowego projektu.
Jak zacząć
Można to uznać za nowe podejście do słynnej „WordPress 5-Minute Installation”, ale dla współczesnych programistów front-end. Dodaje kilka stopni złożoności do późniejszego rozwoju, ale ostatecznie korzyści, które możesz uzyskać, są zdecydowanie tego warte.
Skoncentrujemy się na przyjęciu pełnego stosu (Sage, Bedrock i Trellis), ale możesz po prostu użyć jednego lub dowolnej ich kombinacji. Sage może być używany jako punkt wyjścia do samodzielnego motywu w dowolnej instalacji WordPress; Bedrock można używać z dowolnym motywem WordPress; wdrożenia Trellis są skonfigurowane dla witryn opartych na Bedrock i dbają o wszystko, co potrzebne, ale przy odrobinie majsterkowania można je dostosować do prawie wszystkich potrzeb.
Jak stworzyć nowy projekt
Konfiguracja nowego projektu WordPress z Trellis, Bedrock i Sage jest dość łatwa, zaledwie kilka linii poleceń.
Zainstaluj Trellis w żądanym folderze (np. example.com
):
$ mkdir example.com && cd example.com $ git clone --depth=1 [email protected]:roots/trellis.git $ rm -rf trellis/.git
Zainstaluj Bedrock w podfolderze /site/
:
$ composer create-project roots/bedrock site $ cd site/web/app/themes/
Zainstaluj i zbuduj Sage:
$ composer create-project roots/sage your-theme-name $ cd your-theme-name/ $ yarn && yarn build
Wdrażam
Wdrożenie na etapy lub produkcję jest jeszcze łatwiejsze, jeśli wszystko skonfigurowałeś poprawnie, zgodnie z oficjalną dokumentacją. To tylko jeden wiersz poleceń (uruchomiony z folderu example.com/trellis/
):
$ ansible-playbook deploy.yml -e "site=<domain> env=<environment>"
Możesz także łatwo wycofać swoje wdrożenie, po prostu uruchom:
$ ansible-playbook rollback.yml -e "site=<domain> env=<environment>
Wskazówki dotyczące konfigurowania środowiska programistycznego w systemie Windows
Jeśli wyszukujesz w Google, jak zainstalować i używać stosu Roots, zwłaszcza Trellis, znajdziesz wiele samouczków poświęconych systemowi Linux lub MacOS, ale bardzo mało informacji jest dostępnych dla systemu Windows, gdzie znajdziesz dwa główne problemy: Ansible jest niedostępny dla Windows, a Vagrant jest zwykle bardzo wolny na komputerach z systemem Windows.
Kiedy początkowo myślałem o tym artykule, oficjalna dokumentacja Trellis dla systemu Windows sugerowała uruchomienie Ansible na maszynie wirtualnej Vagrant, ale był to trochę zwariowany sposób robienia rzeczy i nie był zbyt niezawodny.
Od tego czasu zaktualizowali dokumentację odpowiednimi instrukcjami dotyczącymi konfigurowania wszystkiego za pomocą WSL (Windows Subsystem for Linux), więc nie ma potrzeby wymyślania koła od nowa i pisania na ten temat samouczka. Warto wiedzieć, że istnieją trzy strony zawierające szczegółowe instrukcje krok po kroku, które można wykonać przed zainstalowaniem Trellis: Windows Setup, Windows Setup: Sage i Windows Setup: Trellis.
Udanego kodowania!