WP Bootstrap

Это 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-файлу

Весь 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

SCSS-файлы должны располагаться в директории src/scss. Все файлы должны быть в итоге импортированы в bundle.scss при помощи директивы @import фрагмента SCSS (импортируемый файл должен начинаться с нижнего подчеркивания).

Конечный CSS-файл можно получить выполнив команду npm run gulp scss, он будет называться dist/bundle.css;

Для именования классов необходимо использовать БЭМ-методологию.

Пользовательский JavaScript

JavaScript-файлы должны располагаться в директории src/js. Все JS файлы должны быть в итоге импортированы в bundle.js при помощи ES6-импорта.

Конечный JS-файл можно получить выполнив команду npm run gulp js, он будет называться dist/js-bundle.js;

Пользовательский TypeScript

TypeScript-файлы должны располагаться в директории src/ts. Все TS файлы должны быть в итоге импортированы в bundle.ts.

Конечный TS-файл можно получить выполнив команду npm run gulp ts, он будет называться dist/ts-bundle.js;

Шрифты

Если сайт использует специальный шрифт и он доступен в Google Fonts, то он должен быть загружен от туда.

Сторонние не PHP-ресурсы

К сторонним не PHP-ресурсам относятся все дополнительные ресурсы, используемые сайтом: JS-библиотеки (JQuery), CSS-библиотеки (animate.css), шрифты, доступные в npm, и т.д. Все сторонние ресурсы должны быть добавлены при помощи npm в package.json и загружаться должны из /node_modules.

Сторонние PHP-ресурсы

К сторонним PHP-ресурсам относятся все дополнительные PHP-библиотеки, используемые сайтом. Все сторонние PHP-ресурсы должны быть добавлены при помощи composer в composer.json.

Внутренние ресурсы

К внутренним ресурсам относятся все "специальные" файлы, используемые сайтом: изображения, шрифты, недоступные в npm, и т.д.

Внутренние ресурсы должны располагаться в каталоге assets.

0x6368656174 / wp-bootstrap