Это WordPress-проект разворачивающийся при помощи composer и npm.
Для WordPress в нем предустановлен плагин timber-library для поддержки шаблонов
Twig, а так же русская локализация. Подготовлена базовая тема для создания
произвольного сайта (wp-content/themes/project-theme
), в которой настроена
компиляция JS, SCSS и TypeScript из папки src
при помощи Gulp.
Клонировать данный репозиторий
$ cd wp-bootstrap
$ composer install
$ npm install
Переименовать local-config.example.php
в local-config.php
и изменить
настройки.
- Использование менеджеров пакетов для добавления сторонних компонентов
- Разделение логики и представления
- Использование по одному CSS, JS-файлу
- Использование современных технологий
Все сторонние компоненты должны добавлять в проект при помощи менеджеров пакетов,
чтоб после клонирования репозитория и выполнения composer intall && npm install
разворачивался оригинальный рабочий проект, который можно использовать, чтоб запустить
сайт.
Для PHP-пакетов необходимо использовать composer.
Для CSS, JS и TypeScript-пакетов необходимо использовать npm. Пакеты, которые сайт
будет использовать в работе должны быть добавлены в секцию dependencies
файла
package.json
. Дополнительные пакеты, необходимые для разработки (например, типы TypeScript)
должны быть в секции devDependencies
файла package.json
.
Вся логика работы сайта должна быть отдельна от шаблонов сайта. Это достигается при помощи использования шаблонизатора Twig. Логика по отображению определенной страницы сайта должна быть полностью реализована в PHP-файле этой страницы, после чего должен быть сформирован набор переменных для отображения этой страницы в виде HTML. Этот набор переменных должен быть передан на обработку шаблонизатору, который на основе twig-шаблона сайта и набора переменных сформирует готовую страницу.
Шаблоны сайта должны быть максимально простыми и не содержать никакой сложной логики.
Весь CSS-код и JS-код должны храниться по одному файлу. Не должно быть нескольких JS-файлов или нескольких CSS-файлов, содержащих пользовательский код.
В связи с этим для CSS-файла рекомендуется использовать БЭМ-методологию для именования классов.
Для JS-файла рекомендуется использовать принцип модулей, собранных в один файл. Вызов того или иного
модуля для отдельной страницы необходимо делать уже внутри тегов <script></script>
twig-шаблона страницы.
Для написания JavaScript можно использовать последнюю версию ECMAScript, включая модули, асинхронные функции и т.д. Так же JavaScript можно писать на последней версии TypeScript. JavaScript файлы и TypeScript файлы будут на выходе скомпилированы в один бандл ES5, который должен будет поддерживаться всеми современными браузерами.
JavaScript и TypeScript файлы должны располагаться в каталоге src/js
и src/ts
и должны
быть все импортированы в bundle.js
или bundle.ts
, которые и будут основными источниками для
создания бандла.
Для написания CSS должен быть использован SCSS. SCSS-файлы должны храниться в src/scss
и
должны быть импортированы в bundle.scss
, который будет основным источником для создания
бандла.
Тема сайта должна быть создана в предустановленной папке
wp-content/themes/project-theme
. Тема должна использовать шаблонизатор Twig
с разделением логики и представления. Вся логика должна быть реализована в
PHP-файлах темы, а HTML-отображение должно быть в Twig-файлах. Запрещено
выводить HTML в PHP-файлах.
Стили темы должны быть написаны с использованием SCSS, скомпилированного в один CSS-файл. Все стили темы должны быть импортированы в одном месте при помощи одного CSS-файла.
JavaScript должен быть выполнен в виде одного конечного JS-файла, импортированного в одном месте.
SCSS-файлы должны располагаться в директории src/scss
. Все файлы должны быть
в итоге импортированы в bundle.scss
при помощи директивы @import
фрагмента SCSS
(импортируемый файл должен начинаться с нижнего подчеркивания).
Конечный CSS-файл можно получить выполнив команду npm run gulp scss
, он будет называться
dist/bundle.css
;
Для именования классов необходимо использовать БЭМ-методологию.
JavaScript-файлы должны располагаться в директории src/js
. Все JS файлы должны быть в итоге
импортированы в bundle.js
при помощи ES6-импорта.
Конечный JS-файл можно получить выполнив команду npm run gulp js
, он будет называться
dist/js-bundle.js
;
TypeScript-файлы должны располагаться в директории src/ts
. Все TS файлы
должны быть в итоге импортированы в bundle.ts
.
Конечный TS-файл можно получить выполнив команду npm run gulp ts
, он будет называться
dist/ts-bundle.js
;
Если сайт использует специальный шрифт и он доступен в Google Fonts, то он должен быть загружен от туда.
К сторонним не PHP-ресурсам относятся все дополнительные ресурсы, используемые сайтом:
JS-библиотеки (JQuery), CSS-библиотеки (animate.css), шрифты, доступные в npm, и т.д.
Все сторонние ресурсы должны быть добавлены при помощи npm в package.json
и загружаться должны из /node_modules
.
К сторонним PHP-ресурсам относятся все дополнительные PHP-библиотеки, используемые
сайтом. Все сторонние PHP-ресурсы должны быть добавлены при помощи composer
в composer.json
.
К внутренним ресурсам относятся все "специальные" файлы, используемые сайтом: изображения, шрифты, недоступные в npm, и т.д.
Внутренние ресурсы должны располагаться в каталоге assets
.