Для начала расскажу, как сейчас у меня выглядит работа со стилями.

Как я сейчас работаю со стилями

Есть основной файл, main.scss, в который подключаются все остальные файлы стилей, разделенные по папкам. Я использую систему папок, похожую на модель 7-1, с некоторыми отличиями: у меня почти никогда нет папки vendors/ (вместо нее я подключаю сторонние библиотеки через npm), а также папки themes/ (даже в больших проектах у меня не было необходимости выделять отдельные темы). В папке components/ я создаю отдельный файл для каждого нового класса компонентов.

Сборку делаю через Gulp. Для импорта стилей использую gulp-sass-glob, чтобы можно было импортировать папки со стилями целиком, например: @import "../components/**/*.scss";.

В больших проектах использую миксины Bourbon. К собранным стилям применяю автопрефиксер.

Единообразие написания стилей и отсутствие в них ошибок проверяется при помощи Stylelint или SCSS-lint в виде плагина для редактора Atom (вот мой конфиг .scss-lint.yml, основанный на Sass Guidelines). При помощи CSSComb (и этого плагина для редактора) я автоматически сортирую CSS свойства (конфиг настроен в соответствии с линтером).

Готовый файл минифицируется через CSS Nano в виде плагина для Gulp.

В идеале, мне бы хотелось получить такую конфигурацию, которая будет работать с уже написанными стилями с SCSS-синтаксисом, и чтобы не не нужно было менять привычки написания стилей. Потом, возможно, я подумаю над другими вариантами, но моя задача сейчас – сделать подобие SCSS, но через PostCSS. То есть, мне нужно:

• объявление переменных как $,
• вложенность стилей, возможность использовать конструкции вида &__elem,
• миксины, желательно с синтаксисом как в SCSS (@include mixin-name),
• импорт папок целиком, а не по отдельным файлам
• не критично, но было бы приятно, найти аналоги того, что я делаю через Bourbon; но в крайнем случае можно написать функции самостоятельно

И еще, чтобы был линтер, и все это собиралось бы через Gulp, и быстрее, чем SCSS. В будущем я рассматриваю возможность перехода на NPM-скрипты.

Переход к PostCSS

Как выяснилось, я уже использую два, а в некоторых случаях три инструмента из экосистемы PostCSS: это Автопрефиксер, CSS Nano, и иногда Stylelint. Отлично. Осталось найти что-то, что позволит заменить SCSS.

Как я уже писала, одно из преимуществ PostCSS это модульность, то есть для решения каждой отдельной проблемы существует свой плагин, а если не существует, то его можно написать самостоятельно. Большое количество плагинов размещено здесь.

Синтаксис

Среди плагинов я нашла Precss, который позволяет использовать синтаксис из Scss. Однако его возможности мне показались избыточными, из Scss мне нужны только импорт, переменные, вложенность и миксины. Поэтому я решила взять по отдельности плагины postcss-partial-import, postcss-simple-vars, postcss-nested, postcss-mixins.

К сожалению, мне пока не удалось найти плагин, который бы мог импортировать содержимое директории целиком.

Приятно порадовал плагин stylefmt, который является заменой для CSS Comb и может форматировать стили в соответствии с конфигом от Stylelint. Кроме того, он есть в виде плагина для Атома.

Установка

Вроде бы все нашлось. Теперь можно установить плагины и настроить таск для сборщика Gulp. Я начну с установки плагинов, которые позволят использовать привычный синтаксис, а потом добавлю остальное.

npm i -D gulp gulp-postcss gulp-sourcemaps autoprefixer postcss-partial-import postcss-simple-vars postcss-nested postcss-mixins

Потестировала, все работает. Значит, можно добавить CSSNano для минификации.

npm i -D gulp-cssnano

В итоге, таск у меня получился такой:

'use strict';

const gulp = require('gulp');
const sourcemaps = require('gulp-sourcemaps');

gulp.task('css', function () {
  const postcss = require('gulp-postcss');
  const nano = require('gulp-cssnano');

  return gulp.src('src/css/*.css')
    .pipe( sourcemaps.init() )
    .pipe( postcss([
      require('autoprefixer'),
      require('postcss-partial-import'),
      require('postcss-simple-vars'),
      require('postcss-nested'),
      require('postcss-mixins')
    ]) )
    .pipe(nano())
    .pipe( sourcemaps.write('.') )
    .pipe( gulp.dest('build/') );
});

Теперь надо добавить линтер и инструмент для форматирования кода. Я хочу, чтобы ошибки в стилях выводились в консоли и в редакторе, поэтому надо установить плагин Stylelint для Атома, настроить таск для Gulp, и создать файл конфига .stylelintrc. Устанавливается все просто.

npm i -D gulp-stylelint && apm install linter-stylelint

А вот с конфигом придется помучиться. Все возможные правила перечислены тут, но создавать их придется вручную. Я для начала установила stylelint-config-standard, npm install -D stylelint-config-standard и прописала в файле .stylelintrc его использование:

{
  "extends": "/absolute/path/to/stylelint-config-standard"
}

Когда будет время, проверю его соответсвтие со своим конфигом для SCSS-lint.

Таск для линтера стилей получился такой:

gulp.task('lint-css', function () {
  const stylelint = require('gulp-stylelint');

  return gulp.src('src/**/*.css')
    .pipe(stylelint({
      failAfterError: false, // disable fail after error
      reporters: [{
        formatter: 'string',
        console: true
      }]
    }));
});

Добавим инструмент для форматирования кода. Тут, на самом деле, я не до конца разобралась, может ли плагин для Атома работать без установленного npm-пакета.

npm install -D stylefmt && apm install stylefmt

Вроде бы, все работает. Для удобства, вот в виде отдельной команды все пакеты, которые я поставила:

npm i -D gulp gulp-postcss gulp-sourcemaps autoprefixer postcss-partial-import postcss-simple-vars postcss-nested postcss-mixins gulp-cssnano gulp-stylelint stylefmt

И плагины для Атома:

apm install linter-stylelint stylefmt

Все это позволило мне начать проект с привычным мне подходом, но используя PostCSS вместо SCSS. Пока что тестирую, и присматриваюсь. Не исключаю, что во всех новых проектах буду использовать эти инструменты.

Пост Переход с SCSS на PostCSS: мой опыт опубликован в блоге Блог Ирины Соколовской

Способ 1, с использованием Babel

Так как я занимаюсь в основном фронтендом, то для того, чтобы код, написанный на ES6, запускался в браузере, я использую Babel. Сборку проекта я делаю при помощи Gulp. Поэтому, можно обработать gulpfile при помощи Babel.

Для нового проекта установка будет выглядеть так:

1. Инициализировать npm в папке проекта: npm init
2. Установить для проекта Gulp: npm install --save-dev gulp и Babel: npm install --save-dev babel-core babel-preset-es2015
3. В файле package.json (он появится после выполнения инициализации npm) добавить в раздел со скриптами команду для запуска Gulp:
   

   "scripts": {
     "gulp": "./node_modules/gulp/bin/gulp.js"
   }

   
   Благодаря этому, сборка запускается командой npm run gulp.
4. Теперь надо создать в папке проекта файл .babelrc со следующим содержимым:
   

   {
     "presets": ["es2015"]
   }

После этого можно создать gulpfile с названием gulpfile.babel.js, и написать в нем необходимые такси, например:

'use strict';

import gulp from 'gulp';
import sass from 'gulp-sass';

const dirs = {
  src: 'src',
  dest: 'build'
};

const sassPaths = {
  src: `${dirs.src}/app.scss`,
  dest: `${dirs.dest}/styles/`
};

gulp.task('styles', () => {
  return gulp.src(paths.src)
    .pipe(sass.sync().on('error', plugins.sass.logError))
    .pipe(gulp.dest(paths.dest));
});

Babel позволяет использовать внутри gulpfile все новинки, появившиеся в ES6, в том числе модули.

Способ 2, с использованием новой версии Node.js

В Node.js версии 6, которая вышла всего несколько дней назад, 27 апреля, реализовано 93% возможностей ES6, что больше, чем в Babel. Это позволяет использовать новые возможности языка внутри gulpfile без дополнительных инструментов, что, как мне кажется, должно работать быстрее.

К сожалению, использование новых версий возможно не всегда, так как могут возникать конфликты с уже используемыми в проекте пакетами. Например, node-sass, и соответственно gulp-sass, пока не работают на nodejs 6.

Пост Использование ES6 в Gulp опубликован в блоге Блог Ирины Соколовской

Для установки node-gyp необходимы Python и C++. Поэтому сначала ставим:

• Python 2.7
• Microsoft Visual Studio C++ 2013 for Windows Desktop Express
• и Windows 7 64-bit SDK, если у вас 64-битная система.

После этого надо запустить установку node-gyp глобально:

npm install -g node-gyp

Если node-gyp установлен локально для проекта, то в некоторых случаях возможна ошибка Failed at install script ‘node-gyp rebuild’, например:

npm ERR! bufferutil@1.2.1 install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the bufferutil@1.2.1 install script 'node-gyp rebuild'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the bufferutil package,
npm ERR! not with npm itself.

Если у вас не установлен Python, или Node.js не может его найти, возникает ошибка Can’t find Python executable “python”, you can set the PYTHON env variable:

> node-gyp rebuild
gyp info it worked if it ends with ok
gyp info using node-gyp@3.3.0
gyp info using node@5.5.0 | win32 | x64
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
...
gyp ERR! node -v v5.5.0
gyp ERR! node-gyp -v v3.3.0
gyp ERR! not ok

Это лечится установкой Python 2.7 (важно ставить именно эту версию, не знаю почему, но версия 3 не поддерживается!), и указанием в терминале пути к исполняемому файлу питона:

set PYTHON=C:\Users\Irina\AppData\Local\Programs\Python\Python27\python.exe

Но указывать путь нужно будет каждый раз, когда вы запускаете node-gyp. Поэтому, если вы используете кастомный терминал (а я надеюсь, что вы это делаете), то лучше добавить эту команду в список команд, которые выполняются при запуске терминала.

Если не найден компилятор С++, то вы увидите ошибку `gyp` failed with exit code: 1:

> node-gyp rebuild
gyp info it worked if it ends with ok
gyp info using node-gyp@3.3.0
gyp info using node@5.5.0 | win32 | x64
gyp http GET https://nodejs.org/download/release/v5.5.0/node-v5.5.0-headers.tar.gz
gyp http 200 https://nodejs.org/download/release/v5.5.0/node-v5.5.0-headers.tar.gz
gyp http GET https://nodejs.org/download/release/v5.5.0/SHASUMS256.txt
gyp http GET https://nodejs.org/download/release/v5.5.0/win-x64/node.lib
gyp http GET https://nodejs.org/download/release/v5.5.0/win-x86/node.lib
gyp http 200 https://nodejs.org/download/release/v5.5.0/SHASUMS256.txt
gyp http 200 https://nodejs.org/download/release/v5.5.0/win-x86/node.lib
gyp http 200 https://nodejs.org/download/release/v5.5.0/win-x64/node.lib
gyp info spawn C:\Users\Irina\AppData\Local\Programs\Python\Python27\python.exe
gyp info spawn args [ 'C:\\Users\\Irina\\AppData\\Roaming\\npm\\node_modules\\node-gyp\\gyp\\gyp_main.py',
...
gyp info spawn args   '-Goutput_dir=.' ]
gyp: binding.gyp not found (cwd: C:\Users\Irina\Documents\project) while trying to load binding.gyp
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (C:\Users\Irina\AppData\Roaming\npm\node_modules\node-gyp\lib\configure.js:305:16)
gyp ERR! stack     at emitTwo (events.js:100:13)
gyp ERR! stack     at ChildProcess.emit (events.js:185:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)
gyp ERR! System Windows_NT 6.3.9600
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Irina\\AppData\\Roaming\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\Users\Irina\Documents\project
gyp ERR! node -v v5.5.0
gyp ERR! node-gyp -v v3.3.0
gyp ERR! not ok

Чтобы ее исправить, надо поставить Visual Studio C++ 2013 Express, ссылка на нее есть в начале поста. Имейте в виду, что это огромная среда, которая займет 6,5 гигабайт (!) места на диске (в такие моменты я особенно сильно ненавижу винду – компилятор gpp на Ubuntu в установленном виде занимает всего 17Мб). После этого надо перезагрузить компьютер, и запустить node-gyp rebuild.

Пост Установка node-gyp на Windows 8 опубликован в блоге Блог Ирины Соколовской

Ссылки на ресурсы, которыми я пользуюсь

Образовательные ресурсы, которыми я пользуюсь, можно условно разделить на MOOC (massive open online course), набор на которые идет 1-2 раза в год, и на обучающие сервисы, на которых можно начать заниматься в любой момент.

MOOC я в основном прохожу на этих сайтах:

• EDx – курсы по разным предметам от ведущих университетов мира. Отдельно отмечу очень удобный интерфейс.
• Coursera – курсы по предметам темам от ведущих университетов мира. В последнее время Coursera перешла на систему “специализаций”, когда человек проходит несколько по близким дисциплинам. Мне не очень нравится этот формат, и поэтому я почти не пользуюсь их сайтом в посленее время.
• Udacity – курсы по программированию. В целом, довольно неплохо, если нужно быстро познакомиться с какой-то технологией. Однако мне не очень понравится интерфейс сайта, из личного кабинета не виден прогресс по каждому курсу, не удобно сделан поиск.

Из обучающих сервисов сейчас я использую Free Code Camp и Khan Academy, о которых расскажу подробнее ниже.

Отзывы о курсах, которые я прошла

Базовые знания о программировании

Курс Introduction to Computer Science, CS50 (EDx, Гарвард). Восхитительный базовый курс по Computer Science. Он дает понимание абстракций, алгоритмов, структур данных, учит алгоритмическому мышлению и другим концепциям, которые лежат в основе всех языков программирования. На мой взгляд, главное преимущество курса перед аналогичными в том, что основная часть видеолекций – это видеозаписи реальных лекций в Гарварде. Для общения с сокурсниками есть общий чат в Slack. Курс открыт для прохождения всегда.

Курсы по математике на Khan Academy. У меня не очень хорошо с математикой. Если честно, то у меня все плохо с математикой. И курсы на Khan Academy помогают с этим справиться. Иногда я удивляюсь, почему в школе нам не объясняли материал так, как на этом сайте.

Курсы по веб-разработке

Codecademy. Про Codecademy, наверное, знают все. Я проходила курсы по JavaScript, jQuery, PHP, Ruby, Ruby on Rails. Если нужно быстро познакомиться с основами новой технологии – то эти курсы очень полезны, и помогут быстро вникнуть в новый язык. Но как мне кажется, знания на выходе не очень глубокие, и после этих курсов обязательно нужно что-то еще.

Free Code Camp, – сервис для изучения Full-stack разработки на JavaScript. Прохожу сейчас. Формат обучения похож на Codecademy. Обучение построено по принципу самообразования от простого к сложному. Сначала дается основа (напрмер, функция JS, и простая задачка на нее), а затем дают задание, которое выходит за рамки изученного, и нужно решить его самостоятельно. Все начинается с HTML, CSS, Bootstrap (эту часть я пропустила), и продолжается заданиями по базовым функциям JS, задачами на алгоритмы, фронтэнд проектами. Планируется к запуску раздел про React. Для общения есть чат в Gitter.

HTML Academy. Если все остальные ресурсы и курсы, которые я описываю, бесплатные и на английском языке, то HTML Academy – платная (300 руб. в месяц) и на русском. Есть и бесплатная базовая часть, но я ее не проходила. Курс дает хорошее понимание работы HTML5 и CSS3, включая фишки новых стандартов: градиенты, трансформации, анимации, фильтры. Некоторые задания убивали мой мозг на пару часов.

Курс HTML5 Part 1: HTML5 Coding Essentials and Best Practices (EDx, W3Cx). Хороший курс о новых фишках HTML5, и API, которые там появились. Несмотря на название курса, нужно будет использовать очень много JavaScript. Рассматриваются темы семантики и доступности сайта для людей с ограниченными возможностями, создания форм на HTML5, работа с canvas, аудио и видео, получение геолокации и данных через камеру и микрофон пользователя.

Курсы на Udacity. Я брала несколько прикладных курсов (Responsive Images, AJAX, OOP in JS, JS Testing). Не могу сказать, что мне очень понравилось, но кое-что полезное я узнала.

В планах

Курс HTML5.2x HTML5 Part 2: Advanced Techniques for Designing HTML5 Apps (EDx, W3Cx). Вторая часть курса про HTML5, рассматриваются вопросы работы с мультимедиа и разработки HTML5 игр. Записалась в декабре, но пока не было времени, чтобы пройти курс.

Еще о двух курсах я слышала хорошие отзывы, но пока не проходила их:

Курс CS106A – Programming Methodology, Стэнфорд.

Курс CS106B – Programming Abstractions, Стэнфорд.

Занимаетесь ли вы самообразованием, и какие курсы проходили? Что понравилось больше всего?

Пост Ресурсы для изучения программирования и веб-разработки опубликован в блоге Блог Ирины Соколовской

Прошло много времени с тех пор, когда я предыдущий раз писала в блог. Не потому, что мне лень писать. Основная причина в том, что за последний год мои интересы несколько сдвинулись от WordPress к front-end разработке, моя основная работа теперь – верстка и JavaScript. И поэтому я не знала, что делать с блогом, писать в него или нет, и если писать, то на какие темы.

С другой стороны, возникла необходимость в пространстве, где можно было бы писать о всяких front-end штуках. Возник вопрос, создавать ли новый блог, и что делать с этим.

После долгого периода размышлений, я решила, что лучшим решением будет изменение формата этого блога, чтобы его содержание отвечало моим нынешним интересам. Теперь, я буду писать тут не только о WordPress, но и о JavaScript, HTML5, и всем том, что я использую в своей ежедневной работе.

Старые записи о вордпресс останутся, и будут перенесены в специальную категорию “Работа с WordPress”. Вы по-прежднему можете задавать вопросы по их содержанию, и в меру своих возможностей и способностей я буду стараться на них отвечать.

Также, я не бросаю поддержку своих WordPress плагинов, и, хотя у меня нет времени вести разработку также активно, как и раньше, баги я править буду.

Что вы об этом думаете? Пишите в комментарии!

Пост 2016. Перерождение блога? опубликован в блоге Блог Ирины Соколовской

В чем проблема с комментариями?

Стандартная система работы с комментариями является не очень удобной для пользователя, если в блоге используется несколько типов записей, для которых разрешены комментарии.

Как минимум, в любом блоге есть страницы и посты – то есть, два типа записей. Кроме того, могут быть еще работы из портфолио или товары из каталога, которые тоже являются записями по своей сути.

Теперь представим, что для всех видов записей посетители сайта могут оставлять коммментарии. В админке будет примерно следующее:

Все комментарии идут подряд, на одной странице. Причем в реальности, они будут отсортированы по дате добавления, а не по типу записи, к которой они относятся (просто у меня так случайно получилось).

Бардак, да. А если комментариев много, то вообще каша получается.

Когда я это увидела, то сразу возник вопрос: “Можно ли разделить комментарии по типам записей?”

И что же делать?

Варианта, в общем-то, два. Первый: смириться. Второй: использовать плагин, который позволит разделить комментарии к разным типам записям по соответствующим пунктам меню.

Готовый плагин я не нашла, поэтому написала собственный.

Посмотрите, как будут организованы комментарии с использованием плагина Comments by Post Type:

По пункту меню “Комментарии” будут открываться комментарии к постам:

А для всех остальных типов записей будет добавлен собственный пункт меню “Комментарии”. Вот, например, отдельные комментарии для страниц:

и отдельные комментарии для товаров:

Плагин без настроек, и будет автоматически работать с любыми типами записей, которые поддерживают комментирование. Все изменения касаются только администраторской части сайта, для посетителя визуально ничего не меняется.

На мой взгляд, использование плагина Comments by Post Type существенно улучшает систему работы с комментариям для администратора сайта. Буду рада, если кому-то еще он окажется полезным.

Мнения, комментарии и багрепорты, как обычно, приветствуются.

Пост Улучшенная работа с комментариями в WordPress, плагин Comments by Post Type опубликован в блоге Блог Ирины Соколовской

Есть два варианта, и оба они сводятся к тому, что необходимо изменить ID связанного поста в базе данных.

Cпособ 1. Правка базы данных вручную

При помощи phpMyAdmin, нужно зайти в таблицу wp_comments, найти там нужный комментарий, и изменить ID записи в ячейке в столбце comment_post_ID:

Чтобы узнать ID комментария, нужно навести в списке комментариев в Консоли курсор на дату комментария, см. на скриншоте:

Аналогичным способом можно узнать ID поста в WordPress.

Остается только заменить в базе ID поста, к которому привязан комментарий сейчас, на ID того поста, куда вы хотите перенести комментарий.

Cпособ 2. Использование плагина Tako Movable Comments

Для тех, кто не хочет заморачиваться с правкой базы, или боится сделать там ошибку, существует специальный плагин, который позволяет переносить комментарии в другие посты. Плагин называется Tako Movable Comments. Он поддерживает функции автоподстановки поста по названию и массовый перенос комментариев в другую запись. Также есть возможность перемещать комментарии не только в пост, но и в любой другой тип записи (страница или custom post type).

После установки плагина, в Консоли на странице Комментарии, в выпадающем списке “Действия” появится пункт “Move Comments”, который позволяет применять действия массово к нескольким комментариям. А на странице редактирования комментария снизу добавится метабокс “Move Comments with Tako”, при помощи которого быстро и легко можно переместить текущий комментарий в любую запись, которая есть в блоге.

А вы когда-нибудь переносили комментарии в WordPress в другую запись?

Пост Как в WordPress переместить комментарий в другой пост опубликован в блоге Блог Ирины Соколовской

Отдельный раздел для плагинов

В прошлом году я создала и выложила на блоге два плагина – Goods Catalog и Post Series. Они вызвали большое обсуждение и большое количество вопросов (к сожалению, я даже была вынуждена закрыть комментарии к записи про плагин Goods Catalog, так как эта страница сильно тормозила при загрузке). Вопроов было много, и я не успевала отвечать всем. В то же время, я заметила, что основное количество вопросов связано с базовой функциональностью, и было вызвано отсутствием руководств и инструкций для пользователей.

Поэтому, чтобы упросить процесс работы с плагинами, я сделала отдельный раздел, где начала размещать более подробную информацию по работе с плагинами. При создании этого раздела я старалась учесть все вопросы, которые мне задавали по почте, в комментариях или на форуме.

По задумке, там будут публиковаться руководства и инструкции для пользователей плагинов, так как это удобнее, чем публиковать подобные руководства в виде постов в блоге. А блог останется площадкой для обсуждения. Сейчас там размещено руководство “быстрый старт” по плагину Goods Catalog, и готовится раздел по продвинутым возможностям.

Поэтому, я хотела бы спросить вас, как читателей и пользователей, о том, удобно ли пользоваться этим разделом сайта, и что, по вашему мнению, можно было бы улучшить.

Подготовка руководства по созданию темы

Что касается планов на год, то я хочу превратить серию по созданию темы для вордпресс в полноценное руководство, и выпустить в виде PDF-книги. И в этом я тоже хочу спросить совет у вас. Если в уроках были какие-то непонятные моменты, то пожалуйста, пишите в комментарии к урокам. Я постараюсь учесть все замечания при создании книги.

Пост Нововведения в блоге, 2015 опубликован в блоге Блог Ирины Соколовской

Сначала давайте определим, что понимается под “точкой продаж”. Я это понимаю как сайт, на котором представлен каталог продукции с функцией добавления товаров в корзину с последующей оплатой, и автоматизацией дальнейшей обработки заказа (минимум, это отслеживание количества оставшихся товаров на складе).

Это минимум. По-хорошему, нужны для пользовательской части функции сортировки, фильтрации, подбора по параметрам, возможность указания атрибутов товара (цвет, размер и прочее), и для администраторской части – удобное (массовое) добавление товаров, импорт-экспорт (из экселя, cvs, 1C), управление скидками и промо-опциями, раздельные аккаунты с разными возможностями для менеджера по продажам, администратора, и того, кто забивает продукты в каталог. Плюс регистрация пользователей-покупателей.

Теперь давайте посмотрим, что из этого может WP.

Без плагинов WP не позволяет организовать ничего из перечисленного. С плагинами, можно организовать каталог и корзину. Пользовательская часть, frontend, будет зависеть от того, какая тема оформления используется – то есть, обычно, все эти сортировки и прочие радости магазина создает не движок, а тема, а информация берется из custom fields.

Что касается администраторской части, то очень проблематично реализуется:

• разделение ролей пользователей (скорее всего, это опять отдельный плагин),
• удобное управление товарами магазина; визуально это будет так же, как и управление записями в блоге. Что не очень удобно, когда у вас несколько тысяч товаров,
• массовое управление товарами; вы не сможете, например, добавить ко всем нужным товарам скидку или какую-то другую опцию одним нажатием,
• регистрация пользователей-покупателей с отдельными полями для адреса, данных о способе платежа по-умолчанию, и т.д.
• оплата через российские платежные системы; все популярные плагины поддерживают оплату только через зарубежные сервисы
• массовый импорт-экспорт товаров экселя, cvs, 1C

Еще одна возможная проблема – это обновление (изменение) дизайна для сайта. Так как все пользовательские функции хранятся в файлах темы, а не плагина, то просто так сменить тему на любую понравившуюся уже будет нельзя, без потери функционала. А разработка темы с функциями для магазина – это, опять же, деньги.

Я не говорю, что сделать магазин на WordPress невозможно. Но функционал WP по-умолчанию не позволяет ничего из того, что нам потребуется. Соответственно, нужно использовать плагины, а это не всегда надежно – возможны проблемы при обновлении (обновился WP, или плагин магазина, или тема), совместимости с другими плагинами, и т.д. Как начальный вариант, интернет-магазин на WordPress может быть, и не плох. Но если товаров будет много, а продажи пойдут активно, пользоваться им будет не очень удобно. Поэтому, зачем создавать себе лишнюю работу при переносе сайта на другой движок в будущем, если уже существуют готовые специально предназначенные для этого системы?

Обновление от 14 июня 2016 г.:

Эту статью я писала в октябре 2014 года. То есть, полтора года назад. Тогда я была фрилансером и не имела опыта работы с большими заказами, а магазинов делала всего штуки три-четыре. За полтора года, которые прошли с момента написания статьи, я успела поработать в веб-студии, где каждый месяц разрабатывали примерно 4-5 сайтов, из которых половина были интернет магазины. Поэтому, мое мнение немного изменилось, и появились некоторые другие аргументы.

Во-первых, сайт должен решать задачу вашего клиента. И исходить нужно именно из этого.

Во-вторых, важно соотношение цены, качества, и времени, затраченного вами на разработку.

Например, если клиент хочет за неделю запустить магазин с небольшим бюджетом, а вы до этого работали только с какой-то одной CMS (неважно, WordPress это или что-то еще), то делайте на ней. Сроки не сорвете, проблем с изучением новой CMS не поимеете.

Другой пример, клиент хочет большой магазин, с большим бюджетом, ему важно, чтобы система создавала бухгалтерские отчеты, счета-фактуры, всякие формы по ГОСТу, интегрировалась с банком и прочее — делайте на Битриксе, потому что там все это из коробки. Да, если Вы с ним раньше не работали, в первый раз будет тяжело. Поэтому лучше нанять того, кто работал (опять же, исходя из соотношения цена-качество-трудозатраты).

Клиент хочет эксклюзивные функции, и готов за них платить – делайте уникальную систему только для него на фреймворке, а не на CMS – Laravel, Django, Ruby on Rails – на том, что лучше знаете.

Если клиент и разработчик — это вы в одном лице — делайте на чем вам больше хочется, вам же потом с этим работать.

Так что, если коротко, то нет и не может быть однозначного ответа на вопрос, на какой CMS делать сайт / интернет-магазин / что угодно.

Пост Почему WordPress – не самое удачное решение для создания интернет-магазина опубликован в блоге Блог Ирины Соколовской

Несмотря на существующий стереотип об исключительно блоговом предназначении WordPress, на этом движке уже давно можно создать практически все что угодно. Причем, во многих случаях можно обойтись даже без знаний веб-программирования, достаточно просто подобрать хороший шаблон и подобрать необходимые плагины.

В плане создания интернет-магазина, наиболее популярным решением является связка WordPress + Woocommerce. Сам плагин совершенно бесплатный, и протестировать его работу можно даже на стандартной теме WordPress.

Относительно установки и настройки Woocommerce в Сети можно найти немало статей и мануалов, а вот информации о преимуществах и недостатках реализации интернет-магазина на этой связке, информации гораздо меньше. Поэтому, давайте поговорим именно об этом.

Плюсы создания интернет-магазина на WordPress, в комплекте с Woocommerce:

• Легкость установки. Достаточно загрузить и активировать сам плагин, после чего добавить несколько строчек в используемый шаблон, чтобы включить поддержку Woocommerce. Все, магазин активирован, и уже можно переходить к его настройке;
• Шаблоны. Тем дизайна, изначально поддерживающих интеграцию с плагином, довольно много, а их стоимость обычно в районе $50-70. Большинство шаблонов довольно простые, но, учитывая невысокую стоимость, разработчикам можно это простить;
• SEO-оптимизация. Как и в самом WordPress, в Woocommerce проблем с этим нет. ЧПУ, карта сайта, разметка метатегов (заголовки, описания, ключевые слова) для каждой отдельной страницы, возможность подключения аналитики – все это есть;
• Простота добавления новых товаров и управление каталогом продуктов;
• Юзабилити. Каталог товаров, карточка продукта и различных элементов интернет-магазина на Woocommerce, понятна для любого пользователя, поскольку все реализовано довольно просто;
• Мультиязычность. Woocommerce изначально имеет встроенный перевод, в котором, среди поддерживаемых языков есть русский и украинский.
• Расширение функционала. Для этого плагина существует множество как платных, так и бесплатных дополнений. Например, Wish List, вариативные товары, сравнение продуктов, и другие. В случае надобности, все это можно использовать;
• Бесплатность. Для многих этот фактор является весомым аргументом, особенно если вы еще не определились окончательно с тематикой и у вас нет опыта продвижения. В таком случае, связка WordPress + Woocommerce будет отличным вариантом для экспериментов.

Правда, как уже говорилось в начале статьи, при использовании для создания интернет-магазина движка WordPress, с плагином Woocommerce, в процессе работы начинают проявляться и определенные минусы. Я перечислю основные недостатки, чтобы помочь вам сориентироваться, если вы захотите выбрать именно это решение.

Минусы создания интернет-магазина на Woocommerce:

• Ориентация на Запад. Доступные по умолчанию платежные опции и способы доставки ориентированы преимущественно на западный рынок, поэтому, с адаптацией под определенный регион придется работать самостоятельно. Аналогичная ситуация и с доступными валютами, далеко не для всех стран доступно отображение местных денег;
• Вариативные товары. Например, размер одежды или цвет аксессуара. Работать с такими типами товаров в Woocommerce сложнее, чем в движках, специально разработанных для создания интернет-магазина;
• Требовательность к ресурсам. После установки плагина на WordPress, нагрузка, создаваемая на ваш сайт, серьезно вырастет. При использовании слабого хостинга, это приведет к увеличению времени загрузки страниц;
• Неточности перевода. Локализация, представленная по умолчанию разработчика, в плане качества, будет слабее, чем специализированный перевод сделанный на заказ. Так что, вполне возможно, что при запуске интернет-магазина перевод придется дорабатывать;
• Возможные конфликты. Необходимость устанавливать различные плагины, что-то править и изменять, может привести к тому, что одно дополнение будет конфликтовать с другим. Так что при кастомизации и расширении функционала, скорее всего, придется обращаться к специалистам.

В целом, можно сказать, что в создании интернет-магазина на WordPress, с плагином Woocommerce, нет ничего сложного. Это идеальный вариант, в случае если вам нужно запустить сайт по принципу Lean Startup, то есть, с нулевыми вложениями. Но, при необходимости расширении функционала, для реализации доступных в большинстве интернет-магазинов опций, могут потребоваться вложения времени и денег, которые в результате превысят стоимость специализированной CMS, заточенной под электронную коммерцию.

Мы расписали основные преимущества и недостатки использования Woocommerce для WordPress, что должно помочь вам сделать определенные выводы и сэкономить время в случае выбора.

Этот гостевой пост подготовлен специалистами компании-разработчика ImageCMS Shop – системы для быстрого запуска современных интернет-магазинов.

Пост Интернет-магазин на WordPress и Woocommerce: преимущества и недостатки опубликован в блоге Блог Ирины Соколовской