В продолжение моей прошлой статьи о сборке плагинов gulp-ом решил сделать продолжение и написать о моем опыте автоматизации создания шаблонов для WordPress.
Основная сложность заключается в структуре файлов шаблона и некоторой методологии ибо без нее никуда.
При упоминании слов css и методология в одном предложении, обыватели обычно поминают БЭМ, но есть пару неловких моментов, начиная по порядку с самых неловких:
- БЭМ предполагает некоторую консистентность в именовании свойств HTML тегов, а у нас на секундочку CMS с кучей готовых конструкций, переопределить все их конечно можно, но неоправданно долго
- Каждый используемый плагин наверняка разбавит бережно созданные БЭМ теги простыми, обычными
- Любой плагин наверняка в силах сломать уже существующие БЭМ блоки, так как в их css файлах наверняка использовалось наследование и их вес почти наверняка больше чем у существующих блоков
- В процессе верстки не получится использовать большую часть тех тулов что рекомендует БЭМ
- К любому из перечисленных пунктов можно добавить еще 10 способных нарушить так сказать целостность БЭМ-а
Поэтому про БЭМ для WordPress нужно сразу же забыть, и придумать свои лучшие практики, если они вам конечно же нужны.
Мои рекомендации просты, используйте вложенность только в случае необходимости, используйте препроцессор (с ним писать быстрее), блоки понятие абстрактное и существуют по большей части в голове но не смотря на это нужно стараться сделать их независимыми друг от друга по средствам css селекторов
Сам по себе шаблон WordPress вещь небольшая которую вполне можно вполне держать в голове, но понятная структура все равно не помешает.
Я старался максимально сохранить каноническую структуру путем многих экспериментов изучения кода существующих тем, могу сказать уверенно что эта самая структура должна выглядеть вот так:
Здесь все банально за исключением разве что каталогов templates , less.
В templates я складываю все то что в WordPress принято подключать с помощью функции get_template_part().
В Less же я создаю несколько файлов особым образом:
Здесь есть некоторая логика, имена файлов начинаются с цифр и отделяются от имени файла нижним подчеркиванием число обозначает положение содержимого файла после конкатенации.
Имена less файлов не связаны с именами php файлов, имена фалов и их количество зависит от структуры блоков которая существует только в голове, (так как шаблон как уже говорилось , вещь не очень большая и при необходимости логику восстановить не долго ) .
Размазывать css правила по нескольким файлам на мой взгляд хорошая идея с точки зрения читаемость и лично мне помогает ускорить разработку
Так же пара слов про идею сортировать файлы дописыванием префиксов, да согласен это выглядит как костыль и это и есть костыль , но альтернатив не много, а мультиплатформенные альтернативы и вовсе мне неизвестны даже Linux утилита sort в разных окружениях по дефолту разные на стройки , а возможно и реализации, не проверял, в итоге неизвестно таких утилит по крайней мере простых.
Зато мне хорошо известно что даже в течение короткого времени мне часто приходится работать над одним и тем же проектом в разных ОС и на разных машинах.
Именно поэтому путь лучше будет так, тем более что это достаточно лаконичный костыль и легкий в изготовлении.
Остальные проблемы мне с легкостью можно решить при помощи готовых npm пакетов например моя IDE умеет удобно автодополнять пути к ресурсам (например картинкам), и мне бы хотелось использовать эту фитчу, поэтому
я просто пишу пути к ресурсам относительно каталога less после сборки же итогового css пути автоматически правятся при помощи gulp-css-url-adjuser.
Так же при помощи streamqueue я задаю некоторую последовательность начальных файлов (таких как normalize.css) которые следует подключить вначале и их последовательность имеет значение, это решает проблему с тем фактом что style.css в шаблоне WordPress должен начинаться со специального комментария который у меня содержится каталоге css/common/ и называется theme-info.css от имеет примерно такое минимальное содержание
/* Theme Name: My Theme URI: alkoweb.ru Description: My new theme Version: 1.0.0 Author: Petrozavodsky */
Так же в моем gulp файле реализована возможность последовательно вызывать таски делается это вызовом их в качестве колбеков:
gulp.task('build', ['theme', 'concat']); Здесь сначала выполнится таск ‘theme’ после выполнится ‘concat’ и уже потом ‘build’ если он конечно же что либо возвращает ( в итоговом файле он у меня ничего не содержит )
Учитывая все это мой gulpfile выглядит примерно так:
var theme_name = 'theme-name';
var gulp = require('gulp'),
rename = require('gulp-rename'),
less = require('gulp-less'),
csso = require('gulp-csso'),
concat = require('gulp-concat'),
autoprefixer = require('gulp-autoprefixer'),
notify = require('gulp-notify'),
urladjuster = require('gulp-css-url-adjuster'),
streamqueue = require('streamqueue'),
plumber = require('gulp-plumber');
gulp.task('theme', function () {
return gulp.src('public_html/wp-content/themes/' + theme_name + '/less/*.less')
.pipe(plumber())
.pipe(concat('public_html/wp-content/themes/' + theme_name + '/css/dest/all.less'))
.pipe(less())
.pipe(autoprefixer(['last 3 versions', 'ie 10', 'opera 12']))
.pipe(urladjuster({
replace: ['../', '']
}))
.pipe(csso())
.pipe(rename('main.css'))
.pipe(gulp.dest('public_html/wp-content/themes/' + theme_name + '/css/dest'))
.pipe(notify({message: 'Собрались стили темы'}));
});
gulp.task('concat', ['theme'], function () {
return streamqueue({objectMode: true},
gulp.src('public_html/wp-content/themes/' + theme_name + '/css/common/theme-info.css'),
gulp.src('public_html/wp-content/themes/' + theme_name + '/css/vendor/normalize.css'),
gulp.src('public_html/wp-content/themes/' + theme_name + '/css/vendor/wp-reset.css'),
gulp.src('public_html/wp-content/themes/' + theme_name + '/css/dest/main.css')
)
.pipe(plumber())
.pipe(concat('public_html/wp-content/themes/' + theme_name + '/css/dest/build.css'))
.pipe(rename('style.css'))
.pipe(gulp.dest('public_html/wp-content/themes/' + theme_name + '/'))
.pipe(notify({message: 'Сбилдился css, можно работать'}));
});
gulp.task('build', ['theme', 'concat']);
gulp.task('watch', function () {
gulp.watch(['public_html/wp-content/themes/' + theme_name + '/less/*.less'], ['build']);
});
gulp.task('default', ['watch']);
Для использования нужно всего подправить в коде переменную theme_name так что бы она содержала названия каталога вашей темы положить gulpfile.js ниже корневого каталога вашего веб сервера и установить нужные npm пакеты командами :
npm install -g gulp npm install --save-dev gulp gulp-rename gulp-less gulp-csso gulp-concat gulp-autoprefixer gulp-notify gulp-css-url-adjuster streamqueue gulp-plumber
Собственно все , можно собирать
тест