WordPress съществува от векове, поне по интернет стандарти и неговата философия винаги е била да запази обратната съвместимост. Този фокус върху съвместимостта е разбираем, предвид огромното количество уебсайтове на WordPress онлайн днес. Въпреки това, макар че това може да помогне на тези, които все още използват наследени среди със стари версии на PHP и MySQL (което само по себе си е риск за сигурността, но това не е темата на днешната статия), това също е причинило по-новите версии на WordPress да не използват пълноценно най-новите възможности на PHP.
Това също е причинило много Разработчици на WordPress да живеят в a WordPress балон , без да бъдете стимулирани да изучавате нови и модерни технологии за разработка отпред и понякога да се забивате в „добрия начин“ на правене на нещата.
Можете ли да приемете модерен работен процес за WordPress?
Със сигурност можете и WordPress корен стек е тук, за да ви помогне да се развиете като 2019, с три невероятни инструмента:
- Мъдрец като начална тема,
- Основа като модерен шаблон на WordPress,
- Решетка за управление на внедряването и осигуряването в различни среди.
Екипът на Roots също има два допълнителни инструмента в разработването: Жълъд , рамка за изграждане на приставки и Детелина , шаблон за приставка. Поради факта, че и двете са в алфа, те не са включени в тази статия, но определено трябва да ги държите под око.
Много водещи марки използват Sage и / или Bedrock за своите уебсайтове. Разберете ги в Roots Showcase .
Какво точно е стекът от корени
Първоначално известна като тема Roots, тя беше солидна HTML5 начална тема, целяща да осигури по-чиста отправна точка за новите уеб сайтове на WordPress. С течение на времето той се превърна в пълен набор от инструменти, преминавайки през всички основни съвременни уеб технологии и стандарти (от Grunt до Gulp и Webpack, LESS и SCSS, NPM и Yarn, Bootstrap, PSR-2 стандарти за кодиране и принципа DRY), по този начин принуждавайки разработчиците на WordPress непрекъснато да се учат и да бъдат в крак с това, което предлагат модерните технологии за разработка отпред.
Днес Roots се превърна в пълен набор от инструменти за непрекъснато разширяване, целящи да ви помогнат да изградите по-добри WordPress сайтове, като следвате целия цикъл, от разработка до постановка и производство, и да ви направи по-добър разработчик, като ви принуди да излезете от комфорта зона, осигурена от така наречения балон WordPress.
Но нека да разгледаме трите основни инструмента, които те предлагат, какви са те и защо трябва да обмислите използването им.
Корени Sage 9
Roots Sage 9 е последната итерация на професионално поддържан WordPress начална тема , първоначално пуснат като Roots през 2011 г. По време на живота си той е преминал през много промени, подобрения и преосмисляне на най-добрите практики, за да стане най-накрая това, което днес е чудесна отправна точка за въвеждане на съвременен работен поток за разработка отпред. за разработка на WordPress.
Това, което Sage се опитва да направи, е да приеме MVC модел (Model-View-Controller), където Views и Controller са напълно разделени; това ни позволява да използваме повторно изгледи, които не е задължително да „знаят“ откъде идват данните, но те просто изчакват контролер да им подаде някои данни за показване.
Контролерът, включен в Sage 9, не е действителният контролер, който може би вече сте познавали в други рамки като Laravel , основната разлика е, че Sage 9 Controller използва маршрутизиране, базирано на шаблон, вместо маршрутизиране, базирано на URL. По принцип оставяте WordPress да се справя с маршрутизирането на URL адреси и пишете контролери за файлове с шаблони.
Чрез добавяне на няколко степени на сложност към целия процес на разработка, Sage 9 може да не е най-добрият избор за начало за начинаещи, тъй като ще имате доста опит да го овладеете и да можете да използвате в производството: правилно зависимост и управление на активи, кодиране на версии, нова структура на проекта, нов механизъм за шаблони, извлечен от Laravel, принципа DRY (Don't Repeat Yourself) и ще трябва да се придържате към строги стандарти за кодиране, които са малко по-различни от това WordPress препоръчва; но ако сте опитен разработчик, това може да бъде чудесно начало.
Ако искате да влезете ол-ин със Sage, просто имайте предвид този съвет от Ben Word, един от разработчиците на екипа на Roots:
Sage не е рамка за теми, а начална тема. Рядко трябва да го актуализирате и обикновено не трябва да създавате дъщерни теми от него. Като начална тема, Sage е предназначен да бъде използван като отправна точка за нов проект.
какво е услуга за запознанства
Но също:
Ако Underscores е 1000-часов старт, Sage е 10 000-часов старт.
Структура на файлове и папки с градински чай
Структурата на файловете и папките на Sage е малко по-различна от това, което сме свикнали да виждаме в други начални теми като Подчертаване или дори в предишната основна версия на Sage 8.
Ето какво ще откриете веднага след инсталирането на 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 Освен това някои други файлове, използвани от редактори на кодове и IDE, като .editorconfig, .eslintrc.js, .stylelintrc.js, phpcs.xml и др.
Ето кратък преглед на основните изисквания на Sage 9:
- WordPress> = 4.7
- PHP> = 7.1.3 (с активиран php-mbstring)
- Композитор
- Node.js> = 8.0.0
- Прежда
Основа
Bedrock е като WordPress на стероиди!
Ако Sage подобри развитието на вашата тема, Bedrock подобрява цялата инсталация на WordPress. Прави го, като предоставя a модерен проект котел , с подобрена структура и защита на папките (например като нямате вашите конфигурационни файлове в корена на уебсайта), конфигурационни и ENV файлове и правилно управление на зависимостите (да, включително плъгини и теми на WordPress).
За да го опишем с една фраза, бихме могли да кажем, че Bedrock е самостоятелен проект на WordPress, който автоматизира инсталирането на основните файлове и необходимите приставки.
Структура на файлове и папки
Ако разгледате основна инсталация на Bedrock, в началото може да се почувствате изгубени. Bedrock разделя уеб, файловете за конфигурация и зависимостта в собствените си папки. Ето как изглежда структурата на голите кости:
├── 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 Плюс някои други по-малко важни файлове.
Основните изисквания са:
- PHP> = 7.1
- Композитор
Решетка
Решетката е модерен LEMP стек да управлявате безпроблемно сървърите си за разработка, подреждане и производство, насочени към поддържането им възможно най-сходни помежду си („паритет за развитие и производство“). Това означава, че ако вашият персонализиран сайт на WordPress работи във вашата среда за разработка, може да се предположи, че той ще работи и в производство и можете да го внедрите с увереност.
За локално развитие Trellis използва Vagrant, с прост vagrant up ще имате виртуална машина с подходяща модерна среда.
Предоставянето и внедряването във вашата работна и производствена среда се управляват с Ansible playbooks, които са YAML файлове, които казват на Ansible какво да прави.
какво е потребителски интерфейс на материалния дизайн
Предложена структура на папката с решетка
Trellis има предложена структура на папки, съставена само от две подпапки:
├── trellis/ # the clone of the Trellis repository └── site/ # the Bedrock-based WordPress website Бих препоръчал да го оставите както е, но той може да бъде персонализиран в зависимост от вашите предпочитания и нужди.
Изисквания за решетка
- Композитор
- Virtualbox> = 4.3.10
- Vagrant> = 2.1.0
Защо трябва да го използвате
Ако WordPress вече работи такъв, какъвто е, защо трябва да преминете към по-сложен стек и да отделите значително време, за да го овладеете? Защото има очевидни и някои по-малко очевидни предимства. Нека се опитаме да видим какви са те.
Рамкова агностична стартерна тема
Твърде много теми за начинаещи WordPress ви принуждават да използвате специфична CSS рамка, която може да ви хареса или дори да не ви хареса или дори да знаете, но Sage е напълно агностик на рамката. По време на инсталацията ще имате възможност автоматично да включите Bootstrap 4, Bulma, Foundation, Tachyons, Tailwind CSS или изобщо да няма рамка, ако искате да започнете от нулата или да използвате нещо друго (УКАЗАНИЕ: напоследък започвам да харесвам Tailwind CSS много).
ПРО ТИП: на машина с Windows може да получите съобщението „Режимът TTY не се поддържа на платформата на Windows“ по време на инсталирането и няма да можете да изберете рамка или да конфигурирате Sage. Ще трябва да стартирате тези три команди ръчно от папката с теми, ако искате да се възползвате от автоматичната конфигурация:
$ vendorinsage meta # to specify the metadata for your # theme (the name, etc., that goes # in style.css). $ vendorinsage config # to specify your theme's dev URL and # theme directory. $ vendorinsage preset # to set up the theme with one of the # supported frameworks or no # framework at all. Модерен процес на изграждане
С Webpack, включен в Sage, вече няма да се налага да мислите за компилиране на активи, обединяване и минимизиране на JavaScript и CSS код, оптимизиране на изображения, проверка на грешки в JavaScript и стил и управление на външни библиотеки. Процесът на изграждане ще се погрижи за всичко това с прост yarn build (или yarn build:production ако искате активите ви да бъдат оптимизирани за производствена употреба), създавайки всички статични файлове във вашата тема /dist/ папка.
Съвременни PHP и изисквания
Минималната версия на PHP, на която можете да стартирате WordPress, е PHP 5.2.4, това ще осигури обратна съвместимост за всички онези потребители, които използват своите уебсайтове в наследствена среда, но стари версии на PHP (<= 7.0) have officially reached End Of Life, so they are no longer supported and they may expose your site to security vulnerabilities and performance issues.
Както Sage, така и Bedrock изискват нормална версия на PHP 7.1 (макар че ако имате възможност да изберете 7.3, моля, направете го).
Sage 9 също така напълно приема стандарти за кодиране на PSR-2 (най-широко използваното и приемано кодиране
стандарти, използвани в общността на PHP), които са малко по-различни от стандартите за кодиране на WordPress, но ви позволяват да имате по-чист и поддържаем код, особено ако работите в екип или трябва да споделите кода си с други.
По-добри зависимости и управление на пакети
Стекът Roots широко използва Composer за управление на всички зависимости и пакети, включително ядро на WordPress, плъгини и теми. Това може да е проблем, ако използвате инструменти на трети страни за управление на актуализации на WordPress (като ManageWP, MainWP или InfiniteWP), но някой може да твърди, че наличието на всичко под контрол на версиите ви дава повече контрол и улеснява връщането към предишна работеща версия, ако нещо се обърка.
Освен това Sage използва Yarn като пакет и мениджър на зависимости за кода на приложението и за стартиране на процеса на изграждане.
По-добри файлове с шаблони
В WordPress липсва истински механизъм за шаблониране, така че, за да компенсира това, Sage прие Laravel’s Blade и той следва принципа DRY: Не се повтаряйте.
Ето как изглежда шаблонният файл по подразбиране single.blade.php, само 6 реда код:
как да оценим опция
@extend('layouts.app') @section('content') @while(have_posts()) @php the_post() @endphp @include('partials.content-single-'.get_post_type()) @endwhile @endsection Модулът на шаблона Blade напълно разделя Views и Controller и неговият синтаксис е по-елегантен, кратък, четим и по-лесен за писане от PHP таговете. Основното правило тук е да оставите целия PHP код извън вашите файлове с шаблони (или поне да се опитате).
Друго предимство на използването на Blade е наследяването на шаблон: основният шаблон за оформление (по подразбиране е /resources/views/layouts/app.blade.php) дефинира блокове, съдържащи общите елементи на уебсайта, които след това се наследяват от неговите дъщерни шаблони. Наследяването на шаблони е чудесно за премахване на повтарящи се маркировки от отделни шаблони и запазване на нещата на СУХО.
Синхронизиране на браузъри
Като стартирате yarn start ще стартирате сесия за синхронизиране на браузъра. Browsersync е модул за синхронизирано тестване на браузъра, докато се разработва. Той ще следи за промените, направени във вашите предни активи и, като работи заедно с Webpack, автоматично инжектира промените в сесията на вашия браузър.
Бързо, лесно и безопасно внедряване на WordPress
Trellis предлага внедряване на WordPress без престой. Когато стартирате внедряване, Trellis ще клонира вашето хранилище, ще стартира инсталацията на композитора и след това ще актуализира символната връзка към текущата версия, така че никога няма да редактира директно файловете, които в момента се обслужват в продукцията.
Когато използва Bedrock, Trellis също се нуждае от много малко конфигурация.
Недостатъци
Единственият недостатък на използването на пълния стек Roots (с изключение на изучаването на нови неща, което изобщо не би трябвало да се счита за проблем) е, че трябва да използвате доставчик на хостинг, удобен за Trellis, като Kinsta, капчица DigitalOcean или друг хост, който поддържа поне SSH, Composer и WP-CLI, заедно с опцията за актуализиране на уеб коренния път.
Това оставя по-голямата част от евтиния споделен хостинг извън играта и това е нещо, което вие и / или вашият клиент трябва да вземете предвид, преди да започнете нов проект.
Как да започнем
Това може да се разглежда като нов подход към известната „WordPress 5-минутна инсталация“, но за съвременните разработчици от предния край. Той добавя няколко степени на сложност за по-късно развитие, но в крайна сметка ползите, които можете да получите, определено си заслужават.
Ще се съсредоточим върху приемането на пълния стек (Sage, Bedrock и Trellis), но можете просто да използвате един или всяка комбинация от тях. Sage може да се използва като отправна точка за самостоятелна тема на всяка инсталация на WordPress; Bedrock може да се използва с всяка тема на WordPress, която искате; и разположенията на Trellis са конфигурирани за сайтове, базирани на Bedrock, и се грижат за всичко необходимо, но с малко бърникане той може да бъде персонализиран за почти всякакви нужди.
Как да създадете нов проект
Създаването на нов проект на WordPress с Trellis, Bedrock и Sage е доста лесно, само на няколко командни реда.
какво ги интересува финансовите директори
Инсталирайте Trellis в желаната от вас папка (напр. example.com):
$ mkdir example.com && cd example.com $ git clone --depth=1 [email protected] :roots/trellis.git $ rm -rf trellis/.git Инсталирайте Bedrock в /site/ подпапка:
$ composer create-project roots/bedrock site $ cd site/web/app/themes/ Инсталирайте и изградете Sage:
$ composer create-project roots/sage your-theme-name $ cd your-theme-name/ $ yarn && yarn build Разполагане
Внедряването в постановка или производство е още по-лесно, ако сте конфигурирали всичко правилно според официалната документация. Това е само на един команден ред (стартиран от папката example.com/trellis/):
$ ansible-playbook deploy.yml -e 'site= env=' Можете също така лесно да върнете своето разполагане, просто изпълнете:
$ ansible-playbook rollback.yml -e 'site= env= Съвети относно настройването на вашата среда за разработка под Windows
Ако потърсите в Google за това как да инсталирате и използвате стека Roots, особено Trellis, ще намерите много уроци, фокусирани върху Linux или MacOS, но има много малко информация за Windows, където ще намерите два основни проблема: Ansible не е наличен за Windows и Vagrant обикновено е изключително бавен на Windows машини.
Когато първоначално мислех за тази статия, официалната документация на Trellis за Windows предлагаше да стартирам Ansible във виртуалната машина Vagrant, но това беше нещо като шантав начин за правене на нещата и не беше много надежден.
Оттогава те актуализираха документацията с подходящи инструкции за настройване на всичко с WSL (Windows Subsystem for Linux), така че няма нужда да преоткривате колелото и да пишете урок за това. Добре е да знаете, че има три страници с подробни инструкции стъпка по стъпка, които можете да следвате, преди да инсталирате Trellis: Настройка на Windows , Настройка на Windows: Sage и Настройка на Windows: Решетка .
Честито кодиране!
Свързани: Как да подходим към модерното разработване на WordPress (част 1, предният край) и Част 2 (задната част)Разбиране на основите
Какво представлява стекът Roots?
Стекът Roots е набор от инструменти, целящи да помогнат на разработчиците да изградят по-добри WordPress сайтове, като възприемат съвременни технологии и следват целия цикъл от разработката до постановката и производството.
Как да създам среда за разработка на WordPress?
Създаването на среда за разработка на WordPress с Trellis е толкова лесно, колкото въвеждането на няколко команди в прозореца на терминала. Trellis, с помощта на Vagrant, ще се погрижи за настройването на подходящ LEMP стек във виртуална машина за вас. Може да са необходими някои допълнителни стъпки, ако сте на машина с Windows.
Какво представлява пълният стек разработчик на WordPress?
Пълният стек разработчик на WordPress трябва да може да настрои и управлява LAMP / LEMP сървърна инфраструктура и да работи както отпред, създавайки тема, така и отзад, кодирайки нови функции под формата на приставки. Той / тя трябва добре да разбира PHP, SQL, JavaScript, HTML и CSS.
