От автора: одна из составляющих успеха тем WP – простота их разработки. Разработчик со знаниями front-end’а и PHP может ознакомиться с замечательным кодексом и приступить к созданию своего нового шедевра.
Для разработки тем достаточно иметь текстовый редактор и графический пакет. Современные же инструменты могут произвести целую революцию в процессе разработки тем. В этом уроке мы с помощью Gulp запустим следующие задачи:
копирование новых PHP-файлов темы;
оптимизация изображений;
компиляция Sass SCSS файлов в один минифицированный CSS-файл;

Бесплатный курс «Создание тем на WordPress. Быстрый старт»
Изучите курс и узнайте, как создавать уникальные темы на WordPress с нестандартной структурой страниц
Скачать курсобъединение упорядоченных JS-файлов, удаление отладочного кода и минификация;
автоматическое обновление браузера после пересохранения файлов.
Что такое Gulp?
Gulp – JS-система, которая берет ваши файлы и оптимизирует их. Если вы не работали в Gulp, пожалуйста, прочитайте введение в Gulp.js. Там описан процесс установки и указаны инструкции по работе с сервисом. Установка вкратце:
установите Node.js;
выполните глобальную установку Gulp: npm install gulp-cli –g;
создайте папку проекта и перейдите в нее: mkdir mytheme и далее cd mytheme;
инициализируйте проект с помощью npm: npm init.
Файлы проекта
Для создания чего-либо в Gulp (или другом таск раннере) необходимы исходные файлы: неизмененный код и изображения. Эти файлы обрабатываются, изменяются и минифицируются в файлы билда.
WordPress должен быть установлен в папку на веб-сервере, например, в /var/www/ на Linux/Apache. Тема для WP должна располагаться в своей папке в директории /wp-content/themes/. Папка с файлами билда в таком случае будет /var/www/wp-content/themes/mytheme/. По минимуму темам нужно два файла:
файл стилей style.css с метаданными в комментариях в верхней части;
файл шаблона index.php.
В большинстве тем файлов намного больше, эти файлы отображают посты, страницы, индексы, категории, теги и ошибки. Межстраничные части, такие как хедер и футер, зачастую идут в виде изображений и JS-файлов.
Исходные файлы можно поместить в любом месте в папке mytheme. Так удобно делать в случае, если вы собираетесь распространять свою тему, чтобы другие люди могли ее скачивать, изменять и достраивать. Тем не менее, в целях нашего урока мы будем использовать папку, недоступную с веб-сервера, например, ~/mytheme/. Преимущества такого подхода:
исходными файлами темы можно управлять из одной папки и репозитория, не загрязняя билд или папки WP;
папка с конечной темой содержит только нужные файлы;
В папке темы нет Gulp, плагинов и других приложений. Их нельзя случайно скопировать на рабочий сервер, что могло бы привести к проблемам с безопасностью.
В папке исходного проекта необходимо создать еще 4 папки:
template – PHP-файлы темы WP;
images – изображения вашей темы;
scss – файлы Sass SCSS;
js – любое количество исходных файлов клиентского JS.
Установка зависимостей
Из исходной папки (~/mytheme/) запустите следующую npm-команду для установки Gulp и всех плагинов:
1 |
npm install --save-dev autoprefixer browser-sync css-mqpacker cssnano gulp gulp-concat gulp-deporder gulp-imagemin gulp-newer gulp-postcss gulp-sass gulp-strip-debug gulp-uglify gulp-util postcss-assets |
Создастся папка node_modules, в ней будет храниться код модулей. Эту папку необходимо исключить из системы управления версиями (для пользователей Git, добавьте node_modules в файл .gitignore).
Создание файла настроек Gulp
В корне исходной папки создайте файл настроек gulpfile.js. Добавьте следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
// Gulp.js настройки 'use strict'; const // исходная папка и папка билда dir = { src : 'src/', build : '/var/www/wp-content/themes/mytheme/' }, // Gulp и плагины gulp = require('gulp'), gutil = require('gulp-util'), newer = require('gulp-newer'), imagemin = require('gulp-imagemin'), sass = require('gulp-sass'), postcss = require('gulp-postcss'), deporder = require('gulp-deporder'), concat = require('gulp-concat'), stripdebug = require('gulp-strip-debug'), uglify = require('gulp-uglify') ; // Browser-sync var browsersync = false; // PHP-настройки const php = { src : dir.src + 'template/**/*.php', build : dir.build }; // копирование PHP-файлов gulp.task('php', () => { return gulp.src(php.src) .pipe(newer(php.build)) .pipe(gulp.dest(php.build)); }); |
В коде мы определяем папки по умолчанию, загружаем модули, после чего создаем задачу php, которая будет копировать и обновлять файлы в папке с темой. Задача специально сделана очень простой, чтобы она копировала PHP-файлы как есть.
Сохраните gulpfile.js и создайте несколько файлов .php в папке template. Введите следующую команду:
1 |
gulp php |
Все файлы будут скопированы в папку с темой (/var/www/wp-content/themes/mytheme/).
Обработка изображений
Часто файлы изображений сжимают с помощью инструментов типа imagemin. Добавьте следующий код в файл gulpfile.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// настройки изображений const images = { src : dir.src + 'images/**/*', build : dir.build + 'images/' }; // обработка изображений gulp.task('images', () => { return gulp.src(images.src) .pipe(newer(images.build)) .pipe(imagemin()) .pipe(gulp.dest(images.build)); }); |
Сохраните и запустите команду gulp images. Сжатые версии новых или обновленных изображений из исходной папки images будут скопированы в /var/www/wp-content/themes/mytheme/images/.
Компиляция Sass
WP не может напрямую использовать файлы Sass, их нужно компилировать в один файл style.css. Добавьте в gulpfile.js следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
// CSS-настройки var css = { src : dir.src + 'scss/style.scss', watch : dir.src + 'scss/**/*', build : dir.build, sassOpts: { outputStyle : 'nested', imagePath : images.build, precision : 3, errLogToConsole : true }, processors: [ require('postcss-assets')({ loadPaths: ['images/'], basePath: dir.build, baseUrl: '/wp-content/themes/wptheme/' }), require('autoprefixer')({ browsers: ['last 2 versions', '> 2%'] }), require('css-mqpacker'), require('cssnano') ] }; // обработка CSS gulp.task('css', ['images'], () => { return gulp.src(css.src) .pipe(sass(css.sassOpts)) .pipe(postcss(css.processors)) .pipe(gulp.dest(css.build)) .pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop()); }); |
Запустите новую задачу с помощью команды gulp css, чтобы:
первой запустилась команда images (в CSS могут быть нужны изображения);
скомпилировать Sass-код в исходном файле scss/style.scss с помощью быстрого компилятора LibSass;

Бесплатный курс «Создание тем на WordPress. Быстрый старт»
Изучите курс и узнайте, как создавать уникальные темы на WordPress с нестандартной структурой страниц
Скачать курсс помощью PostCSS автоматически добавить ссылки на файлы, применить вендорные префиксы, запаковать медиа запросы, а также минифицировать конечный CSS-код;
сохранить стили в /var/www/wp-content/themes/mytheme/style.css;
принудительно перезагрузить CSS с помощью Browsersync (более подробно немного позже).
В исходном файле scss/style.scss вверху должны быть метаданные WP-темы. Например:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/*! Theme Name: My Theme Theme URI: //www.sitepoint.com/ Description: Demonstration theme Version: 1.0.0 Author: Craig Buckler (@craigbuckler) Author URI: //www.sitepoint.com/ Tags: Gulp License: MIT License URI: //opensource.org/licenses/mit-license.php */ @import '_base'; @import '_forms'; @import '_tables'; @import 'components/_widget1'; // и т.д... |
Крайне важно, чтобы первой строкой шли символы /*!. Эти символы нужны минификатору cssnano. Без них он удалит комментарий, что сделает тему непригодной для использования.
Плагин postcss-assets позволяет ссылаться на изображения следующим образом:
1 2 3 4 5 |
.widget1 { width: width('myimage.jpg'); height: height('myimage.jpg'); background-image: resolve('myimage.jpg'); } |
Также можно инлайнить изображения с помощью автоматической кодировки Base64:
1 2 3 |
.widget2 { background-image: inline('myimage.jpg'); } |
Обработка JavaScript
Добавьте следующий код в gulpfile.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// JavaScript-настройки const js = { src : dir.src + 'js/**/*', build : dir.build + 'js/', filename : 'scripts.js' }; // обработка JavaScript gulp.task('js', () => { return gulp.src(js.src) .pipe(deporder()) .pipe(concat(js.filename)) .pipe(stripdebug()) .pipe(uglify()) .pipe(gulp.dest(js.build)) .pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop()); }); |
Запустите новую задачу с помощью команды gulp js, чтобы:
обработать все JS-файлы в папке js;
отсортировать файлы, а также добавить в верхнюю часть JS-файлов комментарии с зависимостями;
конкатенировать все в один файл;
отрезать весь отладочный код и логи;
минифицировать код;
сохранить конечный код в /var/www/wp-content/themes/mytheme/js/scripts.js;
принудительно перезагрузить CSS с помощью Browsersync (более подробно немного позже).
Запускаем все
Чтобы не вызывать все задачи по отдельности, в gulpfile.js можно добавить следующую строку:
1 2 |
// запустить все задачи gulp.task('build', ['php', 'css', 'js']); |
Теперь с помощью команды gulp build можно параллельно запустить задачи php, js, css и images. Обратите внимание на то, что images является зависимостью в задаче css, поэтому вызывать ее напрямую нельзя.
Включаем проверку файлов и Browsersyncs
Ваш рабочий процесс можно радикально улучшить, если:
позволить Gulp проверять изменения в файлах перед запуском соответствующей задачи;
автоматически перезагружать CSS и JS файлы после внесения изменений (без обновления страницы);
автоматически обновлять страницу при изменении файла шаблона.
Во-первых, в файле gulpfile.js нужно создать задачу browsersync. Это создаст прокси-сервер для вашего сервера с WP на localhost (измените домен или используйте IP-адрес):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// Browsersync-настройки const syncOpts = { proxy : 'localhost', files : dir.build + '**/*', open : false, notify : false, ghostMode : false, ui: { port: 8001 } }; // browser-sync gulp.task('browsersync', () => { if (browsersync === false) { browsersync = require('browser-sync').create(); browsersync.init(syncOpts); } }); |
Теперь добавьте задачу watch для запуска Browsersync, проверки файлов на изменения, а также для запуска соответствующей задачи:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// следим за изменениями в файлах gulp.task('watch', ['browsersync'], () => { // изменения страниц gulp.watch(php.src, ['php'], browsersync ? browsersync.reload : {}); // изменения изображений gulp.watch(images.src, ['images']); // CSS-изменения gulp.watch(css.watch, ['css']); // основные изменения в JavaScript gulp.watch(js.src, ['js']); }); |
И наконец, добавьте задачу default, которая будет запускать первоначальную сборку и стартовать задачу watch:
1 2 |
// задача по умолчанию gulp.task('default', ['build', 'watch']); |
Теперь запустите gulp в командной строке. В консоли отобразятся похожие строки:
Чтобы не загружать ваш сайт с //localhost/, укажите адрес //localhost:3000/ или внешний URL, если просматриваете сайт с другого устройства. Ваш WP-сайт все так же будет загружаться, только теперь Gulp будет следить за изменениями и будет сразу же их применять. Больше не нужно переключаться в браузер и нажимать на кнопку обновить!
Для остановки Gulp нажмите Ctrl/Cmd + C.
Автор: Craig Buckler
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.

Бесплатный курс «Создание тем на WordPress. Быстрый старт»
Изучите курс и узнайте, как создавать уникальные темы на WordPress с нестандартной структурой страниц
Скачать курс